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 TOOLSKuler.Adobe.com

Friday, July 23, 2010

Pictaculous.com

SUPER AWESOME HELPFUL TOOLS

Friday, July 23, 2010

Colorlovers.com

SUPER AWESOME HELPFUL TOOLS

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 KNOWSTYPOGRAPHY

“ 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!

NikiBrown.com

Twitter.com/nikibrown

Dribbble.com/players/nikibrown

STALK ME ON THE INTERTUBWEBZ:

Friday, July 23, 2010

THANK YOU!

NikiBrown.com

Twitter.com/nikibrown

Dribbble.com/players/nikibrown

STALK ME ON THE INTERTUBWEBZ:

Friday, July 23, 2010