Layout Design

About Layout

Layout is the management of form in space. In other words, layout is
how you will arrange your design elements, according to design
principles, into the limited space you have available on a page.

Visual and textual elements are the usual tools you use when creating layouts,
and their successful placement is the difference between an obscure
design with little communication and a striking, simple design that
communicates quickly and directly.

With a good layout, whether it is an article, cover, poster or web page, a
reader can navigate through complex information easily.

Layout is perhaps one of the most under-appreciated design talents. If done
badly, the best concepts, type treatments and images are wasted.
They’ll be overlooked at best, robbed of all their power at worst.

Layout and page design are one in the same (layout being the skill of a page
designer.) In this module and the next we will examine ways to layout a
variety of information on pages so that it is accessible, legible and
powerful.

To do this successfully you need to pull together all the elements and principles you have learned about so far
and to examine some of them in greater detail, namely: contrast, focal
points, emphasis and visual weight.

Visual Weight

To build effective visual hierarchies, we use visual relationships to add more or less visual weight
to page elements and thereby establish a pattern of movement through
the layout. Visual weight can be measured by the degree to which page
element demands our attention or keep our interest.

Visually dominant elements (those with the heaviest visual weight) get
noticed the most. They are the center of interest in a layout and they
determine where the story begins. The hierarchy of subsequent elements
guides our eyes through the rest of the composition, giving us pieces
of the story as we go. The relative position of each element in the
hierarchy provides valuable information about its importance to the big
picture.

Why Visual Hierarchy is Important

Without visual hierarchy, page elements compete for attention, and as a
result, none of them win. In all hierarchies only certain elements
should be on top; the rest need to follow suit. The appropriate
position of each element in the hierarchy depends on the message you
are trying to communicate. In a layout with an effective visual
hierarchy, the distinct visual weight of each element guides viewers
through the page in an informative and appropriate manner.

Visual Relationships

Whenever we attempt to make sense of information visually we first observe similarities and differences in what we are seeing. These relationships allow us to distinguish objects and give them meaning. For example:

• A difference in color implies two distinct objects (or different parts of the same object)
• A difference in scale suggests one object is further from us than the other
• A difference in texture (one is more blurry) enforces this idea
• …and so on

Once we have an understanding of the relationships between elements, we can
piece together the whole story and understand what we are seeing.

This process is accelerated by our ability to group information visually.
When we observe one blade of grass, nearby objects that share a similar
color, shape, size, and position are grouped together and given
meaning: a lawn. We don’t have to compare each blade to the others.

The principles of perception give us valuable insight into how we visually group information. For example:

• Objects near each other are grouped (proximity)
• Objects that share many visual characteristics are grouped (similarity).

Understanding the psychological manner in which we group visual information is not
enough if we want to be able to communicate a specific message. In
order to do that, we need to know how to use visual relationships to
our advantage; we need to know what makes things different.

Though lots of variations are possible, we can group distinct visual characteristics into five general categories:

• Color
• Texture
• Shape
• Direction
• Size

Introducing variations in one or all of these categories creates visual contrast.
The more contrast between two objects, the more likely they will be
perceived as distinct and unrelated.

Contrast

Contrast between elements within the layout
space is achieved by carefully considering their visual properties.
Important contrasts used to create hierarchical arrangements include:

• Position:
  because we read English from left to right and we begin to read at the
  top of a page, we naturally tend to move our eyes the same way when
  looking at a design. So by default, all things being equal, the upper
  left corner is where reading will commence, and where a viewer’s eye
  will enter the composition.
• Size: we tend to look at bigger things first and smaller things last.
• Color: we tend to be attracted to brighter colors but also to look at the
  color that stands out or is different from the surrounding colors.
• Value: a gradation of values, moving from high contrast to low contrast, can establish a flow from one element to the next.
• Visual weight: we tend to look at “heavier” elements first.
• Spatial interval: Items in isolation stand out more than those seen in a crowded field.

How Do You Develop a Strong Visual Hierarchy?

Establishing a visual hierarchy is directly related to establishing a point of focus. Then it goes beyond a focal point to establish a priority order of all the information in a work.

John Rea, Vice President and Creative Director at McCann Erikson,
New York, calls these questions the “ABC’s” of visual hierarchy.
Answering these questions, if you have not done so already, is the
first step in finding your concept or visual story, and that leads
directly to your hierarchy. Like this:

1. Where do you look first?
2. Where to you look second?
3. Where do you look third?

Emphasis

Emphasis is the most important principle for the graphic designer.
All the elements and principles are used interchangeably to create good
design, but it is the use of proper emphasis that makes or breaks a
design as a communication tool.

Communicating the Message

The graphic designer must establish what message is to be communicated. In
communicating the message the decision has to be made as to whether the
emphasis will be placed on the visual, the word, or on both. It is
often the concept that will determine what is to receive the emphasis –
and/or become the focal point.

The graphic designer may often be working with multiple focal points, as follows:

• The headline may be the first item seen.
• Then there may be other focal points within the overall design—like a visual of some kind.
• There may be another focus within that visual.
• Each other visual (photograph or illustration) may have its own focal point also.
• At other times the focal point may be a single visual which is the strongest element on the page.

The decision as to what to emphasize is made after carefully considering
the intention of the design, and after thoughtful experimentation of a
variety of ways to achieve the desired effect through a series of
thumbnails and refinements.

As a rule, the emphasized elements of a design create visual dominance, whereas the
less contrasting ones are secondary. Because heavy-handed use of
emphasis will tire the viewer, care must be exercised to create a
varied view that will on one hand keep the viewer interested, while on
the other hand achieve the desired impact.

In some repeating patterns no one shape dominates the others and the
eye is influenced by the play of all the shapes against space. This can
have a pleasing effect, but a design which uses too many different
elements, all of equal weight, can confuse the viewer and be tiring to
look at. When differences are introduced, a part or parts of the visual
field emerge, and become more visible than others.

Ways to Create Emphasis

Once you have decided on the message, there are a number of ways to create emphasis:

Contrast

Contrast is one of the simplest ways to achieve emphasis.

• Areas of greatest contrast will often be the center of interest.
• Larger areas of either strong light or dark values will dominate the rest of the picture surface.
• When dark is emphasized, it often creates a mood of heaviness, mystery, gloom or apprehension.
• Emphasis on light or bright elements will be the opposite.

Look at designs that you feel are not working. What do you see wrong with
them? Many times there is simply insufficient contrast.

Simplified Background

Emphasis is more effective when the background is less important than the main subject matter.

Isolation of Subject Matter

When the focal point is set
apart either from the background or from the other elements in the
design, it will have a strong visual impact. This might be achieved
with a simple element against a complex background, or the opposite; or
a careful and strategic placement of the dominant element.

The Unusual or Unexpected

The eyes of the viewer will be automatically attracted by the interruption
of a normal frame of reference, the breaking of a natural rhythm, the
creation of a sense of disorganization, or the presentation of
something totally unexpected. This can be visually exciting, pleasing,
fascinating, disturbing or even upsetting. A focal point established in
this manner can be so riveting that the viewer has trouble looking
away. However, placement is still of major importance, as is size, and
the relationship of the distorted or unexpected element to the rest of
the layout.

Proportion, Size, Repetition and Number

Emphasis can be achieved by increasing the proportion of one element to another.
When there is more light than dark, dark than light, rough than smooth,
and so forth the eye is drawn to the stronger emphasis.

Usually, larger elements command attention if they are within an environment in
which the other elements are of equal size. However, larger does not
always mean dominant. One small element that appears unusual among many
larger ones will often draw the eye first.

When there is a large number of one element (usually in some form of
repetition), emphasis is created simply because a concept is
reinforced. For example, a number of people on a street create an
emphasis of a crowd.

Movement and Lines

By creating eye movement through the use of strategically placed lines, a focal point can be easily established.

The lines will direct the viewer where the designer wishes. Where the lines
stop, the eye stops. Converging lines are the simplest way to achieve
this, but other less obvious and subtler methods can be used.

By arranging shapes, lines, colors, values, or edges in a manner that
creates a path--either obvious or implied--the eye can be drawn to a
center of attention. You can also use an outline, or by frame the
material or shape in some other way.

There are times when no emphasis is wanted. The elements balance
equally against each other and within the space around them. However,
placing the focal point in the center can create an effect so
dominating that the viewer will ignore all other parts of the design.

In a design that has many things going on, some elements may naturally
have more stress than others. Visual importance is then controlled
through the use of selective stress. Since the eye is attracted by the
emphasized part or parts of a design, the designer selects the
passages, shapes, or lines to be given importance. The designer will
position the elements so that the eye of the viewer moves through the
design, pauses, and then moves on again.

A viewer focuses on the different parts of a design in order of their emphasis, or
importance. This becomes the visual path (or hierarchy) of the design.
When all the elements work together to produce emphasis, a sense of
harmony and unity is achieved.

The designer must decide what to emphasize, how to achieve the correct focal point, how much to
emphasize, and where to place the emphasis. Unless the designer is
working within a controlled format, most placement for emphasis is
based on the designer’s intuition and understanding of the principles
of design.

Emphasis can also be achieved when many shapes
are grouped together and are seen as one because of their nearness to
each other. They appear as a single subject because of their immediate
and intense interaction. The closer the forms are to each other, the
stronger their attraction to each other as a single visual message.

The Basic Principles of Page Layout

At this point in the module we’ll move to the principles of layout. The
process of layout starts with the practical and aesthetic
considerations of the job. Consider how, where and why your content
will be viewed when creating your layout. Are you designing a web page,
product packaging or a poster?

Layout means more than arrangement on a page. It means arrangement of the
page—in other words, making the page an integral part of the message.
It means uniting disparate design elements into a whole that’s greater
than the parts.” —Gail Deibler

Page design and layout also calls for sensitivity to proportion: the
organization of several things into a relationship of size, quantity,
or degree. In fact, layout may be the most difficult balancing act a
designer is ever called upon to perform.

Goals of Page Layout

One of the first goals of any kind
of layout is to attract the eye. The layout, first and foremost, must
provide visual stimulation to draw viewers into your design. Drawing
viewers is also crucial in their absorption of information. With
curiosity aroused and an inviting design, readers are better able to
engage their minds and begin the process of absorbing information.

Good design reduces the effort of reading as much as possible, thereby
encouraging readership and understanding. Good design means considering
carefully how you use the following:

Shape and Image

You can work with geometric or organic shapes, but usually you’ll use both.
The shapes you use will range from freeform to rectangular. They can be
photographs, illustrations, charts, supplemental elements, or images.
The format, size, and value contrast of the typographical elements must
be closely related to accompanying photographs and illustrations.

Text

When text is included in a layout, it has to communicate clearly, regardless
of the other elements on the page. You need to set up visual paths
within the text itself. What are the most important words, the second
in importance, the third, and so on? In addition, the hierarchy of the
words has to fit within, and interact with, the hierarchy of the rest
of the page.

Contrast (Again)

Don’t forget contrast and emphasis. Everything you have learned so far about unity
and contrast applies here. Using contrast is the best way to establish
emphasis. Look at designs that you feel are not working. What do you
see wrong with them? Many times there is simply insufficient contrast.

Visual Hierarchy

In layout you now have full pages to deal with and the visual path you set
up determines how the information on each page is comprehended. When
developing a layout, it is important that we look at both the writing
and visual hierarchies to make sure the two of them are working
together and not conflicting with each other.

The hierarchy also relates to a sense of movement. When you have multiple pages in a
single document (like a brochure), there also needs to be a flow from
page to page; the entire piece needs to have a hierarchy. You’ll also
want to have some form of movement within each spread.

Figure/Ground

A good relationship between figure and ground is essential in page
design. The careful shaping of the negative space of the page gives
cohesion and unity to the figures or elements placed upon it. There
should be no “leftover” space that is unshaped or un-designed. Open
negative space functions as an active, participating part of the whole
design.

Space and Negative Space

As you begin to work on full-page surfaces, there are a number of
space issues to consider. Everything that you put on a page plays a
part in the overall balance of the composition and ultimately in how
well (or not well) the information is communicated.

Negative and Positive Space

Unlike a poster, which works best if simple and bold, page design often
contains large amounts of information, which usually are to be seen up
close. The ways you both organize the information and design the
page(s) are the main considerations of page layout.

Single pages can be laid out with or without the use of a grid. If you are
designing something that is one of a kind, a grid may not be necessary.
But as soon as you need to develop a “look” or style, or a sequence, or
any other type of series where consecutive pages or pieces need to be
visually tied together, a grid is necessary.

Positive and Negative Space

To repeat the definition of positive and negative space: positive space is
occupied space and negative space is unoccupied space. Either can be
white or black. You can have a black positive space (or shape) on white
negative space (the background) or the reverse. The negative space in
your layout is the context in which your other design elements will be
perceived. It is the physical environment that houses the forms in your
image.

It is critical that you see and understand negative space in your layouts. All negative space should be active,
meaning that the shape of the empty space has been planned. Active
space in a design is what makes some designs seem pleasing to the eye
and others not.

An unwritten rule in graphic design is to concentrate on the negative space first.
If you arrange the negative space well, the positive elements of the
page will look great, but if you only concentrate on the positive
elements of the design, your forms, the negative space will almost
necessarily be ineffective.

Designers call this “working the space.”

As usual, you should begin with thumbnails, using rough key lines to
establish perimeters. As you quickly jot down your ideas, you will find
yourself becoming more and more aware of space and how you use it. This
is good. Train yourself to look at the space first until you really see it as a vital part of your layout.