Create larger (vs. several smaller) visual units Provide structure for reader Reduce clutter Organize information Visual & Intellectual Relationships
Organized information = better communication Establish a path/progression for the eyes If more than 3 -‐ 5 items on page, see what can be grouped Avoid: ◦ Too many separate elements ◦ Elements stuck in corners and middle ◦ Equal white space between elements (unless in subsets) ◦ Any confusion over groupings ◦ Grouping unrelated elements Visual & Intellectual Relationships
Every element has a visual connection with another element Creates clean, sophisticated look Indicates relationships for elements not in close proximity Visual Connections Create Unity
Elements have visual connections Seek to unify and organize Place elements consciously; look for edges/lines Avoid: ◦ Mixing too many text alignments ◦ Centered alignment; unless consciously aiming for sedate, formal layout Visual Connections Create Unity
Find/create visual element(s) that can be repeated throughout the piece Push consistencies a little further Use technique to accent the overall design Avoid: ◦ Repeating so much as to annoy or overwhelm ◦ Losing contrast by repeating too much of same ◦ Creating needless clutter, loss of focus or confusion Visual Consistency
Chosen visual element(s) made to be very different from each other Develops dynamic “tension” for the eyes to investigate Not to be used timidly; be bold with use Visual Interest
Provides immediate organization for the viewer Elements should be clearly different Should be used boldly, with strength Avoid: ◦ Only “slight” differences between elements ◦ Using two or more similar typefaces ◦ Creating confusion, or inappropriate focal points Visual Interest
& Life) Do Not Fear: ◦ White Space – it provides a rest for the eyes and mind ◦ Asymmetrical / non-‐centered formats – often a stronger solution – the unexpected is o.k. ◦ Very large or very small text – like speaking loudly or whispering – either is effective in context Create Winning Visuals
Skills By (Constantly): ◦ Seeking out good examples ◦ Adapting / improving good examples (not just stealing) ◦ Learning from good examples “Looking” is half as strong as “Seeing”
Dated Fonts (Times, Arial, Helvetica) • 12-‐pt type; try 7-‐, 8-‐, 9-‐ or 10-‐pt instead • Centering the layout without justifiable reason • Filling entire space of layout • Crowding / eliminating margins • Abbreviations if possible • Unnecessary words: email, website… or phone (if a mobile, fax, or other, number isn’t present) • Perforated, (unprofessional) self-‐print template sheets for business use
Appropriate Fonts • Appropriate Font Size • Different layout if justifiable • Periods, bullets or spaces instead of parentheses around area codes • Full spellings of words, when possible • Standard sizes – 3.5’’ x 2’’ or 2’’ x 3.5’’, when possible • Restraint with use of 2nd, 3rd color, etc. A small splash can do the trick.
Random placements • Centering elements without just cause • Crowded / narrow margins • Unnecessary words, abbreviations, or punctuation • Needless clutter
(and build) branding • Dominant Focal Point – consistent on each piece • Standard Business Envelope Sizes: US #10 (9.5’’x 4.25’’); Euro C4 (220mm x 110mm) • Consistent alignment • Logical layouts to incorporate usability factors • Letter text – actually fits in allotted space, test! • Postal specs – safe (non-‐printing) zones • Faxing/copying – light/pattern-‐free paper, ink coverage
attract attention, probably large • Contrast • Without making everything large • Separate / define items for viewer • Emphasize subheads from body copy, saves viewer scanning time • Consistent alignment • Repetition of unique element • Typeface • Graphic • Logo pieces, color, font, etc.
Flat, "gray" type layout • Weak contrast in font choices • Using too many fonts • Arial, Helvetica • Random element alignment • Random element placement • Centering type without cause • Crowded copy • Filling every inch • Too many "helper" graphics, or needless clutter
Strong underlying structure (grid) • Contrast in font choices • Consistent font sizes/usage • Consistent alignments • Consistent element placement • Balanced, generous white space • Pull quotes, other visual interest • Uncrowded copy / columns • Boldly, not barely, “breaking out" of columns
• Ignoring folds vs. content • Crowding gutters / folds between columns • Mixed alignments • Timid use of heads / subheads • Weak contrast in font choices • Using 12-‐pt body copy • Timid use of graphics • Filling every inch • Dividing flat width into equal thirds (to find folds) Cover Back Inside
• Correct content / panel order • Proximity for relevance • Strong, sharp alignments • Bold use of heads / subheads • Strong contrast in font choices • Bold use of graphics • Space before, or after, paragraphs (vs “returns”) • Techniques to capture attention Cover Back Inside
• Using all lowercase for heads • Using all caps for body • Filling every inch • Placing things in corners • Ignoring spatial relationships • Timid use of heads / subheads • Weak contrast in sizes, making everything the same size • Timid use of graphics • Hiding the message • Boring the reader
• Getting to the point • Brief, specific messaging • Legible body copy • White space for balance • Proximity / spatial relationships • Informational hierarchy • Strong contrast in sizes • Bold use of heads / subheads • Bold use of graphics • Series of cards, if possible • Color accents, if possible
jeffsullivan
aarron
paulrobertlloyd
brettharned
michaelherold
scottboms
addyosmani
bryan
gr2m
holman
rasmusluckow
sstephenson
trishagee
