Close Your Browser: Finding Inspiration In The Offline World

2,262 views

Published on

Slides from the talk given by Elliot Jay Stocks at Spletne Urice in Ljubljana, Slovenia, on 29th October 2008

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

No Downloads
Views
Total views
2,262
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Close Your Browser: Finding Inspiration In The Offline World

  1. 1. Close Your Browser Finding Inspiration In The Offline World by Elliot Jay Stocks elliotjaystocks.com | twitter.com/elliotjaystocks
  2. 2. Where do we find inspiration online?
  3. 3. Where do we find inspiration online? Personal sites, blogs, Twitter, etc.
  4. 4. Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites
  5. 5. Delicious delicious.com
  6. 6. Stumble Upon stumbleupon.com
  7. 7. Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites
  8. 8. Flickr flickr.com
  9. 9. LittleSnapper (coming soon) realmacsoftware.com/littlesnapper
  10. 10. Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites Gallery sites
  11. 11. Best Web Gallery bestwebgallery.com
  12. 12. The FWA thefwa.com
  13. 13. CSS Mania cssmania
  14. 14. Faveup faveup.com
  15. 15. CSS Beauty cssbeauty.com
  16. 16. Too many CSS galleries!
  17. 17. Too many CSS galleries!
  18. 18. Too many CSS galleries!
  19. 19. Too many CSS galleries!
  20. 20. What’s wrong with these galleries?
  21. 21. What’s wrong with these galleries? Most of the content is the same
  22. 22. What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio
  23. 23. What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio Many exist purely for the sake of advertising
  24. 24. What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio Many exist purely for the sake of advertising But most importantly...
  25. 25. They all showcase websites
  26. 26. If you only get your inspiration from one place, your designs will grow stale.
  27. 27. If you only get your inspiration from one place, your designs will grow stale. Why should a website look like every other website?
  28. 28. I love books...
  29. 29. Web design inspiration books
  30. 30. ... but I’m not talking about that kind.
  31. 31. I love books Business cards Magazines Posters & flyers Packaging
  32. 32. Juxtapoz magazine juxtapoz.com
  33. 33. Scott Hansen iso50.com
  34. 34. Scott Hansen iso50.com
  35. 35. Scott Hansen iso50.com
  36. 36. Scott Hansen iso50.com
  37. 37. Scott Hansen iso50.com
  38. 38. Captions in The Telegraph
  39. 39. Freedom
  40. 40. Freedom Large areas of whitespace
  41. 41. Freedom Large areas of whitespace Unusual layout
  42. 42. Freedom Large areas of whitespace Unusual layout Bold imagery / typography
  43. 43. Freedom Large areas of whitespace Unusual layout Bold imagery / typography Thinking outside the grid
  44. 44. Inseparable
  45. 45. Inseparable Present day Print design Web design Birth of print
  46. 46. Inseparable Present day Print design Web design Design as Birth of print a whole
  47. 47. Inseparable Present day Print design Web design Design as Birth of print a whole Art as a whole Birth of art
  48. 48. Flash
  49. 49. Flash “Aaa-aaaaaaaaaaah! Saviour of the universe!”
  50. 50. Jeff Croft: “Flash speaks [a designer’s] language. It's visual in nature and has similar tools and UI to Photoshop, Illustrator, and their ilk.” subtraction.com/archives/2008/0114_the_story_so.php
  51. 51. Two tangents Print design
  52. 52. Two tangents XHTML / CSS (rigidity of layout*) Print design Flash (freedom of layout*)
  53. 53. Two tangents XHTML / CSS (rigidity of layout*) Print design Flash (freedom of layout*) * Generally speaking, of course. You know I love Web Standards more than Flash ... so please don’t throw the tomatoes just yet!
  54. 54. Brave negative space Conclave Obscurum conclaveobscurum.ru
  55. 55. Non-standard decorative elements Conclave Obscurum conclaveobscurum.ru
  56. 56. Undisturbed page layout Conclave Obscurum conclaveobscurum.ru
  57. 57. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru
  58. 58. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru
  59. 59. Glitch requires user action to be fixed Conclave Obscurum conclaveobscurum.ru
  60. 60. Glitch requires user action to be fixed Conclave Obscurum conclaveobscurum.ru
  61. 61. More glitches Conclave Obscurum conclaveobscurum.ru
  62. 62. Intentional breakage Conclave Obscurum conclaveobscurum.ru
  63. 63. Intentional breakage Conclave Obscurum conclaveobscurum.ru
  64. 64. Reverting to normal content layout Conclave Obscurum conclaveobscurum.ru
  65. 65. Glitches... distortions... intentional breakages... what purpose do they serve?
  66. 66. Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould
  67. 67. Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould To create a pleasant level of tension
  68. 68. Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould To create a pleasant level of tension To involve the user (attention / participation required)
  69. 69. Coba Hair cobahair.co.uk/treatments.html
  70. 70. Standard Image standardimage.jp/ver2.1
  71. 71. Seed Conference seedconference.com
  72. 72. Revyver revyver.com
  73. 73. A Brief Message abriefmessage.com
  74. 74. Jason Santa Maria jasonsantamaria.com
  75. 75. Narrative
  76. 76. Subtraction: the story so far subtraction.com/archives/2008/0114_the_story_so.php
  77. 77. Khoi Vinh: “My complaint, right now, is that the majority of storytelling that happens on the Web is based in the interactively rich environment made possible by Flash.” “Not enough Web standards-minded designers are thinking narratively in the way that our Flash-fluent colleagues are.” subtraction.com/archives/2008/0114_the_story_so.php
  78. 78. No One Belongs Here More Than You noonebelongsheremorethanyou.com
  79. 79. No One Belongs Here More Than You noonebelongsheremorethanyou.com
  80. 80. Narrative Narrative is not just about backward and forward or next and previous. It is about an evolving structure, problems and solutions, and a continuous sense of movement.
  81. 81. Current colour Shaun Inman shauninman.com
  82. 82. Changing colours over time Shaun Inman shauninman.com
  83. 83. Faded saturation for older posts Shaun Inman shauninman.com
  84. 84. Toggling low / high contrast Shaun Inman shauninman.com
  85. 85. Narrative Freytag’s analysis of literary plot structure: 1. Exposition 2. Rising action 3. Climax (turning point) 4. Falling action 5. Denouement
  86. 86. Freytag’s Pyramid Source: en.wikipedia.org/wiki/Dramatic_structure
  87. 87. Translating narrative theory to web design
  88. 88. Translating narrative theory to web design 1. Exposition = Structure (the grid)
  89. 89. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout)
  90. 90. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements
  91. 91. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements 4. Falling action = Balance
  92. 92. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements 4. Falling action = Balance 5. Denouement = The overall aesthetic
  93. 93. Business cards. I love them, too.
  94. 94. Source: creativebits.org/cool_business_card_designs
  95. 95. Source: creativebits.org/cool_business_card_designs
  96. 96. Source: creativebits.org/cool_business_card_designs
  97. 97. Source: creativebits.org/cool_business_card_designs
  98. 98. Source: creativebits.org/cool_business_card_designs
  99. 99. Source: creativebits.org/cool_business_card_designs
  100. 100. Source: creativebits.org/cool_business_card_designs
  101. 101. Source: creativebits.org/cool_business_card_designs
  102. 102. Source: creativebits.org/cool_business_card_designs
  103. 103. Source: creativebits.org/cool_business_card_designs
  104. 104. More good’ns at: flickr.com/photos/dailypoetics/sets/ 72057594104389710/
  105. 105. Your home page is not your business card.
  106. 106. Your home page is not your business card. Neither is your contact page or site navigation.
  107. 107. Your home page is not your business card. Neither is your contact page or site navigation. Your design is your business card.
  108. 108. Conclusions
  109. 109. Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design.
  110. 110. Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world.
  111. 111. Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world. Narrative is lacking in non-Flash web design and we need to challenge our current aesthetics.
  112. 112. Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. We need to unify these two branches by embracing design ‘freedoms’ from print design in the Web Standards world. Narrative is lacking in non-Flash web design and we need to challenge our current aesthetics. Impressing is not just done by good design; it’s done by brave design.
  113. 113. Again: If you only get your inspiration from one place, your designs will grow stale. Why should a website look like every other website?
  114. 114. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks

×