designing outside the browser
DESCRIPTION
As designers, we’re constantly looking around for sources of inspiration and influence. Spending all day working on the web, it can be tempting to limit one’s gaze to other websites. While many of the challenges we face on the web are unique, in this talk, we’ll look beyond the browser window; at the techniques designers in other disciplines have used to solve their unique design problems and how we can apply those lessons to our own work on the web.TRANSCRIPT
!""#$%%
DESIGNING OUTSIDETHE BROWSER
Allow myself to introduce... myself.
!""#$%%
?
Goals
Identify design challenges in other types of media
Show how solutions from other media relate to web design
Get inspired!
POSTERS
!"#"$%&'(
BOOKS VIDEO GAMES THEATRE
SET DESIGN
POSTERS
Posters: Challenge
Grab the viewer, make an impact
Communicate a simple message... quickly
Follow that simple message with supporting details
Simplicity
Color and contrast
(Some) Solutions
Simplicity is about subtracting the obvious and adding the
meaningful.
- John Maeda, The Laws of Simplicity
!"#"$%&'(
Magazines: Challenge
Retain readership (and advertising dollars)
Create incentives to purchase and read the magazine, rather than
get the content elsewhere
Is the web so different?
RSS Readers
Instapaper (http://instapaper.com)
Readability (http://lab.arc90.com/experiments/readability/)
(One) Solution
Focus on design and interesting layouts that engage the reader
with the content and forge a connection with the magazine’s
brand.
http://www.ted.com/talks/jacek_utko_asks_can_design_save_the_newspaper.html
http://blog.ted.com/2009/04/the_fate_of_the.php
Writers don’t like you. They treat
you as an enemy, because they
believe in words and they believe
you’re cutting the words... The
future of media is where people
realize that how content is sold to
the reader is equally important.
Jacek Utko
From: http://www.gr2.fi/g2sivut/sanoja_ray_gun.html
http://abriefmessage.com/2007/12/05/twemlow/
http://abriefmessage.com/2007/09/21/lukas/
http://abriefmessage.com/2007/09/18/walker/
http://jasonsantamaria.com/articles/on-the-subject-of-design/
http://jasonsantamaria.com/articles/what-the-world-needs/
http://jasonsantamaria.com/articles/pretty-sketchy/
http://dustincurtis.com/you_should_follow_me_on_twitter.html
http://dustincurtis.com/to-fasten-your-seatbelt.html
http://dustincurtis.com/how_niko_tinbergen_reverse_engineered_the_seagull.html
http://trentwalton.com/2009/08/22/a-fresh-coat-of-paint/
http://trentwalton.com/2009/06/26/content-karma/
http://trentwalton.com/2009/09/17/css3-and-me/
BOOKS
Books: Challenge
Making reading as effortless and enjoyable as possible
Use design subtly to support the text
In a well-made book, where designer, compositor and printer
have all done their jobs, no matter how many thousands of
lines and pages they must occupy, the letters are alive. They
dance in their seats. Sometimes they rise and dance in the
margins and aisles.
Robert Bringhurst
(Some) Solutions
Typography, typography, typography
Choose a typeface (that you can bring to life)
Michael Bierut’s Thirteen Ways of Looking at a Typeface
Because it works.
Because you like its history.
Because you like its name.
Because of who designed it.
Because it was there.
Because they made you.
Because it reminds you of something.
Because it’s beautiful.
Because it’s ugly.
Because it’s boring.
Because it’s special.
Because you believe in it.
Because you can’t not.
http://www.designobserver.com/observatory/
entry.html?entry=5497
The lovely typeface is Skolar, which was designed by David
Březina and is distributed by TypeTogether. It was designed with
“scholarly and multilingual publications in mind. It incorporates
a subtle personal style, neither neutral nor conspicuous,” exactly
what Bobulate portends to do.
Liz Danzico, Bobulate.com
VIDEO GAMES
Video Games: Challenge
Keep players aware of ambient information, but not distract from
primary gameplay experience
(One) Solution
Using information overlays, HUDs, or toolbars
THEATRE
SET DESIGN
Set Design: Challenge
Achieve appearance of expansive three-dimensional space with
the constraint of limited depth on stage
(One) Solution
Use of “flats” set in front and behind one another along with
faked perspective
http://www.flickr.com/photos/tobysimkin/3816299983/
http://www.flickr.com/photos/tobysimkin/3817130032/
http://www.huddletogether.com/projects/lightbox/
Conclusion
Look beyond CSS galleries.
Look at what challenges designers face in other media and what
techniques are being used to solve those challenges.
Get inspired!
Richard Powell, @misterpowell