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.
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: 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 )
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.
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?
Examples: Jumpcut.com, Scrapblog.com
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.
Bill Scott Designing for
100k new blogs everyday.
DIGG hit 1million registered users.
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. (Nytimes.com vs Chicago Tribune)
flickr.com/photos/bryce/(more stuff here)
Renkoo.com (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.