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 reaso...
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

@P...
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

@PaulTra...
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....
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...
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, ...
Upcoming SlideShare
Loading in …5
×

5 Things Developers Need to Know About Design

4,493 views

Published on

Awesome design doesn't have to come from the design department. In fact, designers often play by simple guidelines they follow fairly intuitively that anyone can learn. In this session you will learn the techniques designers use as well as the things they wish every developer knew about design. Understanding these 5 things will not only make you better at design, it will help you work better with designers.

(from the 2013 HTML5 Developer Conference)

Published in: Design, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,493
On SlideShare
0
From Embeds
0
Number of Embeds
2,597
Actions
Shares
0
Downloads
67
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

5 Things Developers Need to Know About Design

  1. 1. 5 5 THINGS Every Developer Needs to Know ABOUT DESIGN @PaulTrani Monday, October 28, 13
  2. 2. 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
  3. 3. 5 Why it matters... @PaulTrani Monday, October 28, 13
  4. 4. Research www.jnd.org Monday, October 28, 13 5 @PaulTrani
  5. 5. 5 Sexy? @PaulTrani Monday, October 28, 13
  6. 6. 5 Sexy! @PaulTrani Monday, October 28, 13
  7. 7. 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
  8. 8. 5 @PaulTrani Monday, October 28, 13
  9. 9. 2 5 Know how to... LEAD THE EYE @PaulTrani Monday, October 28, 13
  10. 10. 5 It’s about leading the eye... @PaulTrani Monday, October 28, 13
  11. 11. 5 @PaulTrani Monday, October 28, 13
  12. 12. 5 @PaulTrani Monday, October 28, 13
  13. 13. 5 @PaulTrani Monday, October 28, 13
  14. 14. 5 @PaulTrani Monday, October 28, 13
  15. 15. 5 @PaulTrani Monday, October 28, 13
  16. 16. 5 @PaulTrani Monday, October 28, 13
  17. 17. 5 @PaulTrani Monday, October 28, 13
  18. 18. 5 @PaulTrani Monday, October 28, 13
  19. 19. 5 @PaulTrani Monday, October 28, 13
  20. 20. Golden Ratio 5 @PaulTrani Monday, October 28, 13
  21. 21. 5 Golden Ratio Fibonacci  Numbers @PaulTrani Monday, October 28, 13
  22. 22. Golden Ratio 5 @PaulTrani Monday, October 28, 13
  23. 23. Golden Ratio 5 @PaulTrani Monday, October 28, 13
  24. 24. 5 Which object is easier to look at? @PaulTrani Monday, October 28, 13
  25. 25. 5 Sharp corners take focus outside the rectangle. @PaulTrani Monday, October 28, 13
  26. 26. 5 Rounded corners take focus inside the rectangle. @PaulTrani Monday, October 28, 13
  27. 27. 5 http://www.mani.de/backstage/?p=483 Monday, October 28, 13 @PaulTrani
  28. 28. 5 http://www.mani.de/backstage/?p=483 Monday, October 28, 13 @PaulTrani
  29. 29. 5 Adventure Co. escape normal @PaulTrani Monday, October 28, 13
  30. 30. 5 @PaulTrani Monday, October 28, 13
  31. 31. 3 5 Know how to... USE COLOR & IMAGERY Monday, October 28, 13 @PaulTrani
  32. 32. 5 “Use color to emphasize importance, not decorate a page.” Alexander White @PaulTrani Monday, October 28, 13
  33. 33. 5 “A picture is worth a thousand words.” “Let the picture tell the story.” @PaulTrani Monday, October 28, 13
  34. 34. 5 @PaulTrani Monday, October 28, 13
  35. 35. 4 5 Know how to... USE TEXT & TYPOGRAPHY Monday, October 28, 13 @PaulTrani
  36. 36. 5 Typography “Typography has one plain duty before it and that’s to convey information in writing.” Emil Ruder @PaulTrani Monday, October 28, 13
  37. 37. 5 Choosing Fonts • Choose a font that fits the subject • Don’t use more than three @PaulTrani Monday, October 28, 13
  38. 38. 5 Font Styles @PaulTrani Monday, October 28, 13
  39. 39. 5 Font Awesomeness @PaulTrani Monday, October 28, 13
  40. 40. 5 @PaulTrani Monday, October 28, 13
  41. 41. 5 5 Always get... FEEDBACK FROM OTHERS Monday, October 28, 13 @PaulTrani
  42. 42. 5 Over 1 million members... Behance.net @PaulTrani Monday, October 28, 13
  43. 43. 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
  44. 44. 6 5 Then... MAKE IT AWESOME Monday, October 28, 13 @PaulTrani
  45. 45. 5 Adventure Co. escape normal @PaulTrani Monday, October 28, 13
  46. 46. 5 @PaulTrani Monday, October 28, 13
  47. 47. 5 An electronic journal for mobile phones. Keep track of what you want and where you found it. @PaulTrani Monday, October 28, 13
  48. 48. 5 @PaulTrani Monday, October 28, 13
  49. 49. 5 @PaulTrani Monday, October 28, 13
  50. 50. 5 @PaulTrani Monday, October 28, 13
  51. 51. 5 @PaulTrani Monday, October 28, 13
  52. 52. 5 @PaulTrani Monday, October 28, 13
  53. 53. 5 Closing Remarks @PaulTrani Monday, October 28, 13
  54. 54. 5 Don’t try to be great, try to be invisible. @PaulTrani Monday, October 28, 13
  55. 55. 5 Don’t “put a star burst behind it.” @PaulTrani Monday, October 28, 13
  56. 56. 5 Don’t use yellow text on a white background. @PaulTrani Monday, October 28, 13
  57. 57. 5 Don’t use Comic Sans. @PaulTrani Monday, October 28, 13
  58. 58. 5 Thank You! @paultrani ptrani@adobe.com http://www.paultrani.com http://www.behance.net @PaulTrani Monday, October 28, 13

×