Recommended
More Related Content
Similar to Close Your Browser: Finding Inspiration In The Offline World
Similar to Close Your Browser: Finding Inspiration In The Offline World (20)
More from elliotjaystocks
More from elliotjaystocks (14)
Recently uploaded
Recently uploaded (20)
Close Your Browser: Finding Inspiration In The Offline World
- 1. Close Your Browser Finding Inspiration In The Offline World by 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
- 7. Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites
- 10. Where do we find inspiration online? Personal sites, blogs, Twitter, etc. Bookmarking sites Photo-sharing sites Gallery sites
- 16. Too many CSS galleries!
- 17. Too many CSS galleries!
- 18. Too many CSS galleries!
- 19. Too many CSS galleries!
- 20. What’s wrong with these galleries?
- 21. What’s wrong with these galleries? Most of the content is the same
- 22. What’s wrong with these galleries? Most of the content is the same There’s a low signal-to-noise ratio
- 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. 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. 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 I’m not talking about that kind.
- 39. I love books Business cards Magazines Posters & flyers Packaging
- 46. Captions in The Telegraph
- 47. Freedom
- 48. Freedom Large areas of whitespace
- 49. Freedom Large areas of whitespace Unusual layout
- 50. Freedom Large areas of whitespace Unusual layout Bold imagery / typography
- 51. Freedom Large areas of whitespace Unusual layout Bold imagery / typography Thinking outside the grid
- 52. Inseparable
- 53. Inseparable Present day Print design Web design Birth of print
- 54. Inseparable Present day Print design Web design Design as Birth of print a whole
- 55. Inseparable Present day Print design Web design Design as Birth of print a whole Art as a whole Birth of art
- 56. Flash
- 57. Flash “Aaa-aaaaaaaaaaah! Saviour of the universe!”
- 58. 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
- 60. Two tangents XHTML / CSS (rigidity of layout*) Print design Flash (freedom of layout*)
- 61. 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!
- 62. Brave negative space Conclave Obscurum conclaveobscurum.ru
- 63. Non-standard decorative elements Conclave Obscurum conclaveobscurum.ru
- 64. Undisturbed page layout Conclave Obscurum conclaveobscurum.ru
- 65. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru
- 66. Glitched layout - content shifted Conclave Obscurum conclaveobscurum.ru
- 67. Glitch requires user action to be fixed Conclave Obscurum conclaveobscurum.ru
- 68. Glitch requires user action to be fixed Conclave Obscurum conclaveobscurum.ru
- 72. Reverting to normal content layout Conclave Obscurum conclaveobscurum.ru
- 73. Glitches... distortions... intentional breakages... what purpose do they serve?
- 74. Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould
- 75. Glitches... distortions... intentional breakages... what purpose do they serve? To break the mould To create a pleasant level of tension
- 76. 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)
- 83. Narrative
- 84. Subtraction: the story so far subtraction.com/archives/2008/0114_the_story_so.php
- 85. 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
- 86. No One Belongs Here More Than You noonebelongsheremorethanyou.com
- 87. No One Belongs Here More Than You noonebelongsheremorethanyou.com
- 88. 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.
- 90. Changing colours over time Shaun Inman shauninman.com
- 91. Faded saturation for older posts Shaun Inman shauninman.com
- 92. Toggling low / high contrast Shaun Inman shauninman.com
- 93. Narrative Freytag’s analysis of literary plot structure: 1. Exposition 2. Rising action 3. Climax (turning point) 4. Falling action 5. Denouement
- 95. Translating narrative theory to web design
- 96. Translating narrative theory to web design 1. Exposition = Structure (the grid)
- 97. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout)
- 98. Translating narrative theory to web design 1. Exposition = Structure (the grid) 2. Rising action = Tension (unusual layout) 3. Climax (turning point) = Stand-out elements
- 99. 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
- 100. 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
- 101. Business cards. I love them, too.
- 112. More good’ns at: flickr.com/photos/dailypoetics/sets/ 72057594104389710/
- 113. Your home page is not your business card.
- 114. Your home page is not your business card. Neither is your contact page or site navigation.
- 115. Your home page is not your business card. Neither is your contact page or site navigation. Your design is your business card.
- 116. Conclusions
- 117. Conclusions Print design aesthetics have split off into two (Flash and HTML / CSS) tangents in web design.
- 118. 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.
- 119. 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.
- 120. 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.
- 121. Again: If you only get your inspiration from one place, your designs will grow stale. Why should a website look like every other website?
- 122. Thank you! elliotjaystocks.com | twitter.com/elliotjaystocks