Designfundamentals forweb-trani-2010

545 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
545
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designfundamentals forweb-trani-2010

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

  2. 2. • Adobe Flash Platform Evangelist • Lynda.com and Layers Magazine author • Adobe Certified Instructor • Art school graduate Work Love Ride Play PAUL TRANI
  3. 3. “There are only 10 kinds of people in the world. Those that know binary and those that don't.”
  4. 4. “5 out of 4 designers have a problem with fractions.”
  5. 5. AGENDA •  Understand the fundamentals of graphic design for screens
  6. 6. WHY SHOULD I CARE? •  Understanding design will help you be a better developer •  Developers with design skills are in demand
  7. 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. 8. PLANNING First, define what you’re trying to do.
  9. 9. PLANNING First, define what you’re trying to do. bEtsy, we want to sell you stuff you don’t need.
  10. 10. PLANNING Next, determine your audience.
  11. 11. PLANNING Next, determine your audience. Men and women between 18-35. Unique individuals that crave attention and have money to burn.
  12. 12. PLANNING The audience determines what needs to be created.
  13. 13. PLANNING The audience determines what needs to be created. Audience has a laptop and a mobile phone.
  14. 14. TWO RULES BEFORE DESIGNING
  15. 15. RULE 1 Don’t use design programs.
  16. 16. RULE 2 It’s all about leading the eye.
  17. 17. RULE 3 There are no hard and fast rules.
  18. 18. DESIGN FUNDAMENTALS Layout Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction Typography Serif
vs.
Sans Color Color Wheel, Color Choices, Meaning
  19. 19. DESIGN FUNDAMENTALS Typography Serif
vs.
Sans Color Color Wheel, Color Choices, Meaning
  20. 20. GRIDStart with a
  21. 21. RULE OF THIRDS •  Dividing a page into 3 rows and 3 columns •  The eye naturally follows this “F” shape
  22. 22. Layout Design AIR App: www.paultrani.com
  23. 23. MOBILE = ONE COLUMN
  24. 24. BETSY
  25. 25. GOLDEN RATIO The
  26. 26. THE GOLDEN RATIO •  Proportion defined as 1.618 •  Found in nature, art and architecture 1.618
 1

  27. 27. Fibonacci
Numbers

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

  29. 29. BETSY
  30. 30. ELEMENTS OF A GOOD LAYOUT
  31. 31. SPACE Implies importance, elegance, and professionalism.
  32. 32. 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
  33. 33. SPACE WalMart Target
  34. 34. h"p://www.kennethcole.com


  35. 35. BETSY
  36. 36. BALANCE gives a clear, unified message.
  37. 37. SYMMETRICAL BALANCE Salvador
Dali
–
The
Last
Supper

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


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


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


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


  42. 42. BETSY
  43. 43. Variety Variety Variety VARIETY VARIETY VarietyVARIETYVariety variety variety variety variety variety Variety
  44. 44. 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.”
  45. 45. Joan
Miro
–
Blue
II

(surrealism)

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


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


  48. 48. BETSY
  49. 49. HIERARCHY A well designed project has
  50. 50. 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.”
  51. 51. h"p://www.semisture.com


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

  54. 54. •  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
  55. 55. •  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
  56. 56. Contrast Size Hierarchy MAKE IT LEGIBLE
  57. 57. FONT STRUCTURE •  There are different type classifications, •  Understand type anatomy •  Understand type measurements. •  Use the Font Picker.
  58. 58. h"p://www.wesEn.com


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


  60. 60. BETSY
  61. 61. DESIGN FUNDAMENTALS Layout Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction Typography Serif
vs.
Sans Color Color Wheel, Color Choices, Meaning
  62. 62. 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
  63. 63. COLOR •  The Color Wheel •  Warm colors bring elements forward. •  Cool colors move elements back. •  Kuler
  64. 64. Dong
Kingman

  65. 65. IN ACTION
  66. 66. 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



×