Design by the Numbers

A very short presentation exploring the various numbers involved in designing for the web.

If you liked it, follow me on Twitter! http://twitter.com/SachaGreif

Sources:
http://www.informationarchitects.jp/en/100e2r/
http://www.maxdesign.com.au/articles/em/
http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
http://en.wikipedia.org/wiki/Three-click_rule
http://answers.oreilly.com/topic/1691-what-is-the-optimal-size-of-an-iphone-touch-target/

Update: turns out the 3-click rule is a myth:
http://www.uie.com/articles/three_click_rule/

Transcript

1. Design by the numbers @SachaGreif
2. font-size px 16
3. 12pt font size in a book is equivalent to 16px onscreen.
4. line-height 1.5
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. 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
6. 2 fonts
7. 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, posu- ere 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.
8. words per line 12
9. Lorem ipsum dolor sit amet, con- sectetuer 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
10. menu elements 6
11. 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.
12. number of columns 12
13. A 12-column grid is very flexible, without being too complex.
14. page width px 960
15. 960px fits in a 1024px screen, and is used by a lot of frameworks.
16. number of clicks 3
17. Every page should be accessible within 3 clicks (not actually true).
18. touch target px 44
19. good better bad 44px is the minimum size for a tappable zone on a touchscreen 44px 35px 35px 35px 44px 44px
20. golden ratio 1.618033988
21. Design is more than just math. Leave the golden ratio to sunflowers.
22. @SachaGreif 7H3 3ND