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

Intro to Design (for Developers)

Intro to Design (for Developers)

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

Andi Graham

June 10, 2015

More Decks by Andi Graham

Other Decks in Programming


  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!

  6. None
  7. None
  8. Let’s get visual with typography.

  9. None
  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.

  14. None
  15. None
  16. None
  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!