Design is in the BIG PICTURE (& teensy tiny details)

  • 3,404 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,404
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
64
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. NIKI BROWN Friday, July 23, 2010
  • 2. NIKI BROWN Friday, July 23, 2010
  • 3. Friday, July 23, 2010
  • 4. TOPICS • Color • Typography • Visual Hierarchy • Grid Systems Friday, July 23, 2010
  • 5. PLAID MANIA!!1one Friday, July 23, 2010
  • 6. PLAID MANIA!!1one Friday, July 23, 2010
  • 7. COLOR • Color Meaning & Psychology • Color Schemes & Selecting Colors • Super Awesome Helpful Tools Friday, July 23, 2010
  • 8. COLOR PSYCHOLOGY & MEANING Friday, July 23, 2010
  • 9. COLOR RESEARCH & YOUR AUDIENCE • Green vs Green Friday, July 23, 2010
  • 10. COLOR RESEARCH & YOUR AUDIENCE Friday, July 23, 2010
  • 11. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 12. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 13. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 14. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 15. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 16. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 17. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 18. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 19. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 20. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  • 21. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 22. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 23. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 24. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 25. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 26. SELECTING COLORS • Select Base Color • Pick Color Scheme • Add Muted Tones • Select Text Color • Transparency div { background-color: rgba(0,144,156,.7); } Friday, July 23, 2010
  • 27. SUPER AWESOME HELPFUL TOOLS Kuler.Adobe.com Friday, July 23, 2010
  • 28. SUPER AWESOME HELPFUL TOOLS Pictaculous.com Friday, July 23, 2010
  • 29. SUPER AWESOME HELPFUL TOOLS Colorlovers.com Friday, July 23, 2010
  • 30. Friday, July 23, 2010
  • 31. TWEAKING COLOR • Change colors to match my plaid shirt • Adjust main content area for more contrast • Change sale button color • Add a tint to the page background Friday, July 23, 2010
  • 32. Friday, July 23, 2010
  • 33. TYPOGRAPHY • Choosing Typefaces • Sizing • Line Length • Leading (Line-Height) • Color (Again!) Friday, July 23, 2010
  • 34. THIS GUY KNOWS TYPOGRAPHY “ Typography is a craft by which the meanings of text (or its absence of meaning) can be clarified, honored and shared...” Friday, July 23, 2010
  • 35. CHOOSING TYPEFACES • Read your content first!!! • Typefaces have character & personality • Awesome, Awesome, Awesome • Pair typefaces that are visually different • It’s an art - not science - Experiment • @font-face, Fontspring, Typekit, Type Deck, Google Fonts Friday, July 23, 2010
  • 36. Keep it simple stupid! Friday, July 23, 2010
  • 37. Friday, July 23, 2010
  • 38. Friday, July 23, 2010
  • 39. SIZING TYPE • Relative to your readers and typeface • When in doubt make it bigger • Readability and contrast • Verdana vs Georgia vs Times • PX vs EMs vs % • Internet Exploder (6&7) can’t resize text in PX Friday, July 23, 2010
  • 40. Friday, July 23, 2010
  • 41. LINE LENGTH • “Choose a comfortable measure” - Bringhurst • 1 column 45-75 characters (12 words) • Multi-column 40-50 characters • Control line length (sorta) div#mainContent { width:516px; } Friday, July 23, 2010
  • 42. Friday, July 23, 2010
  • 43. LEADING (LINE-HEIGHT) • Leading lets your text breathe This text is very hard to read because its so crammed together that I can’t really stand it can you? Really? Be honest! • Longer Lines = More Leading, Shorter = Less • Set PX, EMs or % p { line-height:1.5em; } Friday, July 23, 2010
  • 44. Friday, July 23, 2010
  • 45. TYPE & COLOR • Contrast, contrast, contrast!!! • Avoid setting intense colors on inte • Dark on light, light on dark Friday, July 23, 2010
  • 46. Friday, July 23, 2010
  • 47. Friday, July 23, 2010
  • 48. TWEAKING TYPE • Change typefaces • Tweak sizes • Increase Contrast Friday, July 23, 2010
  • 49. Friday, July 23, 2010
  • 50. VISUAL HIERARCHY • Visual Hierarchy helps users process information. It defines importance, direction and order. • Size • Color • Placement • Whitespace Friday, July 23, 2010
  • 51. Friday, July 23, 2010
  • 52. Friday, July 23, 2010
  • 53. Friday, July 23, 2010
  • 54. Friday, July 23, 2010
  • 55. TWEAKING VISUAL HIEARCHY • Make the logo BIGGER! • Change colors of add to cart buttons to stand out more • make sale button bigger • Add more contrast to New Items Friday, July 23, 2010
  • 56. Friday, July 23, 2010
  • 57. GOOD OLD GRIDS “ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” -Josef Müller-Brockmann Friday, July 23, 2010
  • 58. GETTIN’ GRIDDY • Grids are limiting. LIES, I tell you LIES!!! • Constraints can force creativity • Grids allow you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page   Friday, July 23, 2010
  • 59. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  • 60. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  • 61. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  • 62. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  • 63. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  • 64. GETTIN’ GRIDDY • Content best fits a hierarchical grid • Align elements using 960 grid system • Main content is 2x width of sidebar • Gutters are all same size • Bonus alignment of a baseline grid • Break the grid to grab attention Friday, July 23, 2010
  • 65. Friday, July 23, 2010
  • 66. Friday, July 23, 2010
  • 67. Friday, July 23, 2010
  • 68. Friday, July 23, 2010
  • 69. Friday, July 23, 2010
  • 70. Friday, July 23, 2010
  • 71. Friday, July 23, 2010
  • 72. Friday, July 23, 2010
  • 73. QUESTIONS? Friday, July 23, 2010
  • 74. QUESTIONS? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Friday, July 23, 2010
  • 75. THANK YOU! STALK ME ON THE INTERTUBWEBZ: NikiBrown.com Twitter.com/nikibrown Dribbble.com/players/nikibrown Friday, July 23, 2010
  • 76. THANK YOU! STALK ME ON THE INTERTUBWEBZ: NikiBrown.com Twitter.com/nikibrown Dribbble.com/players/nikibrown Friday, July 23, 2010