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.

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
    steve@thoughtmerchants.com
    www.thoughtmerchants.com
    

    View Slide