SlideShare a Scribd company logo
1 of 58
Download to read offline
5

5

THINGS
Every Developer Needs to Know
ABOUT DESIGN

@PaulTrani
Monday, October 28, 13
5

Paul Trani
Creative Cloud Evangelist, Adobe
17 years of making design mistakes
4 year-old cleverly disguised as a reasonable adult

@PaulTrani
Monday, October 28, 13
5

Why it matters...

@PaulTrani
Monday, October 28, 13
Research

www.jnd.org
Monday, October 28, 13

5

@PaulTrani
5

Sexy?

@PaulTrani
Monday, October 28, 13
5

Sexy!

@PaulTrani
Monday, October 28, 13
1

5
5

Know that...

YOU’RE NOT A DESIGNER*

*But you are awesome and can fake it really well.
Monday, October 28, 13

@PaulTrani
5

@PaulTrani
Monday, October 28, 13
2

5

Know how to...

LEAD THE EYE

@PaulTrani
Monday, October 28, 13
5

It’s about leading the eye...

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
Golden Ratio

5

@PaulTrani
Monday, October 28, 13
5

Golden Ratio

Fibonacci	
  Numbers

@PaulTrani
Monday, October 28, 13
Golden Ratio

5

@PaulTrani
Monday, October 28, 13
Golden Ratio

5

@PaulTrani
Monday, October 28, 13
5

Which object is easier to look at?

@PaulTrani
Monday, October 28, 13
5

Sharp corners take focus outside the rectangle.

@PaulTrani
Monday, October 28, 13
5

Rounded corners take focus inside the rectangle.

@PaulTrani
Monday, October 28, 13
5

http://www.mani.de/backstage/?p=483
Monday, October 28, 13

@PaulTrani
5

http://www.mani.de/backstage/?p=483
Monday, October 28, 13

@PaulTrani
5

Adventure Co.
escape normal

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
3

5

Know how to...

USE COLOR & IMAGERY

Monday, October 28, 13

@PaulTrani
5

“Use color to emphasize importance, not decorate a page.”
Alexander White
@PaulTrani
Monday, October 28, 13
5

“A picture is worth a thousand words.”

“Let the picture
tell the story.”
@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
4

5

Know how to...

USE TEXT & TYPOGRAPHY

Monday, October 28, 13

@PaulTrani
5

Typography

“Typography has one plain duty before it and that’s to
convey information in writing.”
Emil Ruder

@PaulTrani
Monday, October 28, 13
5

Choosing Fonts
• Choose a font that fits the subject
• Don’t use more than three

@PaulTrani
Monday, October 28, 13
5

Font Styles

@PaulTrani
Monday, October 28, 13
5

Font Awesomeness

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

5

Always get...

FEEDBACK FROM OTHERS

Monday, October 28, 13

@PaulTrani
5

Over 1 million members...
Behance.net

@PaulTrani
Monday, October 28, 13
5

5

Design Fundamentals
1. You’re not a designer. (but you can fake it really well)
2. Lead the eye with your layout.
3. Use color and imagery to capture attention.
4. Use fonts sparingly.
5. Get feedback from others.

@PaulTrani
Monday, October 28, 13
6

5

Then...

MAKE IT AWESOME

Monday, October 28, 13

@PaulTrani
5

Adventure Co.
escape normal

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

An electronic journal for mobile phones. Keep track of what you
want and where you found it.
@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

@PaulTrani
Monday, October 28, 13
5

Closing Remarks

@PaulTrani
Monday, October 28, 13
5

Don’t try to be great, try to be invisible.

@PaulTrani
Monday, October 28, 13
5

Don’t “put a star burst behind it.”

@PaulTrani
Monday, October 28, 13
5

Don’t use yellow text on a white background.

@PaulTrani
Monday, October 28, 13
5

Don’t use Comic Sans.

@PaulTrani
Monday, October 28, 13
5

Thank You!
@paultrani
ptrani@adobe.com
http://www.paultrani.com
http://www.behance.net

@PaulTrani
Monday, October 28, 13

More Related Content

Similar to 5 Things Developers Need to Know About Design

A New Model for Creative Campaigns: Open Source
A New Model for Creative Campaigns: Open SourceA New Model for Creative Campaigns: Open Source
A New Model for Creative Campaigns: Open SourceDigiday
 
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie Vincent Everts
 
6 tips on faster data journalism workflows
6 tips on faster data journalism workflows6 tips on faster data journalism workflows
6 tips on faster data journalism workflowsPaul Bradshaw
 
Swissnex: big project success with small web teams
Swissnex:  big project success with small web teamsSwissnex:  big project success with small web teams
Swissnex: big project success with small web teamsFrancis Zablocki
 
Design is a Process, not an Artefact - Trisha Gee (MongoDB)
Design is a Process, not an Artefact - Trisha Gee (MongoDB)Design is a Process, not an Artefact - Trisha Gee (MongoDB)
Design is a Process, not an Artefact - Trisha Gee (MongoDB)jaxLondonConference
 
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'UX Café
 

Similar to 5 Things Developers Need to Know About Design (7)

A New Model for Creative Campaigns: Open Source
A New Model for Creative Campaigns: Open SourceA New Model for Creative Campaigns: Open Source
A New Model for Creative Campaigns: Open Source
 
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie
Trends 2013 , Mobiele revolutie, Cloud en Tesla presentatie
 
6 tips on faster data journalism workflows
6 tips on faster data journalism workflows6 tips on faster data journalism workflows
6 tips on faster data journalism workflows
 
Swissnex: big project success with small web teams
Swissnex:  big project success with small web teamsSwissnex:  big project success with small web teams
Swissnex: big project success with small web teams
 
Design is a Process, not an Artefact - Trisha Gee (MongoDB)
Design is a Process, not an Artefact - Trisha Gee (MongoDB)Design is a Process, not an Artefact - Trisha Gee (MongoDB)
Design is a Process, not an Artefact - Trisha Gee (MongoDB)
 
WordCamp Toronto 2013
WordCamp Toronto 2013WordCamp Toronto 2013
WordCamp Toronto 2013
 
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'
UX Café October 2013: Carlos Saba 'Why purpose can help you pivot'
 

More from paultrani

Creativity and Tools
Creativity and ToolsCreativity and Tools
Creativity and Toolspaultrani
 
Things Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for DevicesThings Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for Devicespaultrani
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Designpaultrani
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotnesspaultrani
 
Adobe, Flash and HTML5
Adobe, Flash and HTML5Adobe, Flash and HTML5
Adobe, Flash and HTML5paultrani
 
Flash and HTML5 Compared
Flash and HTML5 ComparedFlash and HTML5 Compared
Flash and HTML5 Comparedpaultrani
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Designpaultrani
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Developmentpaultrani
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobilepaultrani
 
Mobile Design that Doesn't Suck
Mobile Design that Doesn't SuckMobile Design that Doesn't Suck
Mobile Design that Doesn't Suckpaultrani
 
Design Fundamentals for Developers
Design Fundamentals for DevelopersDesign Fundamentals for Developers
Design Fundamentals for Developerspaultrani
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flashpaultrani
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screenspaultrani
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devicespaultrani
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devicespaultrani
 

More from paultrani (15)

Creativity and Tools
Creativity and ToolsCreativity and Tools
Creativity and Tools
 
Things Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for DevicesThings Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for Devices
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotness
 
Adobe, Flash and HTML5
Adobe, Flash and HTML5Adobe, Flash and HTML5
Adobe, Flash and HTML5
 
Flash and HTML5 Compared
Flash and HTML5 ComparedFlash and HTML5 Compared
Flash and HTML5 Compared
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Mobile Design that Doesn't Suck
Mobile Design that Doesn't SuckMobile Design that Doesn't Suck
Mobile Design that Doesn't Suck
 
Design Fundamentals for Developers
Design Fundamentals for DevelopersDesign Fundamentals for Developers
Design Fundamentals for Developers
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flash
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screens
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devices
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 

Recently uploaded

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
 
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
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .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
 
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
 
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
 
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
 
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
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
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
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
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
 
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
 
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
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
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
 
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
 
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)

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...
 
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
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .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.
 
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
 
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...
 
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...
 
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
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
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
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
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.
 
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
 
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
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
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
 
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
 
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
 

5 Things Developers Need to Know About Design