Before and After 0629

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


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


3/13

Before&After


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


4/13

Before&After


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


Friction Motorcycle



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


5/13

Before&After


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


6/13

Before&After


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

Before&After


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


6b 6c 6d 6e 6f3

1 Friction Fire Truck



Made in: Japan

2


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


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

DesignTalk4FiveWe

bIdeas0629

0629DesignTalk4F

iveWebIdeas

FiveW

ebIdeas

Two

Media,OneLook

KIMBALLHILLHOMES

KATRINAMAJOR

SalesConsultant

ENCLAVEATMORADARANCH

3738MYKALADRIVE

STOCKTON,CALIFORNIA95212

T:209-474-0266

F:209-474-0286

[email protected]

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.


KimballH

ill

HOMES

10535

EASTSTOCKTONBOULEVARD,SUITEKELKGROVE,CALIFORNIA95624

PH:916-714-1153

FX:916-714-1407


Website

Busin

esscard

KIMBALLHILLHOMES

KATRINAMAJOR

SalesConsultant

ENCLAVEATMORADARANCH

3738MYKALADRIVE

STOCKTON,CALIFORNIA95212

T:209-474-0266

F:209-474-0286

[email protected]


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


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)


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

[email protected]

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

Before and After 0629

Documents

Transcript of Before and After 0629