The document discusses the importance of design and provides tips for designing well. It begins by defining design and explaining why design is important, noting that great design yields meaningful communication, truly solves problems, and creates great experiences. It then discusses design fundamentals and principles like visual hierarchy, proportions and grid systems, typography, using less elements, and taking creative pauses. The document concludes by emphasizing that great expectations are important for producing great design.

1. the importance of Great Design
why design is important &
tips for designing well
JARED PONCHOT * DRUPAL CAMP ATLANTA 2010
twitter: @jponch

2. Jared Ponchot of Lullabot

3. Jared Ponchot of Lullabot

4. Jared Ponchot of Lullabot

5. Rainbows & Unicorns

6. Rainbows & Unicorns
‣ What is design?

7. Rainbows & Unicorns
‣ What is design?
‣ Why is design important?

8. Rainbows & Unicorns
‣ What is design?
‣ Why is design important?
‣ Design Fundamentals

9. Rainbows & Unicorns
‣ What is design?
‣ Why is design important?
‣ Design Fundamentals
‣ The Design Process

10. Rainbows & Unicorns
‣ What is design?
‣ Why is design important?
‣ Design Fundamentals
‣ The Design Process
‣ Some Drupal Design Nuggets

11. Fun with semantics

12. Fun with semantics
because words mean things!

13. Design is NOT

14. Design is NOT
‣ Proficiency with Adobe’s Creative Suite

15. Design is NOT
‣ Proficiency with Adobe’s Creative Suite
‣ Proficiency with CSS

16. Design is NOT
‣ Proficiency with Adobe’s Creative Suite
‣ Proficiency with CSS
‣ Awareness of Helvetica Neue

17. Design is NOT
‣ Proficiency with Adobe’s Creative Suite
‣ Proficiency with CSS
‣ Awareness of Helvetica Neue
‣ Simply liking Apple products

18. Design is NOT
‣ Proficiency with Adobe’s Creative Suite
‣ Proficiency with CSS
‣ Awareness of Helvetica Neue
‣ Simply liking Apple products
‣ Theming

19. What is design?
According to wikipedia, “Design is the planning
that lays the basis for the making of every object
or system.”
- WIKIPEDIA.ORG

20. Or . . .
According to wikipedia, “Graphic design is a
collaborative process between a client and a
designer — in conjunction with producers of form
— to convey a specific message to a targeted
audience. The term "graphic design" can also refer
to a number of artistic and professional disciplines
that focus on visual communication and
presentation.” - WIKIPEDIA.ORG

21. Design is the conscious effort to
impose a meaningful order.
- VICTOR PAPANEK

22. Design is not just what it looks like and feels like.
Design is how it works.
- STEVE JOBS

23. Design is problem solving.
But wait, there’s more. Problem solving requires
knowing your problem!
Design is the diagnosis and
solving of problems.

24. Solve problems, don’t create them

25. profound conclusion
Design is one tiny part decoration and several
giant parts problem assessment and solution.
Notice I didn’t even mention PhotoShop

26. Design is Important!

27. Design is Important!

28. Design is Important!
‣ Great design yields meaningful communication.

29. Design is Important!
‣ Great design yields meaningful communication.
‣ Great design truly solves problems.

30. Design is Important!
‣ Great design yields meaningful communication.
‣ Great design truly solves problems.
‣ Great design creates great experiences.

31. Meaningful Communication

32. Meaningful Communication

33. Meaningful Communication

34. Meaningful Communication

35. Meaningful Communication

36. Meaningful Communication

37. Meaningful Communication

38. bad design creates confusion

39. Truly Solve Problems

40. What problem are we solving?

41. A nicer approach

42. Create great experiences

43. Let’s have fun with this thing!

44. “Often seduction is seen as a negative thing, it’s seen
as bad. People think of it as leading people astray.
However, I actually think that seduction can be a
good thing, it can be a fun thing.”
- ANDY BUDD

45. Let’s have fun with this thing!

46. Great Experiences Sell!

47. A case study in design importance
mp3 player 1 vs. mp3 player 2

48. 1st mp3 Player in the US Market!
Diamond Rio PMP300
November 1998

49. Meet the competition (a few years late to the party)
Apple iPod
October 2001

50. And the winner is?
Diamond Rio advantages:
‣ Longer battery life
‣ More Storage*
‣ Able to play more formats
‣ First to market (by almost 2 years)
‣ More functionality
*By the time the iPod released the Diamond Rio had more storage than the initial iPod

51. Design is strategic, and impeccably designed
systems, products, and services are really all that
separate one organization from another these days.
Quality alone is not enough — a lot of people have
good quality, right? Instead, the overall DESIGN of
the "thing" must be so compelling that it serves as a
key differentiator.
- GARR REYNOLDS

52. Great design for Apple meant

53. Great design for Apple meant
‣ A name change (no longer Apple Computer)

54. Great design for Apple meant
‣ A name change (no longer Apple Computer)
‣ Became the #1 music retailer in the world
(surpassing Walmart)

55. Great design for Apple meant
‣ A name change (no longer Apple Computer)
‣ Became the #1 music retailer in the world
(surpassing Walmart)
‣ Approximately 80% of the mp3 player market

56. Great design for Apple meant
‣ A name change (no longer Apple Computer)
‣ Became the #1 music retailer in the world
(surpassing Walmart)
‣ Approximately 80% of the mp3 player market
‣ Sold over 5 billion songs

57. Great design for Apple meant
‣ A name change (no longer Apple Computer)
‣ Became the #1 music retailer in the world
(surpassing Walmart)
‣ Approximately 80% of the mp3 player market
‣ Sold over 5 billion songs
‣ Inspired several other revolutionary products
(e.g. iPhone, iPad)

58. Quick Summary

59. Quick Summary
‣ Design is part beautification, but also problem
discovery and problem solving.

60. Quick Summary
‣ Design is part beautification, but also problem
discovery and problem solving.
‣ Design is important!

61. Quick Summary
‣ Design is part beautification, but also problem
discovery and problem solving.
‣ Design is important!
‣ Great design can help you knock Walmart down
a peg or two.

62. How to produce GREAT design?
Jared’s not-so-pantented, largely appropriated,
borrowed, learned, and sometimes stolen tips and
best practices for producing great design

63. How to produce GREAT design?

64. How to produce GREAT design?
Seven Simple Tips/Fundamentals

65. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)

66. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy

67. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy
‣ Proportions & Grid Systems

68. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy
‣ Proportions & Grid Systems
‣ Typography 101

69. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy
‣ Proportions & Grid Systems
‣ Typography 101
‣ Less is Less

70. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy
‣ Proportions & Grid Systems
‣ Typography 101
‣ Less is Less
‣ Creative Pause

71. How to produce GREAT design?
Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
‣ Visual Hierarchy
‣ Proportions & Grid Systems
‣ Typography 101
‣ Less is Less
‣ Creative Pause
‣ Great Expectations

72. A thief is only as good as his loot
Steal from the best

73. Recreate the masters
Just as painters learn by doing “studies” or
reproductions of master works, so should you!
Bouguereau reproductions painted by my wife

74. Unique solutions are often
NOT the best solutions

75. Don’t worry about people stealing your design work.
Worry about when they stop.
- JEFFERY ZELDMAN

76. So what am I advocating?
‣ Study
‣ Be Influenced
“Influence is borrowed, inspiration is earned.” -Cameron Moll
‣ Find Inspiration

77. Something’s Gotta Win

78. Visual Hierarchy - Easy as 1, 2, 3
Visual hierarchy is the emphasis and classification of
elements according to a) relative importance within
the composition as a whole and b) parent, child, and
sibling relationships.
- CAMERON MOLL

79. Fundamentals of Design & Visual Hierarchy

80. Fundamentals of Design & Visual Hierarchy
‣ proportion

81. Fundamentals of Design & Visual Hierarchy
‣ proportion
‣ proximity

82. Fundamentals of Design & Visual Hierarchy
‣ proportion
‣ proximity
‣ position

83. Fundamentals of Design & Visual Hierarchy
‣ proportion
‣ proximity
‣ position
‣ alignment

84. Fundamentals of Design & Visual Hierarchy
‣ proportion
‣ proximity
‣ position
‣ alignment
‣ contrast

85. Fundamentals of Design & Visual Hierarchy
‣ proportion
‣ proximity
‣ position
‣ alignment
‣ contrast
‣ color

86. Proportion & Visual Importance
2
1
3

87. Proximity & Visual Relationships
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

88. Position & Visual Importance
1
2 3

89. Alignment & Relationships

90. Contrast

91. Color & Visual Importance
‣ Warm colors stand out
‣ Cool colors recede

92. Nifty visual hierarchy trick

93. Nifty visual hierarchy trick

94. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

95. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

96. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

97. ?
Position?
Alignment?
Proximity?
Color?

98. Basic color theory tip
Create nice color palettes by:
‣ Letting others do it for you
‣ Choose a color and find something in the
neighborhood of it’s complement to go with it
Complements reside opposite one another
on the color wheel

99. beautiful geometry
The nature of proportions & grid systems

100. the Golden Section Rectangle

102. simple 3 by 3 grid

104. pretty people grid systems

105. Grid Systems are a Designer’s Friend

106. Grid Systems are a Designer’s Friend

107. Grid Systems are a Designer’s Friend

108. Grid Systems are a Designer’s Friend

109. Web Typography Basics
‣ No mixxy the face types (serifs or sans serifs)
‣ Be mindful of contrast
‣ Let it breathe

110. No Mixxy the Serifs or Sans Serifs
Although it would be fine to have a Sans Serif face as your titles and then a
Serif face for your body copy, don’t mix multiple Sans Serifs or Multiple
Serifs (as a general rule).
No No
My Fancy Titles are Helvetica
My fancy subtitles are going to be Verdana
And now for some nice body copy in Tahoma just for good measure Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam
quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu.
Donec mollis rhoncus risus, eget adipiscing tellus eleifend . . .

111. No Mixxy the Serifs or Sans Serifs
A nicer example might be . . .
My Fancy Titles are Helvetica
Bold
My fancy subtitles are also a nice Helvetica
And now for some nice body copy in Georgia just for good measure Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam
quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu.

112. Be mindful of Contrast
Contrast can be a wonderful way to enhance the visual hierarchy of your
typography (e.g. darkest text for title, slightly lighter text for subtitle, slightly
lighter text for body copy). However, in instances like putting text on a
darker background, you need to be very careful to keep things legible.
No No
Lots of reversed out body copy on a darker background can be tiring for the
reader and therefore not honoring your content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam at diam leo. Aliquam quis lorem ut sapien
aliquam consectetur ut in justo. Fusce vel sem arcu. Donec mollis rhoncus
risus, eget adipiscing tellus eleifend vitae. Proin et rhoncus risus. Nulla id
quam libero. Donec id velit felis. Sed vitae urna nunc, vel cursus nisl. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum sem tortor, aliquet et ullamcorper sed . . .

113. Be mindful of Contrast
Another No No
Lots of reversed out body copy that is a saturated color on a darker
background can be really abrasive for the reader and therefore not honoring
your content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at
diam leo. Aliquam quis lorem ut sapien aliquam consectetur ut in justo. Fusce
vel sem arcu. Donec mollis rhoncus risus, eget adipiscing tellus eleifend vitae.
Proin et rhoncus risus. Nulla id quam libero. Donec id velit felis. Sed vitae
urna nunc, vel cursus nisl. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum . . .

114. Don’t cram too much in

115. Let it breathe!
Remember your design fundamentals like Proximity when adding margins
or padding and remember to provide margins/paddings and line heights
that allow your copy to breathe.
No No A nicer approach
My Fancy Titles
My Fancy Titles My fancy subtitles look nice
My subtitles need more line and associate with titles
spacing and margin
And my body copy REALLY needs And my body copy is nice and
more line spacing and is annoying to
read with little room to breathe. readable and enjoyable to look at with
all this room to breathe.

116. Less is less. Less is better.
Jason Fried coined the phrase “less is less”
because he said that less is more "implies that
more is better."

117. Any intelligent fool can make things bigger and
more complex . . . It takes a touch of genius - and a lot
of courage to move in the opposite direction.
- ALBERT EINSTEIN

119. more is MORE!

120. more is MORE!

121. anyone else hate facebook?

122. Perfection is achieved, not when there is nothing more
to add, but when there is nothing left to take away
- ANTOINE DE SAINT EXUPRY

123. That’s all I’ll say about simplicity

124. Creative Pause
Stop, take a break, do something fun or at least
move on to something else!

125. The ‘creative pause’ is defined as the time interval
which begins when the thinker interrupts conscious
preoccupation with an unsolved problem, and ends
when the solution to the problem unexpectedly
appears in consciousness.
- INTERNATIONAL JOURNAL OF PSYCHOANALYSIS, PROFESSOR LAJOS SZÉKELY

126. Even if it keeps you up all night, wash down the walls and scrub the oor of your study
before composing a syllable.
Clean the place as if the Pope were on his way.
Spotlessness is the niece of inspiration.
The more you clean, the more brilliant your writing will be, so do not hesitate to take
to the open elds to scour the undersides of rocks or swab in the dark forest upper
branches, nests full of eggs.
When you nd your way back home and stow the sponges and brushes under the
sink, you will behold in the light of dawn the immaculate altar of your desk, a clean
surface in the middle of a clean world.
From a small vase, sparkling blue, lift a yellow pencil, the sharpest of the bouquet, and
cover pages with tiny sentences like long rows of devoted ants that followed you in
from the woods.
- BILLY COLLINS from SAILING ALONE AROUND THE ROOM

127. Typical Web Design Process

128. Typical Web Design Process
‣ Planning/IA

129. Typical Web Design Process
‣ Planning/IA
‣ Wireframing

130. Typical Web Design Process
‣ Planning/IA
‣ Wireframing
‣ Visual Layer

131. Planning/IA

132. Planning/IA
‣ Try to keep this geared toward wireframing*
‣ Identify key elements/entities
‣ Roles
‣ Navigation
‣ Node Types & Fields
‣ Contexts
‣ Views
‣ Identify visual hierarchy ordering
‣ Avoid early feature creep

133. Wireframing
‣ Keep it cheap
‣ Cover all unique node types, views, etc.
‣ Don’t make it pretty!
‣ Evaluate visual hierarchy (1, 2, 3)
samplifee home | how it works | get started | browse | shop | sign in search samplifee home | how it works | get started | browse | shop | sign in search samplifee home | how it works | get started | browse | shop | sign in search
Current Voting Cycle 23 days remaining Home Browse Current Voting Cycle: 23 days remaining Home Browse Science Fiction Sort by: Date | Rank | Popularity
Science Fiction VIEW ALL Historical VIEW ALL Science Fiction
Moderated by Larry Lancelot
Current Voting Cycle
23 days remaining
Hero Block
(used to tease the tour or how it works or provide high level overview) 4,327 votes cast
137 works submitted
Advertisement Work Title Shows Here Work Title Shows Here
Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Author Name Author Name
Author Name Author Name Author Name Author Name
Work Title Shows Here Work Title Shows Here Science Fiction
Horror Author Name Author Name Moderated by Larry Lancelot
VIEW ALL Young Adult / Chapter Books VIEW ALL
Larry's Picks VIEW ALL
Top Vote Getters VIEW ALL Recent Additions VIEW ALL Most Reads VIEW ALL Work Title Shows Here Work Title Shows Here
Author Name Author Name
Work Title Here
Work Title Here Work Title Here Work Title Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Author Name
Author Name Author Name Author Name Author Name Author Name Author Name Author Name
Work Title Shows Here Work Title Shows Here Work Title Here
Work Title Here Work Title Here Work Title Here Author Name Author Name Author Name
Author Name Author Name Author Name
Fantasy VIEW ALL Mystery / Thriller VIEW ALL
Work Title Here
Work Title Here Work Title Here Work Title Here Author Name
Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here
Author Name Author Name
Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here
Author Name Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here
Author Name Author Name
Popular Items
Current Voting Cycle: 23 days remaining | 4,327 votes cast | 137 works submitted Work Title Here
Author Name
PREV 1 2 3 4 5 NEXT
Romance VIEW ALL Literary Fiction VIEW ALL
Signup or Login Signup today and begin voting up your favorite works or even submitting your own works to be voted on! Work Title Here
Author Name
Signup or Login Signup today and begin voting or submitting your own works to be voted on!
Work Title Here
Work Title Shows Here Work Title Shows Here Author Name
Work Title Shows Here Work Title Shows Here
Author Name Author Name Author Name Author Name
Browse Genres Info & Support
Science Fiction Historical About FAQ
Horror Young Adult / Chapter Books Privacy Help Western VIEW ALL
Fantasy Mystery / Thriller Terms & Conditions Contact
Romance Literary Fiction Copyright Info
Western Signup or Login Signup today and begin voting and submitting your own works to be voted on!
Browse Genres Info & Support
Science Fiction Historical About FAQ
Work Title Shows Here Work Title Shows Here Horror Young Adult / Chapter Books Privacy Help
Author Name Author Name
Fantasy Mystery / Thriller Terms & Conditions Contact
Romance Literary Fiction Copyright Info
Western
Signup or Login Signup today and begin voting up your favorite works or even submitting your own works to be voted on!

134. The best design tool is a long eraser
with a pencil at one end.
- MARTY NEUMEIER

135. Visual Layer

136. Visual Layer
‣ Remember the fundamentals
‣ Know your medium
‣ How far you go in PSD’s is up to you and your
skill set, project environment, etc.

137. Drupal Design Nuggets
‣ Commonly overlooked Drupal elements
‣ Tabs
‣ Search Results
‣ Pagers
‣ Title Lengths
‣ Block content in secondary regions
‣ Inline Images
‣ System Messages
‣ Print Styles

138. Drupal Design Nuggets
‣ Tweaking Drupal’s Defaults
‣ Semantic Views
‣ Admin Themes
‣ Admin Menu

139. Designer/Themer’s Tools
‣ OmniGraffle Stencils/Templates
konigi UX stencils, 960 template
‣ Dot Grid Book
Behance Dot Grid Book (http://creativesoutfitter.com)
‣ Semantic Views
‣ CSSedit *Mac only, sorry (Stylizer for Windows?)
‣ Base Themes
Zen, Mothership, 960gs, custom, etc.

140. Great Expectations: Self & Others

141. Great Expectations: Self & Others
‣ Expect great things from yourself.

142. Great Expectations: Self & Others
‣ Expect great things from yourself.
‣ Surround yourself with people who expect you
to be great.

143. The Pygmalion effect
The Pygmalion effect, or Rosenthal effect, refers to
the phenomenon in which the greater the
expectation placed upon people, often children or
students and employees, the better they perform.

144. Great Expectations: Clients

145. Great Expectations: Clients
‣ Choose great clients

146. Great Expectations: Clients
‣ Choose great clients
‣ Never make the logo bigger

147. Great Expectations: Clients
‣ Choose great clients
‣ Never make the logo bigger
‣ Definitely don’t make it “pop”

148. To achieve great things, two things are needed: a plan,
and not quite enough time.
- LEONARD BERNSTEIN

149. Questions? Comments?
via dharmesh mehta on fwdmsgsnpics.blogspot.com
JARED PONCHOT * DRUPAL CAMP ATLANTA 2010
twitter: @jponch