Pro Yearly is on sale from $80 to $50! »

Design by the Numbers

027d1ebf66cc039a0bd3b55eeadbe75d?s=47 Sacha Greif
October 04, 2011

Design by the Numbers

027d1ebf66cc039a0bd3b55eeadbe75d?s=128

Sacha Greif

October 04, 2011
Tweet

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