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

2. Thought Merchants Principal UX / UI / Designer GORUCO Organizer Agile UX Organizer
3. I hate design bullshit.
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
5. Design fundamentals: The Grid Typography
6. Everyone that wants to win uses a grid!
7. MEET YOUR GRID SYSTEMS
8. 960.gs
9. Let’s go over the basics:
15. Does your web app look like? or
16. mmmhmmm...I thought so...
21. “Berry Special” aka the last grid you will ever need... Grid 960 16 column grid
22. How do I create a grid?
23. SOME OLD HEADS HAVE ALREADY DONE THAT
24. A GRID BASED OFF OF TYPOGRAPHY!
25. TYPE BASICS LINE-HEIGHT: 20PX / FONT-SIZE: 14PX EACH BOX IS 20PX BY 20PX
26. LET’S GET SOME TYPE IN THERE
27. BACK TO SQUARE ONE! 16 COLUMN GRID
28. http://www.fontshop.com/glossary/
29. “Berry Special” For typography! font-size: 14px line-height: 20px
31. What about margin and padding?
32. HEADING SIZES? Body copy * 1.618 14, 22, 34, 58
33. LINE-HEIGHT font-size: 14, 22, 34, 58 line-height: 20, 25, 40, 60 General Rule: line-height is 120% of font-size.
34. TYPOGRAPHIC “ISSUES” Pro-tips against anti-patterns
35. OPTIMAL LINE LENGTH 13-20 words ~70 characters
38. WIDOWS THAT
39. RIVERS http://en.wikipedia.org/wiki/River_(typography)
40. SERIF OR SANS-SERIF? Sans-Serif* *Unless retina / high DPI display, then doesn’t matter http://www.useit.com/alertbox/web-typography.html
41. TYPEKIT? Awesome! But slow.... and worth it.
42. PARTING WORD Use your eyes. In the end you need to make what looks right. - Robert Newman, SCAD Professor
43. CONTINUED LEARNING Books by Kimberly Elam
44. THANK YOU @thoughtmerchant steve@thoughtmerchants.com www.thoughtmerchants.com