SlideShare una empresa de Scribd logo
1 de 149
Descargar para leer sin conexión
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
A Crash Course on Product Design for Developers
Nope
This is Google
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
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
A Crash Course on Product Design for Developers
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
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
Software
products: 
mental
limits
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
“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
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
Be forgiving
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
Be funny
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
Be yourself
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
A Crash Course on Product Design for Developers
“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

Más contenido relacionado

Más de Yevgeniy Brikman

Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsCloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsYevgeniy Brikman
 
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...Yevgeniy Brikman
 
Lessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeLessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeYevgeniy Brikman
 
Gruntwork Executive Summary
Gruntwork Executive SummaryGruntwork Executive Summary
Gruntwork Executive SummaryYevgeniy Brikman
 
Reusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesReusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesYevgeniy Brikman
 
The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...Yevgeniy Brikman
 
An intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSAn intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSYevgeniy Brikman
 
Comprehensive Terraform Training
Comprehensive Terraform TrainingComprehensive Terraform Training
Comprehensive Terraform TrainingYevgeniy Brikman
 
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Yevgeniy Brikman
 
Startup Ideas and Validation
Startup Ideas and ValidationStartup Ideas and Validation
Startup Ideas and ValidationYevgeniy Brikman
 
A Guide to Hiring for your Startup
A Guide to Hiring for your StartupA Guide to Hiring for your Startup
A Guide to Hiring for your StartupYevgeniy Brikman
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Yevgeniy Brikman
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play appsYevgeniy Brikman
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaYevgeniy Brikman
 
The Play Framework at LinkedIn
The Play Framework at LinkedInThe Play Framework at LinkedIn
The Play Framework at LinkedInYevgeniy Brikman
 

Más de Yevgeniy Brikman (20)

Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsCloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
 
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
 
Lessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeLessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure code
 
Gruntwork Executive Summary
Gruntwork Executive SummaryGruntwork Executive Summary
Gruntwork Executive Summary
 
Reusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesReusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modules
 
The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...
 
An intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSAn intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECS
 
Comprehensive Terraform Training
Comprehensive Terraform TrainingComprehensive Terraform Training
Comprehensive Terraform Training
 
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
 
Agility Requires Safety
Agility Requires SafetyAgility Requires Safety
Agility Requires Safety
 
Startup Ideas and Validation
Startup Ideas and ValidationStartup Ideas and Validation
Startup Ideas and Validation
 
A Guide to Hiring for your Startup
A Guide to Hiring for your StartupA Guide to Hiring for your Startup
A Guide to Hiring for your Startup
 
Startup DNA: Speed Wins
Startup DNA: Speed WinsStartup DNA: Speed Wins
Startup DNA: Speed Wins
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)
 
Node.js vs Play Framework
Node.js vs Play FrameworkNode.js vs Play Framework
Node.js vs Play Framework
 
Rapid prototyping
Rapid prototypingRapid prototyping
Rapid prototyping
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play apps
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
 
The Play Framework at LinkedIn
The Play Framework at LinkedInThe Play Framework at LinkedIn
The Play Framework at LinkedIn
 
Kings of Code Hack Battle
Kings of Code Hack BattleKings of Code Hack Battle
Kings of Code Hack Battle
 

Último

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Último (18)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

A Crash Course on Product Design for Developers