Upload
dsnv
View
219
Download
0
Embed Size (px)
Citation preview
7/29/2019 Before and After 0629
1/13
Continued
Before&After XiBAmagazine.com U
Design talk 0629
FiveWebIdeasTwo Media,One Look K IMBALL HILL HOMESKATRINA MAJORSales ConsultantENCLAVE AT MORADA RANCH3738 MYKALA DRIVESTOCKTON, CALIFORNIA 95212T: 209-474-0266F: [email protected] kimballhillhomes.com Designed SpaceSimple Mouse-Over
Color Hierarchy BLINDS & SHADES
Wood
Faux Wood
Honeycomb
Sheer Shadings
Pleated
Woven Wood
Roman
Roller
Aluminum/Vinyl
Vertical
Ready Made
Easy-to-Read Slide Show
DesignTalk4
7/29/2019 Before and After 0629
2/13
Before&After
2of8 Design talk 0629
XiBAmagazine.com U
Harmony Design stationery and Web site to work together
Letterhead
Have you ever noticed the visual harmony
of a well-designed home? Its lines, shapes and
colors flow from room to room and create a
beautiful whole. Harmony means repetition;
thisfabric reappears there; a hallway line
wraps into a bath. Kimball Hill has beendesigning homes since 1969 and knows that
repetition of line and shape applies to graphic
design, too. Its print stationery and Web site
share colors, shapes (rectangles), type and
even the same white border. Result? Separate
media feel like one beautiful place.
www.kimballhillhomes.com
K i m b a l l H i l l
HOMES
1 0 5 3 5 E A S T S T O C K T O N B O U L E V A R D , S U I T E K E L K G R O V E , C A L I F O R N I A 9 5 6 2 4
P H : 9 1 6 - 7 1 4 - 1 1 5 3 F X : 9 1 6 - 7 1 4 - 1 4 0 7 w w w . k i m ba l lh i l lh o m es . c om
Web site
Business card
KIMBALL HILL HOMES
KATRINA MAJOR
Sales Consultant
ENCLAVE AT MORADA RANCH
3738 MYKALA DRIVE
STOCKTON, CALIFORNIA 95212
T: 209-474-0266
F: 209-474-0286
[email protected] kimballhillhomes.com
Design talk 2of8
7/29/2019 Before and After 0629
3/13
Before&After
3of8 Design talk 0629
XiBAmagazine.com U
Color Signify hierarchy with color
Help your viewer stay oriented as he drills deeper into your site by using tints of the
menu color to convey successive levels; the lighter the tint, the deeper you are.
The deeper you go, the lighter the color
A scale of tints makes it obvious at a glance that youre moving
deeper into the site. Dark base colorsany regular color witha lot of black are the most versatile. Unless youre selling Barbies,
avoid bright red, which when tinted turns pink.
BATH BLINDS & SHADES FURNITURE HOME DECOR LIGHTING OUTDOOR RUGS
Wood
Faux Wood
Honeycomb
Sheer Shadings
Pleated
Woven Wood
Roman
Roller
Aluminum/Vinyl
Vertical
Ready Made
Design talk 3of 8
7/29/2019 Before and After 0629
4/13
Before&After
4of8 Design talk 0629
XiBAmagazine.com U
A colorful object in a field of black & white is an easy way to signify an active link. Its
great for portfolio-style sites and especially suitable when the images are from an era of
black & white photography.
Color Color means its the active link
20052006 | KidAgain.com | AllRightsReserved.
Friction Fire Truck
Material: Lithographed Tin
Year of Release: 1950
Made in: Japan
Tractors Fire Trucks Military Planes Motorcycles Cars
20052006 | KidAgain.com | AllRightsReserved.
Friction Motorcycle
Material: Lithographed Tin
Year of Release: 1950
Made in: Japan
Tractors Fire Trucks Military Planes Motorcycles Cars
Color says active! Photoshop will turn color images
black & white in one click; change Image> Mode to
Grayscale, then use the two versions to create a rollover.
Museum-like presentation Alone on a white field is the best
way to present an object. The viewer can relax, focus and enjoy the
object without distractions. Gray type doesnt steal the stage.
Design talk 4of8
7/29/2019 Before and After 0629
5/13
Before&After
5of8 Design talk 0629
XiBAmagazine.com U
Layout Centered text makes a slide show thats quick to read
News photographers on breaking stories can snap dozens of images, often in minutes, but none
has news value without a descriptive caption. For deadline-pressed photo editors, Reuters puts its
captions front and center where theyre easiest to read.
Text buffers the images The center of a visual field is
its strongest point, so when words are critical, center is the
place to put them; off to the side they will be less read. The
added benefitan attractive, visually balancedpage.
www.reuters.com (Go to Pictures, then Showcases)
Design talk 5of8
7/29/2019 Before and After 0629
6/13
Before&After
6of8 Design talk 0629
XiBAmagazine.com U
Bold simplicity
This is a good start; the bold
image and head can be seeneasily. But the layout left
an undesirable hole in the
center (right), which leads
nowhere. The design is static;
the viewer must look left,
right, up, down and make a
decision.
Design should flow
Words and image have been
rearranged and now worktogether. The story starts
on the left and wraps the
image (right) in a continuous
sweep; the viewer moves
without disruption through
the space. The design is
active.
Layout Dont trap the space
The Web is all about designing in small spaces, where stories must be told simplyone image,
one focal point, a word or two, just enough to be seen at a glance. This designer got it right except
for one thing; his image and headline trapped empty space uselessly in the center.
Before After
FRAMEDARTCLICK HERE
FRAMEDART
CLICK HERE
Design talk 6of8
7/29/2019 Before and After 0629
7/13
Before&After
7of8 Design talk 0629
XiBAmagazine.com UDesign talk 7of8
FRAMED
ARTCLICK HERE
Typefaces
1 Trade Gothic Bold Cond 20 | 11 pt
2 Trade Gothic Cond 18 | 7.5/11 pt
3 Myriad Pro Light | 3.5 pt
4 Avenir 35 Light | 19.5/29 pt
5 Avenir 65 Medium | 6.5 pt
Images
6 (ah) iStockphoto.com | a b c d
e f g h
Article resources
Colors
C3 M3 Y3 K40
C3 M3 Y3 K20
C55 M20 Y15 K15
C75
M40
Y30
K45
7
8
9
Tractors Fire Trucks Military Planes Motorcycles Cars 2
7
5
6g
9
10
6h
4
8
10
6a
20052006 | KidAgain.com | AllRightsReserved.
6b 6c 6d 6e 6f3
1 Friction Fire Truck
Material: Lithographed Tin
Year of Release: 1950
Made in: Japan
2
7/29/2019 Before and After 0629
8/13
Before&After
8of8 | Printing formats
Design talk 0629
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
Vincent Pascual Staff designer
Dexter Mark Abellera Staff designer
Design advisor Gwen Amos
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 2005 Before & After magazine, ISSN
1049-0035. All rights reserved
You may pass this article around, but you may not alter
it, and you may not charge for it. You may quote brief
sections for review. If you do this, please credit Before
& After magazine, and let us know.To feature free
Before & After articles on your Web site, please contact
us. For permission to include all or part of this article in
another work, please contact us.
Subscribe to Before & After
Did you learn from this article? Subscribe, 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 0629
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 0629
10/13
Before&After|www.b
amagazine.com
1of4
DesignTalk4FiveWe
bIdeas0629
0629DesignTalk4F
iveWebIdeas
FiveW
ebIdeas
Two
Media,OneLook
KIMBALLHILLHOMES
KATRINAMAJOR
SalesConsultant
ENCLAVEATMORADARANCH
3738MYKALADRIVE
STOCKTON,CALIFORNIA95212
T:209-474-0266
F:209-474-0286
DesignedSpace
SimpleMouse
-Over
ColorH
ierarchy
BLIND
S&SHADE
S
Wood
FauxW
ood
Hon
eycom
b
Sh
eer
Sh
adin
gs
Ple
ated
Wov
enW
ood
Rom
an
Roller
Alumin
um
/Vin
yl
Vertic
al
ReadyM
ade
Easy-to-ReadSlideShow
Desig
nTalk4
HarmonyDesig
nstationeryandW
ebsitetoworktog
ether
Letterhead
Haveyouevernoticedthevisualharmony
ofawell-designedhome?Itslines,shapesand
colorsflow
fromroomtoroomandcreatea
beautifulw
hole.Harmonymeansrepetition;
thisfabricreappearsthere;ahallwayline
wrapsinto
abath.KimballHillhasbeen
designingh
omessince1969andknowsthat
repetitionoflineandshapeappliestographic
design,too.ItsprintstationeryandWebsite
sharecolor
s,shapes(rectangles),typeand
eventhesa
mewhiteborder.Result?Separate
mediafeellikeonebeautifulplace.
www.kimballhillhomes.com
KimballH
ill
HOMES
10535
EASTSTOCKTONBOULEVARD,SUITEKELKGROVE,CALIFORNIA95624
PH:916-714-1153
FX:916-714-1407
www.kimballhillhomes.com
Website
Busin
esscard
KIMBALLHILLHOMES
KATRINAMAJOR
SalesConsultant
ENCLAVEATMORADARANCH
3738MYKALADRIVE
STOCKTON,CALIFORNIA95212
T:209-474-0266
F:209-474-0286
7/29/2019 Before and After 0629
11/13
Before&After|www.b
amagazine.com
2of4
DesignTalk4FiveWe
bIdeas0629
0629DesignTalk4F
iveWebIdeas
ColorSignifyh
ierarchywithcolor
Helpyourviewerstay
orientedashedrillsdeeper
intoyoursitebyusingtints
ofthe
menucolortoconvey
successivelevels;thelighterthetint,thedeeperyouare
.
The
deeperyougo,thelighterthe
color
Ascaleoftintsmakesitobviousataglancethatyouremoving
deep
erintothesite.Darkbasecolors
anyregularcolorwith
alot
ofblackarethemostversatile.UnlessyouresellingBarbies,
avoidbrightred,whichwhentintedturnspink.
BATH
BLIND
S&
SHADE
S
FURNIT
URE
HOMEDE
COR
LIGHTIN
G
OUTD
OOR
RUGS
Acolorfulobjectinafi
eldofblack&whiteisanea
sywaytosignifyanactivelink.Its
greatforportfolio-stylesitesandespeciallysuitab
lewhentheimagesarefrom
aneraof
black&whitephotogr
aphy.
ColorColorme
ansitstheactivelink
20052006
|KidAgain.com
|AllRightsReserved.
Frict
ionFireTruck
Materia
l:LithographedTin
Yearof
Release:1950
Madein:Japan
Tractors
FireTrucks
Military
Plan
es
Motorcycles
Cars
20052006
|KidAgain.com
|AllRightsReserved.
FrictionMotorcycle
Material:LithographedTin
YearofRelease:1950
Madein:Japan
Tractors
FireTrucks
Militar
y
Planes
Motorcycles
Cars
Colorsaysactive!Photos
hopwillturncolorimages
black&whiteinoneclick;c
hangeImage>Modeto
Grayscale,thenusethetwo
versionstocreatearollover.
Museum-likepresentationAloneonawhitefieldisthebest
waytopresentanobject.Theviewercanrelax,focusandenjoythe
objectwithoutdistractions.Graytypedoesntstealthestage.
Wood
FauxW
ood
Hon
eycom
b
Sh
eer
Sh
a
dings
Ple
ated
Wov
enW
o
od
Rom
an
Roller
Alumin
um
/Vinyl
Vertic
al
ReadyM
ade
7/29/2019 Before and After 0629
12/13
Before&After|www.b
amagazine.com
3of4
DesignTalk4FiveWe
bIdeas0629
0629DesignTalk4F
iveWebIdeas
LayoutCenteredtextmakesaslid
eshowthatsquic
ktoread
Newsphotographerso
nbreakingstoriescansnap
dozensofimages,ofteninminutes,butnone
hasnewsvaluewithou
tadescriptivecaption.For
deadline-pressedphotoeditors,Reutersputsits
captionsfrontandcen
terwheretheyreeasiesttoread.
Textbuffersthe
imagesThecenterofavisualfieldis
itsstrongestpoint,
sowhenwordsarecritical,centeristhe
placetoputthem;
offtothesidetheywillbelessrea
d.The
addedbenefitan
attractive,visuallybalancedpage.
Boldsimplicity
Thisisagoodstart;thebold
imageandheadcanbeseen
easily.Butthelayoutleft
anundesirableholeinthe
center(right),whichleads
nowhere.Thedesignisstatic;
theviewermustlookleft,
right,up,downandmakea
decision.
Designshouldflow
Wordsandimagehavebeen
rearrangedandnowwork
together.Thestorystarts
ontheleftandwrapsthe
image(right)inacontinuous
sweep;theviewermoves
withoutdisruptionthrough
thespace.Thedesignis
active.
LayoutDonttr
apthespace
TheWebisallaboutdesigninginsmallspaces,wh
erestoriesmustbetoldsim
plyoneimage,
onefocalpoint,awordortwo,justenoughtobes
eenataglance.Thisdesignergotitrightexcept
foronething;hisimag
eandheadlinetrappedemptyspaceuselesslyinthecenter.
Before
After
FRAM
ED
ART
CLICKHERE
FRAMED
ART
CLICKHERE
www.reuters.com(GotoP
ictures,thenShowcases)
7/29/2019 Before and After 0629
13/13
Before&After|www.bamagazine.com
4of4
DesignTalk4FiveWe
bIdeas0629
0629DesignTalk4F
iveWebIdeas
Before&Aftermag
azine
Before&Afterhasbeensharingitspracticalapproach
tographicdesignsinc
e1990.Becauseourmodernwor
ld
hasmadedesignerso
fusall(readyornot),Before&
Afterisdedicatedtom
akinggraphicdesignunderstand
-
able,usefulandeven
funforeveryone.
JohnMcWadePublisherandcreativedirector
GayeMcWadeAssociatepublisher
VincentPascualSta
ffdesigner
DexterMarkAbelle
raStaffdesigner
DesignadvisorGwen
Amos
Before&Aftermag
azine
323LincolnStreet,Ro
seville,CA95678
Telephone916-784-3880
Fax916-784-3995
www
http://www.bam
agazine.com
Copyright2005Be
fore&Aftermagazine,ISSN
1049-0035.Allrightsreserved
Youmaypassthisarticlearound,butyoumaynotalter
it,andyoumaynotch
argeforit.Youmayquotebrief
sectionsforreview.If
youdothis,pleasecreditBefore
&Aftermagazine,and
letusknow.Tofeaturefree
Before&Afterarticles
onyourWebsite,pleasecontact
us.Forpermissiontoincludeallorpartofthisarticlein
anotherwork,pleasecontactus.
SubscribetoBefore
&After
Didyoulearnfromthisarticle?Subscribe,and
becomeamorecapable,confidentdesigner
forpenniesperarticle.Tolearnmore,goto
http://www.bamagazine.com/Subscribe
E-mailthisarticle
Topassalongafreeco
pyofthisarticleto
others,clickhere.
Joinoure-list
Tobenotifiedbye-ma
ilofnewarticlesas
theybecomeavailable
,goto
http://www.bamagazine.com/email
FRA
MED
ART
CLICKHERE
Typ
efaces
1Tr
adeGothicBoldCond20|11pt
2TradeGothicCond18|7.5/11pt
3M
yriadProLight|3.5pt
4A
venir35Light|19.5/29pt
5A
venir65Medium|6.5pt
Images
6(a
h)iStockphoto.com|a
b
c
d
e
f
g
h
Articleresources
Colors
C3M3Y3K40
C3M3Y3K20
C55M20Y15K15
C75M40Y30K45
789
Tractors
FireTrucks
Military
Planes
Motorcycles
Cars
2 7
5
6g
910
6h
4 8
10
6a
20052006|KidAgain.com|AllRightsReserved.
6b
6c
6d
6e
6f
3
1
FrictionF
ireTruck
Material:LithographedTin
YearofRelease
:1950
Madein:Japan
2