The Good, the Bad and the Future.

593 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
593
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


























































































































  • 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

    ×