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