Design Eye for the Developer

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