Available to purchase
Symbolicons
Flaticons
www.symbolicons.com
by Jory Raphael
2000+ icons (Available in Solid, Stroke and Color)
www.flaticons.co
by Zach Roszczewski
1200+ icons (Available in Solid and Stroke)
Pictos Redux
www.pictos.cc
by Drew Wilson
825+ icons (Available in Solid, Stroke and Color)
Primaries
www.parakeet.co/primaries
by Louie Mantia
648+ icons (Available in Solid)
Entypo
Material Icons
www.entypo.com
by Daniel Bruce
411 icons (Available in Solid)
www.material.io/icons/
by Google
900 icons (Available in Solid)
Zondicons
www.zondicons.com
by Steve Schoger
271 icons (Available in Solid)
Heroicons UI
www.steveschoger.com
by Steve Schoger
107+ icons (Available in Stroke)
Available for free
Slide 43
Slide 43 text
Available to purchase
Symbolicons
Flaticons
www.symbolicons.com
by Jory Raphael
2000+ icons (Available in Solid, Stroke and Color)
www.flaticons.co
by Zach Roszczewski
1200+ icons (Available in Solid and Stroke)
Pictos Redux
www.pictos.cc
by Drew Wilson
825+ icons (Available in Solid, Stroke and Color)
Primaries
www.parakeet.co/primaries
by Louie Mantia
648+ icons (Available in Solid)
Entypo
Material Icons
www.entypo.com
by Daniel Bruce
411 icons (Available in Solid)
www.flaticons.co
by Google
900 icons (Available in Solid)
Zondicons
www.zondicons.com
by Steve Schoger
271 icons (Available in Solid)
Heroicons UI
www.steveschoger.com
by Steve Schoger
107+ icons (Available in Stroke)
Available for free
Slide 44
Slide 44 text
Fontawesome Fontawesome
Update icons
Slide 45
Slide 45 text
Heroicons UI Heroicons UI
Update icons
Slide 46
Slide 46 text
Detach from notification icons
Make profile picture a dropdown
Slide 47
Slide 47 text
Taylor Otwell
Settings & Privacy
Help Center
Language
Posts & Activity
Job postings
Make profile picture a dropdown
Slide 48
Slide 48 text
padding: 0 2rem;
border-left: 2px solid
Make profile picture a dropdown
Slide 49
Slide 49 text
Make profile picture a dropdown
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Make profile picture a circle
Slide 52
Slide 52 text
border-radius: 15px;
overflow: hidden;
Make profile picture a circle
background-color: hsl(194, 23%, 92%);
Make icons a bit darker
Slide 56
Slide 56 text
Make icons a bit darker
Slide 57
Slide 57 text
Make icons a bit darker
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Activity Panel
Slide 61
Slide 61 text
r
Make profile picture a circle
Slide 62
Slide 62 text
r
Make profile picture a circle
border-radius: 40px;
overflow: hidden;
Slide 63
Slide 63 text
r
Reorganize stats
Slide 64
Slide 64 text
r
Reorganize stats
Slide 65
Slide 65 text
r
Reorganize stats
Slide 66
Slide 66 text
Use font size to emphasis
important information
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
12px 14px 16px 18px 20px 24px 30px 36px 48px
Classic Typographic Scale
Tailwind Default Font Sizing
12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
Slide 69
Slide 69 text
12px 14px 16px 18px 20px 24px 30px 36px 48px
Classic Typographic Scale
Tailwind Default Font Sizing
12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
Slide 70
Slide 70 text
12px 14px 16px 18px 20px 24px 30px 36px 48px 60px 72px
Classic Typographic Scale
Tailwind Default Font Sizing
12px 14px 16px 18px 21px 24px 36px 48px 60px 72px
Slide 71
Slide 71 text
r
Reorganize stats
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
r
Reorganize stats
font-size: 16px;
font-size: 24px;
font-size: 14px;
Slide 74
Slide 74 text
r
Reduce size of username
Slide 75
Slide 75 text
Reduce size of username
r
font-size: 24px;
Slide 76
Slide 76 text
Reduce size of “Welcome Back” text and put it on its own line
r
Slide 77
Slide 77 text
Reduce size of “Welcome Back” text and put it on its own line
r
Slide 78
Slide 78 text
Reduce width of panel
r
Slide 79
Slide 79 text
Reduce width of panel
r
Slide 80
Slide 80 text
Move right side bar up
r
Slide 81
Slide 81 text
Make secondary text lighter
r
Slide 82
Slide 82 text
Make secondary text lighter
r
Slide 83
Slide 83 text
Make secondary text lighter
r
Slide 84
Slide 84 text
Use color to create
hierarchy
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
Taylor Otwell
Creator of Laravel
You must understand more about your customers than your
competitors do in order to build successful brand relationships.
Take a healthy daily dose of Vitamin E(mpathy) and the customers
will respond.
Slide 87
Slide 87 text
Taylor Otwell
Creator of Laravel
You must understand more about your customers than your
competitors do in order to build successful brand relationships.
Take a healthy daily dose of Vitamin E(mpathy) and the customers
will respond.
Primary
Tertiary
Secondary
Slide 88
Slide 88 text
Taylor Otwell
Creator of Laravel
You must understand more about your customers than your
competitors do in order to build successful brand relationships.
Take a healthy daily dose of Vitamin E(mpathy) and the customers
will respond.
Primary
Tertiary
Secondary
Slide 89
Slide 89 text
Make secondary text lighter
r
Slide 90
Slide 90 text
Make secondary text lighter
r
Slide 91
Slide 91 text
Zoom
Slide 92
Slide 92 text
Zoom
Slide 93
Slide 93 text
r
Slide 94
Slide 94 text
Use consistent spacing
r
padding: 24px;
padding: 24px;
padding: 15px;
padding: 28px;
Slide 95
Slide 95 text
Use a consistent
spacing scale
Slide 96
Slide 96 text
Spacing
12px 14px 16px 18px 20px 24px 30px 36px 48px
Font Sizing
12px 16px 20px 30px 48px
6px
Slide 97
Slide 97 text
Spacing
12px 14px 16px 18px 20px 24px 30px 36px 48px
Font Sizing
0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
Slide 98
Slide 98 text
Spacing
12px 14px 16px 18px 20px 24px 30px 36px 48px
Font Sizing
0.375rem 0.75rem 1rem 1.25rem 1.875rem 3rem
Slide 99
Slide 99 text
Use consistent spacing
r
Slide 100
Slide 100 text
Use consistent spacing
r
Slide 101
Slide 101 text
Use color to draw attention
Slide 102
Slide 102 text
Use color to draw
attention
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
hsl(194, 92%, 31%);
Slide 105
Slide 105 text
Change panel background color
Slide 106
Slide 106 text
Change panel background color
Slide 107
Slide 107 text
Invert text colors
Slide 108
Slide 108 text
Invert text colors
r
Slide 109
Slide 109 text
Saturate greys when
using a colored
background
Slide 110
Slide 110 text
COVFEFE
NORMAL
REDUCED CONTRAST
COVFEFE
Slide 111
Slide 111 text
COVFEFE
NORMAL
OPACITY REDUCED 30%
COVFEFE
Slide 112
Slide 112 text
COVFEFE
NORMAL
OPACITY REDUCED 25%
COVFEFE
Slide 113
Slide 113 text
COVFEFE
COVFEFE
NORMAL
HAND PICKED COLOR
Slide 114
Slide 114 text
Saturate grey text
r
color: hsl(0, 0%, 80%);
Slide 115
Slide 115 text
Saturate grey text
r
color: hsl(192, 100%, 92%);
Slide 116
Slide 116 text
Make the increase values white
r
Slide 117
Slide 117 text
Make the increase values white
r
Slide 118
Slide 118 text
Make secondary text bold
r
font-weight: bold;
Slide 119
Slide 119 text
Add subtle text shadow
r
text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.20);
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
Imporve promotion section
r
Slide 123
Slide 123 text
Update premium membership call-to-action text style
r
Slide 124
Slide 124 text
Increase weight and change color of the text link
r
Tailwind is different from frameworks like Bootstrap, Foundation, or
Bulma in that it's not a UI kit.
It doesn't have a default theme, and there are no built-in UI
components.
On the flip side, it also has no opinion about how your site should look
and doesn't impose design decisions that you have to fight to undo
Tailwind is a utility-first CSS framework for
rapidly building custom user interfaces.
A Utility-First CSS Framework
for Rapid UI Development
Large
font-size: 48px;
line-height: 1.125;
Medium
font-size: 24px;
line-height: 1.25;
Small
font-size: 16px;
line-height: 1.5rem
Slide 151
Slide 151 text
Increase line-height of body
r
Slide 152
Slide 152 text
Increase line-height of body
r
line-height: 24px;
Slide 153
Slide 153 text
Review post activity
r
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
Merge actions and stats
r
Slide 156
Slide 156 text
Merge actions and stats
r
Slide 157
Slide 157 text
Remove grey background
r
Slide 158
Slide 158 text
Fix alignment
r
Slide 159
Slide 159 text
Use alignment to clean
up your design
Slide 160
Slide 160 text
Broadcast Announcements
Automations
Send your subscribers one-off broadcasts when
you have time-sensitive content.
Send your subscribers one-off broadcasts when
you have time-sensitive content.
Embeddable Forms
Advanced Reporting
Build beautiful forms that help turn casual
readers into engaged customers.
Build beautiful forms that help turn casual
readers into engaged customers.
Broadcast Announcements
Automations
Send your subscribers one-off broadcasts
when you have time-sensitive content.
Send your subscribers one-off broadcasts
when you have time-sensitive content.
Embeddable Forms
Advanced Reporting
Build beautiful forms that help turn casual
readers into engaged customers.
Build beautiful forms that help turn casual
readers into engaged customers.
Slide 161
Slide 161 text
Fix alignment
r
Slide 162
Slide 162 text
Fix alignment
r
Slide 163
Slide 163 text
Remove top border
r
Slide 164
Slide 164 text
Merge all posts
r
Slide 165
Slide 165 text
Change all blue links
Slide 166
Slide 166 text
New Post
Slide 167
Slide 167 text
New Post
r
Slide 168
Slide 168 text
Update icons
r
Slide 169
Slide 169 text
Change button color
R
Slide 170
Slide 170 text
Give actions hierarchy
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
No content
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
No content
Slide 176
Slide 176 text
Change button color
r
Slide 177
Slide 177 text
Change button color
r
Slide 178
Slide 178 text
Remove news feed title
r
Slide 179
Slide 179 text
Combine New Post and News Feed
r
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
Introduce progressive disclosure
r
Slide 182
Slide 182 text
Introduce progressive disclosure
r
Slide 183
Slide 183 text
Change input background color
r
background-color: hsl(300, 3%, 93%)
Slide 184
Slide 184 text
Focus state
r
Slide 185
Slide 185 text
Remove “New Post” title
r
Slide 186
Slide 186 text
Remove “New Post” title
r
Slide 187
Slide 187 text
r
Slide 188
Slide 188 text
No content
Slide 189
Slide 189 text
Right Side Bar
Slide 190
Slide 190 text
Right side bar
r
Slide 191
Slide 191 text
Make profile pictures circles
r
Slide 192
Slide 192 text
Use consistent spacing
r
Slide 193
Slide 193 text
Update text color
r
Slide 194
Slide 194 text
Update text color
r
Slide 195
Slide 195 text
Remove panel heading background color
Slide 196
Slide 196 text
Remove panel heading background color
r
Slide 197
Slide 197 text
Reduce size of title
r
Slide 198
Slide 198 text
Make button a text link
r
Slide 199
Slide 199 text
Move text link to top right corner of the panel
r
Slide 200
Slide 200 text
Change buttons to icons
r
Slide 201
Slide 201 text
Consider space instead
of borders
Slide 202
Slide 202 text
No content
Slide 203
Slide 203 text
Remove borders
r
Slide 204
Slide 204 text
Remove borders
r
margin-bottom: 20px;
Slide 205
Slide 205 text
Increase spacing
r
margin-bottom: 30px;
Slide 206
Slide 206 text
No content
Slide 207
Slide 207 text
Navigation
Slide 208
Slide 208 text
Navigation
r
Slide 209
Slide 209 text
Update icons
r
Slide 210
Slide 210 text
Lighten icons
r
Slide 211
Slide 211 text
Remove borders
r
Slide 212
Slide 212 text
Reduce space
r
Slide 213
Slide 213 text
Remove container
r
Slide 214
Slide 214 text
Change background color
Slide 215
Slide 215 text
Use color to create
depth and hierarchy
Slide 216
Slide 216 text
Change background color
Slide 217
Slide 217 text
Change background color
Slide 218
Slide 218 text
Divide navigation into groups
\
Slide 219
Slide 219 text
No content
Slide 220
Slide 220 text
Give each group a title
\
Slide 221
Slide 221 text
No content
Slide 222
Slide 222 text
Reduce size of titles and make them uppercase
\
Slide 223
Slide 223 text
Developer
DEVELOPER
Slide 224
Slide 224 text
Developer
DEVELOPER
Slide 225
Slide 225 text
Increase letter-spacing of titles
\
Slide 226
Slide 226 text
Increase letter-spacing of titles
\
Slide 227
Slide 227 text
No content
Slide 228
Slide 228 text
Finishing touches
Slide 229
Slide 229 text
No content
Slide 230
Slide 230 text
HSB Color Picker
Slide 231
Slide 231 text
HSL Color Picker
Slide 232
Slide 232 text
No content
Slide 233
Slide 233 text
No content
Slide 234
Slide 234 text
Consider temperature
when saturating greys
Slide 235
Slide 235 text
No content
Slide 236
Slide 236 text
No content
Slide 237
Slide 237 text
No content
Slide 238
Slide 238 text
Use good fonts
Slide 239
Slide 239 text
No content
Slide 240
Slide 240 text
No content
Slide 241
Slide 241 text
No content
Slide 242
Slide 242 text
No content
Slide 243
Slide 243 text
Great Typekit Fonts for UI’s
Proxima Nova
Acumin Pro
Aktiv Grotesk
Museo Sans
The best kind of originality is that which comes after a
sound apprenticeship, that which shall prove to be the
blending of a firm conception of useful precedent and
the progressive tendencies of an able mind.
The best kind of originality is that which comes after
a sound apprenticeship, that which shall prove to be
the blending of a firm conception of useful
precedent and the progressive tendencies of an able
mind.
The best kind of originality is that which comes after a
sound apprenticeship, that which shall prove to be the
blending of a firm conception of useful precedent and
the progressive tendencies of an able mind.
The best kind of originality is that which comes after
a sound apprenticeship, that which shall prove to be
the blending of a firm conception of useful
precedent and the progressive tendencies of an able
mind.
Slide 244
Slide 244 text
Great Typekit Fonts for UI’s
Proxima Nova
Acumin Pro
Aktiv Grotesk
Museo Sans
The best kind of originality is that which comes after a
sound apprenticeship, that which shall prove to be the
blending of a firm conception of useful precedent and
the progressive tendencies of an able mind.
The best kind of originality is that which comes after
a sound apprenticeship, that which shall prove to be
the blending of a firm conception of useful
precedent and the progressive tendencies of an able
mind.
The best kind of originality is that which comes after a
sound apprenticeship, that which shall prove to be the
blending of a firm conception of useful precedent and
the progressive tendencies of an able mind.
The best kind of originality is that which comes after
a sound apprenticeship, that which shall prove to be
the blending of a firm conception of useful
precedent and the progressive tendencies of an able
mind.
Slide 245
Slide 245 text
No content
Slide 246
Slide 246 text
No content
Slide 247
Slide 247 text
No content
Slide 248
Slide 248 text
No content
Slide 249
Slide 249 text
Add a bit of color to your greys
Use a consistent corner radius
Use a consistent icon set
Use font size to emphasis important
information
Use color to create a hierarchy
Use a consistent spacing scale
Use color to draw attention
Saturate greys when using a colored
background
Offset box-shadows
Easy on the link styles
Use contrast to create balance
Pick an appropriate line height
Use alignment to clean up your design
Give actions hierarchy
Consider space instead of borders
Use color to create depth and hierarchy
Consider temperature when saturating greys
Use good fonts
UI Design Checklist