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

1. NIKI BROWN Friday, July 23, 2010

2. NIKI BROWN Friday, July 23, 2010

3. Friday, July 23, 2010

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

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

6. PLAID MANIA!!1one 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

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

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

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

73. QUESTIONS? 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

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

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

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