Before and After 0659

7/29/2019 Before and After 0659

1/13

Continued

Before&After XiBAmagazine.com U

Design talk 0659

ObjectGraph

Horizontal Scroll

Square Cover Minimal Poster

Staggered Layout

FiveDesignIdeas

DesignTalk12

CALIFORNIA BEACHVOLLEYBALL ASSOCIATIONT O U R N A M E N T I N F O R M A T I O N

HOMEINSURANCEGUIDE

NORTHEASTERN MUTUAL GROUP

DOWNTOWN RENOVATION PROJECT

Old Roseville

Concrete from the sky A card whint not oogum or bont. Pretty simple, glead and tarm.

Texture and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic, leam

restart that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.

S t i t r alkA card whint not oogum or bont. Pretty simple, glead and

tarm. Texture and asp ne t exating end mist of it snooling. Spaff forl isnt cubular but quastic,

leam restart that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.

A forest of rebarA card whint not oogum or bont. Pretty simple, gle ad and tarm. Texture

and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic, leam restart

that cant prebast. Its tope, this fluant chasible. Silk, s hast, lape and beh ast.


2/13

Before&After

2of8 Design talk 0659

XiBAmagazine.com U

Photodesign A page of people pictures? Add life!

What nicer way to illustrate a companys intellectual capital than to picture its intellectual staff!

For its 2006 annual report, Software Engineering Institute papered its cover with beautifully lit photos

of happy peoplewith a designed-in twist. Rather than static, yearbook-style rows of mug shots,

small cropping and layout variations turned this small collage into a beehive of visual activity.

Designed-in activity makes this cover energetic. Heres how its done. First, to add

front-to-back motion, photos are selected and cropped to three distances

close up, near and far (left). Next, horizontal motion is added by shifting therows of images from left to right (above, middle), which avoids the

static evenness of a brick-layer pattern. Finally, vertical motion is

added simply by making several photos taller and shorter.

http://www.sei.cmu.edu/annual-report

Start with a grid. Shift the rows. Pull up. Push down. Stretch out.

Close up

Near

Far

Design talk 2of8


3/13

Before&After


XiBAmagazine.com U

Pictures on a graph convey more data than words or even numbers alone. For your next graph,

instead of an ordinary line, bar or pie, substitute people, ears of corn or railroad cars! Like this:

Graph Use pictures to represent numbers

Use a few This approach is practical when deal-

ing with large numbers; each photo represents

tens or hundreds or thousands or millions of some-

thing. (Be sure to say.) Single objects with simple

shapes (left) yield the best results.

Use a lot (Above) Software Engineering

Institutes graph shows theactual number of

people involved in its various functions. (Left)

At tiny size, detail is unnecessary; silhouette

a photo with a simple, clear shape.

Japan12,553

Mexico8,485

Taiwan6,915

2006 U.S. Corn Export Sales(One ear represents 1,000 metric tons of unmilled corn.)

Design talk 3of8


4/13

Before&After


XiBAmagazine.com U

HOMEINSURANCE

GUIDE


Layout Build a cover of squares

This cover uses its own grid as a visual element! Divide a square page into four squares, put a point

of interest in one corner, the title in the opposite corner, then make the two squares visible.

78%

Draw a grid (Above) Divide a square page

into four squares. Position the photoone

with plenty of cropping roomso that a point

of interest is in one of the squares. Frame that

square in white (here, all are white for clarity).

Whatevers in the frame will get the readers

attention, quietly. Try it. Youll find that the

frame can gather, connect, focus; it conveys

subtle messages depending on the photo and

echoes the page structure, too.

Fill the opposite square with

color sampled from the photo,

and reduce its opacity to allow

some see-through. Below, put a

squarish typeface in the corner

to sustain the square motif.

Home

Insurance

Guide

HOME

INSURANCE

GUIDE

Design talk 4of8


5/13

Before&After


XiBAmagazine.com UDesign talk 5of8

A forest of rebar A card whint not oogum or bont. Pretty simple, glead and tarm. Texture

and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic, leam restart

that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.

Smoothing the crosswalkA card whint not oogum or bont. Pretty simple, glead and

tarm. Texture and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic,


Smoothing the crosswalkA card whint not oogum or bont. Pretty simple, glead and

tarm. Texture and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic,


A sideways-scrolling Web page is a lifelike way to present a gallery of photos when the page as

a whole doesnt need to be printed. A click on any image can pop open a larger version.

Like a gallery A single row of photos is perfect for timelines, step-

by-steps, anything youd normally view in a linear manner. Note

above that all images (including verticals) are aligned to the baseline;

same-length captions keep the line simple. Clean and very intuitive.

Web design Scroll your page sideways

DOWNTOWN RENOVATION PROJECT

Old Roseville

Concrete from the sky A card whint not oogum or bont. Pretty simple, glead and tarm.

Texture and flasp net exating end mist of it snooling. Spaff forl isnt cubular but quastic, leam

restart that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.

Pouring the balustersA card whint not oogum or bont.

Pretty simple, glead and tarm. Texture and flasp net exating end

mist of it snooling. Spaff forl isnt cubular but quastic.

dragdrag

t. Pretty simple, glead and tarm.

l isnt cubular but quastic, leam

. ast, lape and behast.

Opening a valveA card whint not oogum or bont. Pretty simple, glead a

and flasp net exating end mist of it snooling. Spaff forl isnt cubular but qua

that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.

alkA card whint not oogum or bont. Pretty simple, glead and

. t exating end mist of it snooling. Spaff forl isnt cubular but quastic,

ast. Its tope, this fluant chasible. Silk, shast, lape and behast.

A forest of rebarA card whint not oogum or bont. Pretty simple, gle .

and flasp net exating end mist of it snooling. Spaff forl isnt cubular but

that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and beh .


6/13

Before&After


XiBAmagazine.com U

Poster Simple, bold, bright

Our visual world is so cluttered that the key to

catching a viewers eye is good, old-fashioned mini-

malismuse less stuff, not more. This is especially

true with posters. To be seen from a long way away,

make your imagery simple, bold and bright.

CALIFORNIA BEACH VOLLEYBALL ASSOCIATION

T O U R N A M E N T I N F O R M A T I O N

Familiar shapes, like the hands, and vivid colors con-

nect quickly. The hands are warmanalogous (side by side)

colorsatop a cold,split complementary (nearly opposite)

field, an energetic combination. With such clear imagery,

you dont have to shout for attention; note how the single

line of white type stands out clearly.

Design talk 6of8


7/13

Before&After


XiBAmagazine.com UDesign talk 7of8

Japan12,553

Mexico8,485

Taiwan6,915

2006 U.S. Corn Export Sales(One ear represents 1,000 metric tons of unmilled corn.)

HOMEINSURANCEGUIDE


CALIFORNIA BEACH VOLLEYBALL ASSOCIATION

T O U R N A M E N T I N F O R M A T I O N

Typefaces

1 Futura Extra Bold

2 Futura Book

3 Futura Medium

4 HTF Didot

5 Helvetica Neue Std Light

Images

6 (ac) iStockphoto.com | a b c

Article resources

Colors

C45 M90 Y0 K0

C0 M65 Y100 K0

C0 M20 Y95 K0

C40

M30

Y95

K10

C0 M0 Y0 K100

7

8

9

10

2

6b

11

3

3

6a987

1011

4

6c

5

1


8/13

Before&After

8of8 | Printing formats

Design talk 0659

XiBAmagazine.com U

Before & After magazine

Before & After has been sharing its practical approach

to graphic design since 1990. Because our modern world

has made designers of us all (ready or not), Before &

After is dedicated to making graphic design understand-

able, useful and even fun for everyone.

John McWade Publisher and creative director

Gaye McWade Associate publisher

Dexter Mark Abellera Staff designer

Before & After 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 Before & After magazine

ISSN 1049-0035. All rights reservedYou may pass along a free copy of this article to others

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

may not charge for it. You may quote brief sections

for review; please credit Before & After magazine, and

let us know. To link Before & After magazine to your

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

For all other permissions, please contact us.

Subscribe to Before & After

Subscribe to Before & After, and become a

more capable, confident designer for pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a free copy of this article to

others, click here.

Join our e-list

To be notified by e-mail of new articles as

they become available, go to

http://www.bamagazine.com/email

Design talk 8of8


9/13

XiBAmagazine.com UBefore&After

Back | Paper-saver format

For paper-saver formatPrint: (Specify pages 1013)

For presentation formatPrint: (Specify pages 18)

Before & After is made to fit your binder

Before & After articles are intended for permanent reference. All are titled and numbered.

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

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

Print

Format: Landscape

Page Size: Fit to Page

Save

Presentation format or

Paper-saver format


10/13

Before&After|www.b

amagazine.com

1of4

DesignTalk12:FiveDesig

nIdeas0659

0659DesignTalk12:FiveDesignIdeas

ObjectGr

aph

HorizontalScroll

SquareCov

er

M

inimalPoster

StaggeredLayout

Five

Design

Ideas

D

esignT

alk12

CALIFORNIABEACH

VOLLEYBALLASSOCIATION

TO

U

RN

A

M

EN

TIN

FO

RM

ATIO

N

HOME

INSURANCE

GUIDE

NORTHEASTERN

MUTUALGROUP

DOWNTOWNRENOVATION

PROJECT

OldRoseville

ConcretefromtheskyAcardwhint not oogumorb ont .Pret t ysimple,gleadandt arm.

Text ureandflaspnet exat ingendmist ofit snooling.S paffforlisnt cubularb ut quast ic,leam

rest art t hat cant preb ast .It st ope,t hisfluant chasib le.S ilk,shast ,lapeandb ehast .

SmoothingthecrosswalkAcardwhint not oogumorb ont .Pret t ysimple,gleadand

t arm.

ext ureandflaspnet exat ingendmist ofit snooling.S paffforlisnt cubularb ut quast ic,

leamrest art t hat cant preb ast .It st ope,t hisfluant chasib le.S ilk,shast ,lapeandb ehast .

AforestofrebarAcardwhint not oogumorb ont .Pret t ysimple,gleadandt arm.

ext ure

andflaspnet exat ingendmist ofit snooling.S paffforlisnt cubularb ut quast ic,leamrest art

t hat cant preb ast .It st ope,t hisfluant chasib le.S ilk,shast ,lapeandb ehast .

Photodesign

A

pageofpeoplepict

ures?Addlife!

Whatnicerwaytoillustrateacom

pan

ysintellectualcapitalthantopicture

itsintellectualstaff!

Forits2006annualreport,SoftwareEn

gineerin

gI

nstitutepapereditscoverwithbeautifullylit

photos

ofhappypeoplewithadesigned-intwist.Ratherthanstatic,yearbook-style

rowsofmugshots,

smallcro

ppin

gandla

youtvariationsturnedthiss

mallcolla

geintoabeehiveofvisualactivity.

Designed-inactivitymakes

thiscoverenergetic.Hereshowitsdone.First,toadd

front-to-backmotion

,photosareselectedandcropped

tothreedistances

closeup,nearandfar(left).Next,horizontalmotionis

addedbyshiftingthe

rowsofima

gesfromlefttoright(above,midd

le),whichavoidsthe

staticevennessofabrick-layerpattern.Finally,verticalmotionis

addedsimp

lybymakingseveralphotostaller

andshorter.

http:/

/www.sei.cmu.edu/annual-report

Startwith

agrid.

Shifttherows.

Pullup.Pushd

own.Stretchout.

Closeup

Near

Far


11/13

Before&After|www.b

amagazine.com

2of4


nIdeas0659


HOM

E

INSU

RANCE

GUID

E

NORTHEASTERN

MUTUALGROUP

LayoutBuildacoverofsquares

Thiscoverusesitsown

gridasavisualelement!Divideasquarepageintofoursquares,putapoint

ofinterestinonecorn

er,thetitleintheoppositec

orner,thenmakethetwosq

uaresvisible.

78%

Drawagrid(Above)Divideasquarepage

intofoursq

uares.Positionthephotoone

withplenty

ofcroppingroomsothatapoint

ofinterestisinoneofthesquares.Frametha

t

squareinw

hite(here,allarewhiteforclarity).

Whatevers

intheframewillgetthereaders

attention,q

uietly.Tryit.Youllfindthatthe

framecang

ather,connect,focus;itconveys

subtlemessagesdependingonthephotoand

echoesthe

pagestructure,too.

Filltheoppositesquarewith

colorsampledfromthephoto,

andreduceitsopacitytoallow

somesee-through.Below,puta

squarishtypefaceintheco

rner

tosustainthesquaremotif.

Hom

e

Insura

nce

Guide

HOME

INSURANCE

GUIDE

Picturesonagraphco

nveymoredatathanwords

orevennumbersalone.For

yournextgraph,

insteadofanordinary

line,barorpie,substitutep

eople,earsofcornorrailroa

dcars!Likethis:

Graph

Usepict

urestorepresentn

umbers

UseafewTh

isapproachispracticalwhendeal-

ingwithlarge

numbers;eachphotorepresents

tensorhundre

dsorthousandsormillionsofsom

e-

thing.(Besure

tosay.)Singleobjectswithsimple

shapes(left)yieldthebestresults.

Usealot(Above)SoftwareEngineering

Institutesgra

phshowstheactualnumberof

peopleinvolvedinitsvariousfunctions.(Left)

Attinysize,d

etailisunnecessary;silhouette

aphotowithasimple,clearshape.

Japan

12,553

Mexico

8,485

Taiwan

6,915

2006U.S.C

ornExportSales

(Oneearrepresents1,0

00metrictonsofunmilledcorn.)


12/13

Before&After|www.bamagazine.com

3of4


nIdeas0659

0659DesignTalk12:

FiveDesignIdeas

AforestofrebarAcardwhintnotoogumorbont.Prettysimple,gleadandtarm.Texture

andflaspnetexatingendmistofitsnoolin

g.Spaffforlisntcubularbutquastic,leamrestart

thatcantprebast.Itstope,thisfluantcha

sible.Silk,shast,lapeandbehast.

SmoothingthecrosswalkAcardwhintnotoogu

morbont.Prettysimple,gleadand

tarm.Textureandflaspnetexatingendmistofitsnooling.Spaffforlisntcubularbutquastic,

leamrestartthatcantprebast.Itstope,thisfluantcha


SmoothingthecrosswalkAcardwhintnotoogu


tarm.Textureandflaspnetexatingendmistofitsnooling.Spaffforlisntcubularbutquastic,

leamrestartthatcantprebast.Itstope,thisfluantcha


Asideways-scrollingW

ebpageisalifelikewaytop

resentagalleryofphotoswhenthepageas

awholedoesntneedtobeprinted.Aclickonanyimagecanpopopenalargerversion.

LikeagalleryAsinglerowofphotosisperfectfortimelines,step-

by-steps,anythingyoudnormallyviewinalinearmanner.Note

abovethat

allimages(includingverticals)are

alignedtothebaseline;

same-lengt

hcaptionskeepthelinesimple.Cleanandveryintuitive.

WebdesignScr

ollyourpagesidew

ays

DOWNTOWN

RENOVATION

PROJECT

OldRoseville

ConcretefromtheskyAcardwhintnotoo

gumorbont.Prettysimple,gleadandtarm.

Textureandflaspnetexatingendmistofitsnooling.Spaffforlisntcubularbutquastic,leam

restartthatcantprebast.Itstope,thisfluantchasible.Silk,shast,lapeandbehast.

PouringthebalustersAcardwhintnotoogumorbont.

Prettysimple,gleadandtarm

.Textureandflaspnetexatingend

mistofitsnooling.Spaffforl

isntcubularbutquastic.

drag

drag

t.Prettysimple,gleadandtarm.

.

isntcubularbutquastic,leam

.

,

ast,lapeandbehast.

OpeningavalveAcardwhintn

otoogumorbont.Prettysimple,gleada

.

andflaspnetexatingendmistofits

nooling.Spaffforlisntcubularbutquas

,

thatcantprebast.Itstope,thisflua

ntchasible.Silk,shast,lapeandbehast.

alkAcardwhintnotoogu


.

texatingendmistofitsnooling.Spaffforlisntcubularbutquastic,

ast.Itstope,thisfluantcha


AforestofrebarAcardwhintnotoogumorbont.Prettysimple,gle

.

andflaspnetexatingendmistofitsnoolin

g.Spaffforlisntcubularbut

,

thatcantprebast.Itstope,thisfluantcha

sible.Silk,shast,lapeandbeh

.

PosterSimple,

bold,bright

Ourvisualworldissoclutteredthatthekeyto

catchingaviewerseyeisgood,old-fashionedmin

i-

malismuselessstuff,notmore.Thisisespecially

truewithposters.Tob

eseenfromalongwayaway,

makeyourimagerysim

ple,boldandbright.

CALIFORNIA

BEACH

VOLLEYBALLASSO

CIATION

TO

U

RN

A

M

EN

TIN

FO

RM

ATIO

N

Familiarshapes,liketheh

ands,andvividcolorscon-

nectquickly.Thehandsarewarmanalogous(sidebyside)

colorsatopacold,splitcom

plementary(nearlyopposite)

field,anenergeticcombinat

ion.Withsuchclearimagery,

youdonthavetoshoutforattention;notehowthesingle

lineofwhitetypestandsoutclearly.


13/13

Before&After|www.bamagazine.com

4of4


nIdeas0659


Before&Aftermag

azine

Before&Afterhasbeensharingitspracticalapproach

tographicdesignsinc

e1990.Becauseourmodernwor

ld

hasmadedesignerso

fusall(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

Copyright2007Before&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,confidentdesignerforpennies

perarticle.Tolearnmo

re,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalongafreeco

pyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-ma

ilofnewarticlesas

theybecomeavailable,goto

http://www.bamagazine.com/email

Japan

12,553

Mex

ico

8,485

Taiwan

6,915

2006U.S.Corn

ExportSales

(Oneearrepresents1,000metrictonsofunmilledcorn.)

HOME

INSURANCE

GUIDE

NO

RTHEASTERN

MUTUALGROUP

CALIFORNIABEACHVOLLEYBALLA

SSOCIATION

TO

URN

AM

EN

TIN

FO

RM

ATIO

N

Typefaces

1F

uturaExtraBold

2F

uturaBook

3F

uturaMedium

4H

TFDidot

5H

elveticaNeueStdLight

Im

ages

6(

ac)iStockphoto.com|

a

b

c

Articleresources

Colors

C45M90Y0K0

C0M65Y100K0

C0M20Y95K0

C40M30Y95K10

C0M0Y0K100

78910

2

6b

11

33

6a

9

8

7

10

11

46c

5

1

Before and After 0659

Documents

Transcript of Before and After 0659