Design Principles

from

The Non-Designer’s Design Bookby

Robin Williams

The Four Basic Principles

¨ Proximity¨ Alignment¨ Repetition¨ Contrast

Proximity

Items relating to each other should be grouped close together

Proximity – basic purpose

¨ To organize¨ If organized, more likely to be read and

remembered.¨ Also creates more appealing white space.

Proximity – how to get it

¨ Squint eyes and count number of visual elements on the page (each time eye stops).

¨ If more than three to five items (depending on the piece) look for separate elements to group together to make one visual unit.

Proximity – what to avoid

¨ Avoid too many separate elements on a page.

¨ Don’t stick things in the corners and in the middle.

¨ Avoid leaving equal amounts of white space between elements unless each group is part of a subset

Proximity – what to avoid (cont)

¨ Avoid confusion over whether a headline, a subhead, a caption, a graphic, etc. belongs with its related material.

¨ Create relationships among elements with close proximity.

¨ Don’t create relationships with elements that don’t belong together. If not related, move them apart.

Proximity Examples

John Doe

360-757-4589

ACME Inc

916 Elm Ave

Bow, WA 98233ACME Inc

John Doe

916 Elm Ave Bow, WA 98233

360-757-4589

Business Card

UNIVERSITY OF THE WEST COOPERATIVE EXTENSIONWHAT’S HAPPENING IN …

REDWOOD COUNTY FORESTRY

August - 1998

Proximity Examples

What’s happening in …

Redwood County Forestry

University of the WestCooperative ExtensionAugust 1998

Banner

Proximity Examples

CD ROMsCD ROMsChildren’s CDsEducational CDsEntertainment CDsEducationalEarly LearningLanguage ArtsMathTeacher ToolsBooksVideos

CD ROMs CD ROMs Children’s CDs Educational CDs Entertainment CDs

Educational Early Learning Language Arts Math

Teacher Tools Books Videos

Lists

Return

Alignment

¨ Nothing should be placed on the page arbitrarily.

¨ Every element should have some visual connection with another element on the page

¨ Creates a clean, sophisticated, fresh look.

Alignment – basic purpose

¨ To unify and organize the page.¨ A strong alignment (with appropriate

typeface) creates a sophisticated look, or a formal look, a fun look, or a serious look.

Alignment – how to get it

¨ Be conscious of where you place elements.¨ Always find something else on the page to

align with, even if the objects are physically far apart.

Alignment – what to avoid

¨ Avoid using more than one text alignment on the page.

¨ Try to break away from a centered alignment unless trying to create a more formal, sedate (often dull) presentation.

¨ Choose centered alignment consciously, not by default.

Alignment ExamplesJohn Doe

360-757-4589

ACME Inc

916 Elm Ave

Bow, WA 98233ACME IncJohn Doe

916 Elm Ave Bow, WA 98233

360-757-4589

ACME IncJohn Doe

916 Elm Ave Bow, WA 98233

360-757-4589

ACME IncJohn Doe

916 Elm Ave Bow, WA 98233 360-757-4589

Alignment Examples

ACME INCWe pride ourselves on offering the

highest quality products on the market to deserving customers.

Depend on us to meet your needs.

Call one of our agents today to schedule an appointment.

Alignment Examples

ACME INCWe pride ourselves on offering the highest quality products on the market to deserving customers. Depend on us to meet your needs.

Call one of our agents today to schedule an appointment.

Alignment Examples

ACME INCWe pride ourselves on offering the highest quality products on

the market to deserving customers. Depend on us to

meet your needs.

Call one of our agents today to schedule an appointment.

Return

Repetition

¨ Repeat visual elements of the design throughout.

¨ Repetition of visual elements unifies and strengthens a piece by tying together the parts.

¨ You can repeat:– Color– Shape– Texture– Spatial Relationships– Line thicknesses, size , etc,

Repetition – basic purpose

¨ To unify and add visual interest.¨ If a piece looks interesting, more likely to

be read.

Repetition – how to get it

¨ Think of repetition as being consistent.¨ Look at possibility of adding elements just

to create repetition – a line at bottom, distinctive font for numbered items, bullets.

¨ Find existing repetitive items and strengthen – size, color, font, etc.

¨ Is like accenting with your clothes.

Repetition – what to avoid

¨ Avoid repeating element too much to the point of becoming annoying or overwhelming.

¨ Be conscious of the value of contrast.¨ Too much repetition can confuse the focus.

Repetition ExamplesACME Inc

John Doe

916 Elm Ave Bow, WA 98233

360-757-4589

ACME IncJohn Doe

916 Elm Ave Bow, WA 98233 360-757-4589

Repetition Examples

Mickey Mouse Walt Disney Studios Anaheim, CA 58 years old, no children

Employment Walt Disney Studios Various television studios

Education Walt Disney Studios

Favorite Activities Driving steamboats Roping cattle

Favorite Quote Everybody can’t be a duck

Return

Contrast

¨ The idea is to avoid elements on the page that are merely similar.

¨ If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different.

¨ Often the most important visual attraction on a page.

Contrast – basic purpose

¨ To create an interest on the page – if interesting, more likely to be read.

¨ To aid in the organization of the information.

Contrast – how to get it

¨ Add contrast through typeface choices, line thicknesses, colors, shapes, sizes, space, etc.

¨ Important to be strong with contrast – make distinctively different.

Contrast – what to avoid

¨ Don’t be a wimp. If going to contrast, do it with strength.

¨ Avoid contrasting a sort-of-heavy line with a sort of heavier line.

¨ Avoid contrasting dark text with similar color text – brown and black.

¨ Avoid using two or more typefaces that are similar. If items are not exactly the same, make them different.

Contrast ExamplesAnother Newsletter

Exciting HeadlineThis is the story of a man named Brady, who was raising three sons. And lady three blonde daughters

Another HeadlineNow sit right back and you’ll hear a tale of a fateful trip that started from a tropic port. There were seven stranded passengers on a deserted island.

Another Newsletter

Exciting HeadlineThis is the story of a man named Brady, who was raising three sons. And lady three blonde daughters

Another HeadlineNow sit right back and you’ll hear a tale of a fateful trip that started from a tropic port. There were seven stranded passengers on a deserted island.

Return