Keith Robinson and Jeff Croft will talk about their design and development process from start to finish using the recent redesign of the Blue Flavor Website as a backdrop.
They'll be covering everything from the branding strategy behind design decisions to development with frameworks. In addition to walking through the design and development process, they'll be there to answer any questions you may have about your own design process.
Topics covered: strategy and branding for the Web, the design process, information architecture and content, grid-based design, typography for the Web, CSS frameworks, Django and CMS frameworks, and more.
Day 1 will focus on design and strategy. Day 2 will be about implementation and development.
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Webmaster Jam Session: Design and Development Behind the Scenes Day One
1. Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
2. Introduction.
We’re going to rock your world.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
3. D. Keith Robinson
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
4. D. Keith Robinson
• Principle & Creative Director for Blue Flavor
• Based in Seattle, Washington
• Over 12 years designing for web, etc.
• Has worked internally for large companies (Boeing, Children’s Hospital
Seattle)
• Has worked as a consultant for companies large and small.
• Recent clients include New York Review of Books, thePlatform, PayPal
• Also done some time as Associate Editor of Lifehacker
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
5. Jeff Cro
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
6. Jeff Cro
• Designer and developer at Blue Flavor
• Calls Seattle home, but temporarily living close to family in Kansas City
• Been working on the web full-time since 1994.
• Has worked in-house at Universities and newspaper companies
• Worked at the birthplace of Django in Lawrence, KS
• Has co-authored two books: Pro CSS Techniques, and Web
Standards Creativity
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
7. One small leaf...
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
8. Blue Flavor
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
9. Blue Flavor
• Founded in Seattle, Washington in 2005.
• 7 employees at the moment.
• Focused on design, standards-based development and CMS dev/
deployment.
• Client list includes Boeing, Comcast, PayPal, New York Review of
Books, Mithun, Houston Chronicle and Skydeck.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
10. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
11. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
12. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
13. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
14. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
• The design process.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
15. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
• The design process.
• Information Architecture and content organization.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
16. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
• The design process.
• Information Architecture and content organization.
• Crafting your content with authentic messaging.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
17. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
• The design process.
• Information Architecture and content organization.
• Crafting your content with authentic messaging.
• Grid-based visual design.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
18. Web Design and Development: Behind the Scenes
Day One: Strategy and Design
• Strategy and planning for success online.
• Online branding.
• The value of good design.
• The design process.
• Information Architecture and content organization.
• Crafting your content with authentic messaging.
• Grid-based visual design.
• Typography for the web.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
19. ?
Let ‘em fly.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
20. Strategy.
Setting the stage for success.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
21. ?
What’s not working?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
22. Start with goals.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
23. GOALS! GOALS! GOALS!
Firefox's Blake Ross's Slide from Gnomedex 6
Photo credit: Kris Krug
http://www.flickr.com/photos/kk/183915370/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
24. Tec
als
Go
hn
ica
ess
lG
sin
Sweet
oa l
Spot
Bu
s
Customer (or User) Goals
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
25. Blue Flavor’s Problems
(And what were we doing right?)
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
27. Problem #1: We don’t stand out.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
28. None of these things is not that much like the other.
Grapefruits, Oranges and Limes
Photo credit: Frank Grubet
http://www.flickr.com/photos/somewhatfrank/425402458/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
29. “Everyone is a “great web
designer” these days.”
- Matt Brown, Designer
http://thingsthatarebrown.com/blog/2008/08/the-first-four-months-of-freelancing-refresh-
seattle/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
30. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
31. Problem #2: Our personality
doesn’t show.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
32. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
33. Problem #3: Our content wasn’t
straightforward enough.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
34. Problem #4: Screenshots aren’t
that compelling.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
35. Problem #5: We weren’t
attracting the kinds of clients
we wanted to.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
36. Blue Flavor’s Goals
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
37. Goal: Do something different.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
38. Goal: Show more personality.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
39. Goal: Simplify the message.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
40. Goal: Better show all that we
do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
41. Goal: Attract more engaged
clients.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
43. Turning goals into strategy.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
44. Differentiate
Show personality
Attract “better”
clients.
Simplify messaging.
Better show all that we do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
45. Differentiate
Show personality
Attract “better”
clients.
Simplify messaging.
Better show all that we do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
46. Differentiate
Show personality
Attract “better”
clients.
Simplify messaging.
Better show all that we do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
47. Differentiate
Show personality
Attract “better”
clients.
Simplify messaging.
Better show all that we do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
48. Branding.
Authentic and Different.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
49. ?
What’s important about a
strong online presence?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
50. “One wants to be the
needle in the haystack.
Not a haystack.”
- Donald Draper, AMC’s Mad Men
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
51. AWESOME
Pleasant
Usable
Needs improvement
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
52. AWESOME
Pleasant
averagewebsite.com
Usable
Needs improvement
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
53. blueflavor.com
AWESOME
Pleasant
averagewebsite.com
Usable
Needs improvement
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
54. BRANDING
101
ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hought Leadership. Honesty. Creativity. People Before Technology. Content
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
55. BRANDING Differentiation
101
ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hought Leadership. Honesty. Creativity. People Before Technology. Content
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
56. BRANDING Differentiation
101 Authenticity
ord of Mouth. Differentiation. Conversation. Social. Transparency. Personal
hought Leadership. Honesty. Creativity. People Before Technology. Content
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
64. “Provide an experience that is both useful,
usable, desirable, and differentiated and you
will create demand for your brand and delight
your customers.”
- David Armano, Creative Director for Critical Mass
http://darmano.typepad.com/logic_emotion/2006/09/creating_compas.html
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
65. Authentic Messaging:
Examples
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
66. Begin with what you want to say.
Photo credit: Nate Steiner
http://www.flickr.com/photos/nate/2111495424/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
67. Creative and Authentic.
Photo credit: Sarah Murray
http://www.flickr.com/photos/batterypower/2309957181
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
73. There’s no sense trying to hide.
Photo credit: Dan Cederholm
http://www.flickr.com/photos/simplebitsdan/407831848/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
74. Web 2.0. Boo.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
75. “Clients don't understand.
eir success is related to
standing out, not fitting
in.”
- Donald Draper, AMC’s Mad Men
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
76. High Style: Examples
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
80. I made this!
inlawsandoutlaws.com/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
81. The Big Idea(s).
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
82. “is is the greatest advertising
opportunity since the invention
of cereal. You have six identical
companies making six identical
products. We can say anything
we want.”
- Donald Draper, AMC’s Mad Men
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
83. Focus on our work and let it, and our
clients, tell the story.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
84. Use posters to
illustrate our
projects
Blueflavor.com poster by Elliot Jay Stocks
http://www.elliotjaystocks.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
85. We think this is
pretty different.
More compelling than screenshots.
Tells a story.
Shows personality.
Hopefully engaging.
Creates a nice artifact.
Blueflavor.com poster by Joe Alterio
http://www.joealterio.com/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
86. Testimonials. We’ve got lots of them.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
87. Create a perception of quality and
mystery, yet remain accessible.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
88. Visual Mystery Open Kimono
Create an aura of Use content and to
mystery and quality be open and
with our visual authentic.
elements. The Blog.
Homepage as a gallery piece. Our Pricing Guide.
Illustrate projects with posters. Our About and Services Pages.
No typeface on the logo. The Screenshot gallery.
Dark, mysterious backgrounds. The testimonials.
Gallery style profile page.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
89. Clarity of Vision.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
90. “Consensus is for losers.”
- D. Keith Robinson, Designer
http://www.dkeithrobinson.com/entry/consensus_is_for_losers/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
91. “Ideas are easy. It’s the execution of ideas that really
separates the sheep om the goats.”
- Sue Grafton, Author
http://www.suegrafton.com/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
92. “We all get too excited about
FAILure.”
- Matt Brown, Designer
http://thingsthatarebrown.com/blog/2008/08/the-first-four-months-of-freelancing-refresh-
seattle/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
93. It’s ok to fail.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
94. Design Process.
It’s not about producing deliverables.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
95. Initial Design Process
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
97. Initial Design Process
Design and
Discovery Development
Decisions
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
98. Initial Design Process
Design and
Discovery Development Q/A
Decisions
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
99. Iterative Design Process
Design and
Re-Discovery Development Q/A
Decisions
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
100. e blueflavor.com design process.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
101. e blueflavor.com design process.
• Discovery: Looking for problems and opportunity, setting goals, etc.
• Strategy: Planning and initial problem solving.
• Content and Messaging: Going through our content and re-writing.
• Information Architecture: Nailing our navigation and layouts down.
• Visual Concepting: Getting down our look and feel.
• Gridwork, Typography and details: Bringing it all together.
• Iteration. Design is never done.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
102. A quick note:
The design process is not about your
deliverables, it’s about solving
problems.
Deliverables are about communicating
those solutions.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
103. A few words about content.
Design is all about words.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
104. “Great web design reflects the way we interact, and the
primary vehicle for that interaction remains text.”
- Bronwyn Jones, Better Writing Through Design
http://www.alistapart.com/articles/betterwritingthroughdesign/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
105. We started out by doing a content
inventory and cutting everything we
didn’t feel supported our goals.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
106. Then we cut what was left in half.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
107. “Murder your darlings.”
Sir Arthur Quiller-Couch (and others.)
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
108. “Copywriting is interface design.”
http://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
109. Our interface is also made of words,
we took a long look at that.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
110. Information Architecture.
Give your content some structure.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
111. IA is important because it allows you
to focus on content and interface
without being distracted by look and
feel.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
112. Information Architecture *is* Design.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
113. Information Architecture
• Document goals, content, navigation and features.
• Give it all a simple layout and structure.
• Document interactivity, if applicable.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
114. Common IA Documentation
• Page Description Diagrams.
• Zone Diagrams.
• Navigation Schemas.
• Wireframes.
• Use Cases.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
115. screen description diagram
1 2 3 Inbox Screen
Item Creation Field “Action Bar” Recent Changes Log The purpose of the inbox screen is to
capture incoming items and “process”
There will need to be a quick way for This will provide a drop down action There will be a running log (no more them into the system. Here you will
a user to create a new item (which list that will enable the user to “ac- than 5 items) showing recent see new items, new requests, proc-
defaults to a note.) This will be a sim- tion” or bulk edit checked items. Ac- changes to the system. essed items (before they’re “swept”
ple text entry field with associated tions include “Done” “Defer” “Dele-
, , into the system) and deferred items
javascript “listener” to help the user gate” (not sure how this would work) waiting to “tickle” their way in.
know exactly what they’re creating. “Delete” and “Committed/Someday
Maybe.” This describes the elements and basic
interaction of the Inbox screen. It’s
Inbox intended to give a general overview
A primary element of the Inbox “Clean Up” Button of what the user will see on the page.
screen, is (surprise) the Inbox. The There will be a button, part of the
Inbox is a container. Inside the inbox action bar probably, that will “sweep” This describes the “in use” state.
unprocessed items and requests will all processed items into the system. Things would appear a bit differently
be listed (and bolded) as will proc- were there nothing in the inbox, for
essed items (regular weight) and de- example.
ferred items (grayed out.)
“Go to Today”
In order to save time and space I’ve
There should be prominent place-
left out global items such as global
ment of a button that takes a user to
Inbox Items the today screen. This will be made
navigation, the logo, etc.
Inside the inbox will be items. These even more prominent by text in-
will be listed with a title and an icon structing the user to go to the today
that shows the type of item. There screen when the inbox is empty.
will also be a check box next to each
item, so that a user can select it (and
apply batch actions to it.) and there’ll
be an “Edit” link/icon that will allow
for inline editing of the item (similar
to how Basecamp does milestone
editing.)
Page Descriptions
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
116. Advice for page descriptions.
• Prioritize elements, this will be helpful if you have to cut later.
• Don’t worry about visual specifics.
• Describe how elements reflect user goals.
• Use “real” text and examples.
• Be verbose, don’t skimp on the details.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
117. Our Initial Wireframes
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
118. “Making the simple complicated is commonplace;
making the complicated simple, awesomely simple,
that’s creativity.”
- Charles Mingus, Jazz Composer and Amazing Bassist
http://www.mingusmingusmingus.com/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
119. Our Revised Wireframes
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
120. Advice for wireframes
• Be as real as you can. No greeked text.
• Set expectations. Wireframes are not a finished design or look and feel.
• Annotate thoroughly to describe interaction.
• Annotate to answer potential questions that’ll come up later on.
• Be as specific as you can.
• Don’t get caught in a nasty feedback/revision loop.
• Tie them back to previous deliverables to reinforce decisions and thinking.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
121. Inspiration and Concepting.
Executing on ideas.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
122. “You can find inspiration anywhere and everywhere,
you just need to keep an eye out for it.”
- D. Keith Robinson, Designer
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
123. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
124. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
125. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
126. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
127. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
128. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
129. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
131. Keeping Creative
• Keep a journal.
• Develop a creative routine.
• Have regular sources (Books, magazines, Flickr, RSS feeds.)
• Train your eyes to look at the world differently.
• Work at being creative.
• Look for new and different sources of inspiration.
• Try something completely different.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
132. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
133. “Ideas are everywhere. e writer of fiction must learn
to search the world for these seeds. Probably the most
fertile place to look for ideas is right inside the backyard
of your own life.”
- Alexander Steele, Dean of Faculty, Gotham Writer’s Workshop
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
134. The Brief
Simple, different, visually engaging,
slightly challenging, edgy and fun.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
135. The power of the pen (or
pencil.)
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
136.
137. Photo by Svet Ivantchev
http://www.flickr.com/people/svet/
138. Moleskine FTW!
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
139. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
140. Photo by Paul Worthington
http://www.flickr.com/people/paulworthington/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
142. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
143. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
144. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
145. V1
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
146. V2
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
147. V3
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
148. V4
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
149. V5
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
150. Designing With Grids.
Magical.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
151. Almost every design we do
starts with a grid. But why?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
152. Design is all about communication.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
153. In order to communicate well, we
must bring order to the data we’re
trying to represent.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
154. The grid is a sublime manifestation of
a desire to bring order.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
155. While grids are useful for a single
page, consistent use can bring
consistency across a project.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
156. Paul Rand, 1975
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
157. Grid design of
the 1950s and
1960s
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
158. Is this possible on the Web?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
159. For the most part, yes. Modular grids
are tough, but columnar grids make a
lot of sense on the Web.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
160. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
161. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
162. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
163. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
164. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
165. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
166. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
167. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
168. Typography.
It’s not just for print any more.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
169. The art of setting type.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
170. The point? To honor the content.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
171. Typography is not about
picking cool fonts.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
172. “One of the principles of durable typography is always
legibility; another is something more than legibility:
some earned or unearned interest that gives its living
energy to the page.”
- Robert Bringhurst, The Elements of Typographic Style
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
173. “ In a world rife with unsolicited messages, typography
must oen draw attention to itself before it will be read.
Yet in order to be read, it must relinquish the attention
it has drawn. Typography with anything
to say therefore aspires to a kind of
statuesque transparency.”
- Robert Bringhurst, The Elements of Typographic Style
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
174. Tips for elegant CSS typography:
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
175. Tips for elegant CSS typography:
• Use a good CSS reset stylesheet to give yourself a clean slate.
• Be sensitive to the high contrast of computer screens—consider using grey
on white instead of pure black on white, for example.
• Choose an appropriate measure for your text size. Readability takes a big,
big hit when your lines are overly long.
• Pay attention to leading. Adding a little vertical breathing room is one of the
simplest things you can do to improve the aesthetic of your site.
• Don’t overdo your paragraph indicators. You don’t need a blank like, and an
indent, and a drop cap, and...one will do, thank you.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
176. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
177. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
178. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
179. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
180. Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
181. Realignment.
Small changes go a long way.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
182. “e ability to simplify means to eliminate the
unnecessary so that the necessary may speak.”
- Hans Hoffman, German Painter and Teacher
http://www.hanshofmann.org/
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
187. So How’d we do?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
188.
Goal: Do something different.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
189.
Goal: Show more personality.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
190.
Goal: Simplify the message.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
191. Goal: Better show all that we
do.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
192.
Goal: Attract more engaged
clients.
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
193. anks!
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
194. ?
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008
195. Web Design and Development:
Behind the Scenes
D. Keith Robinson & Jeff Croft, October 3 & 4, 2008
http://www.blueflavor.com/
http://www.blueflavor.com/blog/
keith@blueflavor.com
jeff@blueflavor.com
Web Design and Development: Behind the Scenes, Webmaster Jam Session, October 2008