Design is in the BIG PICTURE (& teensy tiny details)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,969 views

 

Statistics

Views

Total Views
3,969
Views on SlideShare
2,919
Embed Views
1,050

Actions

Likes
7
Downloads
62
Comments
0

8 Embeds 1,050

http://www.nikibrown.com 920
http://www.unmatchedstyle.com 94
http://speakerrate.com 18
http://unmatchedstyle.com 13
http://feeds.feedburner.com 2
http://fever.z720.net 1
http://www.netvibes.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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