Designfundamentals forweb-trani-2010
0 likes676 views
Paul Trani is an Adobe Flash Evangelist who will discuss design fundamentals for developers. He will cover layout principles like grids, the golden ratio and leading the eye. Typography fundamentals like serif vs sans-serif fonts and font structure will also be discussed. Color theory basics such as the color wheel, warm and cool colors, and using color for hierarchy will conclude the presentation. Attendees will learn design skills to become better developers and see examples of good and bad design.
Designfundamentals forweb-trani-2010
- 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
- 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
- 46. BETSY
- 47. BALANCE gives a clear, unified message.
- 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.”
- 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.”
- 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
- 72. FONT STRUCTURE • There are different type classifications, • Understand type anatomy • Understand type measurements. • Use the Font Picker.
- 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