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

What is ?

Not this

Nor this

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


Outline

Design is about helping people achieve their goals

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

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

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

Record real users trying to use your product

Repeat monthly

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


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

“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/


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


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

DecorativePapyrus, 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/


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/


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

A Crash Course on Product Design for Developers

Design

Transcript of A Crash Course on Product Design for Developers