Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Good, the Bad and the Future.

639 views

Published on

Let's put things into perspective. Our industry is just getting started.

JD will "zoom out" and take a step back to consider how far Web design has come, what have learned thus far, and where we are headed.

Showing examples from his own work and the work of others, JD will talk about typography, the grid, good and bad design, Web 4.0, ridiculous job titles and rainbows.

Published in: Design, Technology, Business
  • Login to see the comments

The Good, the Bad and the Future.

  1. 1. 1 Hello. JD Hooge Gridplane.com
  2. 2. 2
  3. 3. 3 I wanted to be a pirate. JD Hooge Gridplane.com
  4. 4. 4 JD Hooge Gridplane.com
  5. 5. 5 Fourm.com, 2001
  6. 6. 6 R!OT Manhattan, 2001
  7. 7. 7 Fein Design, 2000 JD Hooge Gridplane.com
  8. 8. 8 Infourm Showcases
  9. 9. 9 Flash Math Creativity
  10. 10. 10 Time to jump ship. JD Hooge Gridplane.com
  11. 11. 11 JD Hooge Gridplane.com
  12. 12. 12 Forces of Nature National Geographic Online Designed at Second Story JD Hooge Gridplane.com
  13. 13. 13 The Price of Freedom National Museum of American History Designed at Second Story
  14. 14. 14 The Public Vaults National Archives Designed at Second Story
  15. 15. 15 AIGA Design Archives American Institute of Graphic Arts Designed at Second Story
  16. 16. 16 JD Hooge Gridplane.com
  17. 17. 17 MSNBC / Fortune Magazine
  18. 18. 18 Nikepedia
  19. 19. 19 XBOX Experience Concepts
  20. 20. 20 Google Chrome Data Visualization
  21. 21. 21 Burst Labs
  22. 22. 22 Corey Arnold, Photographer
  23. 23. 23 That’s just how we are! Part 1. Designers are Control Freaks JD Hooge Gridplane.com
  24. 24. 24 Pixel Pathways JD Hooge Gridplane.com
  25. 25. 25 JD Hooge Gridplane.com
  26. 26. 26 JD Hooge Gridplane.com
  27. 27. 27 Designing a poster • Fixed Scale • Fixed Data • Fixed Proportions • Fixed Parameters JD Hooge Gridplane.com
  28. 28. 28 The web won’t stay still! Designing for the web is not that JD Hooge Gridplane.com
  29. 29. 29 Opposing Forces Dynamic Data Mastery of the Tools Multiple Viewports More & Better Tools Fluid Proportions - + Stronger Foundations Increasing Amount Movement Towards of Information Standards Losing Control Gaining Control
  30. 30. 30 Designing a web page that works requires a lot of sensitivity to the various forces at work. JD Hooge Gridplane.com
  31. 31. 31 A good design solution is one that balances those opposing forces. JD Hooge Gridplane.com
  32. 32. 32 Part 2. Early Typographic Lessons JD Hooge Gridplane.com
  33. 33. 33 Jan Tschichold JD Hooge Gridplane.com
  34. 34. 34 Jan Tschichold 1928
  35. 35. 35 Rigid Beliefs • Condemned all fonts but sans- serif • Advocated for standardized paper sizes for all printed matter • Established guidelines for “effective use” of sizes and weights of type
  36. 36. 36 I was strangely drawn to this guy. JD Hooge Gridplane.com
  37. 37. 37 Print design in the year 2000. JD Hooge Gridplane.com
  38. 38. 38 Design Trends Deconstruction/Grunge
  39. 39. 39 Design Trends Techno/Futuristic JD Hooge Gridplane.com
  40. 40. 40 Very different than the world of Jan Tschichold JD Hooge Gridplane.com
  41. 41. 41 Web design in the year 2000. JD Hooge Gridplane.com
  42. 42. 42 Web design in the year 2000. Flash/HTML JD Hooge Gridplane.com
  43. 43. 43 Flash World
  44. 44. 44 Flash World Small type looks terrible. JD Hooge Gridplane.com
  45. 45. 45
  46. 46. 46
  47. 47. 47 HTML Land Arial Courier New Georgia Times New Roman Verdana Trebuchet MS Lucida Sans JD Hooge Gridplane.com
  48. 48. 48 msnbc.com, 2000 HTML Land
  49. 49. 49 Part 3. Design Elements of Web 2.0 JD Hooge Gridplane.com
  50. 50. 50 Disclaimer Trends vs. Principles JD Hooge Gridplane.com
  51. 51. 51 Core Principles Being simple, bold & honest. Visual Clutter Reduced • • Strong Hierarchy • Increased White Space • Quiet Structure • Large Type
  52. 52. 52 Web 2.0 Principles Goals Clarify the Purpose • What is the purpose of the website? Focus the users’ attention to sift through on the More data • web • Shorter attention spans • People don’t read, they scan
  53. 53. 53 Web 2.0 Principles Goals Control the Message • Controlling users’ attention allows you to control the message you wish to communicate
  54. 54. 54 Finch Portfolio Site Interface design begins to resemble editorial design. • Zero Visual Clutter • Strong Hierarchy • Lots of White Space • Quiet Structure • Large Type JD Hooge Gridplane.com
  55. 55. 55 Squarespace Site Horizontal bands help to establish hierarchy and focus attention. Site Map located in the footer helps to keep the main navigation clean. JD Hooge Gridplane.com
  56. 56. 56 Part 4. Typographic Tools • Font replacement • Font embedding • Font linking JD Hooge Gridplane.com
  57. 57. 57 SIFR Scalable Inman Flash Replacement JD Hooge Gridplane.com
  58. 58. 58 SIFR Flash + JS JD Hooge Gridplane.com
  59. 59. 59 Pros • Text is selectable • Text is scalable • Doesn’t violate EULA copyright JD Hooge Gridplane.com
  60. 60. 60 Cons • Requires Flash IDE • Load time • Pain in the ass JD Hooge Gridplane.com
  61. 61. 61 Foreign Affairs Site Concentric Studio The pre-eminent publication on international affairs and foreign policy. JD Hooge Gridplane.com
  62. 62. 62 Foreign Affairs Site Concentric Studio Using SIFR to replace the headline text with hallmark font from the printed publication. JD Hooge Gridplane.com
  63. 63. 63 Foreign Affairs Cover Designed by Pentagram JD Hooge Gridplane.com
  64. 64. 64 Foreign Affairs Site Concentric Studio Carries through to article pages. JD Hooge Gridplane.com
  65. 65. 65 FLIR Facelift Image Replacement JD Hooge Gridplane.com
  66. 66. 66 FLIR PHP + GD Library JD Hooge Gridplane.com
  67. 67. 67 Pros • Easier to configure on front-end • Doesn’t require Flash • Doesn’t violate EULA copyright JD Hooge Gridplane.com
  68. 68. 68 Cons • Text cannot be selected/copied • Doesn’t scale • Requires a server with PHP + GD Library • Its an image! What is this 1999? JD Hooge Gridplane.com
  69. 69. 69 Cufón [koo-fone] JD Hooge Gridplane.com
  70. 70. 70 Cufón FontForge + SVG + VML/Canvas + JSON + JS JD Hooge Gridplane.com
  71. 71. 71 Pros • Easy to configure on front- end • Doesn’t require Flash • Loads fast • Selectable* JD Hooge Gridplane.com
  72. 72. 72 Cons • Violates EULA copyright since you can view source and grab the js file that is generated from the font outlines. JD Hooge Gridplane.com
  73. 73. 73 @font-face Finally! The pure solution? JD Hooge Gridplane.com
  74. 74. 74 Define the @font-face element @font-face { font-family: Benson; src: url('BensonSansCond.otf'); } JD Hooge Gridplane.com
  75. 75. 75 Refer to the font with the font-family property h3 { font-family: Benson, sans-serif; } JD Hooge Gridplane.com
  76. 76. 76 Refer to the font with the font-family property h3 { font-family: Benson, sans-serif; } Hell yeah! JD Hooge Gridplane.com
  77. 77. 77 2 Major Snags • Microsoft (eot) • Licensing/Copyright JD Hooge Gridplane.com
  78. 78. 78 Is this the death of type foundries or is it their big opportunity? JD Hooge Gridplane.com
  79. 79. 79 Is this the death of type foundries or is it their big opportunity? JD Hooge Gridplane.com
  80. 80. 80 Hosted font files? JD Hooge Gridplane.com
  81. 81. 81 More type tools... JD Hooge Gridplane.com
  82. 82. 82 csstypeset.com
  83. 83. 83 typetester.org
  84. 84. 84 flippingtypical.com
  85. 85. 85 blueprintcss.org CSS Framework showing common HTML elements
  86. 86. 86 Why I like them • Establish sensible typographic styles • Encourages design consistency and simplicity • Provides a solid foundation to build on JD Hooge Gridplane.com
  87. 87. 87 Jan Tschichold Sound familiar? JD Hooge Gridplane.com
  88. 88. 88 Grid Systems in Graphic Design 1961 , Joseph Muller-Brockman Part 5. The Grid JD Hooge Gridplane.com
  89. 89. 89 A unified design Golden Ratio Golden canon of page construction
  90. 90. 90 These might be really helpful if... • Your canvas is a fixed size • You can see the whole canvas
  91. 91. 91 Embrace the fluid nature of the web. Which means giving up a certain amount of control JD Hooge Gridplane.com
  92. 92. 92 I’m just glad people are talking about JD Hooge Gridplane.com
  93. 93. 93 960.gs Popular fixed- width grid framework
  94. 94. 94 designinfluences.com/ fluid960gs A fluid version of the 960 framework that utilizes jQuery and mooTools effects.
  95. 95. 95 developer.yahoo.com/yui/ grids/ Yahoo has their own open-source fluid grid framework
  96. 96. 96 gridr.atomeye.com Visual drag and drop grid builders
  97. 97. 97 andrewingram.net Photoshop scripts that auto create guides
  98. 98. 98 andrewingram.net Photoshop scripts that auto create guides
  99. 99. 99 toki-woki.net/p/Boks Evan an AIR app visual grid editor.
  100. 100. 100 Don’t cling too tightly JD Hooge Gridplane.com
  101. 101. 101 Learn the rules before you break JD Hooge Gridplane.com
  102. 102. 102 Part 6. Innovators JD Hooge Gridplane.com
  103. 103. 103 John Boardley ilovetypography.com
  104. 104. 104 Antonio Carusone thegridsystem.org
  105. 105. 105 Antonio Carusone thegridsystem.org
  106. 106. 106 Jason Santa Maria jasonsantamaria.com
  107. 107. 107 Your Majesty Co. your-majesty.com
  108. 108. 108 Mark Boulton markboulton.co.uk
  109. 109. 109 Khoi Vinh abriefmessage.com
  110. 110. 110 Part 7. Progressive Enhancement JD Hooge Gridplane.com
  111. 111. 111 Part 7. Progressive Enhancement Is the new graceful degradation JD Hooge Gridplane.com
  112. 112. 112 GD = complexity to simplicity PE = simplicity to complexity JD Hooge Gridplane.com
  113. 113. 113 “The future is not what it used to be.” - Valery, Paul JD Hooge Gridplane.com
  114. 114. 114 Gridplane.com Example Gridplane.com Zero formatting - The lowest common denominator. JD Hooge Gridplane.com
  115. 115. 115 Gridplane.com Example Gridplane.com Projects are displayed in a two-column layout. Projects are in one long scrolling list. JD Hooge Gridplane.com
  116. 116. 116 Gridplane.com Example Gridplane.com Projects are now displayed in a four- column layout. Projects are still in one long scrolling list. JD Hooge Gridplane.com
  117. 117. 117 Gridplane.com Example Gridplane.com Added project filters. Added pagination with up to 6 rows per page Added smooth transitions, color effects and rollovers. JD Hooge Gridplane.com
  118. 118. 118 Part 8. The pirate days are almost over. JD Hooge Gridplane.com
  119. 119. Experience Designer User Experience Designer User Experience Analyst UX Strategist Digital Experience Strategist Digital Strategist
  120. 120. UX/IA/ID Consultant Visual Designer Director of Interactivity Director of New Media
  121. 121. 120 We’re growing up - and starting to define what web design is. JD Hooge Gridplane.com
  122. 122. 121 I almost feel like I have a real job. JD Hooge Gridplane.com
  123. 123. 122

×