@bunmun and @GuideCreative discuss the history and emerging trends of nonprofit interactive design in this GUIDE Series.

2. Series Overview

3. Interactive Design
Past, Present and Future
By Chris Wolf and Ben Wong

4. The Past
LACKING QUALITY VISUAL DESIGN

6. 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

7. The Past
WHERE WERE THE DESIGNERS?

9. 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

10. The Past
THE BATTLE BEGINS…

11. 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

12. The Past
FLASH SAVES THE DAY

14. 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

15. The Past
THIS INTERNET MIGHT STAY

18. 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

19. The Present
Look how far we’ve come!

20. Internet is everywhere!
The explosion of Internet enabled devices

22. 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

23. Mobile Devices
“Mobile will be the #1 way we view the web by 2015”

24. Mobile now accounts for 10% of Internet
usage worldwide

25. 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

26. Responsive Web Design
With the number of different web enabled devices
growing, Responsive Web Design allows a website to
respond to their changing environment

27. Mobile Tablet Desktop
http://clearairchallenge.com/

28. Web 2.0
Two-way communication on the web

30. Social Media Integration
Extending the reach of your website through your biggest fans

31. 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.

32. CSS3 Animations
Adobe Flash steps aside

33. 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

34. http://onehourpersecond.com

35. Interactive Infographics
Infographics come alive with user interaction

36. http://www.onlineschools.org/state-of-the-internet/soti.html

37. http://carbonmap.org/

38. Transmedia Storytelling
“The technique of telling a
single story or story
experience across multiple
platforms and formats”

39. 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

40. http://www.thewildernessdowntown.com/

41. The Future
What does the future hold?

42. Web 3.0

43. Web 3.0
• Semantic Web
• Personalized user experience
• Suggested Content
• Examples: NetFlix, Amazon, Google,
Facebook

44. Web Audio
Google’s Web Audio API pushing the
sound barrier

45. 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