Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design 101: Tips & Tricks
Search
Aly Fluckey
November 04, 2015
Design
0
180
Design 101: Tips & Tricks
Aly Fluckey
November 04, 2015
Tweet
Share
More Decks by Aly Fluckey
See All by Aly Fluckey
Delightful Stylesheets - That Conference
wtfluckey
0
83
Delightful Stylesheets
wtfluckey
0
84
Design Stuffs
wtfluckey
0
220
Risk & Happiness
wtfluckey
0
140
Neo Apprentices
wtfluckey
0
83
Other Decks in Design
See All in Design
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
How to get a Tiger to Tulsa
mcduckyart
0
110
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
AI時代に淘汰されないデザインのしごと
akinen
1
140
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
オープンデータを利用して色々なものを作った話
hjmkth
1
110
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
Haley's adventure chase
ivettetwin
0
230
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
130
問いの変遷
iflection
0
160
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
430
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Writing Fast Ruby
sferik
628
62k
Done Done
chrislema
184
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
Faster Mobile Websites
deanohume
307
31k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Gamification - CAS2011
davidbonilla
81
5.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
DESIGN 101 WITH ALY FLUCKEY
1. PLAN AT LEAST A LITTLE BIT
INTENT
INTENT CONTENT
None
INTENT CONTENT HIERARCHY
SOME WAYS TO HELP ESTABLISH HIERARCHY > color & contrast
> size > alignment > repetition > whitespace
SKETCH
1. PLAN AT LEAST A LITTLE BIT 2. ITERATE A
LOT
COLOR
the basics
primary red, blue and yellow
secondary green, purple and orange
tertiary basically all other colors
warm family
cool family
None
EMOTIONS
CHOOSING A COLOR SCHEME
TYPE
None
None
None
None
SO WHICH ONE DO I USE?
ONE SIZE DOES NOT FIT ALL BUT HERE ARE SOME
SUGGESTIONS
> Don't use more than 3 fonts on a single
page
> Don't switch fonts mid-sentence unless you have a very
good reason
> Use sans-serif fonts for online body text and serif
fonts for headlines and print
> Use monospace fonts for typewriter text and code blocks
def like_this puts 'I am code' end
> Use script and fantasy fonts for accents
FINDING THE PERFECT FONT
FONT FAMILIES
FONT ICONS
RESPONSIVE DESIGN
@media screen and (max-width: 1280px) { .desktop-to-tablet-class { width: 75%;
margin: auto; } } @media screen and (max-width: 768px) { .tablet-to-mobile-class { width: 85%; margin: auto; } } @media screen and (max-width: 320px) { .mobile-and-below-class { width: 100%; } }
USE RELATIVE UNITS
THE INSPECTOR YOUR BEST FRIEND
CSS ANIMATIONS
1. PLAN AT LEAST A LITTLE BIT 2. ITERATE A
LOT 3. PROFIT $$$$$$$$
THANK YOU!