Your SlideShare is downloading. ×
0
NIKI BROWN

Friday, July 23, 2010
NIKI BROWN

Friday, July 23, 2010
Friday, July 23, 2010
TOPICS
           • Color
           • Typography
           • Visual Hierarchy
           • Grid Systems




Friday, July...
PLAID MANIA!!1one




Friday, July 23, 2010
PLAID MANIA!!1one




Friday, July 23, 2010
COLOR
           • Color Meaning & Psychology
           • Color Schemes & Selecting Colors
           • Super Awesome Hel...
COLOR PSYCHOLOGY
                  & MEANING




Friday, July 23, 2010
COLOR RESEARCH
                  & YOUR AUDIENCE
           • Green vs Green




Friday, July 23, 2010
COLOR RESEARCH
                  & YOUR AUDIENCE




Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

   ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SELECTING COLORS
            • Select Base Color
           • Pick Color Scheme
           • Add Muted Tones
           • ...
SUPER AWESOME
                  HELPFUL TOOLS
                   Kuler.Adobe.com




Friday, July 23, 2010
SUPER AWESOME
                  HELPFUL TOOLS
                   Pictaculous.com




Friday, July 23, 2010
SUPER AWESOME
                  HELPFUL TOOLS
                   Colorlovers.com




Friday, July 23, 2010
Friday, July 23, 2010
TWEAKING COLOR
           • Change colors to match my plaid shirt
           • Adjust main content area for more contrast
...
Friday, July 23, 2010
TYPOGRAPHY
           • Choosing Typefaces
           • Sizing
           • Line Length
           • Leading (Line-Height)...
THIS GUY KNOWS
                   TYPOGRAPHY
                        “ Typography is a craft by which the meanings
       ...
CHOOSING TYPEFACES
          • Read your content first!!!
          • Typefaces have character & personality

          • ...
Keep it simple stupid!

Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
SIZING TYPE
           • Relative to your readers and typeface
           • When in doubt make it bigger
           • Read...
Friday, July 23, 2010
LINE LENGTH
           • “Choose a comfortable measure” - Bringhurst
           • 1 column 45-75 characters (12 words)
   ...
Friday, July 23, 2010
LEADING (LINE-HEIGHT)
           • Leading lets your text breathe
                  This text is very hard to read because...
Friday, July 23, 2010
TYPE & COLOR
           • Contrast, contrast, contrast!!!
           • Avoid setting intense colors on inte
           • D...
Friday, July 23, 2010
Friday, July 23, 2010
TWEAKING TYPE
           • Change typefaces
           • Tweak sizes
           • Increase Contrast




Friday, July 23, 2...
Friday, July 23, 2010
VISUAL HIERARCHY
            • Visual Hierarchy helps users process
              information. It defines importance, dire...
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
TWEAKING
                  VISUAL HIEARCHY
            • Make the logo BIGGER!

            • Change colors of add to cart...
Friday, July 23, 2010
GOOD OLD GRIDS
            “ The grid system is an aid, not a guarantee.
              It permits a number of possible use...
GETTIN’ GRIDDY
           • Grids are limiting. LIES, I tell you LIES!!!
           • Constraints can force creativity
   ...
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid
...
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid
...
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid
...
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid
...
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid
...
GETTIN’ GRIDDY
           • Content best fits a hierarchical grid

           • Align elements using 960 grid system

    ...
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
QUESTIONS?




Friday, July 23, 2010
QUESTIONS?

                 ? ?           ?
              ?          ?



                ? ?     ? ?
                   ...
THANK YOU!

                        STALK ME ON
                        THE INTERTUBWEBZ:
                        NikiBrow...
THANK YOU!

                        STALK ME ON
                        THE INTERTUBWEBZ:
                        NikiBrow...
Upcoming SlideShare
Loading in...5
×

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

3,885

Published on

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

No Downloads
Views
Total Views
3,885
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
65
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. NIKI BROWN Friday, July 23, 2010
  2. 2. NIKI BROWN Friday, July 23, 2010
  3. 3. Friday, July 23, 2010
  4. 4. TOPICS • Color • Typography • Visual Hierarchy • Grid Systems Friday, July 23, 2010
  5. 5. PLAID MANIA!!1one Friday, July 23, 2010
  6. 6. PLAID MANIA!!1one Friday, July 23, 2010
  7. 7. COLOR • Color Meaning & Psychology • Color Schemes & Selecting Colors • Super Awesome Helpful Tools Friday, July 23, 2010
  8. 8. COLOR PSYCHOLOGY & MEANING Friday, July 23, 2010
  9. 9. COLOR RESEARCH & YOUR AUDIENCE • Green vs Green Friday, July 23, 2010
  10. 10. COLOR RESEARCH & YOUR AUDIENCE Friday, July 23, 2010
  11. 11. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  12. 12. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  13. 13. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  14. 14. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  15. 15. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  16. 16. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  17. 17. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  18. 18. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  19. 19. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  20. 20. COLOR SCHEMES • Monochromatic • Achromatic • Complimentary • Analogous • Split Complementary Friday, July 23, 2010
  21. 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. 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. 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. 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. 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. 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. 27. SUPER AWESOME HELPFUL TOOLS Kuler.Adobe.com Friday, July 23, 2010
  28. 28. SUPER AWESOME HELPFUL TOOLS Pictaculous.com Friday, July 23, 2010
  29. 29. SUPER AWESOME HELPFUL TOOLS Colorlovers.com Friday, July 23, 2010
  30. 30. Friday, July 23, 2010
  31. 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. 32. Friday, July 23, 2010
  33. 33. TYPOGRAPHY • Choosing Typefaces • Sizing • Line Length • Leading (Line-Height) • Color (Again!) Friday, July 23, 2010
  34. 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. 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. 36. Keep it simple stupid! Friday, July 23, 2010
  37. 37. Friday, July 23, 2010
  38. 38. Friday, July 23, 2010
  39. 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. 40. Friday, July 23, 2010
  41. 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. 42. Friday, July 23, 2010
  43. 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. 44. Friday, July 23, 2010
  45. 45. TYPE & COLOR • Contrast, contrast, contrast!!! • Avoid setting intense colors on inte • Dark on light, light on dark Friday, July 23, 2010
  46. 46. Friday, July 23, 2010
  47. 47. Friday, July 23, 2010
  48. 48. TWEAKING TYPE • Change typefaces • Tweak sizes • Increase Contrast Friday, July 23, 2010
  49. 49. Friday, July 23, 2010
  50. 50. VISUAL HIERARCHY • Visual Hierarchy helps users process information. It defines importance, direction and order. • Size • Color • Placement • Whitespace Friday, July 23, 2010
  51. 51. Friday, July 23, 2010
  52. 52. Friday, July 23, 2010
  53. 53. Friday, July 23, 2010
  54. 54. Friday, July 23, 2010
  55. 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. 56. Friday, July 23, 2010
  57. 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. 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. 59. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  60. 60. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  61. 61. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  62. 62. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  63. 63. TYPES OF GRIDS • Manuscript, Column Grid, Modular, Hierarchal • Let your content dictate your grid   Friday, July 23, 2010
  64. 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. 65. Friday, July 23, 2010
  66. 66. Friday, July 23, 2010
  67. 67. Friday, July 23, 2010
  68. 68. Friday, July 23, 2010
  69. 69. Friday, July 23, 2010
  70. 70. Friday, July 23, 2010
  71. 71. Friday, July 23, 2010
  72. 72. Friday, July 23, 2010
  73. 73. QUESTIONS? Friday, July 23, 2010
  74. 74. QUESTIONS? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Friday, July 23, 2010
  75. 75. THANK YOU! STALK ME ON THE INTERTUBWEBZ: NikiBrown.com Twitter.com/nikibrown Dribbble.com/players/nikibrown Friday, July 23, 2010
  76. 76. THANK YOU! STALK ME ON THE INTERTUBWEBZ: NikiBrown.com Twitter.com/nikibrown Dribbble.com/players/nikibrown Friday, July 23, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×