Design by the Numbers

To make the readability best possible. Use this to help you out!

Transcript

1. DESIGN by the NUMBERS @jonabaptistella
2. 16 px font-size
3. 12 px font size in a book is equivalent to 16px onscreen.
4. 1.5 line-height
5. 18px font-size * 1.5 = 27px ideal line-height. 18px 27px 40px 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. 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.
6. 2 fonts
7. 2 fonts are more than enough. Just look at this presentation. LOREM IPSUM DOLOR 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. Title Text
8. 12 words per line
9. 10-12 words per line ensures optimal readability. 5 12 17 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, sem- per suscipit, posuere a, pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendiss. Lorem ipsum dolor sit amet, con- sectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
10. 6 menu elements
11. The brain can only process a couple items at the same time. 3 6 9 Home Feature Services FAQ About Blog Contact Sign up Login Home Feature Services About Blog Contact Home About Contact
12. 12 numbers of columns
13. A 12-column grid is very flexible, without being too complex.
14. 960 px page width
15. 960px fits in the widely used 1024px width screen.
16. 3 number of clicks
17. Every page should be accessible within 3 clicks (not actually true). 1 3 6
18. 44 px touch target
19. 44px is the minimum size for a tappable zone on a touchscreen. GOOD BETTER BAD 35px 35px 44px 44px 44px 35px
20. 1.618033988 golden ratio
21. Design is more than just math. Leave the golden ratio to nature.
22. THE END Now have some fun! @jonabaptistella