Non-Designer's Design Book

A reader should never have to try to figure out what is happening on the page—the focus, the organization of material, the purpose, the flow of information, all should be recognized instantly with a single glance. And along the way, it doesn’t hurt to make it beautiful!

Robin’s Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits. Items or groups of information

Not only is this page visually boring (nothing pulls your eyes in to the body copy to take a look), but it is difficult to find the information—exactly what is going on, where is it happening, what time is it at, etc. It doesn’t help that the information is presented inconsistently.

The idea of proximity doesn’t mean that everything is closer together; it means elements that are intellectually connected, those that have some sort of communication relationship, should also be visually connected. Other separate elements or groups of elements should not be in close proximity. The closeness or lack of closeness indicates the relationship.

Upgrading your design skills is a gradual process and begins with clear communication.

Rarely is the principle of proximity the only answer to a page. The other three principles are intrinsic to the design process and you will usually find yourself using all four. But take them one at a time—start with proximity.

When several items are in close proximity to each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together. Be conscious of where your eye is going: where do you start looking; what path do you follow; where do you end up; after you’ve read it, where does your eye go next? You should be able to follow a logical progression through the piece, from a definite beginning to a definite end.

The basic purpose of proximity is to organize. Other principles come into play as well, but simply grouping related elements together into closer proximity automatically creates organization. If the information is organized, it is more likely to be read and more likely to be remembered. As a by-product of organizing the communication, you also create more appealing (more organized) white space (designers’ favorite thing).

Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops. If there are more than three to five items on the page (of course it depends on the piece), see which of the separate elements can be grouped together into closer proximity to become one visual unit.

Don’t stick things in the corners or in the middle just because the space is empty. Avoid too many separate elements on a page. Avoid leaving equal amounts of white space between elements unless each group is part of a subset. Avoid even a split second of confusion over whether a headline, subhead, caption, graphic, etc., belongs with its related material. Create a relationship among elements with close proximity. Don’t create relationships with elements that don’t belong together! If they are not related, move them apart from each other.

“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.”

Find a strong line and use it.

If your alignments are strong, you can break through them consciously and it will look intentional. The trick is you cannot be timid about breaking the alignment—either do it all the way or don’t do it. Don’t be a wimp.

Robin’s Rule about Breaking Rules: You must know what the rule is before you can break it.

Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. Unity is an important concept in design. To make all the elements on the page appear to be unified, connected, and interrelated, there needs to be some visual tie between the separate elements. Even if the separate elements are not physically close on the page, they can appear connected, related, unified with the other information simply by their placement. Take a look at designs you like. No matter how wild and chaotic a well-designed piece may initially appear, you can always find the alignments within.

The basic purpose of alignment is to unify and organize the page. The result is similar to what happens when you (or your dog) pick up all the dog toys that were strewn around the living room floor and put them all into one toy box. It is often a strong alignment (combined, of course, with the appropriate typeface) that creates a sophisticated look, a formal look, a fun look, or a serious look.

Be conscious of where you place elements. Always find something else on the page to align with, even if the two objects are physically far away from each other.

Avoid using more than one text alignment on the page (that is, don’t center some text and right-align other text). And please try very hard to break away from a centered alignment unless you are consciously trying to create a more formal, sedate presentation. Choose a centered alignment consciously, not by default.

“Repeat some aspect of the design throughout the entire piece.”

Don’t overdo it with repetition, but do try “unity with variety.” That is, if a repetitive element is strong, such as a circle, you can repeat the circle in a variety of ways instead of repeating the exact same circle.

Repetition also gives a sense of professionalism and authority to your pieces. It gives your reader the feeling that someone is in charge because repetition is obviously a thoughtful design decision.

Once again, you can see that repetition doesn’t mean you have to repeat exactly the same thing. In the card above, the headlines are all the same typeface, but different colors (unity with variety). The illustrations are all different styles, but all rather funky and ’fifties.

A repetition of visual elements throughout the design unifies and strengthens a piece by tying together otherwise separate parts. Repetition is very useful on one-page pieces, and is critical in multi-page documents (where we often just call it being consistent).

The purpose of repetition is to unify and to add visual interest. Don’t underestimate the power of the visual interest of a page—if a piece looks interesting, it is more likely to be read.

Think of repetition as being consistent, which I’m sure you do already. Then push the existing consistencies a little further— can you turn some of those consistent elements into part of the conscious graphic design, as with the headline? Do you use a 1-point rule at the bottom of each page or under each heading? How about using a 4-point rule instead to make the repetitive element stronger and more dramatic? Then take a look at the possibility of adding elements whose sole purpose is to create a repetition. Do you have a numbered list of items? How about using a distinctive font or a reversed number, and then repeating that treatment throughout every numbered list in the publication? At first, simply find existing repetitions and then strengthen them. As you get used to the idea and the look, start to create repetitions to enhance the design and the clarity of the information. Repetition is like accenting your clothes. If a woman is wearing a lovely black evening dress with a chic black hat, she might accent her dress with red heels, red lipstick, and a tiny red corsage.

Avoid repeating the element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast (read the next chapter and the section on contrasting type). For instance, if the woman were to wear the black evening dress with a red hat, red earrings, red lipstick, a red scarf, a red handbag, red shoes and a red coat, the repetition would not be a stunning and unifying contrast—it would be overwhelming and the focus would be confused.

Contrast is created when two elements are different. If the two elements are sort of different, but not really, then you don’t have contrast, you have conflict. That’s the key—Robin’s Principle of Contrast states, “If two items are not exactly the same, then make them different. Really different.”

If you use tall, narrow columns in your newsletter, have a few strong headlines to create a contrasting horizontal direction across the page.

Don’t be afraid to make some items small to create a contrast with the larger items, and don’t be afraid to allow blank space! Once you pull readers in with the focal point, they will read the smaller print if they are interested. If they’re not interested, it won’t matter how big you set it.

Contrast on a page draws our eyes to it; our eyes like contrast. If you are putting two elements on the page that are not the same (such as two typefaces or two line widths), they cannot be similar—for contrast to be effective, the two elements must be very different. Contrast is kind of like matching wall paint when you need to spot paint—you can’t sort of match the color; either you match it exactly or you repaint the entire wall. As my grandfather, an avid horseshoe player, always said, “‘Almost’ only counts in horseshoes and hand grenades.”

Contrast has two purposes, and they’re inextricable from each other. One purpose is to create an interest on the page— if a page is interesting to look at, it is more likely to be read. The other is to aid in the organization of the information. A reader should be able to instantly understand the way the information is organized, the logical flow from one item to another. The contrasting elements should never serve to confuse the reader or to create a focus that is not supposed to be a focus.

Add contrast through your typeface choices (see the next section), line thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it’s probably the most fun and satisfying way to add visual interest. The important thing is to be strong.

Don’t be a wimp. If you’re going to contrast, do it with strength. Avoid contrasting a sort-of-heavy line with a sort-of-heavier line. Avoid contrasting brown text with black headlines. Avoid using two or more typefaces that are similar. If the items are not exactly the same, make them different!

Don’t be afraid to create your Design (or your Life) with plenty of blank space—it’s rest for the eyes (and the Soul). Don’t be afraid to be asymmetrical, to uncenter your format—it often makes the effect stronger. It’s okay to do the unexpected. Don’t be afraid to make words very large or very small; don’t be afraid to speak loudly or to speak in a whisper. Both can be effective in the right situation. Don’t be afraid to make your graphics very bold or very minimal, as long as the result complements or reinforces your design or your attitude.

you’re combining hot colors with cool, always use less of the

if you’re combining hot colors with cool, always use less of the hot color.

If you use a second color, consider using it sparingly. Most of the time a tiny bit is more effective than throwing the second color all over the card. You get your money’s worth with just a splash.

Don’t stick things in the corners. The corners don’t mind being empty. Don’t use Times, Arial, or Helvetica or your card will always look like it’s from the 1970s. Don’t use 12-point type or your card will always look unsophisticated! People can easily read 8-, 9-, or 10-point type. Business cards often use 7-point type. And please don’t center your layout unless you can put into words the reason why you need to do so.

Don’t use Times, Arial, or Helvetica or your card will always

Don’t feel like you have to fill the entire space on the card. It’s okay to have empty space. Look at those professional cards—they always have empty space! It’s unnecessary to have the words “email” and “web site” on your card—it’s clear what they are.

the card. It’s okay to have empty space. Look at those professional cards—they always have empty space! It’s unnecessary to have the

Line things up! Everything on your card should be aligned with something else. Align baselines. Align right edges or left edges. Most of the time a strong flush left or flush right alignment has a much more professional impact than a centered alignment.

Try using periods, small bullets, or blank spaces instead of parentheses around area codes. It gives your card a cleaner look.

Don’t put everything in boxes! Let the strong alignment create the “box” around the text. As in everything else, don’t set the same amount of space between all elements. If items are part of a unit, group them closer together. Don’t use Times, Arial, Helvetica, or Sand. Don’t use hyphens to call out bullet points. Instead, try using characters from Wingdings or Zapf Dingbats. Don’t center everything on the page and then put small pieces of text in the corners! Avoid a gray, boring page—add contrast. Watch the line endings—there’s no need to break lines at awkward places or to hyphenate unnecessarily.

Use a huge headline or huge clip art. Use an interesting typeface in a huge way. Crop a photograph or clip art into a tall narrow shape; place it along the left edge; align the text flush left. Or place the art along the right edge and align the text flush right. Or set the text in several columns, each one flush left. It’s okay to set the body text small on a flyer. If you capture the reader’s attention in the first place, she will read the small type. Tips on designing flyers

The biggest problems with most flyers created by new designers are a lack of contrast and a presentation of information that has no hierarchy. That is, the initial tendency is to make everything large, thinking that it needs to grab someone’s attention. But if everything is large, then nothing can really grab a reader’s attention. Use a strong focal point and contrast to organize the information and lead the reader’s eye through the page.

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

repetition is one of the most important for a web site. The other three principles help the pages look good and make sense, but repetition lets your visitors know whether they’re still in the same web site. You should have a consistent navigation system and graphic style so your visitors always know they are in the same web site. Repeating a color scheme, the same typefaces, buttons, or similar-style graphic elements placed in the same position on each page will do the trick. Designing a web site is quite a bit different from designing printed pieces.

Don’t let text bump up against the left edge of the browser window. Don’t use the default blue color for your text or graphic links. It’s a sure sign of an amateur page. Don’t make text links within big, dorky, table cells with the borders turned on. Don’t use bold type for your body copy, and please don’t let your body copy run the entire width of the page. Don’t use a fluorescent background color, especially with fluorescent type!

have to scroll on a home page

Two of the most important factors in good web design are repetition and clarity/readability. A visitor should never have to figure out how to use your navigation system, where they are in the site, or whether they are still in your web site or have jumped somewhere else.

If you are specifying the text to appear in a certain typeface (if you’re not, ignore this), typically Helvetica or Arial and Times or Times Roman, please specify Geneva or Verdana or Trebuchet in front of Helvetica, and New York or Georgia in front of Times. This will make the text on Macintoshes appear so much cleaner and easier to read. (If you use a Mac, set your default font to New York instead of Times, and you will be amazed at how much easier it is to read web pages. Change it back to Times before you print a page.) Verdana and Trebuchet are found on all operating systems updated within the past few years, and they’re excellent choices for body copy on the web.

A concordant relationship occurs when you use only one type family without much variety in style, size, weight, and so on. It is easy to keep the page harmonious, and the arrangement tends to appear quiet and rather sedate or formal—sometimes downright dull. A conflicting relationship occurs when you combine typefaces that are similar (but not the same) in style, size, weight, and so on. The similarities are disturbing because the visual attractions are not the same (concordant), but neither are they different (contrasting), so they conflict. A contrasting relationship occurs when you combine separate typefaces and elements that are clearly distinct from each other. The visually appealing and exciting designs that attract your attention typically have a lot of contrast built in, and those contrasts are emphasized.

There are six clear and distinct ways to contrast type: size, weight, structure, form, direction, and color.

If you’re setting lots of type that you want people to actually read, choose an oldstyle.

Because of their strong thick/thin transitions, most moderns are not good choices for extended amounts of body copy—the thin lines almost disappear, the thick lines are prominent, and the effect on the page is called “dazzling.”

Many of the slab serifs that have a slight thick/thin contrast (such as Clarendon or New Century Schoolbook) are very high on the readability scale, meaning they can easily be used in extensive text. They present an overall darker page than oldstyles, though, because their strokes are thicker and relatively monoweight. Slab serifs are often used in children’s books because of their clean, straightforward look.

A reader should never have to try to figure out what is happening on the page—the focus, the organization of material, the purpose, the flow of information, all should be recognized instantly with a single glance. And along the way, it doesn’t hurt to make it beautiful!

Caps versus lowercase (contrast of form) usually needs strengthening with other contrasts. Size is the only other contrast added in this example.

Another clear contrast of form is roman versus italic. Roman, in any typeface, simply means that the type stands straight up and down, as opposed to italic or script, where the type is slanted and/or flowing. Setting a word or phrase in italic to gently emphasize it is a familiar concept that you already use regularly.

Color is another term, like direction, with obvious interpretations. When you’re talking about actual color, remember to keep in mind that warm colors (reds, oranges) come forward and command our attention. Our eyes are very attracted to warm colors, so it takes very little red to create a contrast. Cool colors (blues, greens), on the other hand, recede from our eyes. You can get away with larger areas of a cool color; in fact, you need more of a cool color to create an effective contrast.

Don’t be a wimp. Most effective type layouts take advantage of more than one of the contrasting possibilities. For instance, if you are combining two serif faces, each with a different structure, emphasize their differences by contrasting their form also: if one element is in roman letters, all caps, set the other in italic, lowercase. Contrast their size, too, and weight; perhaps even their direction. Take a look at the examples in this section again—each one uses more than one principle of contrast.

The process Where do you begin when you start to design or re-design something?

  • Start with the focal point. Decide what it is you want readers to see first. Unless you have chosen to create a very concordant design, create your focal point with strong contrasts.
  • Group your information into logical groups; decide on the relationships between these groups. Display those relationships with the closeness or lack of closeness (proximity) of the groups.
  • As you arrange the type and graphics on the page, create and maintain strong alignments. If you see a strong edge, such as a photograph or vertical line, strengthen it with the alignments of other text or objects.
  • Create a repetition, or find items that can have a repetitive connection. Use a bold typeface or a rule or a dingbat or a spatial arrangement. Take a look at what is already repeated naturally, and see if it would be appropriate to add more strength to it.
  • Unless you have chosen to create a concordant design, make sure you have strong contrasts that will attract a reader’s eye. Remember—contrast is contrast. If everything on the page is big and bold and flashy, then there is no contrast! Whether it is contrasting by being bigger and bolder or by being smaller and lighter, the point is that it is different and so your eye is attracted to it.