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

The Grid & Typography for Developers

The Grid & Typography for Developers

A quick primer on design principals needed to design and develop advanced web applications. The talk will provide insight and resources into, creating and using a grid, web typography, and how mastering such fundamentals can improve your application's usability and user experience.

thoughtmerchant

July 10, 2012
Tweet

More Decks by thoughtmerchant

Other Decks in Design

Transcript

  1. View Slide

  2. Thought Merchants
    Principal
    UX / UI / Designer
    GORUCO Organizer
    Agile UX Organizer

    View Slide

  3. I hate design bullshit.

    View Slide

  4. Do you have these problems?
    Columns don’t line up
    Users do not know where to look
    Everything is different sizes
    Looks like shit

    View Slide

  5. Design fundamentals:
    The Grid
    Typography

    View Slide

  6. Everyone that wants to win uses a grid!

    View Slide

  7. MEET YOUR GRID SYSTEMS

    View Slide

  8. 960.gs

    View Slide

  9. Let’s go over the basics:

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. Does your web app look like?
    or

    View Slide

  16. mmmhmmm...I thought so...

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. “Berry Special”
    aka the last grid you will ever need...
    Grid 960 16 column grid

    View Slide

  22. How do I create a grid?

    View Slide

  23. SOME OLD HEADS HAVE
    ALREADY DONE THAT

    View Slide

  24. A GRID BASED OFF OF
    TYPOGRAPHY!

    View Slide

  25. TYPE BASICS
    LINE-HEIGHT: 20PX / FONT-SIZE: 14PX
    EACH BOX IS 20PX BY 20PX

    View Slide

  26. LET’S GET SOME TYPE
    IN THERE

    View Slide

  27. BACK TO SQUARE ONE!
    16 COLUMN GRID

    View Slide

  28. http://www.fontshop.com/glossary/

    View Slide

  29. “Berry Special”
    For typography!
    font-size: 14px
    line-height: 20px

    View Slide

  30. View Slide

  31. What about margin and padding?

    View Slide

  32. HEADING SIZES?
    Body copy * 1.618
    14, 22, 34, 58

    View Slide

  33. LINE-HEIGHT
    font-size: 14, 22, 34, 58
    line-height: 20, 25, 40, 60
    General Rule: line-height is
    120% of font-size.

    View Slide

  34. TYPOGRAPHIC “ISSUES”
    Pro-tips against
    anti-patterns

    View Slide

  35. OPTIMAL LINE LENGTH
    13-20 words
    ~70 characters

    View Slide

  36. View Slide

  37. View Slide

  38. WIDOWS
    THAT

    View Slide

  39. RIVERS
    http://en.wikipedia.org/wiki/River_(typography)

    View Slide

  40. SERIF OR SANS-SERIF?
    Sans-Serif*
    *Unless retina / high DPI
    display, then doesn’t matter
    http://www.useit.com/alertbox/web-typography.html

    View Slide

  41. TYPEKIT?
    Awesome! But slow....
    and worth it.

    View Slide

  42. PARTING WORD
    Use your eyes.
    In the end you need to make
    what looks right.
    - Robert Newman, SCAD Professor

    View Slide

  43. CONTINUED LEARNING
    Books by Kimberly Elam

    View Slide

  44. THANK YOU
    @thoughtmerchant
    [email protected]
    www.thoughtmerchants.com

    View Slide