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
  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. 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
  10. C FE.DEV T RAC Y OS B O R N

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

    @tracymakes
  12. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  13. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  14. C FE.DEV T RAC Y OS B O R N

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

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

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

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

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

    @tracymakes Avoid using a lot of 
 di ff erent typefaces and fonts.
  21. 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.
  22. C FE.DEV T RAC Y OS B O R N

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

    @tracymakes
  24. C FE.DEV T RAC Y OS B O R N

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

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

    @tracymakes
  27. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  28. C FE.DEV T RAC Y OS B O R N

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

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

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

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

    @tracymakes
  33. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  34. 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.
  35. 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/
  36. 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.
  37. C FE.DEV T RAC Y OS B O R N

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

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

    @tracymakes Line things up 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @tracymakes
  62. C FE.DEV T RAC Y OS B O R N

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

    @tracymakes
  64. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  65. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  66. C FE.DEV T RAC Y OS B O R N

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

    @tracymakes
  69. C FE.DEV T RAC Y OS B O R N

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

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

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

    @tracymakes My thought process, every time:
  73. 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!”
  74. C FE.DEV T RAC Y OS B O R N

    @tracymakes Every design you do will be better than the last.
  75. 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?
  76. 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.
  77. 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!
  78. C FE.DEV T RAC Y OS B O R N

    @tracymakes
  79. C FE.DEV T RAC Y OS B O R N

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

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

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