Before & After 0672 - Fun With Words And Pictures.pdf

(3675 KB) Pobierz
Before&After
®
BAmagazine.com
i
U
X
words and
pictures
Wired magazine’s table
of contents is a toy box of
visual techniques.
Continued
Continued
Fun with words and pictures
0672
Fun with
Before&After
®
BAmagazine.com
i
U
X
Fun with words and pictures
Wired magazine’s table of contents is a toy box of visual techniques
that you can use on all kinds of projects.
Our busy, sound-bite world puts a
premium on being brief, visually
and verbally. Few examples of brev-
ity are better than magazines’ tables
of contents. Part talk show, part road
map, a contents page rolls a maga-
zine’s voice, typography, graphics, colors and
other elements into a compact menu of titles and
micro-“trailers” that convey a lot in tiny spaces.
Take Wired magazine, which is famous for its
tight, high-energy integration of words and imag-
es. Its contents page is a party mix of numerals,
illustrations, lists, bars and visual sprites—a toy
box of visual techniques that can be applied to all
kinds of small-space projects. Let’s scoop up the
lively stuff that makes it work.
Unusual is that it’s
mainly visual, not verbal,
Wired’s contents page
makes the reader work
for its information. This
task is made interesting
by a smorgasbord of
visual techniques that
are wry, cool, funky,
surprising—everything
but obvious; getting the
reader to figure it out is
key to its engagement.
2
of
11
Fun with words and pictures
0672
Before&After
®
Fun with words and pictures
3
of
11
BAmagazine.com
i
U
X
Reconfigure the images
Every image has an expressive core. To reveal it, big graphics are not simply
shrunk but reconfigured by masking, re-cropping, rearranging and so on.
Un-crop
The Nikon is lifted from
a page of cameras, then
un-cropped, so it now
looks at you like a big,
robotic eye.
Mask
The red diving helmet is
extracted from its back-
ground, which simplifies it,
essential for small graphics.
Downsize
Pieces are cut from a
much bigger collage and
rearranged for the tiny
space, which is oh-so-
more effective than merely
resizing the large original.
Super-crop
Full-size Jeff Bezos is just
right for the editorial layout
but radically cropped for
the contents page, which
fits and focuses attention
at the same time.
3
of
11
Fun with words and pictures
0672
Before&After
®
Fun with words and pictures
4
of
11
BAmagazine.com
i
U
X
Basic styles
Words (or numerals) and images tightly interact. There are a dozen or so basic
configurations. Each configuration conveys some kind of meaning.
Box
Silhouette
Big
Medium
Small
Next to
On top
Breakouts
Illustration
Sizes
Size in real life conveys two things—how big or
small an object is, and how near or far away it is.
Same-size elements are flat and static. Mix sizes
liberally to convey depth, motion,
activity.
Behind
See through
Images
Cropping conveys meaning—a standard
box
is formal and restrained, a
silhouette
is open
and free, and a
breakout
conveys motion.
Illustration
is iconic, artificial.
Relationships
Numerals can be placed next to, on top of,
behind and beside the image, and can look
like stickers, peekaboos, labels and physical
objects depending on which one you use.
4
of
11
Fun with words and pictures
0672
Before&After
®
Fun with words and pictures
5
of
11
BAmagazine.com
i
U
X
Basic typography
Small spaces require super-tight writing and typography. A word or two in three or
four styles and sizes combine in each message. Each level signals a difference.
Short copy, multiple styles
Quick! How do you jam
a section head, page number, six sub-section heads and
six headlines into one, easy-to-read square inch of space?
By using four, carefully crafted levels of type, like this:
Section head
Big, bold, serif, upper-
and lowercase
Page number
A light version of the
section-head typeface,
for continuity, colored
gray to avoid looking
like spots; matches
section-head x height
For maximum clarity in the tiny
space, cinema-style typesetting
separates numbers from text
flush down the middle.
Sub-sections and headlines
Light and bold versions of one
sans-serif typeface; one upper-
case, one lower. Note sizes (right).
5
of
11
Fun with words and pictures
0672

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin