The biggest problem with the original menu is that there is no separation of

information. In your software, learn how to format so you can make exactly the
amount of space you need before and after each element.

The original text in all caps took up all the space so there was no extra, blank,
“white” space to rest your eyes. The more text you have, the less you can get
away with all caps. And it’s okay to set the type smaller than 12 point! Really!

In the example on the previous page, we still have a little bit of a problem
separating the “Starters” and the “Entrees.” Let’s indent each section—
watch how the extra space defines these two groups even further, yet clearly
communicates that they are still similar groups. (I enlarged the size of
“Starters” and “Entrees” also, which is the principle of Contrast.)
We really don’t have enough room to add more space before “Starters” and
“Entrees,” but we do have room to make an indent. That extra space under the
heading helps to separate these two groups of information. It’s all about space.
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. In
the example below, you can imagine how all of the other principles would
mean nothing if I didn’t first apply the appropriate spacing.
I chose a more interesting typeface than Times New Roman—that’s easy to do. I
experimented with indenting the descriptions of the menu items, which helped to
clarify each item a little further.

It bothered me that the prices of the items were tucked into the text (with dorky
hyphens), so I aligned them all out on the right where they are easily visible and
consistently arranged. That’s the principle of alignment, which is coming right
up in a couple of pages.

The simple principle of proximity can make web pages easier to navigate
by collecting information into logical groups. Check any web site that you
feel is easy to get around in—you’ll find information grouped into logical
clumps.
The information on this page is muddled. Look at the site links just under the
title. Are they all equal in importance? In the arrangement above, they appear to
be equal in importance—but realistically they’re not.

I have to repeat myself: Intellectually, you already know how to use

proximity. You already know how to collect pieces of information into their
appropriate groups. All you need to do is transfer that skill to the printed
page. Use space to define groups of elements.

I moved all the site links into one column to show their relationships to one
another.
I set the quotation farther away from the main body copy since it‘s not directly
related.

I also used the principle of alignment (discussed next, in Chapter 3): I used
flush-left alignment and made sure each element lined up with something else.

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 logical 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

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.
3. Alignment

New designers tend to put text and graphics on the page wherever there happens
to be space, often without regard to any other items on the page. What this
creates is the slightly-messy-kitchen effect—you know, with a cup here, a plate
there, a napkin on the counter, a pot in the sink, a spill on the floor. It doesn’t
take much to clean up the slightly messy kitchen, just as it doesn’t take much to
clean up a slighty messy design that has weak alignments.

Robin’s Principle of Alignment states, “Nothing should be placed on the page

arbitrarily. Every item should have a visual connection with something else
on the page.” The principle of alignment forces you to be conscious—no longer
can you just throw things on the page and see where they stick.
When items are aligned on the page, the result is a stronger cohesive unit. Even
when aligned elements are physically separated from each other, there is an
invisible line that connects them, both in your eye and in your mind. Although
you might have separated certain elements to indicate their relationships (using
the principle of proximity), the principle of alignment is what tells the reader that
even though these items are not close, they belong to the same piece. The
following pages illustrate this idea.

Take a look at this business card, the same one you saw in the last chapter.
Part of its problem is that nothing is aligned with anything else. In this little
space, there are elements with three different alignments: flush left, flush
right, and centered. The two groups of text in the upper corners are not
lined up along the same baseline, nor are they aligned at the left or right
edges with the two groups at the bottom of the card (which don’t line up
along their baselines, either).
The elements on this card look like they were just thrown on and stuck. Not one
of the elements has any connection with any other element on the card.
Take a moment to decide which of the items above should be grouped into closer
proximity, and which should be separated.

By moving all the elements over to the right and giving them one alignment, the
information is instantly more organized. (Of course, grouping the related
elements into closer proximity helped, too.)
The text items now have a common boundary; this boundary connects them
together.

In the example (repeated below) that you saw in the proximity section, the
text is also aligned—it’s aligned down the center. A centered alignment
 often appears a bit weak. If text is aligned, instead, on the left or the right,
the invisible line that connects the text is much stronger because it has a
hard vertical edge to follow. This gives left-and right-aligned text a cleaner
and more dramatic look. Compare the two examples below, then we’ll talk
about it on the following pages.

This example has a nice arrangement with the text items grouped into logical
proximity. The text is center-aligned over itself, and centered on the page.
Although this is a legitimate alignment, the edges are “soft”; you don’t really see
the strength of the line.

This has the same logical arrangement as above, but it is now right-aligned. Can
you see the “hard” edge on the right?
There is a strong invisible line connecting the edges of these two groups of text.
You can actually see the edge. The strength of this edge is what gives strength
to the layout.

Do you tend to automatically center everything? A centered alignment is

the most common alignment that beginners use—it’s very safe, it feels
comfortable. A centered alignment creates a more formal look, a more
sedate look, a more ordinary and oftentimes downright dull look. Take
notice of the designs you like. I guarantee most designs that have a
sophisticated look are not centered. I know it’s difficult, as a beginner, to
break away from a centered alignment; you’ll have to force yourself to do it
at first. But combine a strong flush right or left alignment with good use of
proximity and you will be amazed at the change in your work.

This is a typical report cover, yes? This standard format presents a dull, almost
amateurish look, which may influence someone’s initial reaction to the report.
The strong flush-left alignment gives the report cover a more sophisticated
impression. Even though the author’s name is far from the title, that invisible
line of the strong alignment connects the two text blocks.

Stationery has so many design options! But too often it ends up with a flat,
centered alignment. You can be very free with placement on a piece of
stationery—but remember alignment.
This isn’t bad, but the centered layout is a little dull, and the border closes the
space, making it feel confined.
A flush-left alignment makes the page a little more sophisticated. Limiting the
dotted line to the left side opens the page and emphasizes the alignment.
The text is flush right, but placed on the left side. The letter you type will have a
strong flush left to align with the flush right of this layout.
Be brave! Be bold!

I’m not suggesting that you never center anything! Just be conscious of the
effect a centered alignment has—is that really the look you want to portray?
Sometimes it is; for instance, most weddings are rather sedate, formal
affairs, so if you want to center your wedding announcement, do so
consciously and joyfully.
Centered. Really rather dull.

If you’re going to center text, then at least make it obvious!

Experiment with uncentering the block of centered type.

If you’re going to center the text, experiment with making it more dramatic in
some other way.
 Sometimes you can add a bit of a twist on the centered arrangement, such
as centering the type, but setting the block of type itself off center. Or set
the type high on the page to create more tension. Or set a very casual, fun
typeface in a very formal, centered arrangement. What you don’t want to do
is set Times 12-point with double Returns!

This is the kind of layout that gives “centered” a bad name: Boring typeface,
type that is too large, crowded text, double Returns, dorky border.
A centered alignment needs extra care to make it work. This layout uses a classic
typeface sized fairly small (relatively), more space between the lines, lots of
white space around the text, no border.

Emphasize a tall, slender centered layout with a tall, slender piece of paper.