Excerpts taken from

The Non-Designer’s Design Book, Third Edition

by Robin Williams

The Four Basic Principles

ProximityItems relating to each other should be grouped close together. This will ensure they are seen as one cohesive group rather than unrelated items.

AlignmentNothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.

RepetitionRepeat visual elements of the design throughout the piece. This develops the organization and strengthens the unity.

ContrastAvoid elements on the page that are merely similar. If the elements are not the same, make them very different.

Proximity

Every element on the top card appears as a separate element. Where do you begin reading the information and where do you stop?

What happens with two bold phrases on the same piece? Do you know when you’re finished?

In the final example, the information has been organized into related groups.

ProximityThe list at right needs formatting to make it understandable. Everything is close to everything else, so there’s no way to see the relationships or organization.

At far right, the same list has been formed into visual groups. Contrast has been added to headlines and indentions were added to create more contrast.

ProximityThis page is visually boring and hard to read. Exactly what is going on, where is it happening, what time is it at, etc.

Can you tell how many concerts are in this series?

ProximityBefore there was no separation of information. The information has now been grouped intellectually and set in groups on the page. Note the spacing is the same between each performance, indicating they are somehow related.

The subsidiary information is further away; you instantly know it is not a performance.

ProximityWhat can you now assume about the three concerts? Why?

ProximityWhat can you tell about this event? Does it make sense? Can you find the pertinent information?

Proximity was used to organize the information and communicate immediately who, what, when, and where.

Proximity

Each headline is the same distance from the body copy above and below it, so they appear as separate, unconnected items. You can’t tell if the headline belongs to the text above or below it because the distance is the same. When white space is “trapped” like this, it tends to visually push the elements apart.

Proximity

The headlines were moved closer to their related paragraphs of text. Several things have happened:The organization is clearerThe white space is not trapped within elementsThere appears to be more room on the page so it is not as crowded

Proximity

One of the biggest problems with this ad is that the information is one big chunk; there’s no separation. Before trying to design a new one, write out the separate pieces of information that belong together (group elements).

Proximity

The text set in all caps took up too much space, so there was no blank “white” space to rest your eyes. It’s okay to set type smaller than 12 pt.

Decide which elements should be close together then experiment with the other principles and fonts.

AlignmentWhen items are aligned on the page, the result is a stronger unit. Even when aligned items are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind.

This alignment creates an invisible line on the right of the piece. The strength of this edge

is what gives strength to the layout.

Alignment

Use a centered alignment thoughtfully and intentionally.

Alignment

Alignment

Alignment

Alignment

Find a strong alignment and use it. Beware of creating “trapped” whitespace.

Repetition

Repeat some aspect of the design throughout the entire piece. This can be a bold font, a thick rule (line), a certain bullet, color, design element, etc.

The example below repeats the bold font in the company name and the phone number at the bottom of the card.

RepetitionTo create a consistent business package with a business card, letterhead, and envelope, use a strong display of repetition, within each piece and between all pieces.

RepetitionRepetition gives a sense of professionalism and authority to your work. Repetition is a thoughtful design decision.

Repetition does not mean you have to repeat exactly the same thing. In the example at right, the headlines are the same typeface, but different colors. The illustrations are different styles, but have the same feel.

RepetitionIt’s fun and effective to pull an element out of a graphic and repeat it on other related material, such as envelopes, response cards, balloons, etc. to create a cohesive unit (even without repeating the teapot).

ContrastIf two items are not exactly the same, then make them REALLY different. DON’T BE A WIMP.

ContrastContrast is the most fun and dramatic of the design principles. A few simple changes can make the difference between an ordinary design and a powerful one.

ContrastContrast is rarely the only concept that needs to be emphasized, but adding contrast will cause the other concepts to fall into place. For interest, the elements of contrast can also be used as elements of repetition.

ContrastThis is an example of a typical phone book advertisement. Where do you begin to improve it?decide on a focus and make it big and boldset it in caps/lowercase, not all capsdecide on groups of information and arrange them togetherarrange all elements along a strong alignment

Contrast

Proximity Group related items into

closer proximity Separate items that are not

directly related to each other

Vary the space between to indicate the closeness or importance of the relationship

Alignment Be conscious of every

element you place on the page

To keep the entire page unified, align every object with an edge of some other object

If your alignments are strong, you can choose to break an alignment occasionally and it won’t look like a mistake

Repetition Stronger form of being

consistent Look at already

repeating elements and see if it might be appropriate to use one as a repeating element

Helps strengthen the reader’s sense of recognition of the entity represented by the design

Contrast Contrast attracts the

eye You can add contrast in

many ways (fonts, rules, colors, spatial relationships, directions, etc.)

Design PrinciplesFind at least seven differences between the examples below. State in words what the changes are.

Business CardsDon’t put things in the corners; it’s OK to leave them empty. Don’s use Times, Arial, or Helvetica or your card will look dated.

Don’t use 12-point type or your card will look unprofessional. Business cards often use 7-point type. Don’t center your layout unless you can explain in words why you should do so.

Don’t feel like you have to fill the entire space. White space is your friend. It’s unnecessary to use the words “email” and “web site” on your card. It’s clear what they are.

Business CardsEverything on the card should be lined up with something else.

Align baselines; align right edges or left edges.

Try using periods, small bullets, or

blank spaces instead of

parentheses around area codes.

If you don’t have a fax number, don’t type

“Phone” before or after your phone

number.

Letterhead & Envelopes Don’t use a different

arrangement on the envelope from what you use on the letterhead and business card. All three items should look like they belong together.

Letterhead & Envelopes Feel free to use type and

graphics in a huge way or a small way. Don’t center everything on the page unless your logo is an obviously centered logo and you must work with it. Strong lines of flush left or flush right really strengthen your design.

FlyersDon’t put everything in boxes! Use a strong alignment to create the “box” around the text.Don’t set the same amount of space between all elements. Group related items together. Don’t use Arial, Times or Helvetica.

Don’t use hyphens to call out bullet points. Try using characters from Wingdings or Zapf Dingbats.

Add contrast to avoid creating a dull page.

FlyersUse a huge headline or huge clip art.

Use an interesting typeface in a huge way.

It’s okay to set the body text small on a flyer. The viewer will read the small type if you can capture his/her attention.

NewslettersDon’t be shy about your newsletter name; tell people who you are.

Don’t create a flat, gray newsletter. Use contrasting type where appropriate, create pull-quotes and add other visually interesting elements to pull the reader’s eye into the page.

NewslettersMost people skim through newsletter pages picking out headlines—so make your headlines clear and bold.

BrochuresDon’t use multiple alignments on each panel of the brochure—pick one alignment.

Don’t use 12-point type; it’s too large for the column width in a standard three-fold brochure.

Don’t set the copy too close to the fold. Allow more room between columns in a brochure than in a newsletter.

BrochuresThis brochure is designed to draw the reader in little by little. Notice the contrast of color and size.

Play with the graphic images—make them bigger, overlap them, wrap text around them, tilt them. You can have fun with your images if your text presents a solid, aligned base.

See how the only things that cross the gutter (the fold area) are pieces of art? Graphics don’t get lost in the fold.

Newspaper AdsIf your headline doesn’t grab their attention, they won’t read your body copy now matter how big you set it.

Don’t make all the text the same size.

Don’t cram your space full. White space is just as valuable and well worth the money.

Newspaper AdsWhite space should be organized. Organize the white space just as consciously as you would the information. If you follow the other four principles of design, the white space will automatically end up where it should.

As with any other project, use alignment, repetition, contrast, and proximity.

Ad RedesignWhat are the problems with this magazine ad? Name the problems so you can find the solutions.

Ad RedesignIf you aren’t sure where

to begin, start by cleaning up the

information. Organize information into related

groups; this will help you make layout

decisions.