Post on 14-Apr-2018
transcript
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.
7/29/2019 Before and After 0659
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
7/29/2019 Before and After 0659
3/13
Before&After
3of8 Design talk 0659
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
7/29/2019 Before and After 0659
4/13
Before&After
4of8 Design talk 0659
XiBAmagazine.com U
HOMEINSURANCE
GUIDE
NORTHEASTERN MUTUAL GROUP
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
7/29/2019 Before and After 0659
5/13
Before&After
5of8 Design talk 0659
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,
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,
leam restart that cant prebast. Its tope, this fluant chasible. Silk, shast, lape and behast.
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 .
7/29/2019 Before and After 0659
6/13
Before&After
6of8 Design talk 0659
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/29/2019 Before and After 0659
7/13
Before&After
7of8 Design talk 0659
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
NORTHEASTERN MUTUAL GROUP
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
7/29/2019 Before and After 0659
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 mailbox@bamagazine.com
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
7/29/2019 Before and After 0659
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.
Format: Landscape
Page Size: Fit to Page
Save
Presentation format or
Paper-saver format
7/29/2019 Before and After 0659
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
7/29/2019 Before and After 0659
11/13
Before&After|www.b
amagazine.com
2of4
DesignTalk12:FiveDesig
nIdeas0659
0659DesignTalk12:FiveDesignIdeas
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.)
7/29/2019 Before and After 0659
12/13
Before&After|www.bamagazine.com
3of4
DesignTalk12:FiveDesig
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
sible.Silk,shast,lapeandbehast.
SmoothingthecrosswalkAcardwhintnotoogu
morbont.Prettysimple,gleadand
tarm.Textureandflaspnetexatingendmistofitsnooling.Spaffforlisntcubularbutquastic,
leamrestartthatcantprebast.Itstope,thisfluantcha
sible.Silk,shast,lapeandbehast.
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
morbont.Prettysimple,gleadand
.
texatingendmistofitsnooling.Spaffforlisntcubularbutquastic,
ast.Itstope,thisfluantcha
sible.Silk,shast,lapeandbehast.
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.
7/29/2019 Before and After 0659
13/13
Before&After|www.bamagazine.com
4of4
DesignTalk12:FiveDesig
nIdeas0659
0659DesignTalk12:FiveDesignIdeas
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