SlideShare a Scribd company logo
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
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!
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
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 Design
jaredbrown
 
getting the experience right
getting the experience rightgetting the experience right
getting the experience right
Ryan 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 User
Patrick 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 Matter
Emily Rawitsch
 
UX Roles and Job Titles
UX Roles and Job TitlesUX Roles and Job Titles
UX Roles and Job Titles
Ryan Winzenburg
 
When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017When Developer Must Become Designer - ATO2017
When Developer Must Become Designer - ATO2017
Angel Banks
 
Users, Not Audiences
Users, Not AudiencesUsers, Not Audiences
Users, Not Audiences
Kip 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 & games
Kai Turner
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
jesú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 Professional
Patrick 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 posting
Yorke Rhodes III
 
Travel app
Travel appTravel app
Travel app
Grigoriy Akmashev
 
Co design 2012
Co design 2012Co design 2012
Co design 2012
Butterfly Works
 
The 3 Musketeers
The 3 MusketeersThe 3 Musketeers
The 3 Musketeers
Lillian Ayla Ersoy
 
Design for Startups
Design for StartupsDesign for Startups
Design for Startups
Jenny Lam
 
Design and development better together
Design and development better togetherDesign and development better together
Design and development better together
Gregory 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 & Code
Molly Wilson
 
thinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation SlidesthinkLA AdU: UX 2015 Presentation Slides
thinkLA AdU: UX 2015 Presentation Slides
thinkLA
 
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
Jason Brush
 
From Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay RogersFrom Feedback to Feature - Jay Rogers
From Feedback to Feature - Jay Rogers
Atlassian
 
M3 conf
M3 confM3 conf
M3 conf
Erica Kendall
 
Design Workshop I @ Cornell Tech
Design Workshop I @ Cornell TechDesign Workshop I @ Cornell Tech
Design Workshop I @ Cornell Tech
Zaid Haque
 
Design in Startups
Design in StartupsDesign in Startups
Design in Startups
ALPHA Camp
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven Design
Turing Fest
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
Lewis 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 2016
Jessie 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 design
InVision 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 page
Anita 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 Resources
Bianca Woods
 
Mobile
MobileMobile
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway
One 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 AI
Shalin Hai-Jew
 
Fast Food Design
Fast Food DesignFast Food Design
Fast Food Design
davidwieland
 
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 Guiraudon
Zoé 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
IIBA 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

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
hw2xf1m
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 

Recently uploaded (20)

AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
原版制作(MDIS毕业证书)新加坡管理发展学院毕业证学位证一模一样
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 

Design for Developers