Design for Effective Communication

Design to enhance communication

We write and create to express and communicate.

Pretty does not help this if the document is not read.

Are you communicating effectively or just making pretty shapes?

Design Principles

ontrast

epetition

lignment

roximity

C

P

A

R

Link toUsing CRAP

Contrast

Created when two things are different.

If two things are not the same ……. Make them…….

Really different.•

Don’t be a wimp!

Contrast – not a new concept

How did we create the contrast?

ontrast

epetition

lignment

roximity

C

P

A

R

Contrast

How did we create the contrast?

Youare

warmly

invited to

attend!

Contrast

How did we create the contrast?

CD ROMs .CD ROMsChildren’s CDsEducational CDsEntertainment CDsDVDs

Educational .Early learningLanguage artsScienceMaths

Teacher tools .BooksTeacher toolsVideos

Hardware & Accessories . CablesInput devicesMass storageMemoryModemsPrinters and suppliesVideo and Sound

Contrast

How did we create contrast?

Contrast

How did we create contrast?

Something else which helps

SOUTH AUSTRALIAN THEATRE GUILD

DECEMBER 2001

THEATRE COOPERATIVE

WHAT’S HAPPENING IN

SIR ROBERT HELPMANN MEMORIAL THEATRE

SOUTH AUSTRALIAN THEATRE GUILD

DECEMBER 2001

THEATRE COOPERATIVE

WHAT’S HAPPENING IN

Sir Robert Helpmann Memorial Theatre

Where is the contrast greatest?Block capitals are poor for contrast!

Contrast

For contrast to work, things can not be similar.

Different elements must be very different.

The purpose of Contrast

Adds visual interest to the page.

Helps with organization of information.

Using Contrast

Most often achieved through choice of typeface.

• Font• Size• Style• Colour

• Weight of line can be useful

Repetition

Repeat some aspect of design throughout the whole document.• Bold font• Thick line (rule)• A bullet• A colour• A particular format• Spacial relationships

• Repetition leads to Consistency.

Remember this list

CD ROMs

CD ROMs

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Educational

Early learning

Language arts

Science

Maths

Teacher tools

Books

Teacher tools

Videos

Hardware & Accessories

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Originally there were some headings.

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Early learning

Language arts

Science

Maths

Books

Teacher tools

Videos

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

CD ROMs

CD ROMs

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Educational

Early learning

Language arts

Science

Maths

Teacher tools

Books

Teacher tools

Videos

Hardware & Accessories

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Better use of Proximity improved readability.

Repetition of bold headings is better.

CD ROMs

CD ROMs

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Educational

Early learning

Language arts

Science

Maths

Teacher tools

Books

Teacher tools

Videos

Hardware & Accessories

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Repetition of bullets and rules is better still.

CD ROMs .CD ROMsChildren’s CDsEducational CDsEntertainment CDsDVDs

Educational .Early learningLanguage artsScienceMaths

Teacher tools .BooksTeacher toolsVideos

Hardware & Accessories . CablesInput devicesMass storageMemoryModemsPrinters and suppliesVideo and Sound

RepetitionUse existing elements to improve consistency. Turn them into repetitive graphic symbols.

Strengthen headings and subheadings and format them using the same font and style.

Repetition

Repetition of visual elements throughout a document

Provides unity on the page Essential on multi-page documents Also called Consistency

Repetition at work

What are repeated on all these?

The purpose of Repetition

Unification – the elements look as if they belong together

Adds visual interest to the page

Using Repetition

Extend consistencies by emphasizing them.

Consider adding elements to create repetition.

Avoid overdoing repetition.

Be aware of the value of Contrast.

Alignment

Place nothing on the page at random

All items should have a visual connection to other items on the page.

Enfield 5085Grand Junction Road

(618) 8262 1468David Roberts

Enfield High School

Consider

David Roberts

Enfield High School

Grand Junction Road

(618) 8262 1468Enfield 5085

Improving Proximity improved the connections.

David Roberts

Enfield High School

Grand Junction Road

(618) 8262 1468Enfield 5085

The elements on this card were all aligned with each other.

A stronger invisible line connects all elements.

ReportOn

History of Desktop Publishing

Alignment

ReportOnHistory of Desktop Publishing

By David Roberts Enfield High School

By David Roberts Enfield High School

Typical report cover – all centred

Invisible line connects two distant elements.

Hard left alignment – more sophisticated.

Aligned Centre

You are warmly

invited to attend!

Centred – dull and boring

Make the centring obvious

Youare

warmly invited

to attend!

Youare

warmly invited

to attend!

Try setting the centred off-centre

Youare

warmly

invited to

attend! Experiment with making centred text more dramatic

Alignment

Every element on a page has a visual connection with some other element.

Provides unity on the page

The purpose of Alignment

Organisation

Unification – the elements look as if they belong together

Can determine the ‘look’ of the page – sophisticated, formal, fun, serious.

Using Alignment

Be conscious of where an element is being placed.

Always look to align each object with another object.

Try to avoid multiple alignments.

Centre consciously – not because it is the easy way out.

Proximity

Refers to how close together items appear on a page.

roup

elated

tems

ogether

G

TIR

• Keep unrelated items further apart.

Enfield 5085Grand Junction Road

(618) 8262 1468David Roberts

Enfield High School

Consider

Grand Junction Road

David Roberts

Enfield High School

(618) 8262 1468Enfield 5085

The grouping (Proximity) adds sense to the words.

Consider this

SOUTH AUSTRALIAN THEATRE GUILD

WHAT’S HAPPENING IN

SIR ROBERT HELPMANN MEMORIAL THEATRE

DECEMBER 2001

THEATRE COOPERATIVE

SOUTH AUSTRALIAN THEATRE GUILD

DECEMBER 2001

THEATRE COOPERATIVE

WHAT’S HAPPENING IN

SIR ROBERT HELPMANN MEMORIAL THEATRE

Lists can be difficult

Books

Teacher tools

Videos

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Early learning

Language arts

Science

Maths

Children’s CDs

Educational CDs

Entertainment CDs

DVDs

Early learning

Language arts

Science

Maths

Books

Teacher tools

Videos

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Proximity (grouping) adds sense.

Proximity

Close objects - single visual unit.

Logical path through a document.

The purpose of proximity

Organisation

More likely to be read and remembered

Better use of white space

Using proximity

Avoid too many elements on page Avoid the 4 corners and middle Avoid equal spacing Strengthen relationships that exist Don’t create relationships between

unrelated elements

Improving Design Skills

Decide on the focus.• Make it big and bold• Set in upper/lower case

• Decide on the groups.• Set the groups together (Proximity)• Leave space between the groups

• Arrange elements on a strong alignment.• Remove conflicting elements

Improving Design

Comment on the Design Principles

Contrast

All block capitalsReduces contrast

All the same fontReduces contrast

Heavy borderReduces contrast

By reducing white space

Logos in cornersReduces contrast

By reducing white space

Repetition

All the same fontGood repetition

(Perhaps 2 fonts would be better,

allowing Contrast)

Logos in cornersGood repetition

But cause problems by

reducing white space

Alignment

Everything centred

Boring alignment

Logos all aligned

with each other

Text aligned with graphic

top and bottom

Proximity

Little groupingof text

Poor proximity

They are Theatre Supplies

Poor proximity

People mixed up with objects

Poor proximity

Properties hyphenated

Poor proximity

And belongs with Professionals Poor proximity

Phone number poorly groupedPoor proximity

Quotes are Obligation FreePoor proximity

Improve Me

Decide on the focus.• Make it big and bold• Set in upper/lower case

• Decide on the groups.• Set the groups together (Proximity)• Leave space between the groups

• Arrange elements on a strong alignment.• Remove conflicting elements

Bibliography

Tollett, J and Williams, R. 2001, Design Workshop, Peachpit Press, Berkeley

Williams, R. 1994, The Non-Designer’s Design Book, Peachpit Press, Berkeley

Weildon, C. 1990, Communicating or Just Making Pretty Shapes, Newspaper Advertising Bureau of Australia Ltd, North Sydney