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

Design Eye for the Developer

Design Eye for the Developer

Tracy Osborn

May 27, 2021
Tweet

More Decks by Tracy Osborn

Other Decks in Design

Transcript

  1. C FE.DEV T RAC Y OS B O R N

    @tracymakes Design Eye for the Developer TRAINING YOUR DESIGN INTUITION
  2. C FE.DEV T RAC Y OS B O R N

    @tracymakes Design is everywhere. Every career path has opportunities to use design to their advantage.
  3. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  4. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  5. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  6. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  7. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  8. BEYON D TELLERA ND T RAC Y OS B O

    R N @limedaring Design for Non-Designers Basics of designing so you can make e ff ective, lovely interfaces. #talkpay
  9. C FE.DEV T RAC Y OS B O R N

    @tracymakes But learning new skills is hard.
  10. C FE.DEV T RAC Y OS B O R N

    @tracymakes How get yourself more comfortable with design? 1. Surround yourself with good design 2. Think critically about what makes it good design
  11. C FE.DEV T RAC Y OS B O R N

    @tracymakes We need to train our design eye
  12. C FE.DEV T RAC Y OS B O R N

    @tracymakes So: How do we start training our design intuition?
  13. C FE.DEV T RAC Y OS B O R N

    @tracymakes Understand design basics 1.
  14. C FE.DEV T RAC Y OS B O R N

    @tracymakes Some shortcuts:
  15. C FE.DEV T RAC Y OS B O R N

    @tracymakes Avoid using a lot of 
 di ff erent typefaces and fonts.
  16. C FE.DEV T RAC Y OS B O R N

    @tracymakes Keep the number of fonts low — two di ff erent 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 di ff erentiate bits.
  17. C FE.DEV T RAC Y OS B O R N

    @tracymakes Try giving your designs 
 more space than you initially 
 feel comfortable with.
  18. C FE.DEV T RAC Y OS B O R N

    @tracymakes White space makes a website feel more professional and luxurious.
  19. C FE.DEV T RAC Y OS B O R N

    @tracymakes White space makes your website easier to use — a ff ecting your bottom line.
  20. C FE.DEV T RAC Y OS B O R N

    @tracymakes “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/
  21. C FE.DEV T RAC Y OS B O R N

    @tracymakes Avoid using a lot 
 of di ff erent colors. Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  22. C FE.DEV T RAC Y OS B O R N

    @tracymakes foundation.zurb.com
  23. C FE.DEV T RAC Y OS B O R N

    @tracymakes colormind.io #talkpay colormind.io
  24. C FE.DEV T RAC Y OS B O R N

    @tracymakes Line things up 

  25. C FE.DEV T RAC Y OS B O R N

    @tracymakes An underlying grid gives a 
 feeling of cohesiveness.
  26. C FE.DEV T RAC Y OS B O R N

    @tracymakes Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and line things up. Aim for a “clean” design.
  27. C FE.DEV T RAC Y OS B O R N

    @tracymakes Nitpick good design 2.
  28. C FE.DEV T RAC Y OS B O R N

    @tracymakes siteinspire.com
  29. C FE.DEV T RAC Y OS B O R N

    @tracymakes dribbble.com
  30. C FE.DEV T RAC Y OS B O R N

    @tracymakes dribbble.com
  31. C FE.DEV T RAC Y OS B O R N

    @tracymakes awwwards.com
  32. C FE.DEV T RAC Y OS B O R N

    @tracymakes Pick out the good decisions 3.
  33. C FE.DEV T RAC Y OS B O R N

    @tracymakes Think critically about what makes a design work well
  34. C FE.DEV T RAC Y OS B O R N

    @tracymakes github.com
  35. C FE.DEV T RAC Y OS B O R N

    @tracymakes github.com
  36. C FE.DEV T RAC Y OS B O R N

    @tracymakes savvycal.com
  37. C FE.DEV T RAC Y OS B O R N

    @tracymakes designerfund.com
  38. C FE.DEV T RAC Y OS B O R N

    @tracymakes designerfund.com
  39. C FE.DEV T RAC Y OS B O R N

    @tracymakes More advanced: Pick out the bad decisions 4.
  40. C FE.DEV T RAC Y OS B O R N

    @tracymakes Pay attention to clutter #talkpay
  41. C FE.DEV T RAC Y OS B O R N

    @tracymakes github.com
  42. C FE.DEV T RAC Y OS B O R N

    @tracymakes github.com
  43. C FE.DEV T RAC Y OS B O R N

    @tracymakes Be inspired; 
 but don’t copy verbatim. 5.
  44. C FE.DEV T RAC Y OS B O R N

    @tracymakes Take the idea, 
 not the design.
  45. C FE.DEV T RAC Y OS B O R N

    @tracymakes Inspiration is important for training your design eye AND when working on design.
  46. C FE.DEV T RAC Y OS B O R N

    @tracymakes Great designers steal 
 (and use shortcuts) #talkpay
  47. C FE.DEV T RAC Y OS B O R N

    @tracymakes Practice. Practice. Practice. 6.
  48. C FE.DEV T RAC Y OS B O R N

    @tracymakes Almost every design will start o ff feeling like a disaster
  49. C FE.DEV T RAC Y OS B O R N

    @tracymakes My thought process, every time:
  50. C FE.DEV T RAC Y OS B O R N

    @tracymakes 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!”
  51. C FE.DEV T RAC Y OS B O R N

    @tracymakes Every design you do will be better than the last.
  52. C FE.DEV T RAC Y OS B O R N

    @tracymakes 1. Think critically about design starting today. 
 Why is something successful? Why is it not?
  53. C FE.DEV T RAC Y OS B O R N

    @tracymakes 1. Think critically about design starting today. 
 Why is something successful? Why is it not? 2. Practice. Don’t be afraid to iterate.
  54. C FE.DEV T RAC Y OS B O R N

    @tracymakes 1. Think critically about design starting today. 
 Why is something successful? Why is it not? 2. Practice. Don’t be afraid to iterate. 3. Have fun!
  55. C FE.DEV T RAC Y OS B O R N

    @tracymakes nostarch.com/hello-web-design
  56. C FE.DEV T RAC Y OS B O R N

    @tracymakes tinyseed.com
  57. C FE.DEV T RAC Y OS B O R N

    @tracymakes Thank you! Chat with me online: @tracymakes