!""#$%%




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 in...
!"#"$%&'(


                      BOOKS   VIDEO GAMES    THEATRE
                                            SET DESIGN

P...
POSTERS
Posters: Challenge
Grab the viewer, make an impact

Communicate a simple message... quickly

Follow that simple message wi...
(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, ra...
Is the web so different?
RSS Readers

Instapaper (http://instapaper.com)

Readability (http://lab.arc90.com/experiments/re...
(One) Solution
Focus on design and interesting layouts that engage the reader
with the content and forge a connection with...
Writers don’t like you. They treat
you as an enemy, because they
believe in words and they believe
you’re cutting the word...
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
line...
(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 yo...
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 wit...
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 bein...
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Designing Outside The Browser
Upcoming SlideShare
Loading in …5
×

Designing Outside The Browser

1,235 views

Published on

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.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,235
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
116
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing Outside The Browser

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

×