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
Some Basics of Design
Search
Gaston
November 30, 2012
1
80
Some Basics of Design
Gaston
November 30, 2012
Tweet
Share
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Making Projects Easy
brettharned
116
6.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Music & Morning Musume
bryan
46
6.6k
Navigating Team Friction
lara
187
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
(Some) Design Basics Thursday, November 29, 12
WARNING I'm just a designer, these are my tools and
work ow. Use what works for you. Thursday, November 29, 12
<RANT> •Design is problem solving not "making it pretty" •Know
your content rst •Always sketch/prototype rst and then build •Less is more Thursday, November 29, 12
“Perfection is achieved, not when there is nothing left to
add, but when there is nothing left to remove.” Antoine de Saint-Exupéry Thursday, November 29, 12
Typography Thursday, November 29, 12
1 Serif + 1 Sans-Serif Thursday, November 29, 12
Sizes, proportions & distances matter Thursday, November 29, 12
RHYTHM •Type size + width + line-height •Find a scale
and stick to for the project •Vertical Rhythm Thursday, November 29, 12
LINE LENGTH “The 66-character line (counting both letters and spaces)
is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” Robert Bringhurst, The Elements of Typographic Style Thursday, November 29, 12
~66 Characters p/ line Thursday, November 29, 12
LINE HEIGHT Thursday, November 29, 12
http://www.gridlover.net/ Thursday, November 29, 12
Vertical Rhythm Thursday, November 29, 12
http://24ways.org/2006/compose-to-a-vertical-rhythm/ Thursday, November 29, 12
TYPOGRAPHY •Proximity •Alignment •Contrast Thursday, November 29, 12
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/ Thursday, November 29, 12
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/ Thursday, November 29, 12
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/ Thursday, November 29, 12
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/ Thursday, November 29, 12
http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/ Thursday, November 29, 12
Color Thursday, November 29, 12
COLOR •Color sets the mood •Don’t over do it Thursday,
November 29, 12
Choose 1 Contrast and 1 Complementary Color Thursday, November 29,
12
http://colorschemedesigner.com/ Thursday, November 29, 12
Layout & UI Thursday, November 29, 12
Use a grid Thursday, November 29, 12
Thursday, November 29, 12
http://960.gs/ Thursday, November 29, 12
GOLDEN RATIO Thursday, November 29, 12
Interactive Thursday, November 29, 12
Wikipedia AFFORDANCES “[Q]uality of an object, or an environment, which
allows an individual to perform an action.” Thursday, November 29, 12
http://paaralan.blogspot.com/2010/09/affordance-and-educational-games.html Thursday, November 29, 12
Make sure people understand what & when to click Thursday,
November 29, 12
FITT’S LAW Time that takes to move to an object
is a function of the target size and distance to it. Thursday, November 29, 12
WHAT’S EASIER? Thursday, November 29, 12
Make click areas bigger Thursday, November 29, 12
HICK’S LAW The time to make decisions increases with the
number of decisions available. Thursday, November 29, 12
O er few choices or only the essential ones Thursday,
November 29, 12
Questions? Thursday, November 29, 12