SlideShare a Scribd company logo
1 of 76
Download to read offline
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 23, 2010
PLAID MANIA!!1one




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




Friday, July 23, 2010
COLOR
           • Color Meaning & Psychology
           • Color Schemes & Selecting Colors
           • Super Awesome Helpful Tools




Friday, July 23, 2010
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

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
COLOR SCHEMES
           • Monochromatic

           • Achromatic

           • Complimentary

           • Analogous

           • Split Complementary



Friday, July 23, 2010
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
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
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
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
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
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
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
           • Change sale button color
           • Add a tint to the page background




Friday, July 23, 2010
Friday, July 23, 2010
TYPOGRAPHY
           • Choosing Typefaces
           • Sizing
           • Line Length
           • Leading (Line-Height)
           • Color (Again!)




Friday, July 23, 2010
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
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
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
           • 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
Friday, July 23, 2010
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
Friday, July 23, 2010
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
Friday, July 23, 2010
TYPE & COLOR
           • Contrast, contrast, contrast!!!
           • Avoid setting intense colors on inte
           • Dark on light, light on dark




Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
TWEAKING TYPE
           • Change typefaces
           • Tweak sizes
           • Increase Contrast




Friday, July 23, 2010
Friday, July 23, 2010
VISUAL HIERARCHY
            • Visual Hierarchy helps users process
              information. It defines importance, direction
              and order.

            • Size
            • Color
            • Placement
            • Whitespace


Friday, July 23, 2010
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 buttons to stand

                   out more

            • make sale button bigger

            • Add more contrast to New Items



Friday, July 23, 2010
Friday, July 23, 2010
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
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
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid

            




Friday, July 23, 2010
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid

            




Friday, July 23, 2010
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid

            




Friday, July 23, 2010
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid

            




Friday, July 23, 2010
TYPES OF GRIDS
           • Manuscript, Column Grid, Modular, Hierarchal

           • Let your content dictate your grid

            




Friday, July 23, 2010
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
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?

                 ? ?           ?
              ?          ?



                ? ?     ? ?
                        ? ?
                    ?
                 ?    ?
Friday, July 23, 2010
THANK YOU!

                        STALK ME ON
                        THE INTERTUBWEBZ:
                        NikiBrown.com
                        Twitter.com/nikibrown
                        Dribbble.com/players/nikibrown




Friday, July 23, 2010
THANK YOU!

                        STALK ME ON
                        THE INTERTUBWEBZ:
                        NikiBrown.com
                        Twitter.com/nikibrown
                        Dribbble.com/players/nikibrown




Friday, July 23, 2010

More Related Content

Recently uploaded

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYS
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYSCERTIFICATE TEMPLATES FOR PORTFOLIO DAYS
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYSCarloJamesSablan1
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...JIT KUMAR GUPTA
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 

Recently uploaded (20)

General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYS
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYSCERTIFICATE TEMPLATES FOR PORTFOLIO DAYS
CERTIFICATE TEMPLATES FOR PORTFOLIO DAYS
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 

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

  • 4. TOPICS • Color • Typography • Visual Hierarchy • Grid Systems 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
  • 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
  • 36. Keep it simple stupid! 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
  • 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
  • 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
  • 45. TYPE & COLOR • Contrast, contrast, contrast!!! • Avoid setting intense colors on inte • Dark on light, light on dark Friday, July 23, 2010
  • 48. TWEAKING TYPE • Change typefaces • Tweak sizes • Increase Contrast 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
  • 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