before and after 0661
TRANSCRIPT
-
7/29/2019 Before and After 0661
1/19
Beore&Ater
Continued
XiBAmagazine.com U
Design a catalog o rectangles 0661
Design a
catalog ofrectangles
Continued
-
7/29/2019 Before and After 0661
2/19
Before&After
2of12
XiBAmagazine.com U
Design a catalog of rectangles 0661
Its a good thing the Segway Personal Transporter costs as much as it does ($5,000-ish),
or wed be out riding instead of writingthis thing is a hoot. Ahead of its time when it was
introduced in 2001, the self-balancing, ride-about platform is almost magicallyintuitive; it runs silently indoors and out, and has become popular with urban
commuters, tour groups and others who need to get places that would be too far
or too slow to walk. A 28-page catalog presents the machine in tried-and-true
fashion; its an attractive synthesis of text and images in a simple, rectangular
format. What we like about the rectangles is how easy they make it to blend
different elements into a uniform whole. Thatll be our focus:
Design a catalog of rectangles
Segways catalog motif is simple, handsome and versatile.
Rectangular
simplicity can be seen
in shapes, borders and
lines throughout the
catalog. It allows the
designer to easily meld
different photos and
varying amounts of text
into a uniform whole.
-
7/29/2019 Before and After 0661
3/19
Beore&Ater XiBAmagazine.com U
3of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 3of12
Build it in blocks
As we work through the catalog, youll see that rectangles are a deliberately visibleparto the design. This begins on the cover, where the elements are stacked in blocks.
Page
7 x 10 rectangular page
3/8 white rame
Frame
Rectangular photo,
slightly smaller. Result:
three visual elements
photo, page and white
rame, which the eye
subconsciously ollows.
Base
Heavy black rectangle
serves as a visual base
and also interrupts the
circuit, which draws
attention to the tiny
text within it.
Headline
Rectangular white head-
line completes the page.
Note the rectangles are all
centered, a static arrange-
ment that contrasts with
the moving rider.
Siml mvinS e g w a y p r o d u c t b r o c h u r e
-
7/29/2019 Before and After 0661
4/19
Beore&Ater XiBAmagazine.com U
4of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 4of12
The spread is made o
rectangles both tall and
wide. Note the product
photos are inside a phan-
tom square, a negative
space dened by nearby
positive elements. The
columns on the ar right,
tinted gray, recede.
Oversize text and a large
photo make an easy-to read
ocal point that will be repeat-
ed throughout the catalog.
Against black, the paragraph
adds visual texture; its long,
white lines are a contrasting
counterpoint to the narrow,
gray columns on the right.
Headline at the bottom is
opposite the normal position,
yet it reads naturally. Cool.
Phantom column
Phantom square
Two-level design
Inside, the catalog is designed in two levels, one to browse and one to read.A big photo and a short block o big type are or browsing. Regular text columns
are or detailed reading. Massive black sets the visual theme.
-
7/29/2019 Before and After 0661
5/19
Beore&Ater XiBAmagazine.com U
5of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 5of12
Immersive imagery
A huge, nearly wall-to-wall photo illustrates the product in its environment. Thistechnique is eective because its immersive; its how we experience real lie.
Small and big The huge photo does the heavy work; the small, side image is an extra.
Oversize text serves here asa caption, aligned right to tuck
into the corner. Type like this
is valuable because its visible
and brie, so most readers will
read it rst. With careul edit-
ing, these captions can carry
a themeeven a second story
linethroughout the catalog.
Text-on-black theme rom the opening spread is brought orward . . . . . . and onto subsequent spreads.
-
7/29/2019 Before and After 0661
6/19
Beore&Ater XiBAmagazine.com U
6of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 6of12
Big viewing, light reading
Repetitive spreadsbig photo and caption, small textpresent lie-size vignetteso Segways world. In this section, the catalog is setting up the reader by helping him
visualize usingand enjoyingthe product.
Place oversize text in the corner
The caption can go in any corner; look or the
smoothest, clearest backdrop. Its distance rom
the edges should remain constant, too. The cap-
tion can be black or white, whichever has the
more pleasing contrast.
Reverse the layout
Black text column can
change sides without
changing the look. The
small photo size should
stay constant.
-
7/29/2019 Before and After 0661
7/19
Beore&Ater XiBAmagazine.com U
7of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 7of12
Show the product
Product pages show the machine in detail. Pure white eld removes all distractions,then descriptive callouts take the reader on an item-by-item tour.
Big and clearShoppers like to touch stu, look
it over, think about it, so the more lielike a product
appears, the more successul it will be. Photograph
an angle that shows everything well, then make the
picture BIG. Here, gray type and cool, rectangular
hairlines are beautiully minimal. Note the com-
plete absence o adornmentno lls, shadows, ital-
ics, colors, nothing to take away rom the product.
Shadowed against pure white, the black i2 rect-
angle stands out with startling clarity.Caption size o the hal-spread photo is
smaller to retain its proportions to the others.
Light typeace Oversize paragraph is low-key gray. Only the headline is black. Sublime.
-
7/29/2019 Before and After 0661
8/19
Beore&Ater XiBAmagazine.com U
8of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 8of12
The look in triplicate
Packages spread shows three products; each small module contains all theelements o the large ones. Lead paragraph and mid-page headlinethis time
on whiterecall the design o the opening spread.
Same three elements, smaller space, same look
Once youve established a look, stay with it. In this section,
the catalog restructures and reduces the look o ull-size
sections into smaller spaceslead paragraph, environ-
mental photo, product photo and rectangular callouts all
are here. Type styles, sizes and colors remain the same as
beore. Very strong continuity, beautiully done.
Crop uniormly Let, photos that are
almost the same should always be cropped
the same. Here, heads and wheels align.
-
7/29/2019 Before and After 0661
9/19
Beore&Ater XiBAmagazine.com U
9of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 9of12
Versatile rectangles
Accessories section contains products o varying sizes, shapes and caption lengths.Rectangles do a good job o holding it all together. Careul alignment is key.
Bend the rules
Photos o uneven proportions require un-
even columns, which is not ideal, but rect-
angles make it airly easy to sustain the look.
Wherever possible, align your images all the
way across or all the way down a page, as
shown at right in blue. For fexibility, captions
can go beneath or beside their photos.
Even columns Uneven columns
Across the page Down the page
Captions beneath Captions beside
-
7/29/2019 Before and After 0661
10/19
Beore&Ater XiBAmagazine.com U
10of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 10of12
Mind the details
Consistent typography, irregular interrupters and gray space llers keep the spreadlively and the design fexible. Gray type recedes, keeping the products center stage.
Visual interrupter
The irregular shape o the
shirt provides visual
relie rom the rectan-
gles. Note its dier-
encesit interrupts
the border, bleeds to
the edge, and is shad-
owed or depth.
Space fller
White text in a gray eld
is both space ller and
advertisement. These can
go anywhere.
Reverse the value
Rectangular gray bars neatly
head each subsection. Con-
tinue the same typeace; just
reverse its value to white on
gray. Note the larger head is
in the lighter typeace.
Across
Across
Down
-
7/29/2019 Before and After 0661
11/19
Beore&Ater XiBAmagazine.com U
11of12 Design a catalog o rectangles 0661
Design a catalog o rectangles 11of12
Article resources
Typeaces
Four styles oBenton Sans Condensed
are used in this product catalog:
Benton Sans Condensed Book
Benton Sans Condensed Regular
Benton Sans Condensed Medium
Benton Sans Condensed Bold
Credits
Segway, Inc. & Saltworks, Inc., Designers
Bob Carey, Photographer
Special thanks to Segway dealer
Norris Rancourt o Carmichael Honda
in Carmichael, Caliornia (www.car-
michaelhonda.com) or giving us the
extended demonstration.
-
7/29/2019 Before and After 0661
12/19
Beore&Ater XiBAmagazine.com U
Design a catalog o rectangles 0661 12of12 | Printing formats
Design a catalog o rectangles 12of12
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 2007 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, condent 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 notied by e-mail o new articles as
they become available, go to
http://www.bamagazine.com/email
-
7/29/2019 Before and After 0661
13/19
Beore&Ater
Back | Paper-saver format
XiBAmagazine.com U
For paper-saver ormatPrint: (Speciy pages 1419)
For presentation ormatPrint: (Speciy pages 112)
Print
Format: Landscape
Page Size: Fit to Page
Save
Presentation ormat or
Paper-saver ormat
Beore & Ater is made to ft 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.
-
7/29/2019 Before and After 0661
14/19
Before&After|www.ba
magazine.com
1of6
Designacatalogofrectangles0661
0661Designacatalo
gofrectangles
Designa
ca
talogo
f
re
cta
ngle
s
Itsagoodth
ingtheSegwayPersona
lTransportercostsasm
uchasitdoes($5,000-is
h),
orwedbeoutridinginsteadofwritingthisthingisahoot.
Aheadofitstimewhen
itwas
introd
ucedin2001,theself-balancing,ride-aboutpla
tformisalmostmagically
intuitive;itrunssilentlyindoorsandout,andhasbe
comepopularwithurban
com
muters,tourgroupsan
dotherswhoneedtoge
tplacesthatwouldbetoofar
or
tooslowtowalk.A28-pagecatalogpresentsthe
machineintried-and-true
fashion;itsanattractivesynthesisoftextandimagesinasimple,rectangu
lar
format.Whatwelikeabou
ttherectanglesishowe
asytheymakeittoblen
d
di
fferentelementsintoau
niformwhole.Thatllbeourfocus:
Rectangula
r
simplicitycanbeseen
inshapes,borders
and
linesthroughoutthe
catalog.Itallowsthe
designertoeasilymeld
differentphotos
and
varyingamountsof
text
intoauniformwhole.
-
7/29/2019 Before and After 0661
15/19
Before&After
|www.b
ama
gazin
e.c
om
2o
6
Designacatalogofrectangles0661
0661Designacatalo
gofrectangles
Th
espre
adism
adeo
rectan
gle
sbothtall
an
d
wid
e.N
otethepro
duc
t
ph
otosarein
sideaphan-
tomsq
uare
,an
egative
spacedefn
edbyn
ear
by
positiveelem
en
ts.Th
e
column
son
thearrig
ht,
tintedgra
y,re
cede.
Oversizetext
an
dalarg
e
ph
otom
ak
eane
asy-tore
ad
ocal
poin
tthatwill
bere
peat-
edthro
ugh
outthecatalo
g.
Again
stbla
ck
,thepara
gra
ph
addsvisu
al
texture
;itslon
g,
whitelin
esar
eacon
trasting
coun
terp
oin
ttothen
arrow
,
gra
ycolum
nson
therigh
t.
Headlin
ea
tthebottomis
oppositethen
ormal
position
,
yetitre
adsna
turally.
Cool.
Ph
antom
column
Ph
an
tom
square
Two-leveldesign
Inside,thecatalo
gisdesignedintwolevels
,onetobrowseandone
toread.
Abig
photoandas
hortblockofbigtypear
eforbrowsing.Regulartextcolumns
arefordetailedreadin
g.Massiveblacksets
thevisualtheme.
Builditinblocks
Asweworkthroughthecatalo
g,youllseethatrectan
glesareadelib
eratelyvisiblepart
ofthedesign.This
beginsonthecover,wheretheelementsarestackedinblocks.
Page
7x1
0
rectan
gular
page
3/8whiteram
e
Frame
Rectan
gula
rphoto,
sligh
tlysmaller.R
esult:
thre
evisu
a
lelem
en
ts
ph
oto,pageandwhite
ram
e,whichth
eeye
subcon
scio
uslyollow
s.
Base
Heav
ybla
ckre
ctangle
serv
esasavisu
alb
ase
an
dalsoin
terru
ptsthe
circ
uit,which
dr
aws
atten
tion
tothe
tiny
tex
twithinit.
Headline
Rectan
gularwhiteh
e
ad-
linecom
ple
testhepa
ge.
Notethere
ctan
gle
sa
reall
cen
tere
d,astaticarrang
e-
men
tthatcon
trastsw
ith
them
ovin
grid
er.
Simplymoving
-
7/29/2019 Before and After 0661
16/19
Beore&Ater
|www.b
ama
gazin
e.c
om
3o
6
Designacatalogorectangles0661
0661Designacatalo
gorectangles
Immersiveimagery
Ahuge,nearlywall-to-wallphotoillustrate
stheproductinitsenvironment.This
techniqueiseectivebecauseitsimmersiv
e;itshowweexperienc
ereallie.
SmallandbigTh
eh
ugeph
otodoestheh
eavy
work
;thesmall,
sideim
ageis
an
extra.
Oversizetextserve
shere
as
acaption
,align
edrig
httotuck
intothecorn
er.Ty
pe
likethis
isv
alu
able
becausei
tsvisible
an
dbrie,
som
ostre
aderswill
readitrst.With
careul
edit-
ing,thesecaption
sc
ancarry
athem
e
ev
en
asec
ondstory
line
thro
ugh
outthe
catalo
g.
Text-on-blac
kthem
erom
theopenin
gspre
ad
isbro
ugh
torw
ard...
.
.
.an
don
tosubsequen
tspre
ads.
Bigviewing,light
reading
Repetitivespreadsbigphotoandcaption
,smalltext
presentlie-sizevignettes
oSegwaysworld.
Inthissection,thecatalogissettinguptheread
erbyhelpin
ghim
visualizeusingandenjoyingtheproduct.
Place
oversizetextinthecorner
Th
eca
ption
can
goin
an
ycorn
er;lo
oko
rthe
smoothest,
cle
are
stback
dro
p.Its
distan
cerom
theed
gesshouldrem
ain
con
stan
t,too.The
cap-
tion
canb
ebla
ck
orwhite
,which
everh
a
sthe
more
plea
singcon
trast.
Reversethelayout
Bla
ck
tex
tcolumn
can
ch
an
gesideswith
out
ch
an
gin
gthelo
ok.Th
e
small
ph
otosizeshould
staycon
stan
t.
-
7/29/2019 Before and After 0661
17/19
Beore&Ater
|www.b
ama
gazin
e.c
om
4o
6
Designacatalogorectangles0661
0661Designacatalo
gorectangles
Showtheproduct
Productpagesshowthemachineindetail.
Purewhiteeldremove
salldistractions,
thendescriptiveca
lloutstakethereaderon
anitem-b
y-itemtour.
Bigand
clear
Sh
opperslik
etotouch
stu
,look
itov
er,
th
inkaboutit,
sothem
orelielik
ea
product
appears,
them
ore
successulitwill
be.Ph
o
togra
ph
an
an
gle
thatshow
sev
ery
thin
gw
ell,
thenm
ake
thepic
tu
reBIG.H
ere
,gra
ytypean
dcool,re
ctan-
gularh
airline
sare
beautiullyminimal.N
otethe
com
ple
te
absen
ceo
adornm
en
tn
olls,
shad-
ow
s,italic
s,colors,n
othin
gtotak
eaw
ayrom
the
pro
duct.
Shadow
edagain
stpurewhite
,the
blacki2
rectan
gle
stan
dsoutwith
startlin
gclarity.
Captionsizeo
theh
al-spre
adph
otois
smaller
tore
tainits
pro
portion
stotheothers.
Lighttypeace
Ov
ersizepara
gra
phislow-k
eygra
y.Only
theh
eadlin
eis
bla
ck.
Sublim
e
.
Thelookintriplicate
Packagesspreads
howsthree
products;ea
chsmallmodulecontainsallthe
elementsothelargeones.Leadparagra
ph
andmid-pageheadlinethistime
onwhiterecallth
edesignotheopenin
g
spread.
Sameth
reeelements,smallerspace,samelook
On
ceyou
veestablish
edalo
ok
,staywithit.In
this
section
,
thecatalo
grestructure
san
dre
ducesthelo
okoull-size
section
s
intosmaller
spacesle
adpara
gra
ph,environ-
men
tal
p
hoto,pro
ductph
otoan
dre
ctan
gul
arcallo
utsall
areh
ere.Typ
estyle
s,sizesan
dcolorsrem
a
inthesam
eas
beore.V
ery
stron
gcon
tinuity,
beautiully
done.
Cr
opuniormlyLet,
ph
otosthata
re
alm
ostthesam
eshould
alw
aysbecr
opped
thesam
e.H
ere
,h
eadsan
dwh
eels
align.
-
7/29/2019 Before and After 0661
18/19
Beore&Ater
|www.b
ama
gazin
e.c
om
5o
6
Designacatalogorectangles0661
0661Designacatalo
gorectangles
Versatilerectangles
Accessoriessection
containsproductsovaryin
gsizes,shapesand
captionlen
gths.
Rectan
glesdoagoodjoboholdin
gitallto
gether.Careulalignmentiskey.
Bendtherules
Ph
otoso
un
ev
en
pro
portion
srequire
un-
ev
en
column
s,whichisn
otid
eal,
butre
ct-
an
gle
sm
ak
eitairly
easyto
sustain
thelo
ok.
Wh
erev
er
possible
,align
you
rimagesall
the
wayacro
ssor
all
thew
aydo
wnapage,as
shown
atrigh
tin
blu
e.F
orf
exibility,
caption
s
can
goben
eathor
besidetheirph
otos.
Ev
encolumn
s
U
neven
column
s
Acro
ssthepag
e
Down
thepage
Caption
sben
eath
Caption
sbeside
Mindthedetails
Consistenttypogra
phy,irregularinterruptersandgrayspacelle
rskeepthespread
livelyandthedesig
nfexible.Gra
ytyperec
edes,keepin
gtheprodu
ctscenterstage.
Visualinterrup
ter
Th
eirre
gular
shapeo
theshirt
pro
vides
visu
alrelie
rom
the
rectan
gle
s
.Noteits
dieren
ce
sitin
ter-
ruptstheb
order,
ble
edstoth
eedge,
an
dis
shadow
edor
depth.
Spacefller
White
tex
tin
agr
ay
eld
isbothspacelleran
d
adv
ertisem
en
t.T
hesecan
goan
ywh
ere.
Reversethevalue
Rectan
gular
gra
ybarsn
eatly
headeach
subsection.
Con-
tinuethesam
etypea
ce;just
rev
erseitsv
alu
e
towhite
on
gra
y.N
otethelargerh
eadis
intheligh
tertypea
ce.
Acro
ss
Acro
ss
Down
-
7/29/2019 Before and After 0661
19/19
Beore&Ater
|www.b
ama
gazin
e.c
om
6o
6
Designacatalogorectangles0661
0661Designacatalo
gorectangles
Beore&Atermagazine
Beore
&Aterh
asbee
nsharin
gits
pra
ctical
appro
ach
togra
phic
design
since199
0.B
ecauseourm
odernw
orl
d
hasm
adedesign
ers
o
usall
(readyorn
ot),B
eore
&
Ateris
dedic
atedtom
akinggra
phic
design
un
ders
tan
d
-
able
,useul
an
dev
en
unor
ev
ery
on
e.
JohnMcWadeP
ublis
heran
dcre
ativedire
ctor
GayeMcWadeA
ssoc
iatepublish
er
DexterMarkAbelle
raSta
design
er
Beore&Atermagazine
32
3Lin
coln
Street,R
oseville,CA9
567
8
Telephone91
6-7
84-3
880
Fax91
6-7
84-399
5
E-mailm
ailb
ox
@bam
a
gazine.c
om
wwwh
ttp://www.b
am
agazin
e.c
om
Copyright2007Be
ore&Atermagazine
ISSN1049-0035.Allrightsreserved
Youm
aypassalon
ga
reecopyo
this
article
toothers
byclickin
gh
ere.Y
oum
ayn
otalter
this
article
,an
dyou
mayn
otch
arg
eorit.
Youm
ayquotebrie
section
s
orreview
;ple
asecre
ditB
eore
&Aterm
agazin
e,an
d
letuskn
ow.TolinkB
e
ore&Aterm
agazin
etoyour
Website
,usethis
URL:http://www.b
am
agazin
e.c
om.
For
all
other
permissio
ns,ple
asecon
tactus.
SubscribetoBeore
&Ater
SubscribetoBeore&Ater,andbecomea
morecapable,condentdesigneror
pennies
perarticle.Tolearnmo
re,goto
http://www.bamagazine.com/Subscribe
E-mailthisarticle
Topassalon
gareecopyothisarticleto
others,clickhere.
Joinoure-list
Tobenotiedbye-mailonewarticlesas
theybecomeavailable,
goto
http://www.bamagazine.com/email
Articleresources
Typeaces
Fourstyle
soB
en
ton
San
sCon
den
sed
are
usedin
this
pro
ductcatalo
g:
Ben
tonSan
sCon
den
sedB
ook
Ben
tonSan
sCon
den
sedR
egular
Ben
tonSan
sCon
den
sedM
edium
Ben
tonSan
sCon
den
sedB
old
Credits
Segwa
y,In
c.&Saltw
ork
s,In
c.,D
esign
ers
BobCare
y,Ph
otogra
ph
er
Sp
ecialthankstoSegw
aydealer
NorrisR
an
court
o
Carmich
aelH
on
da
inCarmich
ael,
Caliornia
(www.c
ar-
michaelh
on
da.c
om
)or
givin
gusthe
ex
t
endeddem
on
stration.