SlideShare a Scribd company logo
1 of 41
Download to read offline
Design 
for Developers 
Brian Harper 
@bleeharper
devsdoart.com
devsdoart.com
devsdoart.com
“If you have been thinking that there is 
anything whatsoever in design that requires 
artistic skill, well, banish the thought.” 
— Joel Spolsky (in 2006)
Design is not Art
Design for Developers
Design for Developers
Design for Developers
Design for Developers
Design for Developers
the HIG
Typography
DEMO!
Before After
Also, contrast is important
Also, contrast is important
Typography Resources 
QUICK 
Butterick’s Practical Typography 
INSPIRATION 
Typewolf 
IN DEPTH 
On Web Typography by Jason Santa Maria 
Type On Screen
Color
Beware the defaults!
Design for Developers
ANOTHER 
DEMO!
Pressed State
Color Resources 
INSPIRATION 
Colour Lovers 
Adobe Kuler 
clrs.cc
Transitions
Carousel
Yelp
Source: Transitional Interfaces by Pasquale D’Silva
Google Search
Design for Developers
Design for Developers
Linear Easing 
Source: Understanding Easing by Suresh V. Selvaraj
Animation Resources 
QUICK 
12 Principles of Animation for Mobile UX 
Smart Transitions in UX Design 
IN DEPTH 
Designing with Animation 
Motion Design for iOS
Prototyping 
& Testing
SPEED FIDELITY
FLINTO DEMO
Prototyping Resources 
PROTOTYPING TOOLS 
Prototyping on Paper 
Flinto 
USER TESTING 
Nielsen Norman Articles
If you want to dive 
deeper
General Design Resources 
BOOKS 
Pixel Perfect Precision by ustwo 
Mobile & Multi-Device Design by LukeW 
Design for Hackers by David Kadavy 
Edward Tufte
Q&A
Thank You! 
Brian Harper 
@bleeharper

More Related Content

What's hot

Building Apps with Great Design
Building Apps with Great DesignBuilding Apps with Great Design
Building Apps with Great Designjaredbrown
 
getting the experience right
getting the experience rightgetting the experience right
getting the experience rightRyan Nance
 
Five Ways To Do User Research In The Enterprise Without Talking To A Single User
Five Ways To Do User Research In The Enterprise Without Talking To A Single UserFive Ways To Do User Research In The Enterprise Without Talking To A Single User
Five Ways To Do User Research In The Enterprise Without Talking To A Single UserPatrick Neeman
 
1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details MatterEmily Rawitsch
 
When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017Angel Banks
 
Users, Not Audiences
Users, Not AudiencesUsers, Not Audiences
Users, Not AudiencesKip Voytek
 
UX Design Patterns for Augmented Reality (AR) apps & games
UX Design Patterns for Augmented Reality (AR) apps & gamesUX Design Patterns for Augmented Reality (AR) apps & games
UX Design Patterns for Augmented Reality (AR) apps & gamesKai Turner
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Bookjesús Santo
 
LavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalLavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalPatrick Neeman
 
UI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job postingUI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job postingYorke Rhodes III
 
Design for Startups
Design for StartupsDesign for Startups
Design for StartupsJenny Lam
 
Design and development better together
Design and development better togetherDesign and development better together
Design and development better togetherGregory Raiz
 

What's hot (16)

Building Apps with Great Design
Building Apps with Great DesignBuilding Apps with Great Design
Building Apps with Great Design
 
getting the experience right
getting the experience rightgetting the experience right
getting the experience right
 
Five Ways To Do User Research In The Enterprise Without Talking To A Single User
Five Ways To Do User Research In The Enterprise Without Talking To A Single UserFive Ways To Do User Research In The Enterprise Without Talking To A Single User
Five Ways To Do User Research In The Enterprise Without Talking To A Single User
 
1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter
 
UX Roles and Job Titles
UX Roles and Job TitlesUX Roles and Job Titles
UX Roles and Job Titles
 
When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017
 
Users, Not Audiences
Users, Not AudiencesUsers, Not Audiences
Users, Not Audiences
 
UX Design Patterns for Augmented Reality (AR) apps & games
UX Design Patterns for Augmented Reality (AR) apps & gamesUX Design Patterns for Augmented Reality (AR) apps & games
UX Design Patterns for Augmented Reality (AR) apps & games
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 
LavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalLavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX Professional
 
UI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job postingUI UX Designer job roles defined by job posting
UI UX Designer job roles defined by job posting
 
Travel app
Travel appTravel app
Travel app
 
Co design 2012
Co design 2012Co design 2012
Co design 2012
 
The 3 Musketeers
The 3 MusketeersThe 3 Musketeers
The 3 Musketeers
 
Design for Startups
Design for StartupsDesign for Startups
Design for Startups
 
Design and development better together
Design and development better togetherDesign and development better together
Design and development better together
 

Similar to Design for Developers

Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
thinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation SlidesthinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation SlidesthinkLA
 
User Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersUser Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersJason Brush
 
From Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay RogersFrom Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay RogersAtlassian
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechZaid Haque
 
Design in Startups
Design in StartupsDesign in Startups
Design in StartupsALPHA Camp
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignTuring Fest
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Lewis Lin 🦊
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Jessie Doan
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
Devs vs Designers: getting onto the same page
Devs vs Designers: getting onto the same pageDevs vs Designers: getting onto the same page
Devs vs Designers: getting onto the same pageAnita Cheng
 
Cheap and Free Design Tools and Resources
Cheap and Free Design Tools and ResourcesCheap and Free Design Tools and Resources
Cheap and Free Design Tools and ResourcesBianca Woods
 
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the RunwayOne North
 
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AI
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AIFashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AI
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AIShalin Hai-Jew
 
What are machines learning? How might that impact design?
What are machines learning? How might that impact design?What are machines learning? How might that impact design?
What are machines learning? How might that impact design?Andreas Wolters
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonZoé Guiraudon
 
UX isn't here to steal your toys
UX isn't here to steal your toysUX isn't here to steal your toys
UX isn't here to steal your toysIIBA UK Chapter
 

Similar to Design for Developers (20)

Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
thinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation SlidesthinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation Slides
 
User Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersUser Experience Design: A Primer for Marketers
User Experience Design: A Primer for Marketers
 
From Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay RogersFrom Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay Rogers
 
M3 conf
M3 confM3 conf
M3 conf
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell Tech
 
Design in Startups
Design in StartupsDesign in Startups
Design in Startups
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven Design
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Devs vs Designers: getting onto the same page
Devs vs Designers: getting onto the same pageDevs vs Designers: getting onto the same page
Devs vs Designers: getting onto the same page
 
Cheap and Free Design Tools and Resources
Cheap and Free Design Tools and ResourcesCheap and Free Design Tools and Resources
Cheap and Free Design Tools and Resources
 
Mobile
MobileMobile
Mobile
 
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway
 
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AI
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AIFashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AI
Fashioning Text (and Image) Prompts for the CrAIyon Art-Making Generative AI
 
Fast Food Design
Fast Food DesignFast Food Design
Fast Food Design
 
What are machines learning? How might that impact design?
What are machines learning? How might that impact design?What are machines learning? How might that impact design?
What are machines learning? How might that impact design?
 
Wireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe GuiraudonWireframe and prototyping google Campus talk by Zoe Guiraudon
Wireframe and prototyping google Campus talk by Zoe Guiraudon
 
UX isn't here to steal your toys
UX isn't here to steal your toysUX isn't here to steal your toys
UX isn't here to steal your toys
 

Recently uploaded

F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 

Recently uploaded (20)

F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 

Design for Developers