Series Overview
Interactive DesignPast, Present and FutureBy Chris Wolf and Ben Wong
The PastLACKING QUALITY VISUAL DESIGN
Lacking Quality Visual Design•  No Standards for Comparison   –  Too early to know what looks good•  Dominated by IT & Pro...
The PastWHERE WERE THE DESIGNERS?
Where Were the Designers?•  Good Design Existed through Other Media   –  Creativity was all around, but it wasn’t browser ...
The PastTHE BATTLE BEGINS…
The Battle Begins…•  Designers Bring Quality   –  But it’s hard to build•  Compromises Lower Potential   –  Visual and Int...
The PastFLASH SAVES THE DAY
Flash Saves the Day•  New Trend Emerges   –  Designers can package work with better fonts, colors      and textures•  Tech...
The PastTHIS INTERNET MIGHT STAY
This Internet Might Stay•  User Portals     –  More than just email and search, it’s the gateway to the        World Wide ...
The PresentLook 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:   ...
Mobile Devices“Mobile will be the #1 way we view the web by 2015”
Mobile now accounts for 10% of Internetusage worldwide
Mobile Optimization•  Consider the context of the mobile user.   –  What are their goals?   –  What is their environment?•...
Responsive Web DesignWith the number of different web enabled devicesgrowing, Responsive Web Design allows a website tores...
Mobile          Tablet          Desktophttp://clearairchallenge.com/
Web 2.0Two-way communication on the web
Social Media IntegrationExtending 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 u...
CSS3 AnimationsAdobe Flash steps aside
CSS3 Animations•  Adobe Flash was the de facto standard for   animations on the web•  CSS3 is now powerful enough to deliv...
http://onehourpersecond.com
Interactive InfographicsInfographics come alive with user interaction
http://www.onlineschools.org/state-of-the-internet/soti.html
http://carbonmap.org/
Transmedia Storytelling“The technique of telling asingle story or storyexperience across multipleplatforms and formats”
Transmedia Storytelling•  Telling parts of your story across the website,   mobile and social media.•  Multiple points of ...
http://www.thewildernessdowntown.com/
The FutureWhat does the future hold?
Web 3.0
Web 3.0•  Semantic Web•  Personalized user experience•  Suggested Content•  Examples: NetFlix, Amazon, Google,Facebook
Web AudioGoogle’s Web Audio API pushing thesound barrier
Web Audio•  Audio on the web has a bad reputation, however, in   other fields of user experience design, sound is an   imp...
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
Upcoming SlideShare
Loading in …5
×

Guide Series Interactive Design_PastPresentAndFuture

339
-1

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
339
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guide Series Interactive Design_PastPresentAndFuture

  1. 1. Series Overview
  2. 2. Interactive DesignPast, Present and FutureBy Chris Wolf and Ben Wong
  3. 3. The PastLACKING QUALITY VISUAL DESIGN
  4. 4. 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
  5. 5. The PastWHERE WERE THE DESIGNERS?
  6. 6. 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
  7. 7. The PastTHE BATTLE BEGINS…
  8. 8. 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
  9. 9. The PastFLASH SAVES THE DAY
  10. 10. 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
  11. 11. The PastTHIS INTERNET MIGHT STAY
  12. 12. 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
  13. 13. The PresentLook how far we’ve come!
  14. 14. Internet is everywhere!The explosion of Internet enabled devices
  15. 15. 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
  16. 16. Mobile Devices“Mobile will be the #1 way we view the web by 2015”
  17. 17. Mobile now accounts for 10% of Internetusage worldwide
  18. 18. 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
  19. 19. Responsive Web DesignWith the number of different web enabled devicesgrowing, Responsive Web Design allows a website torespond to their changing environment
  20. 20. Mobile Tablet Desktophttp://clearairchallenge.com/
  21. 21. Web 2.0Two-way communication on the web
  22. 22. Social Media IntegrationExtending the reach of your website through your biggest fans
  23. 23. 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.
  24. 24. CSS3 AnimationsAdobe Flash steps aside
  25. 25. 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
  26. 26. http://onehourpersecond.com
  27. 27. Interactive InfographicsInfographics come alive with user interaction
  28. 28. http://www.onlineschools.org/state-of-the-internet/soti.html
  29. 29. http://carbonmap.org/
  30. 30. Transmedia Storytelling“The technique of telling asingle story or storyexperience across multipleplatforms and formats”
  31. 31. 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
  32. 32. http://www.thewildernessdowntown.com/
  33. 33. The FutureWhat does the future hold?
  34. 34. Web 3.0
  35. 35. Web 3.0•  Semantic Web•  Personalized user experience•  Suggested Content•  Examples: NetFlix, Amazon, Google,Facebook
  36. 36. Web AudioGoogle’s Web Audio API pushing thesound barrier
  37. 37. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×