Design for Coders

What’s the point of building something no one wants? Instead, you can use design to solve problems, communicate, and delight people.

The Web Meetup August, 2018.

Link: https://didoesdigital.com/project/design-for-engineers/

Transcript

1. Design for Coders Diana MacDonald | @DiDoesDigital
8. Today
9. Design education
10. See good design
11. Tune in to your audience
12. Make choices
13. Solve problems
14. Communicate
15. Delight people
16. Show of hands
17. Why should coders design?
18. Why don’t coders design?
19. Why don’t coders design?
20. Why don’t coders design?
21. Why don’t coders design?
22. Why don’t coders design?
23. https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d
24. Why don’t coders design?
25. Why don’t coders design?
26. Coders already design
27. <span onClick…> <div onClick…> <a target…> <button onClick…>
28. Loading content and assets https://www.viget.com/articles/a-bone-to-pick-with- skeleton-screens/
30. So, what do you do?
31. Design education
32. Design skills vs knowledge
33. 1. To actually do design tasks
34. 1. To actually do design tasks 2. To better build products
35. 3 steps to learn design
36. 1. Look
37. 2. Listen
38. 3. Make choices
39. 1. Look
40. if (condition) { let eg = "foo"; } else { eg = "bar"; } Pay a t t e n tion
41. let eg; if (condition) { eg = "foo"; } else { eg = "bar"; } Pay attention
42. Pay attention
43. Look at what the experts do
48. Start with type
49. Proximity
50. Proximity
51. 3 parts to balance line-height: 1.5; // 45–75 chars font-size: 16px;
52. https://betterwebtype.com/triangle
53. http://method.ac/
54. https://betterwebtype.com/font-memory-game
55. But what typeface?
56. Still can’t see the difference?
57. 1. Look
58. 1. Look
59. Accessibility and usability
60. Accessibility and usability
61. ⌘F5 or triple-tap touch ID for VoiceOver
63. 2. Listen
64. 2. Listen to your… - audience - designers
65. User research & testing - 1. Find your audience - 2. Ask questions about their goals - 3. Listen to what they say and watch what they do
66. 5 second test - 1. Set the scene - 2. Share a page for 5 seconds - 3. Ask questions
68. 5 second test questions - Who do you think is the intended audience? - What are the main elements you can recall? - What is the purpose of the page? - What is the most important information?
69. Heuristic reviews - 1. Choose heuristics - 2. Ask 2 experts to review a task or page - 3. Compare results
70. Field visits - 1. Talk to your users in their environment
71. Field visits - 1. Talk to your users in their environment.
72. Usability test - 1. Set the scene - 2. Share the task (goal and no clues) - 3. Repeat 2. as needed
73. 2. Listen to your… - audience - designers
74. Turn up the volume - InVision blog - UX Design weekly newsletter - UI Animation newsletter
75. Turn up the volume - @NadiehBremer - @sxywu - @sarah_edo - @vlh - @rachelnabors
76. Have coffee with a designer
77. Feedback on decisions
78. Feedback on decisions
80. 3. Make conscious choices
81. Personal website
82. Pull Request
83. README
84. Presentation
85. Code comment
86. - Less is more - Add whitespace - Align everything - Iterate Practical tips
87. Your screenshot tool is a ruler
88. Design will never feel easy —Tracy Osborn <https://medium.com/@limedaring>
89. Design will never feel easy —Tracy Osborn <https://medium.com/@limedaring>
91. Design what you can…
92. Borrow everything else
93. Design for coders - 1. Look: at better design examples - 2. Listen: to your audience & designers - 3. Make: conscious choices DiDoesDigital.com
94. Design for Coders https://DiDoesDigital.com/design-for-coders
95. Questions? Diana MacDonald | @DiDoesDigital Entypo pictograms 
 by Daniel Bruce Iosevka type by Belleve Invis &
 Montserrat type by Julieta Ulanovsky