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.
25. profound conclusion
Design is one tiny part decoration and several
giant parts problem assessment and solution.
Notice I didn’t even mention PhotoShop
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.
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
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
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)
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
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
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
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.
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
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 . . .
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
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
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
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.
