Recommended
More Related Content
Similar to The Good, the Bad and the Future.
Similar to The Good, the Bad and the Future. (20)
Recently uploaded
Recently uploaded (20)
The Good, the Bad and the Future.
- 2. 2
- 3. 3 I wanted to be a pirate. JD Hooge Gridplane.com
- 5. 5 Fourm.com, 2001
- 6. 6 R!OT Manhattan, 2001
- 7. 7 Fein Design, 2000 JD Hooge Gridplane.com
- 8. 8 Infourm Showcases
- 9. 9 Flash Math Creativity
- 10. 10 Time to jump ship. JD Hooge Gridplane.com
- 12. 12 Forces of Nature National Geographic Online Designed at Second Story JD Hooge Gridplane.com
- 13. 13 The Price of Freedom National Museum of American History Designed at Second Story
- 14. 14 The Public Vaults National Archives Designed at Second Story
- 15. 15 AIGA Design Archives American Institute of Graphic Arts Designed at Second Story
- 17. 17 MSNBC / Fortune Magazine
- 18. 18 Nikepedia
- 19. 19 XBOX Experience Concepts
- 20. 20 Google Chrome Data Visualization
- 21. 21 Burst Labs
- 22. 22 Corey Arnold, Photographer
- 23. 23 That’s just how we are! Part 1. Designers are Control Freaks JD Hooge Gridplane.com
- 24. 24 Pixel Pathways JD Hooge Gridplane.com
- 27. 27 Designing a poster • Fixed Scale • Fixed Data • Fixed Proportions • Fixed Parameters JD Hooge Gridplane.com
- 28. 28 The web won’t stay still! Designing for the web is not that JD Hooge Gridplane.com
- 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 Designing a web page that works requires a lot of sensitivity to the various forces at work. JD Hooge Gridplane.com
- 31. 31 A good design solution is one that balances those opposing forces. JD Hooge Gridplane.com
- 32. 32 Part 2. Early Typographic Lessons JD Hooge Gridplane.com
- 33. 33 Jan Tschichold JD Hooge Gridplane.com
- 34. 34 Jan Tschichold 1928
- 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 I was strangely drawn to this guy. JD Hooge Gridplane.com
- 37. 37 Print design in the year 2000. JD Hooge Gridplane.com
- 40. 40 Very different than the world of Jan Tschichold JD Hooge Gridplane.com
- 41. 41 Web design in the year 2000. JD Hooge Gridplane.com
- 42. 42 Web design in the year 2000. Flash/HTML JD Hooge Gridplane.com
- 43. 43 Flash World
- 44. 44 Flash World Small type looks terrible. JD Hooge Gridplane.com
- 45. 45
- 46. 46
- 47. 47 HTML Land Arial Courier New Georgia Times New Roman Verdana Trebuchet MS Lucida Sans JD Hooge Gridplane.com
- 48. 48 msnbc.com, 2000 HTML Land
- 49. 49 Part 3. Design Elements of Web 2.0 JD Hooge Gridplane.com
- 50. 50 Disclaimer Trends vs. Principles JD Hooge Gridplane.com
- 51. 51 Core Principles Being simple, bold & honest. Visual Clutter Reduced • • Strong Hierarchy • Increased White Space • Quiet Structure • Large Type
- 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 Web 2.0 Principles Goals Control the Message • Controlling users’ attention allows you to control the message you wish to communicate
- 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 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 Part 4. Typographic Tools • Font replacement • Font embedding • Font linking JD Hooge Gridplane.com
- 57. 57 SIFR Scalable Inman Flash Replacement JD Hooge Gridplane.com
- 58. 58 SIFR Flash + JS JD Hooge Gridplane.com
- 59. 59 Pros • Text is selectable • Text is scalable • Doesn’t violate EULA copyright JD Hooge Gridplane.com
- 60. 60 Cons • Requires Flash IDE • Load time • Pain in the ass JD Hooge Gridplane.com
- 61. 61 Foreign Affairs Site Concentric Studio The pre-eminent publication on international affairs and foreign policy. JD Hooge Gridplane.com
- 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 Foreign Affairs Cover Designed by Pentagram JD Hooge Gridplane.com
- 64. 64 Foreign Affairs Site Concentric Studio Carries through to article pages. JD Hooge Gridplane.com
- 65. 65 FLIR Facelift Image Replacement JD Hooge Gridplane.com
- 66. 66 FLIR PHP + GD Library JD Hooge Gridplane.com
- 67. 67 Pros • Easier to configure on front-end • Doesn’t require Flash • Doesn’t violate EULA copyright JD Hooge Gridplane.com
- 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 Cufón [koo-fone] JD Hooge Gridplane.com
- 70. 70 Cufón FontForge + SVG + VML/Canvas + JSON + JS JD Hooge Gridplane.com
- 71. 71 Pros • Easy to configure on front- end • Doesn’t require Flash • Loads fast • Selectable* JD Hooge Gridplane.com
- 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 @font-face Finally! The pure solution? JD Hooge Gridplane.com
- 74. 74 Define the @font-face element @font-face { font-family: Benson; src: url('BensonSansCond.otf'); } JD Hooge Gridplane.com
- 75. 75 Refer to the font with the font-family property h3 { font-family: Benson, sans-serif; } JD Hooge Gridplane.com
- 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 2 Major Snags • Microsoft (eot) • Licensing/Copyright JD Hooge Gridplane.com
- 78. 78 Is this the death of type foundries or is it their big opportunity? JD Hooge Gridplane.com
- 79. 79 Is this the death of type foundries or is it their big opportunity? JD Hooge Gridplane.com
- 80. 80 Hosted font files? JD Hooge Gridplane.com
- 81. 81 More type tools... JD Hooge Gridplane.com
- 82. 82 csstypeset.com
- 83. 83 typetester.org
- 84. 84 flippingtypical.com
- 85. 85 blueprintcss.org CSS Framework showing common HTML elements
- 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 Jan Tschichold Sound familiar? JD Hooge Gridplane.com
- 88. 88 Grid Systems in Graphic Design 1961 , Joseph Muller-Brockman Part 5. The Grid JD Hooge Gridplane.com
- 89. 89 A unified design Golden Ratio Golden canon of page construction
- 90. 90 These might be really helpful if... • Your canvas is a fixed size • You can see the whole canvas
- 91. 91 Embrace the fluid nature of the web. Which means giving up a certain amount of control JD Hooge Gridplane.com
- 92. 92 I’m just glad people are talking about JD Hooge Gridplane.com
- 93. 93 960.gs Popular fixed- width grid framework
- 94. 94 designinfluences.com/ fluid960gs A fluid version of the 960 framework that utilizes jQuery and mooTools effects.
- 95. 95 developer.yahoo.com/yui/ grids/ Yahoo has their own open-source fluid grid framework
- 96. 96 gridr.atomeye.com Visual drag and drop grid builders
- 97. 97 andrewingram.net Photoshop scripts that auto create guides
- 98. 98 andrewingram.net Photoshop scripts that auto create guides
- 99. 99 toki-woki.net/p/Boks Evan an AIR app visual grid editor.
- 100. 100 Don’t cling too tightly JD Hooge Gridplane.com
- 101. 101 Learn the rules before you break JD Hooge Gridplane.com
- 103. 103 John Boardley ilovetypography.com
- 104. 104 Antonio Carusone thegridsystem.org
- 105. 105 Antonio Carusone thegridsystem.org
- 106. 106 Jason Santa Maria jasonsantamaria.com
- 107. 107 Your Majesty Co. your-majesty.com
- 108. 108 Mark Boulton markboulton.co.uk
- 109. 109 Khoi Vinh abriefmessage.com
- 111. 111 Part 7. Progressive Enhancement Is the new graceful degradation JD Hooge Gridplane.com
- 112. 112 GD = complexity to simplicity PE = simplicity to complexity JD Hooge Gridplane.com
- 113. 113 “The future is not what it used to be.” - Valery, Paul JD Hooge Gridplane.com
- 114. 114 Gridplane.com Example Gridplane.com Zero formatting - The lowest common denominator. JD Hooge Gridplane.com
- 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 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 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 Part 8. The pirate days are almost over. JD Hooge Gridplane.com
- 119. Experience Designer User Experience Designer User Experience Analyst UX Strategist Digital Experience Strategist Digital Strategist
- 120. UX/IA/ID Consultant Visual Designer Director of Interactivity Director of New Media
- 121. 120 We’re growing up - and starting to define what web design is. JD Hooge Gridplane.com
- 122. 121 I almost feel like I have a real job. JD Hooge Gridplane.com
- 123. 122