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

Design for Non-Designers: All Things Open

Design for Non-Designers: All Things Open

Tracy Osborn

October 27, 2016
Tweet

More Decks by Tracy Osborn

Other Decks in Programming

Transcript

  1. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Design principles and shortcuts to help you 
 become a better designer.
  2. ALL THING S OPEN TRACY OSBORN @limedaring Software Developer Developer

    Software Engineer Senior Software Engineer Programmer Coder Architect Software Architect Marketing Technologist SEO Consultant Web Analytics Developer Digital Marketing Manager Social Media Manager Growth Hacker Content Manager Content Strategist Information Architect UX Designer UI Designer Accessibility Specialist Interaction Designer Front-End Designer Front-End Developer Mobile Developer Full-Stack Developer Systems Engineer Database Administrator Data Architect Data Analyst Devops Manager Product Manager QA Engineer Security Specialist Technical Lead
  3. ALL THING S OPEN TRACY OSBORN @limedaring I will be

    tweeting all links: @limedaring (“daring” — not “darling”) #talkpay
  4. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Basics of designing so you can make effective, lovely interfaces. #talkpay
  5. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Basics of designing so you can make effective, lovely interfaces. #talkpay
  6. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Basics of designing so you can make effective, lovely interfaces. #talkpay
  7. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Basics of designing so you can make effective, lovely interfaces. #talkpay
  8. ALL THING S OPEN TRACY OSBORN @limedaring Design for Non-Designers

    Basics of designing so you can make effective, lovely interfaces. #talkpay
  9. ALL THING S OPEN TRACY OSBORN @limedaring How can we

    create effective, basic designs?
  10. ALL THING S OPEN TRACY OSBORN @limedaring Fastest way for

    better looking designs: Cut down on clutter.
  11. ALL THING S OPEN TRACY OSBORN @limedaring Line things up

    — pixel differences are definitely unconsciously noticed.

  12. ALL THING S OPEN TRACY OSBORN @limedaring Color principles Keep

    your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  13. ALL THING S OPEN TRACY OSBORN @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.
  14. ALL THING S OPEN TRACY OSBORN @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/
  15. ALL THING S OPEN TRACY OSBORN @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.
  16. ALL THING S OPEN TRACY OSBORN @limedaring What’s the most

    important 
 action on your design? Make it easy to find and use.
  17. ALL THING S OPEN TRACY OSBORN @limedaring Get a second

    (third, fourth…) opinion 
 on your designs.
  18. ALL THING S OPEN TRACY OSBORN @limedaring Content principles Less

    is more. Big paragraphs are a sign of clutter. Break into bullets if you can.
  19. ALL THING S OPEN TRACY OSBORN @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.
  20. ALL THING S OPEN TRACY OSBORN @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.
  21. ALL THING S OPEN TRACY OSBORN @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.
  22. ALL THING S OPEN TRACY OSBORN @limedaring What’s the most

    important 
 action on your design? Make it easy to find and use. #talkpay
  23. ALL THING S OPEN TRACY OSBORN @limedaring Headlines: Talk benefits,

    not details. Keep it short. Use natural, friendly language.
  24. ALL THING S OPEN TRACY OSBORN @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.
  25. ALL THING S OPEN TRACY OSBORN @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!”
  26. ALL THING S OPEN TRACY OSBORN @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.
  27. ALL THING S OPEN TRACY OSBORN @limedaring Keep your content

    simple, friendly, 
 and to the point.