March 2004Andrea Infantino©Copyright 2004. Jan 2006Adapted from A.Infantino©Copyright 2004 Visual...
-
Upload
kathlyn-chandler -
Category
Documents
-
view
218 -
download
0
description
Transcript of March 2004Andrea Infantino©Copyright 2004. Jan 2006Adapted from A.Infantino©Copyright 2004 Visual...
March 2004 Andrea Infantino©Copyright 2004
Jan 2006 Adapted from A.Infantino©Copyright 2004
Visual Literacy
A Critical Key to Effective CommunicationA Critical Key to Effective Communication
March 2004 Andrea Infantino©Copyright 2004
PRESENTATION
Visual Literacy
DESIGN &
LAYOUT
CONTENT
March 2004 Andrea Infantino©Copyright 2004
Visual Literacy
Before You Even Think About Before You Even Think About Design…Design…
The Who…The Who…AudienceThe What…The What… TopicThe Why…The Why…PurposeThe How… The How… Plan
March 2004 Andrea Infantino©Copyright 2004
Visual Literacy
Outlines
ThumbnailsStoryboards
Get Organized
March 2004 Andrea Infantino©Copyright 2004
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
We’re Talking CRAP, here…Contrast
Repetition
Alignment
Proximity
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Contrast …adds interest or focus and creates an organizational hierarchy in your page .
Make elements different…really different.
Use colorcolor, typefaces, sizes, line thickness, shapes, and space to create contrast.
Be StrongBe Strong
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Repetition Avoid
repeating elements so much that it
becomes annoying or overwhelmin
g.
Repeat some aspect
of the design
throughout the entire
piece.
but
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Alignment
Use only one alignment Use leftleft OR rightright
alignmentAvoid centered alignmentAvoid centered alignment
Do not use full justification
The purpose of alignment is to unify and organize the page.
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Alignment
Every element should have a visual connection to another element on the
page.
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
ProximityItems relating to each other should be grouped together.
Avoid too many separate elements.Don’t place things in the corners and in the middle.Keep headlines, captions, subheads with their related material.Don’t create relationships with elements that don’t belong together.
Design Principles
March 2004 Andrea Infantino©Copyright 2004
Good communication is as stimulating as black coffee and just as hard to sleep after.
ANNE MORROW LINDBERGH
March 2004 Andrea Infantino©Copyright 2004
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101Typeface Basics
Typeface = Name of a set of lettersTypeface = Name of a set of lettersExamples: Examples: CharcoalCharcoal, , TimesTimes
Typeface Family = includes a variety of Typeface Family = includes a variety of weightsweights
Examples: Arial, Examples: Arial, Arial Narrow BoldArial Narrow BoldFont = size and style of typefaceFont = size and style of typeface
Example: Example: Helvetica, Helvetica, 28 point, italic28 point, italic
Typefaces and FontsTypefaces and Fonts
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Typeface Anatomy
Typeface Basics
Eurostile xq
Cochin xqAscenders x-Height
DescendersBaseline
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101Typeface Basics
Old Style Modern Slab Serif
Categories: Sans Serif
Script Decorative
Never put two typefaces from the Never put two typefaces from the same category on the same pagesame category on the same page..
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101
Typeface Anatomy
VerdanaSans Serif
Mono-Weight
PalatinoSerif Thick/Thin
Weight
Typeface Basics
Old Style
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101 Typeface Basics
OptimaSerif Thick/Thin
Weight
Bodoni UltraSans Serif
Thick/Thin Weight
Modern
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101Typeface Basics
Create Contrast with type by applying:
sizeweight structure
FormDirection
COLORCOLOR
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101Top Ten Typeface
Rules
1. Use only two typefaces 2. Never use two typefaces from the same type
category3. Never use two serif or two san serif typefaces4. Never use all CAPITAL letters5. Use a serif typeface for print handouts6. Less is more
In All Cases…
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyDesign 101Top Ten Typeface
Rules
7. Use a sans serif typeface 8. Use a common typeface for cross-platform
concerns 9. Body text 20-24 points; title text 28 points or
above10. Use light color text with dark background;
dark text with light background
On-Screen…
TEST IT!
March 2004 Andrea Infantino©Copyright 2004
March 2004 Andrea Infantino©Copyright 2004
No jargon, no cliches…let’s touch bases on that later.
Visual LiteracyPresentation Design
ContentContent
No sentences/no paragraphsMinimal punctuation
Use only the words essential to the context
Avoid abbreviations/acronyms…FYI, WYSIWIG
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyPresentation Design
Readability (44 pt)Readability (44 pt)Consider the size of the room (28 pt)
No type smaller than 20 point (20 pt)
Bigger is better (32 pt)
Size Size Size
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyPresentation Design
Dark Background…green, blue, purpleLight Text…reds, yellows, orange
ColorColor
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyPresentation Design
Avoid BoxesAvoid Boxes
Avoid Rules (underlining)
Avoid BordersAvoid Borders
Graphic Elements
Use White SpaceUse White Space
March 2004 Andrea Infantino©Copyright 2004
Visual LiteracyPresentation Design
Photos, clip art, shapes, charts, graphs
March 2004 Andrea Infantino©Copyright 2004
Finally…
SAVE, SAVE, SAVESPELLCHECK