Intro to Design (for Developers)

Presented to each cohort of developers enrolled at The Iron Yard - St. Petersburg.

Transcript

1. I’m Andi from Big Sea. @andigrahambsd @bigsea HI THERE.
2. What’s all this about design?
3. Good design is …
4. User Interface Design (UI) vs. User Experience Design (UX)
5. First things first: prototypes!
8. Let’s get visual with typography.
10. IFontYou.com Font Pairs
11. • Chunk content with headers, small paragraphs, bulleted lists, sidebars, indenting an entire a paragraph of text, or pull quotes • Limit line length to 350–550 pixels by splitting wide pages into two or more columns • Increase leading (line-height) to improve readability on longer lines of text and to lighten the overall “color” of a page • Use a non-decorative, screen-optimized typeface at a legible size for body copy • Set body copy as justified left, ragged right
12. Web typography checklist: www.merttol.com/articles/web/checklist-for-better-web-typography.html
13. And then there’s color.
17. Let’s put it all together. visual hierarchy
18. Visual Weight
19. Designing for action.
20. The Usage Lifecycle
21. Design for the next step. • Clearly communicate the current step. • Clearly communicate the next step. • Clearly communicate how to get there.
22. Design with purpose.
23. Resources! Hack Design: hackdesign.org IxDA: ixda.org I Font You: ifontyou.com/ Colour Lovers: colourlovers.com Pictaculous: pictaculous.com/ Moqups: moqups.com Smashing Magazine: smashingmagazine.com 52 Weeks of UX: 52weeksofux.com/
24. Thanks!