View
52.088
Download
1
Category
Preview:
Citation preview
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
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/
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
Recommended