1. Paul Trani ptrani@adobe.com www.paultrani.com @paultrani
DESIGN FUNDAMENTALS
for Developers
The fundamentals of graphic design for screens

2. • Adobe Flash Platform Evangelist
• Lynda.com and Layers Magazine author
• Adobe Certified Instructor
• Art school graduate
Work
Love
Ride
Play
PAUL TRANI

3. “There are only 10 kinds of people in the world.
Those that know binary and those that don't.”

4. “5 out of 4 designers have a problem with fractions.”

5. AGENDA
• Understand the fundamentals of graphic
design for screens

6. WHY SHOULD I CARE?
• Understanding design will help you be a
better developer
• Developers with design skills are in demand

7. DO’S AND DON’TS
Design Don’ts
• http://bouncebargainrentals.com
• http://www.html5zombo.com
Inspiration
• http://www.designmeltdown.com
• http://www.mobileawesomeness.com
• http://www.thefwa.com
• http://patterntap.com
• http://quince.infragistics.com
• http://www.designupdate.com

8. PLANNING
First, define what you’re trying to do.

9. PLANNING
First, define what you’re trying to do.
bEtsy, we want to sell you stuff you don’t need.

11. PLANNING
Next, determine your audience.

12. PLANNING
Next, determine your audience.
Men and women between 18-35.
Unique individuals that crave attention and have money to burn.

14. PLANNING
The audience determines what needs to be created.

15. PLANNING
The audience determines what needs to be created.
Audience has a laptop and a mobile phone.

17. TWO RULES BEFORE DESIGNING

18. RULE 1
Don’t use design programs.

20. RULE 2
It’s all about leading the eye.

21. RULE 3
There are no hard and fast rules.

22. DESIGN FUNDAMENTALS
Layout
Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
Typography
Serif vs. Sans
Color
Color Wheel, Color Choices, Meaning

23. DESIGN FUNDAMENTALS
Typography
Serif vs. Sans
Color
Color Wheel, Color Choices, Meaning

24. GRIDStart with a

25. RULE OF THIRDS
• Dividing a page into 3 rows and 3 columns
• The eye naturally follows this “F” shape

27. Layout Design AIR App:
www.paultrani.com

30. MOBILE = ONE COLUMN

31. BETSY

32. GOLDEN
RATIO
The

33. THE GOLDEN RATIO
• Proportion defined as 1.618
• Found in nature, art and architecture
1.618 1

34. Fibonacci Numbers

35. THE GOLDEN RATIO IN LAYOUT
• Overall Width / 1.618 = Content Block
• Overall Width – Content Block = Sidebar Block
Overall Width
Content Block
1.618
Sidebar Block
1

38. BETSY

39. ELEMENTS OF A GOOD LAYOUT

40. SPACE
Implies importance, elegance, and professionalism.

41. SPACE
• Don’t try to be great, try to be invisible
“Perfection is achieved not when there is nothing left to add,
but when there is nothing left to take away”
Antoine de Saint-Exupery

42. SPACE
WalMart Target

43. h"p://www.kennethcole.com

46. BETSY

47. BALANCE
gives a clear, unified message.

48. SYMMETRICAL BALANCE
Salvador Dali – The Last Supper

49. h"p://www.cnn.com

50. h"p://www.mobilewebbook.com

51. h"p://www.bbc.co.uk

53. h"p://www.hbo.com

55. BETSY

56. Variety Variety Variety
VARIETY VARIETY
VarietyVARIETYVariety
variety variety
variety variety
variety Variety

57. VARIETY
• Gives visual and conceptual interest
• Too much and the design will appear
amateurish
• Too little and the design will appear boring
“Variety is the spice of life.”

58. Joan Miro – Blue II (surrealism)

59. h"p://www.webdesignerwall.com

60. h"p://www.hawkart.com

61. BETSY

62. HIERARCHY
A well designed project has

63. HEIRARCHY
• A clear starting point that guides the
viewer through the design
• Separate the most important element
• Group the less important elements
“Heirarchy does not refer to
upper management.”

65. h"p://www.semisture.com

67. BETSY

68. DESIGN FUNDAMENTALS
Layout
Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
Serif vs. Sans
Color
Color Wheel, Color Choices, Meaning
Typography

69. • Choose a font that fits the subject
• Don’t use more than three
• @font-face
TYPOGRAPHY
“Typography has one plain duty before it and that’s to
convey information in writing.”
Emil Ruder, Founder of Basel School of Design

70. • Two main types:
– Serif fonts have short finishing lines on strokes
– Sans-serif lack Serifs and and are considered
modern as a result.
CHOOSING A FONT

71. Contrast
Size
Hierarchy
MAKE IT LEGIBLE

72. FONT STRUCTURE
• There are different type classifications,
• Understand type anatomy
• Understand type measurements.
• Use the Font Picker.

73. h"p://www.wesEn.com

74. h"p://www.toysrus.com

76. BETSY

77. DESIGN FUNDAMENTALS
Layout
Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction
Typography
Serif vs. Sans
Color
Color Wheel, Color Choices, Meaning

78. COLOR
• Use color to create hierarchy, dominance,
and balance.
• Consistent use of a few colors makes a
more cohesive design.
“Use color to emphasize importance, not decorate a page.”
Alexander White

79. COLOR
• The Color Wheel
• Warm colors bring elements forward.
• Cool colors move elements back.
• Kuler

80. Dong Kingman

83. IN ACTION

84. Paul Trani ptrani@adobe.com www.paultrani.com @paultrani
THANK YOU
h@p://www.designmeltdown.com
h@p://www.mobileawesomeness.com
h@p://pa@erntap.com
h@p://quince.infragisEcs.com
h@p://www.designupdate.com