Design for Effective Communication 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 C R A P ontrast epetition lignment roximity Designing for effective Communications Principles devised by Robin Williams – Graphic Design teacher Link to Using CRAP

G R I T Proximity Refers to how close together items appear on a page. roup elated tems ogether Keep unrelated items further apart.

Consider The grouping (Proximity) adds sense to the words. Enfield 5085 Grand Junction Road (618) 8262 1468 David Roberts Enfield High School Enfield High School David Roberts Grand Junction Road Enfield 5085 (618) 8262 1468 Nice balanced business card – looks balanced. Eye does not know where to go next. What gets the attention? Then what? The grouping (Proximity) adds sense to the words.

Consider this SIR ROBERT HELPMANN MEMORIAL THEATRE 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 Which things belong together now?

Lists can be difficult Proximity (grouping) adds sense. Children’s CDs Educational CDs Entertainment CDs DVDs 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 Proximity (grouping) adds sense. Early learning Language arts Science Maths Books Teacher tools Videos Cables 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 High School Enfield High School David Roberts David Roberts Enfield High School Grand Junction Road Grand Junction Road Enfield 5085 Enfield 5085 Grand Junction Road (618) 8262 1468 (618) 8262 1468 Enfield 5085 6Nice balanced business card – looks balanced. Eye does not know where to go next. What gets the attention? Then what? Improving Proximity improved the connections. A stronger invisible line connects all elements.

Alignment Typical report cover – all centred Report On History of Desktop Publishing Report On 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 You are warmly invited to attend! Centred – dull and boring You are warmly invited to attend! You are warmly invited to attend! You are warmly invited to attend! Make the centring obvious Try setting the centred off-centre 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 Repetition leads to Consistency. 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 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 CD ROMs Children’s CDs Educational CDs Entertainment CDs DVDs Educational Early learning Language arts Science Maths Teacher tools Books Videos Hardware & Accessories Cables Input devices Mass storage Memory Modems Printers and supplies Video and Sound CD ROMs Children’s CDs Educational CDs Entertainment CDs DVDs Educational Early learning Language arts Science Maths Teacher tools Books Videos Hardware & Accessories Cables Input devices Mass storage Memory Modems Printers and supplies Video and Sound CD ROMs Children’s CDs Educational CDs Entertainment CDs DVDs Educational Early learning Language arts Science Maths Teacher tools Books 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. Repetition of bullets and rules is better still.

Repetition Use 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

What are repeated on all these? 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 epetition lignment roximity C P A R How did we create the contrast?

You are warmly invited to attend! Contrast You are warmly invited to attend! How did we create the contrast?

Contrast How did we create the contrast? 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 How did we create the contrast?

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 Which things belong together now? 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 Reduces contrast All block capitals Reduces contrast Heavy border Reduces contrast By reducing white space Logos in corners Reduces contrast 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 with graphic top and bottom Everything centred Boring alignment Logos all aligned with each other

Proximity They are Theatre Supplies Poor proximity Little grouping of text Poor proximity And belongs with Professionals Poor proximity People mixed up with objects Poor proximity Phone number poorly grouped Poor proximity Properties hyphenated Poor proximity Quotes are Obligation Free Poor proximity

Improve Me Decide on the focus. Decide on the groups. 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