A Crash Course on Product Design for Developers

52,325 views

Published on

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/

Published in: Design
5 Comments
323 Likes
Statistics
Notes
No Downloads
Views
Total views
52,325
On SlideShare
0
From Embeds
0
Number of Embeds
3,273
Actions
Shares
0
Downloads
654
Comments
5
Likes
323
Embeds 0
No embeds

No notes for slide

A Crash Course on Product Design for Developers

  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
  7. Nope
  8. This is Google
  9. The Iceberg Secret
  10. Design is the product
  11. “[Design is] not just what it looks like and feels like. Design is how it works.” – Steve Jobs
  12. I’m Yevgeniy Brikman ybrikman.com
  13. I’m NOT a designer
  14. But I use design all the time
  15. And so do you
  16. Résumé design
  17. Homepage design
  18. Interior design
  19. System design
  20. Slide deck design
  21. This talk teaches you basic design tools
  22. Think of it as a designer’s “Hello, World”
  23. It’s based on my book, Hello, Startup hello-startup.net
  24. And my work at Atomic Squirrel atomic-squirrel.net
  25. 1.  Why learn design 2.  User-centered design 3.  Visual design 4.  Recap Outline
  26. Design is about helping people achieve their goals
  27. 1.  Personas 2.  Simplicity 3.  Emotional design 4.  Usability testing User-centered design tools
  28. 1.  Personas 2.  Simplicity 3.  Emotional design 4.  Usability testing User-centered design tools
  29. Never design for the average person
  30. The average person doesn’t exist
  31. “The average person has one testicle and one fallopian tube.” – Bo Burnham
  32. Instead, define personas
  33. Name, age, bio, work, skills, goals
  34. Design for 1-3 primary personas
  35. 1.  Personas 2.  Simplicity 3.  Emotional design 4.  Usability testing User-centered design tools
  36. Physical products: physical limits
  37. Software products: mental limits
  38. “Perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” – Antoine de Saint Exupéry
  39. 1.  Personas 2.  Simplicity 3.  Emotional design 4.  Usability testing User-centered design tools
  40. People interact with a computer as they would with another person
  41. Every piece of software makes you feel something
  42. Design your product to be a good human being
  43. Be considerate and responsive
  44. Be forgiving
  45. Be funny
  46. Be yourself
  47. “Your product has a voice–and it's talking to your customers 24 hours a day.” – 37Signals
  48. 1.  Personas 2.  Simplicity 3.  Emotional design 4.  Usability testing User-centered design tools
  49. Record real users trying to use your product
  50. Repeat monthly
  51. Usability testing tools http://www.hello-startup.net/resources/design/
  52. 1.  Why learn design 2.  User-centered design 3.  Visual design 4.  Recap Outline
  53. We’ll improve the visual design of two examples:
  54. Résumé
  55. Website
  56. 1.  Design reuse 2.  Layout 3.  Typography 4.  Contrast Visual design tools
  57. 1.  Design reuse 2.  Layout 3.  Typography 4.  Contrast Visual design tools
  58. “Good artists copy; great artists steal.” – Steve Jobs
  59. Website, mobile, & email templates http://www.hello-startup.net/resources/design/
  60. Wireframing & mockup tools http://www.hello-startup.net/resources/design/
  61. Stock photography, clip art, icons http://www.hello-startup.net/resources/images-photos-graphics/
  62. 1.  Design reuse 2.  Layout 3.  Typography 4.  Contrast Visual design tools
  63. Position elements to communicate information
  64. Proximity: related items should be closer together
  65. Unrelated items should be further apart
  66. Improving the proximity in the résumé
  67. Alignment: position items along common lines
  68. Improving the alignment in the résumé
  69. Your mind inserts a line
  70. Website alignment. Where is the line?
  71. “Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.” – Robin Williams
  72. 1.  Design reuse 2.  Layout 3.  Typography 4.  Contrast Visual design tools
  73. Measure: the length of a line of text
  74. Too much measure
  75. Too little measure
  76. Correct measure
  77. Recommendation: 45-90 characters per line
  78. Leading: the vertical space between lines of text
  79. Too little leading
  80. Too much leading
  81. Correct leading
  82. Recommendation: 120-145% of font size
  83. Typeface: the design of the letters
  84. Sans serif Helvetica Neue, Arial, Eurostile, Avenir Serif Times New Roman, Baskerville, Didot, Courier Decorative Papyrus, STENCIL, Desdemona, Rosewood
  85. Recommendation: avoid system typefaces
  86. Free & paid typefaces http://www.hello-startup.net/resources/design/
  87. Font: typeface + style
  88. 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
  89. Recommendation: every font serves one purpose
  90. Improving the fonts in the resume
  91. Recommendation: leave the font pairing to the pros
  92. Font pairing http://www.hello-startup.net/resources/design/
  93. 1.  Design reuse 2.  Layout 3.  Typography 4.  Contrast Visual design tools
  94. Use contrast to make something stand out
  95. Using contrast to make the title stand out
  96. Use contrast to create a Call to Action (CTA)
  97. The CTA is not very noticeable here
  98. Make it stand out with more contrast
  99. Use colors to increase contrast even more
  100. Tip #1: do everything in black & white first.
  101. Then add color deliberately
  102. Website in black & white
  103. Website with color
  104. Tip #2: use palettes from professionals
  105. Color palettes http://www.hello-startup.net/resources/design/
  106. 1.  Why learn design 2.  User-centered design 3.  Visual design 4.  Recap Outline
  107. User-centered design
  108. Personas
  109. Simplicity
  110. Design your software to be a good human being
  111. Usability testing
  112. Visual design
  113. Original résumé design
  114. Layout
  115. Typography
  116. Contrast
  117. Original website design
  118. Layout
  119. Typography
  120. Contrast
  121. Design reuse
  122. For more info, see Hello, Startup hello-startup.net
  123. Need help or advice? Atomic Squirrel atomic-squirrel.net
  124. Questions?
  125. 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

×