before and after 0672

7/29/2019 Before and After 0672

1/18

words andpictures

Continued

Before&After BAmagazine.com Ui

Fun with words and pictures 0672

X

Continued


2/18

2of11

Fun with words and picturesWired magazines table of contents is a toy box of visual techniquesthat you can use on all kinds of projects.

Unusual is that its

mainly visual, not verbal,

Wireds contents page

makes the reader work

or its inormation, like

ollowing a treasure map

or solving a puzzle. This

task is made entertain-

ing by a smorgasbord o

visual techniques that

are wry, cool, unky,surprisingeverything

but obvious; letting the

reader gure it out is

key to its engagement.

Our busy, sound-bite world puts a

premium on being brie, visually

and verbally. Few examples o brev-ity are better than magazines tables

o contents. Part talk show, part road

map, a contents page rolls a maga-

zines voice, typography, graphics, colors and

other elements into a compact menu o titles and

micro-trailers that convey a lot in tiny spaces.

Take Wired magazine, which is amous or its

tight, high-energy integration o words and imag-

es. Its contents page is a party mix o numerals,

illustrations, lists, bars and visual spritesa toy

box o visual techniques that can be applied to all

kinds o small-space projects. Lets scoop up the

lively stu that makes it work.

Before&After


BAmagazine.com U Xi


3/18

3of 11

3of11

Downsize

Pieces are cut rom a

much bigger collage and

rearranged or the tiny

space, which is oh-so-

more eective than merely

resizing the large original.

MaskThe red diving helmet is

extracted rom its back-

ground, which simplies it,

essential or small graphics.

Super-crop

Full-size Je Bezos is just

right or the editorial layout

but radically cropped or

the contents page, which

ts and ocuses attention

at the same time.

Recongure the images

Every image has an expressive core. To reveal it, big graphics are not simplyshrunk but reconfgured by masking, re-cropping, rearranging and so on.

Un-crop

The Nikon is lited rom

a page o cameras, thenun-cropped, so it now

looks at you like a big,

robotic eye.

Fun with words and picturesBefore&After


BAmagazine.com U Xi


4/18

4of 11

4of11

Basic styles

Words (or numerals) and images tightly interact. There are a dozen or so basicconfgurations. Each confguration conveys some kind o meaning.

Images

Cropping conveys meaninga standard box

is ormal and restrained, a silhouette is open

and ree, and a breakout conveys motion.

Illustration is iconic, articial.

Sizes

Size in real lie conveys two thingshow big or

small an object is, and how near or ar away it is.

Same-size elements are fat and static. Mix sizes

liberally to convey depth, motion,activity.

Relationships

Numerals can be placed next to, on top o,

behind and beside the image, and can look

like stickers, peekaboos, labels and physical

objects depending on which one you use.

Box

Breakouts

Silhouette

Big Medium

On topNext to

See throughBehind

Small

Illustration



BAmagazine.com U Xi


5/18

5of 11

5of11

Basic typography

Small spaces require super-tight writing and typography. A word or two in three orour styles and sizes combine in each message. Each level signals a dierence.

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 o space?

By using our, careully crated levels o type, like this:

For maximum clarity in the tiny

space, cinema-style typesetting

separates numbers rom text

fush down the middle.

Page number

A light version o thesection-head typeace,

or continuity, colored

gray to avoid looking

like spots; matches

section-head x height

Section head

Big, bold, seri, upper-

and lowercase

Sub-sections and headlines

Light and bold versions o one

sans-seri typeace; one upper-

case, one lower. Note sizes (right).



BAmagazine.com U Xi


6/18

6of 11

6of11

Basic layout

A strong, repetitive structure is a must. Put words on one side, images on theother, which keeps the look consistent no matter whats on the page.

Flirty

Like sloshing party

beverages, the images

splash over every-

wherehere, across

text column and ooter

but the page structure

remains in place, which

is why it looks right even

with dierent images.

A place or

everything

The page is divided

into two main zones

text column on the let,

images on the right

then two small ones

logo at the top, heavy

ooter at the bottom.

Image

Logo

Footer

Text



BAmagazine.com U Xi


7/18

7of 11

7of11

Standing by

Superhero by number looks

surprisingly dimensional.

Crunching a number

The Mars Rover rolling along

Platorm

An 84 as a three-deck

perormance stage

Teensy

Just ordinary page numbers,useul or contrast

Crash landing

Jet sprawled over the ooter,

number behind

Transparent

Page number through the

windshield is aded slightly to

mimic the glare o real glass.

Unexpected viewpoint

Is that a tugboat or a camera?

Hard to tell at a glance, whichcreates the double-take.

Snapshot

Ordinary, rectangular mug,

a counterpoint to all the

exuberance

Techniques . . .



BAmagazine.com U Xi


8/18

8of 11

8of11

Pen and ink

Medical-illustration style is classy;

extinct rhino is menacing romground level. (Below) 8s can be con-

used with 3s; pay attention.

Hot wings

Flying chicken parts

Double overlap

I one overlap is good, two may be

better. Garish magenta, out-o-regis-

ter, comic-style artstands out .

O the edge

Playul drawing bleeds to the

edge, lengthening the page.

Wordy fag

No graphic? Crat your own. Col-

ored words are pretty interesting.

Techniques . . .



BAmagazine.com U Xi


9/18

9of 11

9of11

Techniques . . .

Sprites

Tiny, ully rendered drawings

dot the pages, stepping, crawl-

ing, fying (below). Fun.

Array o stylessleek, ratty,

dark, light, big, smallkeeps the

treasure hunt moving.

Cutout photo

High-tech pliers step

o the page.

Boxed

Suck it up

Oversize Dyson Hoovers

the page number.

Map

Simple illustration

Complex illustration

Breakout

Icon



BAmagazine.com U Xi


10/18

10of11

10of 11

Article resources

Credits

Wired Magazine (www.wired.com)

Before&After


BAmagazine.com U XFun with words and pictures i


11/18

11of11 | Printing formats

11of 11

Beore & Ater magazine

Beore & Ater has been sharing its practical approach

to graphic design since 1990. Because our modern world

has made designers o us all (ready or not), Beore &

Ater is dedicated to making graphic design understand-

able, useul and even un or everyone.

John McWade Publisher and creative director

Gaye McWade Associate publisher

Dexter Mark Abellera Sta designer

Beore & Ater magazine

323 Lincoln Street, Roseville, CA 95678

Telephone 916-784-3880

Fax 916-784-3995

E-mail [email protected]

www http://www.bamagazine.com

Copyright 2008 Beore & Ater magazine

ISSN 1049-0035. All rights reserved

You may pass along a ree copy o this article to others

by clicking here.You may not alter this article, and you

may not charge or it. You may quote brie sections

or review; please credit Beore & Ater magazine, and

let us know. To link Beore & Ater magazine to your

Web site, use this URL: http://www.bamagazine.com.

For all other permissions, please contact us.

Subscribe to Beore & Ater

Subscribe to Beore & Ater, and become a

more capable, confdent designer or pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a ree copy o this article to

others, click here.

Join our e-list

To be notifed by e-mail o new articles as

they become available, go to

http://www.bamagazine.com/email

Before&After


BAmagazine.com U XFun with words and pictures i
http://www.bamag.com/email/9r7uVo/http://www.bamagazine.com/Articles.asp?ID=106http://www.bamagazine.com/Articles.asp?ID=106http://www.bamag.com/email/9r7uVo/


12/18

Back | Paper-saver format

For paper-saver ormatPrint: (Speciy pages 1318)

For presentation ormatPrint: (Speciy pages 111)

Print

Format: Landscape

Page Size: Fit to Page

Save

Presentation ormat or

Paper-saver ormat

Beore & Ater is made to t your binder

Beore & Ater articles are intended or permanent reerence. All are titled and numbered.

For the current table o contents, click here. To save time and paper, a paper-saver ormat o this article,

suitable or one- or two-sided printing, is provided on the ollowing pages.

Before&After BAmagazine.com U Xi
http://www.bamagazine.com/Articles.asp?ID=149http://www.bamagazine.com/Articles.asp?ID=149


13/18

Before&After|www.bamagazine.com

1of6

Funwithwordsandp

ictures0672

0672Funwithwordsandpictures

words

an

d

pictures

Unusualisthatits

mainlyvisual,notverbal,

Wiredsconten

tspage

makesthereaderwork

foritsinformation,like

followingatreasuremap

orsolvingapu

zzle.This

taskismadee

ntertain-

ingbyasmorg

asbordof

visualtechniqu

esthat

arewry,cool,funky,

surprisingeverything

butobvious;le

ttingthe

readerfigureitoutis

keytoitsenga

gement.

Ourbusy,sound-

biteworld

putsa

premiumonbein

gbrief,visually

andverbally.Few

exam

plesofbrev-

ityarebetterthan

magazinestables

ofcontents.Parttalkshow,partroad

map,acontentspagerollsamaga-

zinesv

oice,typogra

ph

y,gra

ph

ics,colorsand

othere

lementsintoacom

pactmenuoftitlesand

micro-

trailersthatconveyalotintinyspaces.

TakeWiredmagazine,whichisfamousforits

tight,h

igh-energyintegrationofwordsandimag-

es.Itscontentspageisaparty

mixofnumerals,

illustra

tions,lists,barsandvisualspritesatoy

boxof

visualtechniquesthatc

anbeappliedtoall

kindsofsmall-spacepro

jects.Letsscoopupthe

livelys

tuffthatmakesitwork.
http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/http://www.bamagazine.com/


14/18


2of6

Funwithwordsandp

ictures0672


Basicstyles

Words(ornumerals)andimagestightlyinteract.Thereareadozen

orsobasic

confi

gurations.Eachconfi

gurationconvey

ssomekindofmeanin

g

.

Images

Croppingconveysmeaningastandardbox

isformalandrestrained,asilhouetteisopen

andfree,andab

reakoutconveysmotion.

Illustrationisic

onic,artificial.

Sizes

Sizeinreallifeconveystwothingshowbigor

smallanobjectis,andhow

nearorfarawayitis.

Same-sizeelementsarefla

tandstatic.Mixsizes

liberallytoconveydepth,m

otion,activity.

Relationships

Numeralscanbeplacednextto,o

ntopof,

behindandbesidetheimage,and

canlook

likestickers,peekaboos,labelsandphysical

objectsdependingonwhichoney

ouuse.

Box

Breakouts

Silhouette

Big

Medium

Ontop

Nextto

Seethro

ugh

Behind

Small

Illustration

Downsize

Piecesarecutfroma

muchbigge

rcollageand

rearrange

dforthetiny

space,w

hichisoh-so-

moreeffective

thanmerely

resizingthelargeoriginal.

Mask

Thereddivinghelmet

is

extractedfromitsbac

k-

ground,whichsimplifi

esit,

essentialforsmallgra

phics.

Super-crop

Full-sizeJeffBezosisjust

rightfortheeditoriallayout

butradicallycropped

for

thecontentspage,wh

ich

fitsandfocusesattention

atthesametime.

Reconfiguretheimages

Everyimagehasan

expressivecore.Torevealit,big

graphicsarenotsimply

shrunkbutreconfi

guredbymasking,re-croppin

g,rearran

gingand

soon.

Un-crop

TheNikon

isliftedfrom

apageofcameras,then

un-cropp

ed,soitnow

looksatyoulikeabig,

roboticeye.


15/18


3of6

Funwithwordsandp

ictures0672


Basictypography

Smallspacesrequiresuper-tightwritin

gan

dtypograph

y.Awordortwointhreeor

fourstylesandsize

scombineineachmess

age.Eachlevelsignalsa

difference.

Shortcopy,multiple

stylesQuick!Howdoyoujam

asectionhead,pagen

umber,sixsub-sectionheadsand

sixheadlinesintoone,

easy-to-readsquareinchofspace

?

Byusingfour,carefully

craftedlevelsoftype,likethis:

Formaximumcla

rityinthetiny

space,cinema-styletypesetting

separatesnumbe

rsfromtext

flushdownthem

iddle.

Pagenum

ber

Alightvers

ionofthe

section-headtypeface,

forcontinu

ity,colored

graytoavo

idlooking

likespots;matches

section-headxheight

Sectionhead

Big,bold,serif,upper-

andlowercase

Sub-sectionsandhe

adlines

Lightandboldversionsofone

sans-seriftypeface;on

eupper-

case,onelower.Notesizes(right).

Basiclayout

Astron

g,repetitive

structureisamust.Put

wordsononeside,imagesonthe

other,whichkeeps

thelookconsistentnomatterwhatsonthepag

e.

Flirty

Likesloshing

party

beverages,th

eimages

splashoverevery-

wherehere,across

textcolumna

ndfooter

butthepagestructure

remainsinplace,which

iswhyitlooksrighteven

withdifferent

images.

Aplacefor

everyt

hing

Thepageisdivided

intotwomainzones

textcolumnontheleft,

imagesontheright

thentwosmallones

logoatthetop,h

eavy

footeratthebo

ttom.

Imag

e

LogoF

ooter

Text


16/18


4of6

Funwithwordsandp

ictures0672


Standingby

Superherobynumberlooks

surprisinglydimensional.

Crunchinganumber

TheMarsRoverrollingalong

Platform

An84asathree-deck

performancestage

Teensy

Justordinarypagenumbers,

usefulforcontrast

Crashlanding

Jetsprawledoverthefooter,

numberbehind

Transparent

Pagenumberthroughthe

win

dshieldisfadedslightlyto

m

imictheglareofrealglass.

Unexpectedviewpoint

Isth

atatugboatoracamera?

Har

dtotellataglance,which

createsthedouble-take.

Snapshot

Ordinary,rectangularmug,

acounterpointtoallthe

exuberance

Techniques...

Penandink

Medical-illustrationstyleisclass

y;

extinctrhinoismenacingfrom

groundlevel.(Below)8scanbecon-

fusedwith3s;payattention.

Hotwings

Flyingchickenparts

Doubleoverlap

Ifoneoverlapisgood,twomaybe

better.Garishmagenta,out-of-regis-

ter,comic-styleartstandsout.

Offtheedge

Playfuldrawingbleedstothe

edge,lengtheningthepage.

Wordyflag

Nog

raphic?Craftyourown.Col-

oredwordsareprettyinteresting.

Techniques...


17/18


5of6

Funwithwordsandp

ictures0672


Techniques...

Sprites

Tiny,fullyrendereddrawings

dot

thepages,stepping,crawl-

ing,flying(below).Fun.

Arrayofstylessleek,ratty,

dark,light,big,smallkeepsthe

treasurehuntmoving.

Cutoutphoto

High-techpliersstep

offthepage.

Boxed

Suckitup

OversizeDysonHoovers

thepagenumber.

Map

Simpleillustration

Complexillustration

Breakout

Icon

Articleresources

Credits

WiredMagazine(www.wired.com)


18/18


6of6

Funwithwordsandp

ictures0672


Before&Aftermagazine

Before&Afterhasbeensharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand

-

able,usefulandevenfunforeveryone.

JohnMcWadePublis

herandcreativedirector

GayeMcWadeAssociatepublisher

DexterMarkAbelle

raStaffdesigner

Before&Aftermag

azine

323LincolnStreet,Roseville,CA95678

Telephone916-784-3880

Fax916-784-3995

E-mailmailbox@bama

gazine.com

wwwhttp://www.bam

agazine.com

Copyright2008Be

fore&Aftermagazine

ISSN1049-0035.All

rightsreserved

Youmaypassalonga

freecopyofthisarticletoothers

byclickinghere.Youm

aynotalterthisarticle,andyou

maynotchargeforit.

Youmayquotebriefsections

forreview;pleasecreditBefore&Aftermagazine,and

letusknow.TolinkBe

fore&Aftermagazinetoyour

Website,usethisURL:http://www.bamagazine.com.

Forallotherpermissio

ns,pleasecontactus.

SubscribetoBefore

&After

SubscribetoBefore&After,andbecomea

morecapable,confidentdesignerfor

pennies

perarticle.Tolearnmo

re,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalon

gafreecopyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-mailofnewarticlesas

theybecomeavailable,

goto

http://www.bamagazine.com/email

before and after 0672

Documents