!""#$%%
DESIGNING OUTSIDE
THE 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!

!"#"$%&'(
BOOKS VIDEO GAMES THEATRE
SET DESIGN
POSTERS

POSTERS

Posters: Challenge
Grab the viewer, make an impact
Communicate a simple message... quickly
Follow that simple message with supporting details

(Some) Solutions
Simplicity
Color and contrast

Simplicity is about subtracting the obvious and adding the
meaningful.
- John Maeda, The Laws of Simplicity

http://www.ttthings.com/shop

http://wilsonminer.com

http://digitalmash.com

http://www.seedconference.com

http://carsonified.com/

http://carsonified.com/mission/

http://carsonified.com/events/

http://carsonified.com/contact/

!"#"$%&'(

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.

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
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

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 it’s beautiful.
Because you like its history. Because it’s ugly.
Because you like its name. Because it’s boring.
Because of who designed it. Because it’s special.
Because it was there. Because you believe in it.
Because they made you. Because you can’t not.
Because it reminds you of
http://www.designobserver.com/observatory/
something.
entry.html?entry=5497

http://www.newyorker.com

http://bobulate.com

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

http://www.snook.ca

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://vecface.com/ma/

http://vecface.com/ma/

http://www.taptaptap.com

http://www.taptaptap.com

http://www.huddletogether.com/projects/lightbox/

http://www.panic.com/coda/

http://www.tapbots.com

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