Designing Outside The Browser

!""#$%%

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

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.

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

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