O'Reilly logo

Design Elements, 2nd Edition by Timothy Samara

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

(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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required