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