Embed
Email

Design Principles

Document Sample

Shared by: qinmei liao
Categories
Tags
Stats
views:
1
posted:
12/1/2011
language:
English
pages:
42
Desktop Publishing

Design

for

Effective Communication

Design to enhance communication



 We write to communicate.



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



 Are you Communicating

or just making pretty shapes?



 You won’t recognize a Joshua Tree if you don’t know what it is.

Design Principles

Contrast

R epetition

A lignment

Proximity Link to

Using CRAP

Proximity

 Refers to how close together items appear on a

page.



Group

• Keep

Related unrelated items

further apart.

I tems

Together

Consider



David Roberts (618) 8262 1468

Enfield High School

David Roberts







Enfield High School



Grand Junction Road

Enfield 5085

Grand Junction Road(618) 8262 1468 Enfield 5085









The grouping (Proximity) adds sense to the words.

Consider this



SOUTH AUSTRALIAN THEATRE GUILD

WHAT’S HAPPENING IN THEATRE COOPERATIVE

WHAT’S HAPPENING IN

SIR ROBERT HELPMANN MEMORIAL THEATRE

SIR ROBERT HELPMANN MEMORIAL THEATRE

SOUTH AUSTRALIAN THEATRE GUILD

THEATRE COOPERATIVE

DECEMBER 2001

DECEMBER 2001

Lists can be difficult

Children’s CDs Children’s CDs

Educational CDs Educational CDs

Entertainment CDs Entertainment CDs

DVDs DVDs

Early learning

Language arts

Science

Early learning Proximity

(grouping)

Language arts

Maths

Science

Books

Maths

Teacher tools

Videos

Cables

Input devices

Books

Teacher tools

adds sense.

Mass storage Videos

Memory

Modems

Printers and supplies Cables

Video and Sound Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

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

Alignment

 Place nothing on the page at random





 All items should have a visual connection to

other items on the page.

Consider

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

David Roberts (618) 8262 1468

Enfield School

Enfield HighHigh School

David Roberts David Roberts







Enfield High School



Grand

Grand Junction Road Junction Road

Enfield 5085 Enfield 5085

Grand Junction Road 8262 1468

(618) 8262 1468 (618) Enfield 5085









Improving Proximity improved the connections.

A stronger invisible line connects all elements.

Alignment

Typical report cover – all centred

Report Report

On On

History of Desktop Publishing

History of Desktop Publishing







By David Roberts

Enfield High School









By David Roberts

Enfield High School

Hard left alignment – more sophisticated.



Invisible line connects two distant elements.

Aligned Centre



Centred – dull and boring

You You

are are

You are warmly Make the centring obvious

warmly

warmly

invited to attend!

invited

invited

to to Try setting the centred off-centre

attend!

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.

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

Children’s CDs Originally there were

Educational CDs

Entertainment CDs

CD ROMs

CD ROMs

CD ROMs

.

some headings.

DVDs

Children’s CDs

Children’s CDs

Early learning

Educational CDs

Educational CDs

Language arts

Entertainment CDs

Entertainment CDs

Science

Maths

DVDs

DVDs

Educational

Better use of Proximity

Books

Teacher tools

Educational

Educational

Early learning . improved readability.

Early learning

Early learning

Language arts

Videos

Language

Language arts

Science arts

Cables

Science

Maths

Science

Input devices

Maths

Maths

Teacher tools

Mass storage

Memory

Books Repetition of bold

Teacher tools

Teacher tools .

Modems

Printers and supplies

Books

Books

Videos headings is better.

Teacher tools

Hardware & Accessories

Teacher tools

Video and Sound

Videos

Videos

Cables

Input devices



Repetition of bullets

Hardware &

Mass storageAccessories .

Hardware & Accessories

Cables

Memory

Cables

Input devices

Modems

Input devices

Mass and supplies

Mass storage

Printersstorage and rules is better still.

Memory

Video and Sound

Memory

Modems

Modems

Printers and supplies

Printers and supplies

Video and Sound

Video and Sound

Repetition

Use existing elements Strengthen headings

to improve consistency. and subheadings

Turn them and format them

into repetitive graphic symbols. 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.

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

Contrast



 How did we create the

R epetition

contrast?

A lignment

Proximity

Contrast



You

are

warmly

 How did we create the invited

contrast? to

attend!

Contrast CD ROMs .

CD ROMs

Children’s CDs

Educational CDs

Entertainment CDs

DVDs



Educational .

Early learning

Language arts

Science

Maths







 How did we create the Teacher tools

Books

.



Teacher tools



contrast? Videos



Hardware & Accessories .

Cables

Input devices

Mass storage

Memory

Modems

Printers and supplies

Video and Sound

Contrast







 How did we create

contrast?

Contrast

 How did we create contrast?

Something else which helps

WHAT’S HAPPENING IN



SIR ROBERT HELPMANN MEMORIAL THEATRE



SOUTH AUSTRALIAN THEATRE GUILD

THEATRE COOPERATIVE

DECEMBER 2001





WHAT’S HAPPENING IN



Sir Robert Helpmann Memorial Theatre

SOUTH AUSTRALIAN THEATRE GUILD

THEATRE COOPERATIVE

DECEMBER 2001







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

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 the same font

All block capitals

Reduces contrast

Reduces contrast









Heavy border

Reduces contrast Logos in corners

By reducing Reduces contrast

white space By reducing

white space

Repetition

All the same font

Good repetition

(Perhaps 2 fonts

would be better,

allowing

Contrast)









Logos in corners

Good repetition

But cause

problems by

reducing white

space

Alignment

Text aligned

Everything

with graphic

centred

top and bottom

Boring alignment









Logos all aligned

with each other

Proximity

They are

Little grouping

Theatre Supplies

of text

Poor proximity

Poor proximity







And belongs

with Professionals

Poor proximity

People mixed up

with objects

Poor proximity









Phone number Properties

poorly grouped hyphenated

Poor proximity Poor proximity







Quotes are

Obligation Free

Poor 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



Related docs
Other docs by qinmei liao
Translator
Views: 0  |  Downloads: 0
Circular no CuR June Introduction of
Views: 0  |  Downloads: 0
Post Thiopental Tremors
Views: 0  |  Downloads: 0
Antivirals
Views: 0  |  Downloads: 0
Participles
Views: 2  |  Downloads: 0
Caring for your Child
Views: 0  |  Downloads: 0
Section One Inspiration
Views: 0  |  Downloads: 0
By registering with docstoc.com you agree to our
privacy policy

You are almost ready to download!

You are almost ready to download!