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

Design by the Numbers

Sacha Greif
October 04, 2011
Design
272
18k

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/

Sacha Greif

October 04, 2011
Tweet

More Decks by Sacha Greif

See All by Sacha Greif
The State of JavaScript 2018
sachag
3
920
Side Projects
sachag
450
39k

Other Decks in Design

See All in Design
終わりなき探究を前提としたデザインモデルの開発 - デュアルサイクルモデルの提案 -
hirokazu_oda
0
290
レガシー産業における顧客理解とデザインの実践 / Customer understanding and design practice in legacy industries
kaminashi
1
920
「機能」に対するデザインと開発の焦点を合わせる
sakito
5
1.7k
デザイントークンの適用率計測とその活用
myoshiro
0
590
業界No.1サービスのUI/UXをリードする新卒1年目デザイナーが直面した壁と乗り越え方
cyberagentdevelopers
PRO
0
940
デスクトップアプリケーションのUIパターン - ウインドウ編（公開版） / UI Patterns of Desktop Applications - Window Layouts
usagimaru
11
5.1k
Tokyu.rb のロゴの話
machida
0
190
「タクティクスオウガ リボーン」に学ぶ、 過去制作物修正における取捨選択
kenjiclown5
0
330
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
sizucca
5
3.5k
UXA2023 Alina Butolina - The Value of Global Inclusive Design Practices
uxevents
PRO
0
140
「ガルパ」における「ユーザーファースト」を尊重したデザインの実践
cyberagentdevelopers
PRO
0
430
代替されない体験を作る エクスペリエンス戦略 -意味・プロンプトデザインとは？-
shoty_k2
5
1.1k

Featured

See All Featured
Bash Introduction
62gerente
603
210k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
5
680
Raft: Consensus for Rubyists
vanstee
130
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.8k
Fireside Chat
paigeccino
18
2.3k
Optimising Largest Contentful Paint
csswizardry
6
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
395
64k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k
Code Reviewing Like a Champion
maltzj
510
38k
Gamification - CAS2011
davidbonilla
75
4.3k
Infographics Made Easy
chrislema
236
17k

Transcript

  1. Design
    by the
    numbers
    @SachaGreif

    View Slide

  2. font-size
    px
    16

    View Slide

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

    View Slide

  4. line-height
    1.5

    View 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 Slide

  6. 2
    fonts

    View Slide

  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.

    View Slide

  8. words per line
    12

    View Slide

  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

    View Slide

  10. menu elements
    6

    View Slide

  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.

    View Slide

  12. number of columns
    12

    View Slide

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

    View Slide

  14. page width
    px
    960

    View Slide

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

    View Slide

  16. number of clicks
    3

    View Slide

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

    View Slide

  18. touch target
    px
    44

    View Slide

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

    View Slide

  20. golden ratio
    1.618033988

    View Slide

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

    View Slide

  22. @SachaGreif
    7H3 3ND

    View Slide