SlideShare una empresa de Scribd logo
1 de 41
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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 a 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 a 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
 

Último

simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 

Último (20)

simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 

Design for Developers