Design by the Numbers - Speaker Deck

Slide 1

Slide 1 text

Design by the numbers @SachaGreif

Slide 2

Slide 2 text

font-size px 16

Slide 3

Slide 3 text

12pt font size in a book is equivalent to 16px onscreen.

Slide 4

Slide 4 text

line-height 1.5

Slide 5

Slide 5 text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 18px Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 27px Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 40px 18px font-size * 1.5 = 27px ideal line-height

Slide 6

Slide 6 text

2 fonts

Slide 7

Slide 7 text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor Title Text 2 fonts are more than enough. Just look at this presentation.

Slide 8

Slide 8 text

words per line 12

Slide 9

Slide 9 text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. 5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Sus- 12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. 17 10-12 words per line ensures optimal readability

Slide 10

Slide 10 text

menu elements 6

Slide 11

Slide 11 text

Features Services Contact 3 Features Services About Contact Sign Up Log In 6 Home Features Services FAQ About Blog Contact Sign Up Log In 9 The brain can only process a couple items at the same time.

Slide 12

Slide 12 text

number of columns 12

Slide 13

Slide 13 text

A 12-column grid is very flexible, without being too complex.

Slide 14

Slide 14 text

page width px 960

Slide 15

Slide 15 text

960px fits in a 1024px screen, and is used by a lot of frameworks.

Slide 16

Slide 16 text

number of clicks 3

Slide 17

Slide 17 text

Every page should be accessible within 3 clicks (not actually true).

Slide 18

Slide 18 text

touch target px 44

Slide 19

Slide 19 text

good better bad 44px is the minimum size for a tappable zone on a touchscreen 44px 35px 35px 35px 44px 44px

Slide 20

Slide 20 text

golden ratio 1.618033988

Slide 21

Slide 21 text

Design is more than just math. Leave the golden ratio to sunflowers.

Slide 22

Slide 22 text

@SachaGreif 7H3 3ND