Slide 1
Slide 1 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make
effective, lovely interfaces.
Slide 2
Slide 2 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Hi, I’m Tracy!
@limedaring
(daring, not darling)
slides (also speakerdeck
username)
Slide 3
Slide 3 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
I will be tweeting all links:
@limedaring
(“daring” — not “darling”)
#talkpay
Slide 4
Slide 4 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 5
Slide 5 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 6
Slide 6 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring image credit: Dan Saffer
Slide 7
Slide 7 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design:
Making an interface that
works well.
Slide 8
Slide 8 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We will cover:
Slide 9
Slide 9 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We will cover:
•The one visual design principle to remember — and how
it applies to major design concepts.
Slide 10
Slide 10 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We will cover:
•The one visual design principle to remember — and how
it applies to major design concepts.
•An overview of the design process, to help beginners go
from an idea to execution as fast as possible.
Slide 11
Slide 11 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Not a beginner?
This presentation will
help you teach design.
Slide 12
Slide 12 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Why should everyone
know a bit about design?
Slide 13
Slide 13 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 14
Slide 14 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 15
Slide 15 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 16
Slide 16 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 17
Slide 17 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 18
Slide 18 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 19
Slide 19 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay
Slide 20
Slide 20 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Let’s get started
Slide 21
Slide 21 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Let’s talk about clutter
Slide 22
Slide 22 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Pay attention to
clutter
#talkpay
Slide 23
Slide 23 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Fastest way for better
looking designs:
Cut down on clutter.
Slide 24
Slide 24 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 25
Slide 25 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
GRID
Slide 26
Slide 26 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Line things up — pixel differences
are definitely unconsciously noticed.
Slide 27
Slide 27 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Shortcut:
Use integrated grid systems
and guides!
Slide 28
Slide 28 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring getbootstrap.com
Slide 29
Slide 29 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring foundation.zurb.com
Slide 30
Slide 30 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring getskeleton.com
Slide 31
Slide 31 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring mozilla.org/en-US/developer/css-grid/
Slide 32
Slide 32 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 33
Slide 33 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 34
Slide 34 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
COLOR
Slide 35
Slide 35 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Color hints:
Keep your colors complementary.
Slide 36
Slide 36 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Color hints:
Keep your colors complementary.
Slide 37
Slide 37 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 38
Slide 38 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 39
Slide 39 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 40
Slide 40 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Color hints:
Keep your colors complementary.
Use mostly neutrals + one brighter
color for important bits.
Slide 41
Slide 41 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
Slide 42
Slide 42 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Shortcut:
Use color palette websites!
Slide 43
Slide 43 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring color.adobe.com
Slide 44
Slide 44 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring material.io
Slide 45
Slide 45 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
colormind.io
#talkpay
colormind.io
Slide 46
Slide 46 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 47
Slide 47 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 48
Slide 48 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
TYPOGRAPHY
Slide 49
Slide 49 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Keep the number of fonts low — two
different fonts is usually a good rule of
thumb.
Slide 50
Slide 50 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 51
Slide 51 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 52
Slide 52 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 53
Slide 53 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Keep the number of fonts low — two
different fonts is usually a good rule of
thumb.
Use fancy/display fonts sparingly —
can be very cluttery.
Slide 54
Slide 54 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 55
Slide 55 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Keep the number of fonts low — two
different fonts is usually a good rule of
thumb.
Use fancy/display fonts sparingly —
can be very cluttery.
Vary weights (bold), style (italics),
and transforms (uppercase, etc.)
to differentiate bits.
Slide 56
Slide 56 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Shortcut:
Use curated font websites!
Slide 57
Slide 57 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/
Slide 58
Slide 58 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
http://hellohappy.org/beautiful-web-type/
Slide 59
Slide 59 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring fontpair.co
Slide 60
Slide 60 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring fontpair.co
Slide 61
Slide 61 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 62
Slide 62 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 63
Slide 63 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
WHITE
SPACE
Slide 64
Slide 64 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
The ultimate clutter
reducer
Slide 65
Slide 65 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 66
Slide 66 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 67
Slide 67 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 68
Slide 68 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 69
Slide 69 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 70
Slide 70 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 71
Slide 71 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
White space makes a website feel
more professional and
luxurious.
Slide 72
Slide 72 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 73
Slide 73 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 74
Slide 74 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
White space makes your
website easier to use —
affecting your bottom line.
Slide 75
Slide 75 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
“By replacing the extra links around the Add to Cart buttons with whitespace, Xerox
saw a 20% improvement in engagement, 5% boost in products added to cart, and
a 33% improvement in customers continuing through purchase.”
https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/
Slide 76
Slide 76 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 77
Slide 77 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 78
Slide 78 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Reduce visual clutter, by keeping the
number of fonts and colors low, add
white space, and line things up.
Aim for a “clean” design.
Slide 79
Slide 79 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
USER
EXPERIENCE
Slide 80
Slide 80 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
What’s the most important
action on your design?
Make it easy to find and use.
Slide 81
Slide 81 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
Slide 82
Slide 82 text
CO DE EURO PE
T RAC Y O S B OR N @limedaring
vs
sign up
email address
I believe folks who know a bit
about design will be more
likely to hire a professional
designer when the time is
right. I’m a designer, and
even I hire designers for
things bigger than me. And if
you agree, you should join
my newsletter.
I believe folks who know a bit
about design will be more
likely to hire a professional
designer when the time is
right. I’m a designer, and
even I hire designers for
things bigger than me.
If you agree, you should
join my newsletter.
Slide 83
Slide 83 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 84
Slide 84 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 85
Slide 85 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 86
Slide 86 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Pay attention to your goals.
Make them easy to find and use.
Slide 87
Slide 87 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
This is where you
should pay attention to
data and analytics.
Slide 88
Slide 88 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
CONTENT
Slide 89
Slide 89 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Content hints:
• Less is more.
Slide 90
Slide 90 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Please note that although
Chrome is supported for both
Mac and Windows operating
systems, it is recommended
that all users of this site switch
to the most up-to-date version
of the Firefox web browser for
the best possible results.
Slide 91
Slide 91 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
For best results, use the
latest version of Firefox.
Chrome for Mac and
Windows is also
supported.
Please note that although
Chrome is supported for both
Mac and Windows operating
systems, it is recommended
that all users of this site switch
to the most up-to-date version
of the Firefox web browser for
the best possible results.
Slide 92
Slide 92 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Content hints:
• Less is more.
• Big paragraphs are a sign of clutter.
Slide 93
Slide 93 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Content hints:
• Less is more.
• Big paragraphs are a sign of clutter.
• Break into bullets if you can.
Slide 94
Slide 94 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We made a bunch of changes: The
registration chapter has been split
in two, between adding
registration and then associating
users with objects. The chapter
was giant before so this makes it
more manageable. Screenshots of
the admin have been updated to
reflect the new Django 1.9 styles.
The few minor typos have been
fixed. Updated the version of
django-registration-redux that we
use to 1.3. Last but not least, the
Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two, between
adding registration and then
associating users with objects.
The chapter was giant before so
this makes it more manageable.
• Screenshots of the admin have
been updated to reflect the new
Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.
Slide 95
Slide 95 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We made a bunch of changes:
• The registration chapter has
been split in two, between
adding registration and then
associating users with objects.
The chapter was giant before
so this makes it more
manageable.
• Screenshots of the admin have
been updated to reflect the
new Django 1.9 styles.
• The few minor typos have
been fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two, between
adding registration and then
associating users with objects.
The chapter was giant before so
this makes it more manageable.
• Screenshots of the admin have
been updated to reflect the
new Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.
Slide 96
Slide 96 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
We made a bunch of changes:
• The registration chapter has been split in
two, between adding registration and then
associating users with objects. The chapter
was giant before so this makes it more
manageable.
• Screenshots of the admin have been
updated to reflect the new Django 1.9 styles.
• The few minor typos have been fixed.
• Updated the version of django-registration-
redux that we use to 1.3.
• Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two, between adding
registration and then associating
users with objects. The chapter
was giant before so this makes it
more manageable.
• Screenshots of the admin have
been updated to reflect the new
Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use to
1.3.
• Introduction has been updated.
Slide 97
Slide 97 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Headlines hints:
• Keep them succinct.
• Use natural, friendly language.
• Talk benefits, not details.
Slide 98
Slide 98 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 99
Slide 99 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 100
Slide 100 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 101
Slide 101 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 102
Slide 102 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 103
Slide 103 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
IMAGES &
IMAGERY
Slide 104
Slide 104 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Images:
• Stock photos usually look like stock photos. Be
careful what you pick.
• You can accomplish a lot with just type and
screenshots.
• Remember to pay attention to file size.
• Don’t forget retina-quality images.
Slide 105
Slide 105 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 106
Slide 106 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
unsplash.com
unsplash.com
Slide 107
Slide 107 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
photopin.com
photopin.com
Slide 108
Slide 108 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring fiverr.com
Slide 109
Slide 109 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 110
Slide 110 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 111
Slide 111 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 112
Slide 112 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 113
Slide 113 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 114
Slide 114 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 115
Slide 115 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
ON THE
IMPORTANCE
OF IMITATION
Slide 116
Slide 116 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Great designers steal
(and use shortcuts)
#talkpay
Slide 117
Slide 117 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Great designers steal
(and use shortcuts)
#talkpay
Slide 118
Slide 118 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 119
Slide 119 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 120
Slide 120 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 121
Slide 121 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 122
Slide 122 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 123
Slide 123 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 124
Slide 124 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 125
Slide 125 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
THE DESIGN
PROCESS
Slide 126
Slide 126 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
1.
Collect inspiration and
sketch ideas.
Slide 127
Slide 127 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 128
Slide 128 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 129
Slide 129 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 130
Slide 130 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 131
Slide 131 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 132
Slide 132 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 133
Slide 133 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
2.
Mock it up?
Slide 134
Slide 134 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 135
Slide 135 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 136
Slide 136 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
3.
Build it.
Slide 137
Slide 137 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 138
Slide 138 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
My thought process, every time:
Slide 139
Slide 139 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
My thought process, every time:
“crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap
… yes!”
Slide 140
Slide 140 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
This is only the
starting point!
Slide 141
Slide 141 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Reduce visual clutter:
Keep the number of fonts and colors low.
Add white space.
Line things up.
Keep content short and easy to skim.
Slide 142
Slide 142 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Make sure your goal is easy to
find and use.
Slide 143
Slide 143 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Keep your content simple,
friendly, and to the point.
Slide 144
Slide 144 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Practice, practice, practice.
Slide 145
Slide 145 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
tinyurl.com/hellowebdesign
#talkpay
Slide 146
Slide 146 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Slide 147
Slide 147 text
BEYON D TELLERA ND
T RAC Y O S B OR N @limedaring
Thank you! Chat with me online:
@limedaring