NHS Designs

Definition
prox·im·i·ty
noun
closeness; the state of being near

Design Principles
Proximity

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Page 9: Menu

Proximity is really just a matter of being a little more conscious of doing what you do naturally, but pushing the concept a little further. Once you become aware of the importance of the relationships between lines of
type, you will start noticing its effect. Once you start noticing the effect, you own it, you have power over it, you are in control.

example 26

Lest you think no menu could be this bad, know that I took it right out of a restaurant. Really. The biggest problem, of course, is that all the information is one big chunk.

Before trying to design with this information, write out the separate pieces of information that belong together; group the elements. You know how to do this - simply use your brain.

Once you have the groups of information, you can play with them on the page. Later we will learn how to format a page in computer software.

 

In the example below, I put more space between the separate menu items. One should almost never use all caps because they are so hard to read, so I changed it to caps and lowercase. And I made the type a couple of point sizes smaller, both of which gave me a lot more room to work with so I could put more space between the elements.

example 27

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 previous example, 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.)

example 28

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.

example 29

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 the next section.

 

Here are the examples again, side-by-side for comparison:

examples 26-29

 

Next...

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

Source: The Non-Designer's Design Book by Robin Williams


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com
>