guide series interactive design_pastpresentandfuture
DESCRIPTION
@bunmun and @GuideCreative discuss the history and emerging trends of nonprofit interactive design in this GUIDE Series.TRANSCRIPT
Series Overview
Interactive Design Past, Present and Future By Chris Wolf and Ben Wong
LACKING QUALITY VISUAL DESIGN The Past
Lacking Quality Visual Design • No Standards for Comparison – Too early to know what looks good
• Dominated by IT & Programmers – “Web design” not even a term yet
• Limitations of Technology – Small monitors – Slow processors – Poor graphics rendering – Low bandwidth – Few web-safe fonts
WHERE WERE THE DESIGNERS? The Past
Where Were the Designers? • Good Design Existed through Other Media – Creativity was all around, but it wasn’t browser ready
• Print Dominated the Design Industry – The best designers worked with paper
• Website Took Back Seat – Web lacked a sufficient audience – The presence wasn’t very flattering – No proven results yet
THE BATTLE BEGINS… The Past
The Battle Begins… • Designers Bring Quality – But it’s hard to build
• Compromises Lower Potential – Visual and Interactive meet in the middle
• Still Fighting Technology Limitations – Bandwidth – Browser Compatibility – Web Safe
FLASH SAVES THE DAY The Past
Flash Saves the Day • New Trend Emerges – Designers can package work with better fonts, colors
and textures
• Technology Boost – Leads to more animation and user interaction
• Video Playback Compatibility – With Flash on almost every computer, no longer have to
fight over video formats
THIS INTERNET MIGHT STAY The Past
This Internet Might Stay • User Portals – More than just email and search, it’s the gateway to the
World Wide Web
• Social Networking – Chat Rooms, MySpace, Campus Networks
• Gaming and Fun • News and Media • Entertainment • Marketing
The Present Look how far we’ve come!
Internet is everywhere! The explosion of Internet enabled devices
Internet Enabled Devices • Traditional desktops and laptops are not the only
way to access the internet. Now we have: – Smart phones – Tablets – Netbooks – eReaders – Internet Televisions – Game Consoles – Vehicles – Home Appliances
Mobile Devices “Mobile will be the #1 way we view the web by 2015”
Mobile now accounts for 10% of Internet usage worldwide
Mobile Optimization • Consider the context of the mobile user. – What are their goals? – What is their environment?
• Optimize the presentation of the content for smaller screen sizes
• Optimize the performance of the website to save valuable bandwidth
Responsive Web Design With the number of different web enabled devices growing, Responsive Web Design allows a website to respond to their changing environment
Mobile Tablet Desktop
http://clearairchallenge.com/
Web 2.0 Two-way communication on the web
Social Media Integration Extending the reach of your website through your biggest fans
Social Media Integration • Social media websites now offer tools to integrate
with your website. • Share widgets allow users to share your content
with their social network • “Like” and “+1” buttons allow users to show their
support for your page or organization • RSS feeds can allow other websites to pull in your
content and extend its reach.
CSS3 Animations Adobe Flash steps aside
CSS3 Animations • Adobe Flash was the de facto standard for
animations on the web • CSS3 is now powerful enough to deliver animated
experiences that rival Flash • Why use CSS3? – Mobile compatible – Open Standards – Easier to edit and manage
http://onehourpersecond.com
Interactive Infographics Infographics come alive with user interaction
http://www.onlineschools.org/state-of-the-internet/soti.html
http://carbonmap.org/
Transmedia Storytelling
“The technique of telling a single story or story experience across multiple platforms and formats”
Transmedia Storytelling • Telling parts of your story across the website,
mobile and social media. • Multiple points of entry, which means multiple
points of discovery • HTML5 allows a new level of interactivity that goes
beyond standalone videos. • Audience has a participatory experience that goes
beyond just reading and watching. • Effective way to raise awareness and inspire action
http://www.thewildernessdowntown.com/
The Future What does the future hold?
Web 3.0
Web 3.0 • Semantic Web • Personalized user experience • Suggested Content • Examples: NetFlix, Amazon, Google, Facebook
Web Audio Google’s Web Audio API pushing the sound barrier
Web Audio • Audio on the web has a bad reputation, however, in
other fields of user experience design, sound is an important method to providing user feedback.
• The Web Audio API allows sounds to be processed faster with higher precision