A Crash Course on Product Design for Developers
Report
Yevgeniy BrikmanFollow
Oct. 7, 2015•0 likes•110,393 views
356 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
A Crash Course on Product Design for Developers
Oct. 7, 2015•0 likes•110,393 views
356 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
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/
Yevgeniy BrikmanFollow
Recommended
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsYevgeniy Brikman
How to test infrastructure code: automated testing for Terraform, Kubernetes,...Yevgeniy Brikman
Lessons learned from writing over 300,000 lines of infrastructure codeYevgeniy Brikman
Gruntwork Executive SummaryYevgeniy Brikman
Reusable, composable, battle-tested Terraform modulesYevgeniy Brikman
The Truth About Startups: What I wish someone had told me about entrepreneurs...Yevgeniy Brikman
A Crash Course on Product Design for Developers
- A crash course on DESIGN for DEVELOPERS
- 1. Why learn design 2. User-centered design 3. Visual design 4. Recap Outline
- 1. Why learn design 2. User-centered design 3. Visual design 4. Recap Outline
- What is ?
- Not this
- Nor this
- Nope
- This is Google
- The Iceberg Secret
- Design is the product
- “[Design is] not just what it looks like and feels like. Design is how it works.” – Steve Jobs
- I’m Yevgeniy Brikman ybrikman.com
- I’m NOT a designer
- But I use design all the time
- And so do you
- Résumé design
- Homepage design
- Interior design
- System design
- Slide deck design
- This talk teaches you basic design tools
- Think of it as a designer’s “Hello, World”
- It’s based on my book, Hello, Startup hello-startup.net
- And my work at Atomic Squirrel atomic-squirrel.net
- 1. Why learn design 2. User-centered design 3. Visual design 4. Recap Outline
- Design is about helping people achieve their goals
- 1. Personas 2. Simplicity 3. Emotional design 4. Usability testing User-centered design tools
- 1. Personas 2. Simplicity 3. Emotional design 4. Usability testing User-centered design tools
- Never design for the average person
- The average person doesn’t exist
- “The average person has one testicle and one fallopian tube.” – Bo Burnham
- Instead, define personas
- Name, age, bio, work, skills, goals
- Design for 1-3 primary personas
- 1. Personas 2. Simplicity 3. Emotional design 4. Usability testing User-centered design tools
- Physical products: physical limits
- Software products: mental limits
- “Perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” – Antoine de Saint Exupéry
- 1. Personas 2. Simplicity 3. Emotional design 4. Usability testing User-centered design tools
- People interact with a computer as they would with another person
- Every piece of software makes you feel something
- Design your product to be a good human being
- Be considerate and responsive
- Be forgiving
- Be funny
- Be yourself
- “Your product has a voice–and it's talking to your customers 24 hours a day.” – 37Signals
- 1. Personas 2. Simplicity 3. Emotional design 4. Usability testing User-centered design tools
- Record real users trying to use your product
- Repeat monthly
- Usability testing tools http://www.hello-startup.net/resources/design/
- 1. Why learn design 2. User-centered design 3. Visual design 4. Recap Outline
- We’ll improve the visual design of two examples:
- Résumé
- Website
- 1. Design reuse 2. Layout 3. Typography 4. Contrast Visual design tools
- 1. Design reuse 2. Layout 3. Typography 4. Contrast Visual design tools
- “Good artists copy; great artists steal.” – Steve Jobs
- Website, mobile, & email templates http://www.hello-startup.net/resources/design/
- Wireframing & mockup tools http://www.hello-startup.net/resources/design/
- Stock photography, clip art, icons http://www.hello-startup.net/resources/images-photos-graphics/
- 1. Design reuse 2. Layout 3. Typography 4. Contrast Visual design tools
- Position elements to communicate information
- Proximity: related items should be closer together
- Unrelated items should be further apart
- Improving the proximity in the résumé
- Alignment: position items along common lines
- Improving the alignment in the résumé
- Your mind inserts a line
- Website alignment. Where is the line?
- “Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.” – Robin Williams
- 1. Design reuse 2. Layout 3. Typography 4. Contrast Visual design tools
- Measure: the length of a line of text
- Too much measure
- Too little measure
- Correct measure
- Recommendation: 45-90 characters per line
- Leading: the vertical space between lines of text
- Too little leading
- Too much leading
- Correct leading
- Recommendation: 120-145% of font size
- Typeface: the design of the letters
- Sans serif Helvetica Neue, Arial, Eurostile, Avenir Serif Times New Roman, Baskerville, Didot, Courier Decorative Papyrus, STENCIL, Desdemona, Rosewood
- Recommendation: avoid system typefaces
- Free & paid typefaces http://www.hello-startup.net/resources/design/
- Font: typeface + style
- 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
- Recommendation: every font serves one purpose
- Improving the fonts in the resume
- Recommendation: leave the font pairing to the pros
- Font pairing http://www.hello-startup.net/resources/design/
- 1. Design reuse 2. Layout 3. Typography 4. Contrast Visual design tools
- Use contrast to make something stand out
- Using contrast to make the title stand out
- Use contrast to create a Call to Action (CTA)
- The CTA is not very noticeable here
- Make it stand out with more contrast
- Use colors to increase contrast even more
- Tip #1: do everything in black & white first.
- Then add color deliberately
- Website in black & white
- Website with color
- Tip #2: use palettes from professionals
- Color palettes http://www.hello-startup.net/resources/design/
- 1. Why learn design 2. User-centered design 3. Visual design 4. Recap Outline
- User-centered design
- Personas
- Simplicity
- Design your software to be a good human being
- Usability testing
- Visual design
- Original résumé design
- Layout
- Typography
- Contrast
- Original website design
- Layout
- Typography
- Contrast
- Design reuse
- For more info, see Hello, Startup hello-startup.net
- Need help or advice? Atomic Squirrel atomic-squirrel.net
- Questions?
- 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