before and after 0661

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


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.


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


4/19




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.


5/19




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.


6/19




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/19




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.


8/19




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.


9/19




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


10/19




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


11/19




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.


12/19


Design a catalog o rectangles 0661 12of12 | Printing formats


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


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.


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.


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


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.


17/19

Beore&Ater

|www.b

ama

gazin

e.c

om

4o

6


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.


18/19

Beore&Ater

|www.b

ama

gazin

e.c

om

5o

6


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


19/19

Beore&Ater

|www.b

ama

gazin

e.c

om

6o

6


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.

before and after 0661

Documents