This talk will introduce you to the basic tools of user-centered and visual design. It's targeted at developers and anyone else who wants to improve the design of their websites, mobile apps, resumes, slide decks, and so on. You can find the video of the talk here: http://www.ybrikman.com/writing/2015/10/07/crash-course-design-for-developers/ It's a short talk, so for a more in-depth look, including other aspects of product design such as marketing and data-driven development, see the book "Hello, Startup": http://www.hello-startup.net/

1. A crash course on DESIGN
for DEVELOPERS

2. 1. Why learn design
2. User-centered design
3. Visual design
4. Recap
Outline

3. 1. Why learn design
2. User-centered design
3. Visual design
4. Recap
Outline

4. What is ?

5. Not this

6. Nor this

8. Nope

9. This is Google

13. The Iceberg Secret

14. Design is the product

15. “[Design is] not just
what it looks like and
feels like. Design is how
it works.” – Steve Jobs

16. I’m
Yevgeniy
Brikman
ybrikman.com

17. I’m NOT
a designer

18. But I use
design all
the time

19. And so
do you

20. Résumé design

21. Homepage design

22. Interior design

23. System design

24. Slide deck design

25. This talk teaches you basic
design tools

26. Think of it as a designer’s
“Hello, World”

27. It’s based
on my book,
Hello,
Startup
hello-startup.net

28. And my
work at
Atomic
Squirrel
atomic-squirrel.net

29. 1. Why learn design
2. User-centered design
3. Visual design
4. Recap
Outline

31. Design is about helping
people achieve their goals

32. 1. Personas
2. Simplicity
3. Emotional design
4. Usability testing
User-centered design tools

33. 1. Personas
2. Simplicity
3. Emotional design
4. Usability testing
User-centered design tools

34. Never design
for the
average person

35. The average
person
doesn’t exist

36. “The average person
has one testicle and
one fallopian tube.”
– Bo Burnham

37. Instead, define personas

38. Name, age, bio, work, skills, goals

39. Design for 1-3 primary personas

40. 1. Personas
2. Simplicity
3. Emotional design
4. Usability testing
User-centered design tools

41. Physical
products:
physical
limits

44. Software
products:
mental
limits

48. “Perfection is
attained not when
there is nothing more
to add, but when
there is nothing more
to remove.”
– Antoine de
Saint Exupéry

49. 1. Personas
2. Simplicity
3. Emotional design
4. Usability testing
User-centered design tools

50. People interact with a computer as
they would with another person

51. Every piece of software makes you
feel something

52. Design your product to be
a good human being

53. Be considerate and
responsive

57. Be forgiving

61. Be funny

67. Be yourself

71. “Your product has a
voice–and it's talking
to your customers 24
hours a day.” –
37Signals

72. 1. Personas
2. Simplicity
3. Emotional design
4. Usability testing
User-centered design tools

73. Record real users trying to
use your product

74. Repeat monthly

75. Usability testing tools
http://www.hello-startup.net/resources/design/

76. 1. Why learn design
2. User-centered design
3. Visual design
4. Recap
Outline

77. We’ll improve the visual design
of two examples:

78. Résumé

79. Website

80. 1. Design reuse
2. Layout
3. Typography
4. Contrast
Visual design tools

81. 1. Design reuse
2. Layout
3. Typography
4. Contrast
Visual design tools

82. “Good artists copy;
great artists steal.”
– Steve Jobs

83. Website, mobile, & email templates
http://www.hello-startup.net/resources/design/

84. Wireframing & mockup tools
http://www.hello-startup.net/resources/design/

85. Stock photography, clip art, icons
http://www.hello-startup.net/resources/images-photos-graphics/

86. 1. Design reuse
2. Layout
3. Typography
4. Contrast
Visual design tools

87. Position elements to
communicate information

88. Proximity: related items
should be closer together

89. Unrelated items should be
further apart

90. Improving the proximity in the résumé

91. Alignment: position items
along common lines

92. Improving the alignment in the résumé

93. Your mind inserts a line

94. Website alignment. Where is the line?

95. “Nothing should be
placed on the page
arbitrarily. Every element
should have some visual
connection with another
element on the page.” –
Robin Williams

96. 1. Design reuse
2. Layout
3. Typography
4. Contrast
Visual design tools

97. Measure: the length of a
line of text

98. Too much measure

99. Too little measure

100. Correct measure

101. Recommendation:
45-90 characters per line

102. Leading: the vertical space
between lines of text

103. Too little leading

104. Too much leading

105. Correct leading

106. Recommendation:
120-145% of font size

107. Typeface: the design of the
letters

108. Sans serif
Helvetica Neue, Arial, Eurostile, Avenir
Serif
Times New Roman, Baskerville, Didot, Courier
Decorative
Papyrus, STENCIL, Desdemona, Rosewood

109. Recommendation: avoid
system typefaces

110. Free & paid typefaces
http://www.hello-startup.net/resources/design/

111. Font: typeface + style

112. Regular, 48
Condensed Bold, 48
ITALIC, 12, CAPS
T h i n , 4 8 , 1 0 p t s p a c i n g
Same typeface, different styling

113. Recommendation: every
font serves one purpose

114. Improving the fonts in the resume

115. Recommendation: leave
the font pairing to the pros

116. Font pairing
http://www.hello-startup.net/resources/design/

117. 1. Design reuse
2. Layout
3. Typography
4. Contrast
Visual design tools

118. Use contrast to make
something stand out

119. Using contrast to make the title stand out

120. Use contrast to create a
Call to Action (CTA)

121. The CTA is not very noticeable here

122. Make it stand out with more contrast

123. Use colors to increase
contrast even more

124. Tip #1: do everything in
black & white first.

125. Then add color deliberately

126. Website in black & white

127. Website with color

128. Tip #2: use palettes from
professionals

129. Color palettes
http://www.hello-startup.net/resources/design/

130. 1. Why learn design
2. User-centered design
3. Visual design
4. Recap
Outline

131. User-centered design

132. Personas

133. Simplicity

134. Design your software to be
a good human being

135. Usability testing

136. Visual design

137. Original résumé design

138. Layout

139. Typography

140. Contrast

141. Original website design

142. Layout

143. Typography

144. Contrast

145. Design reuse

146. For more
info, see
Hello,
Startup
hello-startup.net

147. Need help
or advice?
Atomic
Squirrel
atomic-squirrel.net

148. Questions?

149. Pencils: Elle
Google Data Center: Google
Iceberg: Wallpapers Project
Iceberg Secret: Joel Spolsky
Steve Jobs: Albert Watson
Modern interior: Plage Vinilos y Adhesivos
Blueprint: Will Scullin
Road: Joshua Tree National Park
Man at a lake: Joshua Earle
Alan Cooper: Wikipedia
Pinocchio: Wikipedia
Amazon Camera: Jeffrey Paul
User icon: Andreas Bjurenborg
Bo Burnham: Jennifer Elias
Persona: Xtensio
Ambient light sensor: Christian Ziberg
Antoine de Saint Exupéry: Modernista
Louis CK: Little Big Details
Swiss Army Knife: Jonas Bergsten
Giant Knife: Wegner
Product Comic: Erik Burke
Speed limit: Chad Elliott
Mobile phone user: Alejandro Escamilla
Typography: Jeremy Keith
Ruler: Scott Akerman
Letter A: pannan
Building: Ernest Duffoo
Color pencils: Capture Queen
Photo credits