march 2004andrea infantino©copyright 2004. jan 2006adapted from a.infantino©copyright 2004 visual...

Jan 2006 Adapted from A.Infantino©Copyright 2004

Visual Literacy

A Critical Key to Effective CommunicationA Critical Key to Effective Communication


PRESENTATION

Visual Literacy

DESIGN &

LAYOUT

CONTENT


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


Visual Literacy

Outlines

ThumbnailsStoryboards

Get Organized


Visual LiteracyDesign 101

We’re Talking CRAP, here…Contrast

Repetition

Alignment

Proximity

Design Principles



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



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



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



Alignment

Every element should have a visual connection to another element on the

page.

Design Principles



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


Good communication is as stimulating as black coffee and just as hard to sleep after.

ANNE MORROW LINDBERGH


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



Typeface Anatomy

Typeface Basics

Eurostile xq

Cochin xqAscenders x-Height

DescendersBaseline



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..



Typeface Anatomy

VerdanaSans Serif

Mono-Weight

PalatinoSerif Thick/Thin

Weight

Typeface Basics

Old Style


Visual LiteracyDesign 101 Typeface Basics

OptimaSerif Thick/Thin

Weight

Bodoni UltraSans Serif

Thick/Thin Weight

Modern



Create Contrast with type by applying:

sizeweight structure

FormDirection

COLORCOLOR


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…


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!


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



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



Dark Background…green, blue, purpleLight Text…reds, yellows, orange

ColorColor



Avoid BoxesAvoid Boxes

Avoid Rules (underlining)

Avoid BordersAvoid Borders

Graphic Elements

Use White SpaceUse White Space



Photos, clip art, shapes, charts, graphs


Finally…

SAVE, SAVE, SAVESPELLCHECK

march 2004andrea infantino©copyright 2004. jan 2006adapted from a.infantino©copyright 2004 visual...

Documents