Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design by the Numbers

Sacha Greif
October 04, 2011

Design by the Numbers

Sacha Greif

October 04, 2011
Tweet

More Decks by Sacha Greif

Other Decks in Design

Transcript

  1. Design
    by the
    numbers
    @SachaGreif

    View full-size slide

  2. font-size
    px
    16

    View full-size slide

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

    View full-size slide

  4. line-height
    1.5

    View full-size slide

  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

    View full-size slide

  6. 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.

    View full-size slide

  7. words per line
    12

    View full-size slide

  8. 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

    View full-size slide

  9. menu elements
    6

    View full-size slide

  10. 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.

    View full-size slide

  11. number of columns
    12

    View full-size slide

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

    View full-size slide

  13. page width
    px
    960

    View full-size slide

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

    View full-size slide

  15. number of clicks
    3

    View full-size slide

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

    View full-size slide

  17. touch target
    px
    44

    View full-size slide

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

    View full-size slide

  19. golden ratio
    1.618033988

    View full-size slide

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

    View full-size slide

  21. @SachaGreif
    7H3 3ND

    View full-size slide