Wednesday, April 18, 2007

Designing for Web 2.0: The Visual Ecosystem

Luke Wroblewski

Principal Designer, Yahoo! Social Media

Principles of good visual design have always been applicable to web design: balance, proportion, contrast, color, and typography. As a visual medium, the Web has always had its own set of unique attributes: screen resolution, browsers, platforms, and multiple devices. With Web 2.0, these attributes have expanded to include a new array of services to remix and distribute micro-content (APIs, RSS), as well as participatory content created by the community. How can visual design enhance user experience when your audience might be coming from a browser, an RSS feed, or a widget? How does visual design communicate your brand when your brand is created daily by your community?

In this two-part session, we'll show real-world strategies and techniques for designing your visual ecosystem through two case studies: one focusing on a redesign of an existing site; the other, a startup with a ground-up new UI and user experience design.


Predominantly the way people make sense on the web, the way they actually scan information on a page (example of eye tracking shown) – is erratic, scurrying.

Visual design can help indicate actionable/not actionable elements.

It can help tell the user where they are, and how they‘re expected to interact with the environment.

Design Considerations:
presentation, interaction, organization

the presentation becomes the voice. It can help define the purpose of the site to the people of the site. It can help define the goal.

goal: the ezest way to get your video online
(that's what they want the user to do - that's the first copy the user sees)

Changes in web from 1.0 to 2.0
- Locomotion
- Conversation
- Manipulation

Locomotion: movement in space
In 2.0, with the help of new technologies (AJAX, FLEX)
users move around the pages less and less.
Vs. early years - it was about moving from place to place -or page to page.

Converasation is communication. (i.e. Terry Winegrad at Stanford )
enabled conversations:
display services (flickr)
content creation (wordpress)
aggregation services (digg)
Entertainment destinations: (YouTube)
(stat: .16% of those who go to YouTube actually contribute/ upload a video)

Comparisons to RealWorld Packaging
Certain aspects of Packaging design can actually be applied to the online world.
Meaningful shouting.
Having the appropriate and distinct personality that makes people take a look

Back of packaging concept
“back of pack stories " on package design – it’s what tells you what this thing is and why should you care.

Consider the experience of unpacking.

(Examples of unpacking experience)
i.e. Unpacking the macbook - one of the first things you see is a rolodex-type card. The card has a silhouette shape suggesting that YOU belong here, this. Suggesting, “hey take a picture of yourself with the onboard camera, because, you can”.

Online, on a website, What's the first thing the user gets when they're interested.
Example, Yahoo Videos - They get a form – registration form.
Okay. A bit of a "boo" "boring"

BUT, what if it was a little more like unpacking the macbook? What if you could give the user a little more of a fun experience?


Right from the get-go it's "hey make a movie – right now." or "make your own scrapbook, right now"

Only after completed, when you decide you want to save or share - that you get a registration form,


They're all about the pleasant engagement /experience..

This “more fun” experience allows people to be drawn in. To be engaged. Get hooked.

Giving people an attractive and compelling experience plays an important role.
pages - are now rich content experiences.
with Ajax interface designs. Single spot refreshes. No longer full page refresh.

Bill Scott Designing for AJAX - Bill has compiled a long list - good for reference. Trying to build a vocabulary around it.



100k new blogs everyday.

DIGG hit 1million registered users.


content creation
content aggregators
display surfaces

High quality content experience vs, the low quality. What percentage of stuff is dedicated to overhead of site - or content the user is looking for. ( vs Chicago Tribune) stuff here) (in beta)

what is this thing.
why should i care
how do I use it


Quote from Will Wright:

most user-created content is crappy. But as we create better tools, we'll increase the

value of the output of those tools.


maybe it's about giving users the tools that make it easier to do the right thing.

if you give people the environment for personal expression - then accept it- it's open , they';ll do just that.


treat web packaging the way we treat shelf space/product packaging

optimizing content experiences for that particular use.
Might actually engage folks rather than turn them away
drop him an email to upload slides.


Wildnet Technologies said...

Thanks for sharing your valuable knowledge about web designing
Nice post
Web Design Services

Software Development Services said...

I was happy to discover this website. I desired to thank you for this excellent read!! I definitely experienced every little bit of it and I have you saved to examine out the new things you publish.
Blackberry Application Developer India