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.
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
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
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
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
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
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
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