The Four Basic Principles of Design

The following is a brief overview of the basic principles of design that appear in every well-designed piece of work. Although I discuss each one of these principles separately, keep in mind they are really interconnected. Rarely will you apply only one principle.

Contrast

The idea behind contrast 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. Contrast is often the most important visual attraction on a page-it’s what makes a reader look at the page in the first place. It also clarifies the communication.

Summary of contrast

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 cover a ding-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.”

The basic purpose

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.

How to get it

Add contrast through your typeface choices (see the second half of this book), 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.

What to avoid

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!

 

Repetition

Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity

Summary of repetition

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 basic purpose

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.

How to get it

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 wears a lovely black evening dress with a chic black hat, she might accent her dress with red heels, red lipstick, and a tiny red pin

What to avoid

Avoid repeating the element so much that it becomes annoying or over-whelming. Be conscious of the value of contrast.

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.

Alignment

Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean and sophisticated look.

Summary of alignment

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, unifieo with the other information simply by their placement. Take a look at design projects you like. No matter how wild and chaotic a well-designed piece may initially appear, you can always find alignments within.

The basic purpose

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 and put them 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

How to get it

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.

What to avoid

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.

 

Proximity

Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

 

Summary of 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 progression through the piece, from a definite beginning to a definite end.

The basic purpose

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

How to get it

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.

What to avoid

Avoid too many separate elements on a page. Avoid leaving equal amounts of white space between elements unless each group is part of a related subset. Avoid even a split second of confusion over whether a headline, subhead, caption, graphic, or the like 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 Don’t stick things in the corners or in the middle just because the space is empty

 

When distilling these four principles from the vast maze of design theory I thought there must be some appropriate and memorable acronym within these conceptual ideas that would help people remember them. Well, uh, there is a memorable-but rather inappropriate-acronym. Sorry. Although you can now find this acronym in relation to design all over the web, this book is its origin.

follow us @ochs_graphics