Close Your Browser: Finding Inspiration In The Offline World

  • Published on
    28-Jan-2015

  • View
    106

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Transcript

  • 1. Close Your Browser Finding Inspiration In The Ofine Worldby Elliot Jay Stocks elliotjaystocks.com | twitter.com/elliotjaystocks

2. Where do we find inspiration online? 3. Where do we find inspiration online?Personal sites, blogs, Twitter, etc. 4. Where do we find inspiration online?Personal sites, blogs, Twitter, etc.Bookmarking sites 5. Delicious delicious.com 6. Stumble Upon stumbleupon.com 7. Where do we find inspiration online?Personal sites, blogs, Twitter, etc.Bookmarking sitesPhoto-sharing sites 8. Flickr ickr.com 9. LittleSnapper (coming soon) realmacsoftware.com/littlesnapper 10. Where do we find inspiration online?Personal sites, blogs, Twitter, etc.Bookmarking sitesPhoto-sharing sitesGallery sites 11. Best Web Gallery bestwebgallery.com 12. The FWA thefwa.com 13. CSS Mania cssmania 14. Faveup faveup.com 15. CSS Beauty cssbeauty.com 16. Too many CSS galleries! 17. Too many CSS galleries! 18. Too many CSS galleries! 19. Too many CSS galleries! 20. Whats wrong with these galleries? 21. Whats wrong with these galleries?Most of the content is the same 22. Whats wrong with these galleries?Most of the content is the sameTheres a low signal-to-noise ratio 23. Whats wrong with these galleries?Most of the content is the sameTheres a low signal-to-noise ratioMany exist purely for the sake of advertising 24. Whats wrong with these galleries?Most of the content is the sameTheres a low signal-to-noise ratioMany exist purely for the sake of advertisingBut most importantly... 25. They all showcase websites 26. If you only get your inspiration from one place, your designs will grow stale. 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. I love books... 29. Web design inspiration books 30. ... but Im not talking about that kind. 31. I love booksBusiness cardsMagazinesPosters & flyersPackaging 32. Juxtapoz magazine juxtapoz.com 33. Scott Hansen iso50.com 34. Scott Hansen iso50.com 35. Scott Hansen iso50.com 36. Scott Hansen iso50.com 37. Scott Hansen iso50.com 38. Captions in The Telegraph 39. Freedom 40. FreedomLarge areas of whitespace 41. FreedomLarge areas of whitespaceUnusual layout 42. FreedomLarge areas of whitespaceUnusual layoutBold imagery / typography 43. FreedomLarge areas of whitespaceUnusual layoutBold imagery / typographyThinking outside the grid 44. Inseparable 45. InseparablePresent dayPrint design Web design Birth of print 46. InseparablePresent dayPrint design Web design Design as Birth of printa whole 47. InseparablePresent dayPrint designWeb designDesign as Birth of print a whole Art as a wholeBirth of art 48. Flash 49. Flash Aaa-aaaaaaaaaaah!Saviour of the universe! 50. Jeff Croft:Flash speaks [a designers] 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. Two tangentsPrint design 52. Two tangents XHTML / CSS(rigidity of layout*) Print design Flash(freedom of layout*) 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 dont throw the tomatoes just yet! 54. Brave negative space Conclave Obscurum conclaveobscurum.ru 55. Non-standard decorative elements Conclave Obscurum conclaveobscurum.ru 56. Undisturbed page layout Conclave Obscurum conclaveobscurum.ru 57. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru 58. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru 59. Glitch requires user action to be xed Conclave Obscurum conclaveobscurum.ru 60. Glitch requires user action to be xed Conclave Obscurum conclaveobscurum.ru 61. More glitches Conclave Obscurum conclaveobscurum.ru 62. Intentional breakage Conclave Obscurum conclaveobscurum.ru 63. Intentional breakage Conclave Obscurum conclaveobscurum.ru 64. Reverting to normal content layout Conclave Obscurum conclaveobscurum.ru 65. Glitches... distortions... intentional breakages... what purpose do they serve? 66. Glitches... distortions... intentional breakages... what purpose do they serve?To break the mould 67. Glitches... distortions... intentional breakages... what purpose do they serve?To break the mouldTo create a pleasant level of tension 68. Glitches... distortions... intentional breakages... what purpose do they serve?To break the mouldTo create a pleasant level of tensionTo involve the user (attention / participation required) 69. Coba Hair cobahair.co.uk/treatments.html 70. Standard Image standardimage.jp/ver2.1 71. Seed Conference seedconference.com 72. Revyver revyver.com 73. A Brief Message abriefmessage.com 74. Jason Santa Maria jasonsantamaria.com 75. Narrative 76. Subtraction: the story so far subtraction.com/archives/2008/0114_the_story_so.php 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-uent colleagues are.subtraction.com/archives/2008/0114_the_story_so.php 78. No One Belongs Here More Than You noonebelongsheremorethanyou.com 79. No One Belongs Here More Than You noonebelongsheremorethanyou.com 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. Current colour Shaun Inman shauninman.com 82. Changing colours over time Shaun Inman shauninman.com 83. Faded saturation for older posts Shaun Inman shauninman.com 84. Toggling low / high contrast Shaun Inman shauninman.com 85. Narrative Freytags analysis of literary plot structure:1. Exposition 2. Rising action 3. Climax (turning point) 4. Falling action 5. Denouement 86. Freytags Pyramid Source: en.wikipedia.org/wiki/Dramatic_structure 87. Translating narrative theory to web design 88. Translating narrative theory to web design 1. Exposition = Structure (the grid) 89. Translating narrative theory to web design 1. Exposition= Structure (the grid) 2. Rising action = Tension (unusual layout) 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. 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. 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. Business cards.I love them, too. 94. Source: creativebits.org/cool_business_card_designs 95. Source: creativebits.org/cool_business_card_designs 96. Source: creativebits.org/cool_business_card_designs 97. Source: creativebits.org/cool_business_card_designs 98. Source: creativebits.org/cool_business_card_designs 99. Source: creativebits.org/cool_business_card_designs 100. Source: creativebits.org/cool_business_card_designs 101. Source: creativebits.org/cool_business_card_designs 102. Source: creativebits.org/cool_business_card_designs 103. Source: creativebits.org/cool_business_card_designs 104. More goodns at: ickr.com/photos/dailypoetics/sets/72057594104389710/ 105. Your home page is not your business card. 106. Your home page is not your business card.Neither is your contact page or site navigation. 107. Your home page is not your business card.Neither is your contact page or site navigation.Your design is your business card. 108. Conclusions 109. ConclusionsPrint design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design. 110. ConclusionsPrint 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. ConclusionsPrint 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. ConclusionsPrint 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; its done by brave design. 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. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks