Design by the Numbers

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