View
104
Download
0
Category
Preview:
DESCRIPTION
To assist in developing an understanding of how to use Contrast, Repetition, Alignment and Proximity to improve communication.
Citation preview
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
Recommended