We like these things:
1. Simplicity
2. D-R-Y (Don’t Repeat Yourself)
3. Layers
Slide 8
Slide 8 text
1. Simplicity
2. D-R-Y (Don’t Repeat Yourself)
3. Layers
We like these things:
Slide 9
Slide 9 text
1. Simplicity
2. D-R-Y (Don’t Repeat Yourself)
3. Layers
We like these things:
Slide 10
Slide 10 text
Why is this
important
?
Slide 11
Slide 11 text
Quick
Survey
Slide 12
Slide 12 text
Developer
Designer
Slide 13
Slide 13 text
Developer
Designer
Slide 14
Slide 14 text
THINGS GO
Very
WRONG
Slide 15
Slide 15 text
Make it up as we go
Copy Trends (or worse)
Borrow
Slide 16
Slide 16 text
Make it up as we go
Copy Trends (or worse)
Borrow
Slide 17
Slide 17 text
Make it up as we go
Copy Trends (or worse)
Borrow
Slide 18
Slide 18 text
WHAT?
the heck happened
Slide 19
Slide 19 text
When We Don’t Understand Design
FLAT
Our Applications Fa!
Slide 20
Slide 20 text
Not
this
FLAT
Slide 21
Slide 21 text
WTF?
Slide 22
Slide 22 text
Wait
Why should I care?
Slide 23
Slide 23 text
Hire Better Designers
Know Your Limits
Better Communication
Slide 24
Slide 24 text
Hire Better Designers
Know Your Limits
Better Communication
Slide 25
Slide 25 text
Hire Better Designers
Know Your Limits
Better Communication
Slide 26
Slide 26 text
Part of being a good
software developer is
knowing your limits
“
”
- Jeff Atwood
Slide 27
Slide 27 text
Design in Magic
Myth:
Slide 28
Slide 28 text
Design is hard
(to articulate)
Slide 29
Slide 29 text
What makes
BEAUTY
(hint: it’s more about aesthetics)
?
Slide 30
Slide 30 text
How we get
BETTER
at Design
Slide 31
Slide 31 text
What do we want to
BUILD?
Slide 32
Slide 32 text
Let’s make an
ONLINE STORE
Slide 33
Slide 33 text
USER
Slide 34
Slide 34 text
Name: Charlie
I like to do a lot of online
shopping because I don’t
have a lot of time. ”
“
Slide 35
Slide 35 text
USE CASE
Slide 36
Slide 36 text
Charlie visits our new online
store and he wants to purchase a
new set of eyeglasses.
“
”
Slide 37
Slide 37 text
Display a set of eyeglasses and it’s
information so that Charlie can
make a purchase.
Requirement:
Slide 38
Slide 38 text
Timeless Eyeglasses. Was
$125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way. 2 reviews.
Add to Cart.
Done!
Slide 39
Slide 39 text
Timeless Eyeglasses. Was
$125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way. 2 reviews.
Add to Cart.
Done!
Slide 40
Slide 40 text
How do we
FIX THIS?
Slide 41
Slide 41 text
Iterate
Slide 42
Slide 42 text
Design
Principles
4
Slide 43
Slide 43 text
Typography
Visual Hierarchy
Proportion
Color
Slide 44
Slide 44 text
Typography
Visual Hierarchy
Proportion
Color
Slide 45
Slide 45 text
Type Font
!=
Slide 46
Slide 46 text
Classifications
Several
Slide 47
Slide 47 text
Serif
Typefaces that
have “feet” at the
ends of strokes.
N
Slide 48
Slide 48 text
San Serif
Typefaces that
have no serifs.
N
sans == without
Slide 49
Slide 49 text
Slab Serif
Typefaces with
block-like “feet”.
N
Slide 50
Slide 50 text
Script
Typefaces with
cursive handwriting
N
Slide 51
Slide 51 text
Choosing & Pairing
FONTS
Slide 52
Slide 52 text
is usually enough
Two Fonts
Slide 53
Slide 53 text
Keep it in the
Family
Slide 54
Slide 54 text
We look good
With each other
Museo & Museo Sans
Slide 55
Slide 55 text
Opposites
Attract
Slide 56
Slide 56 text
We look good
When we contrast
Hand Gothic & Gil Sans
Slide 57
Slide 57 text
Avoid two types with
Personality
Slide 58
Slide 58 text
We look distracting
We can be overwhelming
Dancing Script & Impact
Slide 59
Slide 59 text
Typekit
Slide 60
Slide 60 text
Google Fonts
Slide 61
Slide 61 text
The Elements
of Typographic
Style
Slide 62
Slide 62 text
Timeless Eyeglasses. Was
$125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way. 2 reviews.
Add to Cart.
Slide 63
Slide 63 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward design, as
evidenced by these incredible
eyeglass frames. They're (as the
name so perfectly states) timeless in
every possible way. 2 reviews.
Add to Cart.
Slide 64
Slide 64 text
Typography
Visual Hierarchy
Proportion
Color
Slide 65
Slide 65 text
Header
Main
Sidebar
Footer
Maintaining order
Slide 66
Slide 66 text
Maintaining Order of
OBJECTS
Slide 67
Slide 67 text
Negative
Space
Slide 68
Slide 68 text
Gestalt principles
of perception
(How we perceive the world in
complete objects)
Slide 69
Slide 69 text
Similarity
When objects look similar to one
another, we perceive them as a
group
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Continuation
Continuation occurs when the eye is
compelled to move through one
object and continue to another
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Closure
Incomplete objects or a space not
completely enclosed are perceived
as complete or whole
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Proximity
Objects near one another are
perceive as belonging together.
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
AndyRutledge.com
Slide 84
Slide 84 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward design, as
evidenced by these incredible
eyeglass frames. They're (as the
name so perfectly states) timeless in
every possible way. 2 reviews.
Add to Cart.
Slide 85
Slide 85 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward design, as
evidenced by these incredible
eyeglass frames. They're (as the
name so perfectly states) timeless in
every possible way.
2 reviews.
Add to Cart.
Slide 86
Slide 86 text
Typography
Visual Hierarchy
Proportion
Color
Slide 87
Slide 87 text
Key to Making
BEAUTY
Slide 88
Slide 88 text
Grids!
Slide 89
Slide 89 text
Golden Ratio
Slide 90
Slide 90 text
3:4 Ratio
Slide 91
Slide 91 text
2:3 Ratio
Slide 92
Slide 92 text
Gridset
Slide 93
Slide 93 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward design, as
evidenced by these incredible
eyeglass frames. They're (as the
name so perfectly states) timeless in
every possible way.
2 reviews.
Add to Cart.
Slide 94
Slide 94 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way.
2 reviews.
Add to Cart.
Slide 95
Slide 95 text
Typography
Visual Hierarchy
Proportion
Color
Slide 96
Slide 96 text
Color is
DIFFICULT
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Colors
Choosing
Slide 99
Slide 99 text
Warm, Bright, and Dark
Background COLORS
Slide 100
Slide 100 text
Action COLORS
How you direct users
Slide 101
Slide 101 text
1. RED - Warning, Alerts, Important
Action COLORS
Slide 102
Slide 102 text
Action COLORS
1. RED - Warning, Alerts, Important
2. YELLOW - Important, but not urgent
Slide 103
Slide 103 text
Action COLORS
1. RED - Warning, Alerts, Important
2. YELLOW - Important, but not urgent
3. GREEN - Click me, Success
Slide 104
Slide 104 text
Color themes
Use "em!
Slide 105
Slide 105 text
Pick one or two dominate colors
Keep it SIMPLE
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
Adobe Kuler
Slide 108
Slide 108 text
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way.
2 reviews.
Add to Cart.
Slide 109
Slide 109 text
Add to Cart
Timeless Eyeglasses.
Was $125.00. Now $75.00.
Brilliantly straightforward
design, as evidenced by
these incredible eyeglass
frames. They're (as the
name so perfectly states)
timeless in every possible
way.
2 reviews
Slide 110
Slide 110 text
TL;DR
Learning Design is Possible
Apply what you know already
It will take some time
Slide 111
Slide 111 text
TL;DR
Learning Design is Possible
Apply what you know already
It will take some time
Slide 112
Slide 112 text
TL;DR
Learning Design is Possible
Apply what you know already
It will take some time
Slide 113
Slide 113 text
That is all
Thanks!
@mattsears
Slide 114
Slide 114 text
Credits
1. The Elements of Typographic Style photo: http://www.flickr.com/photos/
davekellam/2108809639/
2. Andy Rutledge: Gestalt Principles - http://www.andyrutledge.com/gestalt-
principles-1-figure-ground-relationship.php