Slide 1
Slide 1 text
Good
Design
Slide 2
Slide 2 text
Mel Choyce
Senior Product Designer at Automattic
choycedesign.com @melchoyce
Slide 3
Slide 3 text
What is design?
Slide 4
Slide 4 text
– Sir George Cox
Creativity deployed to
a specific end.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
– Steve Jobs
Design is not just what it
looks like and feels like.
Design is how it works.
Slide 8
Slide 8 text
What makes
design good?
Slide 9
Slide 9 text
– Justice Potter Stewart
I know it when I see it.
Slide 10
Slide 10 text
Source: Vitsoe at English Wikipedia CC BY-SA 3.0, via Wikimedia Commons
Slide 11
Slide 11 text
10 Principles
of Good Design
Slide 12
Slide 12 text
Innovative
Principles of Good Design #1
Slide 13
Slide 13 text
Attractive
Principles of Good Design #2
Slide 14
Slide 14 text
Useful
Principles of Good Design #3
Slide 15
Slide 15 text
Understand-
able
Principles of Good Design #4
;)
Slide 16
Slide 16 text
Unobtrusive
Principles of Good Design #5
Slide 17
Slide 17 text
Honest
Principles of Good Design #6
Slide 18
Slide 18 text
Durable
Principles of Good Design #7
Slide 19
Slide 19 text
Thorough
Principles of Good Design #8
Slide 20
Slide 20 text
Eco-Friendly
Principles of Good Design #9
Slide 21
Slide 21 text
Little Design
as Possible
Principles of Good Design #10
Slide 22
Slide 22 text
What does good
design look like?
Slide 23
Slide 23 text
Grids &
Alignment
Slide 24
Slide 24 text
DIGITAL CONTENT MANAGEMENT
Writing, Literature & Publishing
Advance your career with our online
Digital Content Management
graduate certificate. You’ll learn
what it takes to successfully create,
analyze, and manage content for
companies of any scale, from small
startups to established
corporations. Our 16-credit
certificate program is designed to
help professionals looking to learn
new skills to stay competitive in
content creation and strategy in
today’s market.
REQUIRED COURSES
• Metadata
• Fundamentals Of Content Strategy
• Electronic Publishing Overview
• Elective
TURN YOUR CERTIFICATE INTO A
MASTER'S DEGREE
The Electronic Publishing Overview
course would count as one of the core
requirements for the MA in Publishing and
Writing, and will be offered every
semester.
All other classes count as electives for the
current MA program and are offered
every other semester.
Slide 25
Slide 25 text
DIGITAL CONTENT MANAGEMENT
Writing, Literature & Publishing
Advance your career with our online
Digital Content Management
graduate certificate. You’ll learn
what it takes to successfully create,
analyze, and manage content for
companies of any scale, from small
startups to established
corporations. Our 16-credit
certificate program is designed to
help professionals looking to learn
new skills to stay competitive in
content creation and strategy in
today’s market.
REQUIRED COURSES
• Metadata
• Fundamentals Of Content Strategy
• Electronic Publishing Overview
• Elective
TURN YOUR CERTIFICATE INTO A
MASTER'S DEGREE
The Electronic Publishing Overview
course would count as one of the core
requirements for the MA in Publishing and
Writing, and will be offered every
semester.
All other classes count as electives for the
current MA program and are offered
every other semester.
Slide 26
Slide 26 text
DIGITAL CONTENT MANAGEMENT
Writing, Literature & Publishing
REQUIRED COURSES
• Metadata
• Fundamentals Of Content Strategy
• Electronic Publishing Overview
• Elective
TURN YOUR CERTIFICATE INTO A
MASTER'S DEGREE
The Electronic Publishing Overview
course would count as one of the core
requirements for the MA in Publishing and
Writing, and will be offered every
semester.
All other classes count as electives for the
current MA program and are offered
every other semester.
Advance your career with our
online Digital Content
Management graduate certificate.
You’ll learn what it takes to
successfully create, analyze, and
manage content for companies of
any scale, from small startups to
established corporations. Our 16-
credit certificate program is
designed to help professionals
looking to learn new skills to stay
competitive in content creation
and strategy in today’s market.
Slide 27
Slide 27 text
DIGITAL CONTENT MANAGEMENT
Writing, Literature & Publishing
Advance your career with our
online Digital Content
Management graduate certificate.
You’ll learn what it takes to
successfully create, analyze, and
manage content for companies of
any scale, from small startups to
established corporations. Our 16-
credit certificate program is
designed to help professionals
looking to learn new skills to stay
competitive in content creation
and strategy in today’s market.
REQUIRED COURSES
• Metadata
• Fundamentals Of Content Strategy
• Electronic Publishing Overview
• Elective
TURN YOUR CERTIFICATE INTO A
MASTER'S DEGREE
The Electronic Publishing Overview
course would count as one of the core
requirements for the MA in Publishing and
Writing, and will be offered every
semester.
All other classes count as electives for the
current MA program and are offered
every other semester.
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
White Space
Slide 32
Slide 32 text
Guides the eye
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Typography
Slide 36
Slide 36 text
– Oliver Reichenstein, The Web is All About Typography. Period.
Web Design is 95%
Typography.
Slide 37
Slide 37 text
Choosing fonts
Slide 38
Slide 38 text
Tone
Slide 39
Slide 39 text
Legibility
Slide 40
Slide 40 text
Steal Pairings
Slide 41
Slide 41 text
Size
Slide 42
Slide 42 text
16-22px
body fonts
Slide 43
Slide 43 text
Line-height
Slide 44
Slide 44 text
1.4-1.6
× font-size
Slide 45
Slide 45 text
WordPress started in 2003 with a single bit of code to enhance the
typography of everyday writing and with fewer users than you can
count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of
sites and seen by tens of millions of people every day.
WordPress started in 2003 with a single bit of code to enhance the
typography of everyday writing and with fewer users than you can
count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of
sites and seen by tens of millions of people every day.
Slide 46
Slide 46 text
WordPress started in 2003 with a single bit of code to enhance the
typography of everyday writing and with fewer users than you can
count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of
sites and seen by tens of millions of people every day.
WordPress started in 2003 with a single bit of code to enhance the
typography of everyday writing and with fewer users than you can
count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of
sites and seen by tens of millions of people every day.
Slide 47
Slide 47 text
Line-length
Slide 48
Slide 48 text
50-75
characters per line
Slide 49
Slide 49 text
WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing
and with fewer users than you can count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions
of people every day.
Everything you see here, from the documentation to the code itself, was created by and for the
community. WordPress is an Open Source project, which means there are hundreds of people all
over the world working on it. (More than most commercial platforms.) It also means you are free to
use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license
fee and a number of other important freedoms.
About WordPress.org
On this site you can download and install a software script called WordPress. To do this you need a
web host who meets the minimum requirements and a little time. WordPress is completely
customizable and can be used for almost anything. There is also a service called WordPress.com
which lets you get started with a new and free WordPress-based blog in seconds, but varies in
several ways and is less flexible than the WordPress you download and install yourself.
What You Can Use WordPress For
WordPress started as just a blogging system, but has evolved to be used as full content
management system and so much more through the thousands of plugins and widgets and themes,
WordPress is limited only by your imagination. (And tech chops.)
Connect with the Community
In addition to online resources like the forums and mailing lists a great way to get involved with
Slide 50
Slide 50 text
WordPress started in 2003 with a single bit of code to enhance the
typography of everyday writing and with fewer users than you can
count on your fingers and toes. Since then it has grown to be the
largest self-hosted blogging tool in the world, used on millions of
sites and seen by tens of millions of people every day.
Everything you see here, from the documentation to the code itself,
was created by and for the community. WordPress is an Open Source
project, which means there are hundreds of people all over the world
working on it. (More than most commercial platforms.) It also means
you are free to use it for anything from your recipe site to a Fortune
500 web site without paying anyone a license fee and a number of
other important freedoms.
About WordPress.org
On this site you can download and install a software script called
WordPress. To do this you need a web host who meets the minimum
requirements and a little time. WordPress is completely
customizable and can be used for almost anything. There is also a
service called WordPress.com which lets you get started with a new
and free WordPress-based blog in seconds, but varies in several
ways and is less flexible than the WordPress you download and
install yourself.
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Color
Slide 55
Slide 55 text
Color increases brand
recognition by up to
80 percent.
http://loyaltysquare.com/impact_of_color.php
Impact of Color
Slide 56
Slide 56 text
Making a Palette
Slide 57
Slide 57 text
What emotions do you
want associated with
your design?
Slide 58
Slide 58 text
Balance your colors
Slide 59
Slide 59 text
Don’t use black
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Hierarchy
Slide 63
Slide 63 text
– Brandon Jones, Understanding Visual Hierarchy in Web Design
Good visual hierarchy isn’t
about wild and crazy graphics
or the newest photoshop filters,
it’s about organizing
information in a way that’s
usable, accessible, and logical
to the everyday site visitor.
Slide 64
Slide 64 text
Defines your site in
order of importance
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
What are some
industry trends?
Slide 68
Slide 68 text
Trends are just tools.
⛏
Slide 69
Slide 69 text
Immersive
Experiences
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Design that
looks like print
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Illustration
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
3D and
Dimension
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
Vivid Colors
and Gradients
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Shapes and
Geometry
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
Texture and
Patterns
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
How to put this
all together?
Slide 112
Slide 112 text
Design
Systems
Slide 113
Slide 113 text
– InVision Design Systems Handbook
A design system is a
collection of reusable
components, guided by clear
standards, that can be
assembled together to build
any number of applications.
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
Why use a
design system?
Slide 118
Slide 118 text
– John Maeda, #DesignInTech newsletter
When a technology matures, design
moves to the foreground because the
underlying machinery has been
commoditized. We're living in an era
where there's massive design debt all
over the tech industry, but there aren't
enough computational designers
available to fill the gaps.
Slide 119
Slide 119 text
Common visual
language
Slide 120
Slide 120 text
Standardized
components
Slide 121
Slide 121 text
Design faster
Slide 122
Slide 122 text
Improves
development
workflow
Slide 123
Slide 123 text
Unified across
products, devices,
and all branding
elements
Slide 124
Slide 124 text
Examples
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
More
Examples
https://www.invisionapp.com/inside-
design/guide-to-design-systems
https://www.designsystems.com
https://designsystemsrepo.com
Slide 134
Slide 134 text
Thank you!
choycedesign.com @melchoyce
https://choycedesign.com/emerson-resources/