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

Design for Non-Designers: Self Conference

Tracy Osborn
May 20, 2016
100

Design for Non-Designers: Self Conference

Tracy Osborn

May 20, 2016
Tweet

Transcript

  1. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces.
  2. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling)
  3. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  4. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring image credit: Dan Saffer
  5. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Design: Making an interface that 
 works well.
  6. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  7. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  8. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  9. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring How can we create effective, basic designs?
  10. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Let’s talk about clutter
  11. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  12. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Fastest way for better looking designs: Cut down on clutter.
  13. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring grid
  14. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Line things up — pixel differences are definitely unconsciously noticed.

  15. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring color
  16. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  17. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  18. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring fonts
  19. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb. Use fancy/display fonts sparingly — very cluttery. Vary weights (bold), style (italics), and transforms (uppercase, etc.) to differentiate bits.
  20. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  21. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring http://hellohappy.org/beautiful-web-type/
  22. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring white space
  23. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring The ultimate clutter reducer
  24. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring “By replacing the extra links around the Add to Cart buttons with whitespace, Xerox saw a 20% improvement in engagement, 5% boost in products added to cart, and a 33% improvement in customers continuing through purchase.” https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/
  25. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and line things up. Aim for a “clean” design.
  26. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring User experience principles
  27. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring What’s the most important 
 action on your design? Make it easy to find and use.
  28. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Pay attention to your goals. Make them easy to find and use.
  29. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Content principles Less is more. Big paragraphs are a sign of clutter. Break into bullets if you can.
  30. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring We made a bunch of changes: The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. Screenshots of the admin have been updated to reflect the new Django 1.9 styles. The few minor typos have been fixed. Updated the version of django-registration-redux that we use to 1.3. Last but not least, the Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  31. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  32. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django-registration- redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  33. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
  34. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Images and imagery
  35. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Images: Stock photos usually look like stock photos. You can accomplish a lot with just type and screenshots. Remember to pay attention to file size. Don’t forget retina-quality images.
  36. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring unsplash.com
  37. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring You don’t need to 
 be original
  38. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  39. FLU EN T CO NFER ENC E T RAC Y

    OS B OR N @limedaring
  40. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Quick overview of a design process
  41. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  42. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring 2.
 Mock it up?
  43. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring 3.
 Build it.
  44. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring My thought process, every time:
  45. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring My thought process, every time: “crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap 
 … yes!”
  46. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring This is only the starting point!
  47. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Reduce visual clutter — Keep the number of fonts and colors low. Add white space. Line things up. Keep content short and easy to skim.
  48. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Make sure your goal is easy to find and use.
  49. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Keep your content simple, friendly, 
 and to the point.
  50. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Practice, practice, practice.
  51. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring hellowebapp.com/web-design
  52. SELF CO NFERENC E T RAC Y O S B

    OR N @limedaring Thank you! @limedaring