58
@PaulTrani 5 5 THINGS Every Developer Needs to Know ABOUT DESIGN Monday, October 28, 13

5 Things Developers Need to Know About Design

  • View
    3.067

  • Download
    0

Embed Size (px)

DESCRIPTION

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)

Citation preview

Page 1: 5 Things Developers Need to Know About Design

@PaulTrani

55

THINGS

Every Developer Needs to Know

ABOUT DESIGN

Monday, October 28, 13

Page 2: 5 Things Developers Need to Know About Design

@PaulTrani

5

Paul TraniCreative Cloud Evangelist, Adobe17 years of making design mistakes4 year-old cleverly disguised as a reasonable adult

Monday, October 28, 13

Page 3: 5 Things Developers Need to Know About Design

@PaulTrani

5

Why it matters...

Monday, October 28, 13

Page 4: 5 Things Developers Need to Know About Design

@PaulTrani

5Research

www.jnd.org @PaulTraniMonday, October 28, 13

Page 5: 5 Things Developers Need to Know About Design

@PaulTrani

5

Sexy?

Monday, October 28, 13

Page 6: 5 Things Developers Need to Know About Design

@PaulTrani

5

Sexy!

Monday, October 28, 13

Page 7: 5 Things Developers Need to Know About Design

@PaulTrani

155

Know that...

YOU’RE NOT A DESIGNER*

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

Page 8: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 9: 5 Things Developers Need to Know About Design

@PaulTrani

25

Know how to...

LEAD THE EYE

Monday, October 28, 13

Page 10: 5 Things Developers Need to Know About Design

@PaulTrani

5

It’s about leading the eye...

Monday, October 28, 13

Page 11: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 12: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 13: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 14: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 15: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 16: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 17: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 18: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 19: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 20: 5 Things Developers Need to Know About Design

@PaulTrani

5Golden Ratio

Monday, October 28, 13

Page 21: 5 Things Developers Need to Know About Design

@PaulTrani

5Golden Ratio

Fibonacci  Numbers

Monday, October 28, 13

Page 22: 5 Things Developers Need to Know About Design

@PaulTrani

5Golden Ratio

Monday, October 28, 13

Page 23: 5 Things Developers Need to Know About Design

@PaulTrani

5Golden Ratio

Monday, October 28, 13

Page 24: 5 Things Developers Need to Know About Design

@PaulTrani

5

Which object is easier to look at?

Monday, October 28, 13

Page 25: 5 Things Developers Need to Know About Design

@PaulTrani

5

Sharp corners take focus outside the rectangle.

Monday, October 28, 13

Page 26: 5 Things Developers Need to Know About Design

@PaulTrani

5

Rounded corners take focus inside the rectangle.

Monday, October 28, 13

Page 27: 5 Things Developers Need to Know About Design

@PaulTrani

5

http://www.mani.de/backstage/?p=483

Monday, October 28, 13

Page 28: 5 Things Developers Need to Know About Design

@PaulTrani

5

http://www.mani.de/backstage/?p=483

Monday, October 28, 13

Page 29: 5 Things Developers Need to Know About Design

@PaulTrani

5

Adventure Co.escape normal

Monday, October 28, 13

Page 30: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 31: 5 Things Developers Need to Know About Design

@PaulTrani

35

Know how to...

USE COLOR & IMAGERY

Monday, October 28, 13

Page 32: 5 Things Developers Need to Know About Design

@PaulTrani

5

“Use color to emphasize importance, not decorate a page.” Alexander White

Monday, October 28, 13

Page 33: 5 Things Developers Need to Know About Design

@PaulTrani

5

“A picture is worth a thousand words.”

“Let the picture tell the story.”

Monday, October 28, 13

Page 34: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 35: 5 Things Developers Need to Know About Design

@PaulTrani

45

Know how to...

USE TEXT & TYPOGRAPHY

Monday, October 28, 13

Page 36: 5 Things Developers Need to Know About Design

@PaulTrani

5Typography

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

Emil Ruder

Monday, October 28, 13

Page 37: 5 Things Developers Need to Know About Design

@PaulTrani

5

Choosing Fonts

• Choose a font that fits the subject

• Don’t use more than three

Monday, October 28, 13

Page 38: 5 Things Developers Need to Know About Design

@PaulTrani

5

Font Styles

Monday, October 28, 13

Page 39: 5 Things Developers Need to Know About Design

@PaulTrani

5

Font Awesomeness

Monday, October 28, 13

Page 40: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 41: 5 Things Developers Need to Know About Design

@PaulTrani

55

FEEDBACK FROM OTHERS

Always get...

Monday, October 28, 13

Page 42: 5 Things Developers Need to Know About Design

@PaulTrani

5

Over 1 million members...

Behance.net

Monday, October 28, 13

Page 43: 5 Things Developers Need to Know About Design

@PaulTrani

55

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.

Monday, October 28, 13

Page 44: 5 Things Developers Need to Know About Design

@PaulTrani

65

MAKE IT AWESOME

Then...

Monday, October 28, 13

Page 45: 5 Things Developers Need to Know About Design

@PaulTrani

5

Adventure Co.escape normal

Monday, October 28, 13

Page 46: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 47: 5 Things Developers Need to Know About Design

@PaulTrani

5

An electronic journal for mobile phones. Keep track of what you want and where you found it.

Monday, October 28, 13

Page 48: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 49: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 50: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 51: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 52: 5 Things Developers Need to Know About Design

@PaulTrani

5

Monday, October 28, 13

Page 53: 5 Things Developers Need to Know About Design

@PaulTrani

5

Closing Remarks

Monday, October 28, 13

Page 54: 5 Things Developers Need to Know About Design

@PaulTrani

5

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

Monday, October 28, 13

Page 55: 5 Things Developers Need to Know About Design

@PaulTrani

5

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

Monday, October 28, 13

Page 56: 5 Things Developers Need to Know About Design

@PaulTrani

5

Don’t use yellow text on a white background.

Monday, October 28, 13

Page 57: 5 Things Developers Need to Know About Design

@PaulTrani

5

Don’t use Comic Sans.

Monday, October 28, 13

Page 58: 5 Things Developers Need to Know About Design

@PaulTrani

5

Thank You!

@[email protected]

http://www.paultrani.com http://www.behance.net

Monday, October 28, 13