Design Elements, 2nd Edition

(F39)_Job:12-40337 Title:RP-Design Elements 2nd Edition

#175 Dtp:160 Page:170

128-185_40337.indd 170 12/19/13 6:42 PM 128-185_40

3

TEXT

choosing and using type

170

TYPE AS INFORMATION

Establishing Hierarchy Information is

systematic. Most often, it appears as a

collection of parts, each having a different

function: for example, callouts, captions,

and sidebars in magazine articles; or the

primary content, supporting content,

and menus on a webpage. These various

parts often repeat, appear within the same

space, and support each other. One of the

designer’s most important tasks is to give

information an order that allows the

viewer to navigate it. This order, called the

“informational hierarchy,” is based on the

level of importance the designer assigns to

each part of the text. “Importance” means

“the part that should be read first, second,

third . . .” and so on; it also refers to the

“distinction of function” among the parts:

running text (the body of a writing), as

measured against other elements such as

page folios, titles and subheads, captions,

and similar items.

Creating informational hierarchy applies

the formal aspects of purely visual hierar-

chy to the parts of language present in the

format or field at hand and results from

reading the text and asking some simple

questions: What are the distinguishable

parts of the information to be designed?

Which part (or parts) should be the main

focus of the reader’s attention? How do the

parts that are not the main focus relate to

each other? How do these relate to images

On the landing page of this website, large, bold letters

visually assume a dominant position, but allow much

smaller navigational text to become more relevant.

On the subpage, however, the text content is given

hierarchic dominance by assigning it the greatest

width (and, so, increasing its mass). Organizing the

text content below a set of thin lines further separates

it from the navigation above, which—together with

the large graphic initials—have diminsihed in relative

importance.

STUDIO DIEGO FEIJOO SPAIN

A quick illustration of the simultaneity

of visual hierarchy and verbal hierarchy:

how the compositional strategies discussed

in the first chapter (page 80) are directly

relevant to typographic and pictorial

elements. As is most often the case, dark

value elements appear to advance and

rise to the top of the hierarchy, while ele-

ments of lighter value recede. In the actual

newspaper cover, however, note that the

hierarchic position of some elements is

indeterminate—the large red elements,

especially the numeral 50, occupy different

levels of visual importance relative to other

elements in different locations.

BACHGARDE DESIGN SWEDEN

(F39)_Job:12-40337 Title:RP-Design Elements 2nd Edition

#175 Dtp:160 Page:170

128-185_40337.indd 170 12/19/13 8:00 PM

171

tha

t

lay

o

un

d

bef

o

par

t

oft

e

cov

e

mo

s

sho

a ta

b

nee

128-185_40

3

t

ion

170

9/13 6:42 PM

(F39)_Job:12-40337 Title:RP-Design Elements 2nd Edition

#175 Dtp:160 Page:171

128-185_40337.indd 171 12/19/13 6:42 PM

e

s

r

-

h

e

e

?

n

t

he

o

es

t

ion

170

9/13 8:00 PM

TEXT

design elements

171

that accompany the text elements in the

layout? Does the viewer need to see (and

understand) a particular grouping of words

before they begin to focus on the main

part? The answers to these questions are

often common sense. On a publication’s

cover, for example, the masthead or title is

most important, so it makes sense that it

should be the first type the viewer sees. In

a table of financial information, the viewer

needs to understand the context of figures

being presented, so the headers, which

describe the meaning of the figures, need

to be located easily. Within a publication’s

pages, where running text may interact

with captions, callouts, and other details,

the running text needs to occupy a consis-

tent area and be visually noted as different

from these other elements. The effect

of these decisions, as noted previously,

becomes simultaneously verbal and visual.

Differentiating spaces between

columns with similar propor-

tions and between informa-

tional components within

columns—as well as changing

vertical positioning—keeps

positive and negative areas pro-

portionally unified but easily

distinguishable from each other.

HELMUT SCHMID JAPAN

In this page spread, two items

immediately demand attention

because of their size and weight:

the letters that spell “blue,” and

the horizontal callout at the top

of the left-hand page. Notice

that the callout at the bottom

of the right-hand page isn’t

as dominant—this is because

it is visually overpowered by

“blue,” and because it is also

near the bottom of the format.

The callout at upper left is

located in the area where read-

ers expect to begin reading, so

once the viewer has focused on

“blue,” the next search is for

that text which will lead the

reader into the article.

MARIELLE VAN GENDEREN +

ADRIAAN MELLEGERS

NETHERLANDS

(F39)_Job:12-40337 Title:RP-Design Elements 2nd Edition

#175 Dtp:160 Page:171

128-185_40337.indd 171 12/19/13 8:00 PM