Designing Outside The Browser
-
Upload
richard-powell -
Category
Design
-
view
111 -
download
1
description
Transcript of Designing Outside The Browser
![Page 1: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/1.jpg)
!""#$%%
DESIGNING OUTSIDETHE BROWSER
![Page 2: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/2.jpg)
Allow myself to introduce... myself.
![Page 3: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/3.jpg)
!""#$%%
?
![Page 4: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/4.jpg)
![Page 5: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/5.jpg)
Goals
Identify design challenges in other types of media
Show how solutions from other media relate to web design
Get inspired!
![Page 6: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/6.jpg)
POSTERS
!"#"$%&'(
BOOKS VIDEO GAMES THEATRE
SET DESIGN
![Page 7: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/7.jpg)
POSTERS
![Page 8: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/8.jpg)
Posters: Challenge
Grab the viewer, make an impact
Communicate a simple message... quickly
Follow that simple message with supporting details
![Page 9: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/9.jpg)
Simplicity
Color and contrast
(Some) Solutions
![Page 10: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/10.jpg)
Simplicity is about subtracting the obvious and adding the
meaningful.
- John Maeda, The Laws of Simplicity
![Page 11: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/11.jpg)
![Page 12: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/12.jpg)
![Page 13: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/13.jpg)
![Page 22: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/22.jpg)
!"#"$%&'(
![Page 23: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/23.jpg)
Magazines: Challenge
Retain readership (and advertising dollars)
Create incentives to purchase and read the magazine, rather than
get the content elsewhere
![Page 24: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/24.jpg)
Is the web so different?
RSS Readers
Instapaper (http://instapaper.com)
Readability (http://lab.arc90.com/experiments/readability/)
![Page 25: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/25.jpg)
(One) Solution
Focus on design and interesting layouts that engage the reader
with the content and forge a connection with the magazine’s
brand.
![Page 26: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/26.jpg)
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
![Page 27: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/27.jpg)
![Page 28: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/28.jpg)
From: http://www.gr2.fi/g2sivut/sanoja_ray_gun.html
![Page 29: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/29.jpg)
http://abriefmessage.com/2007/12/05/twemlow/
![Page 30: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/30.jpg)
http://abriefmessage.com/2007/09/21/lukas/
![Page 31: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/31.jpg)
http://abriefmessage.com/2007/09/18/walker/
![Page 32: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/32.jpg)
http://jasonsantamaria.com/articles/on-the-subject-of-design/
![Page 33: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/33.jpg)
http://jasonsantamaria.com/articles/what-the-world-needs/
![Page 34: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/34.jpg)
http://jasonsantamaria.com/articles/pretty-sketchy/
![Page 35: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/35.jpg)
http://dustincurtis.com/you_should_follow_me_on_twitter.html
![Page 36: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/36.jpg)
http://dustincurtis.com/to-fasten-your-seatbelt.html
![Page 37: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/37.jpg)
http://dustincurtis.com/how_niko_tinbergen_reverse_engineered_the_seagull.html
![Page 38: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/38.jpg)
http://trentwalton.com/2009/08/22/a-fresh-coat-of-paint/
![Page 39: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/39.jpg)
http://trentwalton.com/2009/06/26/content-karma/
![Page 40: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/40.jpg)
http://trentwalton.com/2009/09/17/css3-and-me/
![Page 41: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/41.jpg)
BOOKS
![Page 42: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/42.jpg)
Books: Challenge
Making reading as effortless and enjoyable as possible
Use design subtly to support the text
![Page 43: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/43.jpg)
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
![Page 44: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/44.jpg)
(Some) Solutions
Typography, typography, typography
Choose a typeface (that you can bring to life)
![Page 45: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/45.jpg)
![Page 46: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/46.jpg)
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
![Page 47: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/47.jpg)
![Page 48: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/48.jpg)
![Page 51: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/51.jpg)
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
![Page 53: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/53.jpg)
VIDEO GAMES
![Page 54: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/54.jpg)
Video Games: Challenge
Keep players aware of ambient information, but not distract from
primary gameplay experience
![Page 55: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/55.jpg)
(One) Solution
Using information overlays, HUDs, or toolbars
![Page 56: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/56.jpg)
![Page 57: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/57.jpg)
![Page 58: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/58.jpg)
![Page 59: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/59.jpg)
![Page 60: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/60.jpg)
![Page 61: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/61.jpg)
![Page 62: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/62.jpg)
![Page 63: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/63.jpg)
![Page 64: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/64.jpg)
![Page 65: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/65.jpg)
THEATRE
SET DESIGN
![Page 66: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/66.jpg)
Set Design: Challenge
Achieve appearance of expansive three-dimensional space with
the constraint of limited depth on stage
![Page 67: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/67.jpg)
(One) Solution
Use of “flats” set in front and behind one another along with
faked perspective
![Page 68: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/68.jpg)
http://www.flickr.com/photos/tobysimkin/3816299983/
![Page 69: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/69.jpg)
http://www.flickr.com/photos/tobysimkin/3817130032/
![Page 72: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/72.jpg)
![Page 75: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/75.jpg)
http://www.huddletogether.com/projects/lightbox/
![Page 78: Designing Outside The Browser](https://reader031.fdocuments.in/reader031/viewer/2022013100/54c824e54a79592c758b45b9/html5/thumbnails/78.jpg)
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