Excerpts taken from The Non-Designer’s Design Book, Third Edition by Robin Williams

 Proximity Items relating to each other should be grouped close together. This will ensure they are seen as one cohesive group rather than unrelated items.  Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.  Repetition Repeat visual elements of the design throughout the piece. This develops the organization and strengthens the unity.  Contrast Avoid elements on the page that are merely similar. If the elements are not the same, make them very different.

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.

Proximity The 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.

This 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?

Before 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.

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

What 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 clearer  The white space is not trapped within elements  There 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.

When 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

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.

Repetition To 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.

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

Repetition It’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).

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

Contrast Contrast 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.

Contrast Contrast 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.

Contrast This 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 bold  set it in caps/lowercase, not all caps  decide on groups of information and arrange them together  arrange 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 Principles Find at least seven differences between the examples below. State in words what the changes are.

Business Cards Don’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 “ ” and “web site” on your card. It’s clear what they are.

Business Cards Everything 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.

Flyers Don’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.

Flyers Use 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.

Newsletters Don’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.

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

Brochures Don’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.

Brochures This 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 Ads If 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 Ads White 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 Redesign What are the problems with this magazine ad? Name the problems so you can find the solutions.

Ad Redesign If 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.