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

Design for Non-Designers — PyCon 2016

Design for Non-Designers — PyCon 2016

Tracy Osborn

May 31, 2016
Tweet

More Decks by Tracy Osborn

Other Decks in Technology

Transcript

  1. PYCO N T R AC Y OSB O R N

    @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces.
  2. PYCO N T R AC Y OSB O R N

    @limedaring Hi, I’m Tracy! @limedaring (daring, not darling)
  3. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  4. PYCO N T R AC Y OSB O R N

    @limedaring image credit: Dan Saffer
  5. PYCO N T R AC Y OSB O R N

    @limedaring Design: Making an interface that 
 works well.
  6. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  7. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  8. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  9. PYCO N T R AC Y OSB O R N

    @limedaring How can we create effective, basic designs?
  10. PYCO N T R AC Y OSB O R N

    @limedaring Let’s talk about clutter
  11. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  12. PYCO N T R AC Y OSB O R N

    @limedaring Fastest way for better looking designs: Cut down on clutter.
  13. PYCO N T R AC Y OSB O R N

    @limedaring grid
  14. PYCO N T R AC Y OSB O R N

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

  15. PYCO N T R AC Y OSB O R N

    @limedaring color
  16. PYCO N T R AC Y OSB O R N

    @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  17. PYCO N T R AC Y OSB O R N

    @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  18. PYCO N T R AC Y OSB O R N

    @limedaring fonts
  19. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R N

    @limedaring http://hellohappy.org/beautiful-web-type/
  21. PYCO N T R AC Y OSB O R N

    @limedaring http://hellohappy.org/beautiful-web-type/
  22. PYCO N T R AC Y OSB O R N

    @limedaring white space
  23. PYCO N T R AC Y OSB O R N

    @limedaring The ultimate clutter reducer
  24. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R N

    @limedaring User experience principles
  27. PYCO N T R AC Y OSB O R N

    @limedaring What’s the most important 
 action on your design? Make it easy to find and use.
  28. PYCO N T R AC Y OSB O R N

    @limedaring Pay attention to your goals. Make them easy to find and use.
  29. PYCO N T R AC Y OSB O R N

    @limedaring Content principles Less is more. Big paragraphs are a sign of clutter. Break into bullets if you can.
  30. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R N

    @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
  34. PYCO N T R AC Y OSB O R N

    @limedaring Images and imagery
  35. PYCO N T R AC Y OSB O R N

    @limedaring Images principles You can accomplish a lot with just type and screenshots. Stock photos usually look like stock photos. Remember to pay attention to file size.
  36. PYCO N T R AC Y OSB O R N

    @limedaring unsplash.com
  37. PYCO N T R AC Y OSB O R N

    @limedaring Remember: You don’t need to be original
  38. PYCO N T R AC Y OSB O R N

    @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  39. F LUE NT CO NF E R E N C

    E T R ACY OSB OR N @limedaring
  40. PYCO N T R AC Y OSB O R N

    @limedaring Quick overview of a design process
  41. PYCO N T R AC Y OSB O R N

    @limedaring 1.
 Collect inspiration and 
 sketch ideas.
  42. PYCO N T R AC Y OSB O R N

    @limedaring 2.
 Mock it up?
  43. PYCO N T R AC Y OSB O R N

    @limedaring 3.
 Build it.
  44. PYCO N T R AC Y OSB O R N

    @limedaring My thought process, every time:
  45. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R N

    @limedaring This is only the starting point!
  47. PYCO N T R AC Y OSB O R 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. PYCO N T R AC Y OSB O R N

    @limedaring Make sure your goal is easy to find and use.
  49. PYCO N T R AC Y OSB O R N

    @limedaring Keep your content simple, friendly, 
 and to the point.
  50. PYCO N T R AC Y OSB O R N

    @limedaring Practice, practice, practice.
  51. PYCO N T R AC Y OSB O R N

    @limedaring hellowebapp.com/web-design
  52. PYCO N T R AC Y OSB O R N

    @limedaring Thank you! @limedaring