I’ll never understand why so many designers get this wrong. It seems like a fairly simple concept. In typography, particularly within a paragraph, as a general rule you either want the same font or something which contrasts well otherwise you have a typographic design conflict. A conflict in typography, is when two or more typefaces on the same page, within the same paragraph, or even in the same sentence are simply too similar. Here is an example:

Notice how the words “too similar to one another” are in a different font. Glancing at them they just don’t look right. If they had more contrast they would be okay because you wouldn’t expect them to look like each other. But given that the font’s look so similar, in your mind (or at least in mine), you want them to be the same font.

Every good designer settles on a few good principles that guide their design. In the next few pages I am going to teach you the four essential principles of design that guide most of my work (proximity, alignment, repetition and contrast). These four principles represent the absolute minimum design training that you need to create web and/or print layouts. Don’t worry, they are easy to understand and once you “get them,” you’ll wonder how you ever lived without them.

Proximity

Proximity is an object’s relative closeness in space, distance, or time. In design it is simply a method of defining one objects relationship to another on the page. Items which are related to each other should be grouped together. In other words they should be “placed in close proximity” to one another. Objects that don’t relate to each other should be separated. Proximity is an essential tool for organizing “like” information. An object’s relative proximity to another object indicates its relationship to that object and by doing so, allows users to visually scan a page for relevant information. In essence proximity allows users to see relationships on the page. The closer objects are to each other on the page the stronger their relationship.

To illustrate this concept lets compare two user profiles laid out in two different ways based on relative proximity:

• James Smith Profile A (Figure 2.A)

• And, James Smith Profile B (Figure 2.B, click on it for a large image).

Looking at profile A you will notice what appears to be a laundry list of information. It is only after reading through each piece of information that you are able to determine that some of text represents category headings (Stats, Hobbies and Address) while other bits of text represent the details of those headings. Because the proximity is exactly the same for each piece of information on the page it is very difficult to determine what information is important to you and what isn’t.

Imagine that you are only interested in viewing James’ hobbies. Looking at profile A it is nearly impossible to determine what those are without being forced to read much of the other information. A quick glance at profile B and you’ll notice a change in the proximity of the objects. By simply grouping “like elements” in the profile we are able to scan and quickly understand the presented information. As a reader of the information you are no longer forced to read each line. Because of the change in proximity you can now scan from line to line and even skip lines allowing you to land on each category head and read only the information that is of interest to you.

Alignment

The principle of alignment states that “like items” should have a visual connection to each other. Connecting object through the use of alignment is perhaps easiest way to bring a sense of unity to elements that are not in close proximity to each other (like the category heads in profile A and B). To understand this concept lets look at profile B and profile C (Figure 2.C).

Looking at the profile B you are aware that the principle of proximity holds true. You can see the groups of information, however reading the information could be easier, as it is in profile C (notice how the category heads line up). In profile C, alignment allows the reader to determine relevance and make assumptions about the information presented. In this example it becomes evident that “Stats”, “Hobbies”, and “Address” are category headings with the relevant information for each presented just off to the side of them.

Alignment allows us to quickly scan the headings and dig deeper into the information that we are interested in. For example if you were interested in learning James’ address, as a reader you would simply scan for the “Hobbies” category heading and read the associated text. If you weren’t interested in learning about his hobbies and simply wanted to know his address, you would skip the superfluous “hobby information” and jump down to the next category head. Once you found the “Address” category you would read the associated information.

Repetition

Most people are already aware of repetition and use it without much though, however becoming aware of the impact repetition can provide will help you to take your design much further. The principle of repetition states that you should repeat aspects of your design throughout your work. This can be bullet points, images, ruled lines, type treatments, spacing, or anything that can be repeated in a way that the reader will recognize. Repetition becomes a design element when the repeated elements are used in such a way as to impact the design.

To illustrate this point lets now compare profiles C and D (Figure 2.D).

Looking at profile C you are already aware of the principles of Proximity and Alignment. A quick look at profile D and you will notice the Principle of Repetition at work. Notice the duplicate lines above and below the detail information in the profile, the bullet points in front of the detail information, and the bold category heads. Each of these elements help frame the information, exaggerate relationships and create a sense of unity. Glancing back at profile C illustrates just how powerful this difference is. But we can still do better; on to the last design principle we are going to cover, the principle of Contrast.

Contrast

Have you ever looked at a newsletter and noticed how the headline is drastically different size than the text? That is an example of contrast. But it happens in more ways than just text size. If you have ever noticed how the best looking gifts are packaged with varying combinations of wrapping paper and ribbon, you have discovered another example of contrast.

Contrast can be created in any number of ways, small text to large text, varying color combinations such as red and green, styles of font, line spacing, and much more. The key, is to create enough contrast to be noticed at a glance. Be daring and go for extremes, while avoiding weak contrast.

In profile D we have already begun to explore the principle of contrast by enlarging the font of category headings in the profile. Without thinking I instantly began to employ the principle of contrast as a repetitive element. As a principle of design, contrast is perhaps the single most important principle to understand. It is a powerful tool when used correctly and applying it to your layout will help the viewer organize and understand what they are seeing with a simple glance.

Looking again at our user profiles lets examine this concept at work in profiles D and E (Figure 2.E).

Looking at the two profiles you can see the difference contrast can make. Increasing, and changing the fonts which are not related, changing the color of the fonts, and the background color all are examples of contrast. Contrast helps frame the relevant profile information while giving weight to more important information such as James’ name. Once you add contrast you may notice that you also want to add more repetitive elements and play with alignment a bit. For example, in order for me to push the design a little further I added some additional contact information at the bottom in order to add balance and push a bit more contrast into the design.