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
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
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
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
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
50. VISUAL HIERARCHY
• Visual Hierarchy helps users process
information. It defines importance, direction
and order.
• Size
• Color
• Placement
• Whitespace
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
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
