before and after 0645

7/29/2019 Before and After 0645

1/16

Before&After

Continued

XiBAmagazine.com U

Design a beautiful Web header 0645

Golden Valleycountry inn

NEWS EVENTS DINING ACCOMMODATION FACILITIES THINGS TO SEE LINKS DIRECTIONS CONTACT US

Design a beautiful

Create an effective header the easy way.Just think in sections. Continued Web header


2/16

Before&After

2of10

XiBAmagazine.com U




Design a beautiful Web headerDesign an effective header the easy way. Just think in sections

The header of a simple Web page is its most important visual

element. On many blogs, its the onlyvisual element. So it has abig job to do! It must identify the site and set its visual tone. It must

convey at a glance what kind of site it is and what is its attitude.

The header must also provide easy navigation. All of this is easy to

do by building three sections, one for each function, and unifying

them with visual similarities. Heres how to put that together.

Welcome to Golden ValleyThe Golden Valley Country Inn offers a tranquilexperience consistingof

comfortable accommodation, excellentfood, friendly atmosphere anda

wide range of activities.Quatum dolutpraessedmagnisis niamet, quam

quametiurem acipitiurer autem dolor si enim ipisletuer sum dolorperat

la augiam duissim dolore.

Texture andflasp netexating endmist of itsnooling. Spaff forlisnt

cubular butquastic, leam restartthatcant prebast. Its tope, this fluant

chasible. Silk, shast, lape andbehast the thin chack. Ithas larch to say

fan. Why?Elesara andorder is fay of alm.

A cardwhintnot oogum or bont. Pretty simple, gleadandtarm. Texture

andflasp netexating endmist of itsnooling. Spaff forlisntcubular but

quastic, leam restartthat cantprebast. Its tope, this fluantchasible.

Silk, shast, lape andbehastthe thin chack. It has larch to say fan.

Why?Elesara andorder is fay of alm. A cardwhint notoogum or bont.

Spaff forlisntcubular butquastic, leam restartthat cantprebast.

Textureandflasp

Netexatingendmistof it

snooling. Spaff forlisnt

cubular butquastic, leam

restartthat cantprebast.

Its tope, this fluantchasible.

Silk, shast, lape andbehast

the thin chack. Ithas larch

to say fan. Why?Elesara and

order is fay of alm.

A cardwhintnotoogum or

bont. Pretty simple, glead

andtarm. Texture andflasp

netexatingendmistof it

snooling. Spaff forlisnt

cubular butquastic, leam

restartthat cantprebast.

Its tope, this fluantchasible.

Silk, shast, lape andbehast



Big job, shallow space

The header spans the page and is

often the only non-text visual element.


3/16

Before&After

3of10

XiBAmagazine.com U


Start by divvying up the space

A Web header spans the page and is extremely shallow. Divide it into threesections: name, image and navigation links. Work on each one separately.

How big? As a rule, the name goes in the

upper left and the navigation at the bottom.

Dont lose sleep over exact divisions; the sizes

of the sections will depend on your name (short

or long) and image. However, avoid splitting the

top space exactly in half, which tends to draw

attention to the sections rather than to the

content; asymmetrical divisions are better.

3) Navigation

2) Image1) Name

Not ideal:

Halves

Better:

Asymmetrical



Design a beautiful Web header 3of10


4/16

Before&After

4of10

XiBAmagazine.com U


Find an expressive photo

A beautiful photo is key to a beautiful header. Look for an image that conveysits information in just a sliver. The surprise is how easy this can be to find.

Capture as much information as you can

(Right) The pastoral scene has trees, grass,

mountains and sunlightand look, all of it is in one

sliver! Thats what you want, a little of everything.

Whats interesting is how little it takes to convey

meaninga branch, a blade of grass, a bit of sky.

Look especially for depth, which is often expressed

with dark-light values (far right); in this image you

can see foreground, midground and background.



5/16

Before&After

5of10

XiBAmagazine.com U


Color the sections

Sample a range of colors from the photo, sort from dark to light, then apply a colorto each section. Pay attention to contrasts.

High contrast is high energy

A common color palette unifies the three

sections. Because all the colors exist in

the photo, the sections will work together

(usually) regardless of how you mix and

match. The higher the contrast between sec-

tions, the higher the energy; low contrasts are

more peaceful (but usually less memorable).

Light

Dark

Dark to light

Dark

Light

Medium

Dark

High contrast separates

Low contrast unites



6/16

Before&After

6of10

XiBAmagazine.com U


Set the name and navigation

If you have a choice, set your type in a face that complements your photo: Busyphoto/quiet type; classy photo/classy type; plain photo/showy type.

Keep the setting simple (1) A very long

name must be set in two or more lines. With

no ascenders or descenders to collide, upper-

case type is ideal for this. In this case, a quiet,

elegant typeface is a good complement for

the beautiful, painterly image. (2) Avoid enter-

taining but scene-stealing typefaces and (3)

typefaces with good but incompatible styles.

Alternating colors

green type on gold and

gold type on green

help unify the sections.



GOLDEN VALLEY


1

2

3



7/16

Before&After

7of10

XiBAmagazine.com U


Use the opposite color

Here, a semi-abstract photo conveys D&Ts style of architecture, but its blue/graycolors are too subdued for the logo. The solution is to use the opposite color.

A R C H I T E C T S

P OR TFOLIO CUR R ENT P R OJECTS A WA R DS R EV IEWS CONTACT US

High-energy opposites

The photo is full of cold, corporate blues that dontconvey the energetic character of the young design

firm. The solution: Retain blues influence by using its

opposite, or complement, for the logo. Locate blue

on the color wheel, then move straight across (left).

Complementary colors have no undertones in common

(unlike, for example, green and orange, which share yel-

low) and therefore have very high contrast and energy.

Violet and yellow have the highest value (dark-light)

contrast on the color wheel.

A R C H I T E C T S

PORTFOLIO CURRENT PROJECTS AWARDS REVIEWS CONTACT US

Dark to light

Blue from the photo looks correct but doesnt convey the right character.



8/16

Before&After

8of10

XiBAmagazine.com U


Fancy borders in InDesign

(1) Draw a rectangle and apply

a stroke the total width that you

want the double line to be; here

its two points. (2) In the Stroke>

Type pulldown (right), select Thin

Thin (in this case), which . . .

. . . converts the single line to double.

(3) In the Object>Corner Effects dia-

log, select Inverse Rounded, specify

a Size (here 0p9) and click OK.

1 2 3

Design to the logo or other graphic

Fairweather Downs has used its logo more or less unchanged for five decades. Thatsa classic! The best thing to do in this case is design not to the photo but to the logo.

VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING

DOWNS

Borrow the logos characteristics

Double-line borders and scalloped cor-

ners of the logo are easy to transfer tothe other sections and make a classic

look. Because the logo determines the

look, photos can come and go. Note

the wide contrast of typestyle between

Fairweather and DOWNSscript/

Roman, small/large, lowercase/upper-

case, yet similar line weights and excel-

lent craftsmanship combine beautifully.

Green and beige are secondary

colors, one cool, one warm.



9/16

Before&After

9of10

XiBAmagazine.com U



Typefaces

1 (ab) Centaur SC & OsF

a) 28.25 pt, b) 19.5 pt

2 Vectora 55 Roman | 6.5 pt

3 Blackcurrant

4 ITC Bauhaus Bold

5 Helvetica Neue 85 Heavy | 38 pt6 Helvetica Condensed Light | 8.25 pt

7 Sloop ScriptOne | 22.5 pt

8 Goudy Old Style | 32.5 pt

9 Clarendon Light | 8.5 pt

Images

10 (ac) iStockphoto.com | a b c

Article resources

Colors

C5 M15 Y55 K0

C50 M40 Y65 K50

C0 M35 Y100 K0

C0 M0 Y0 K100

C100 M0 Y100 K70

C15 M20 Y45 K0

11

12


NEWS EVENTS DINING ACCOMMODATION FACILITIES THINGS TO SEE

A R C H I T E C T S

P OR TFOL IO CURR ENT P R OJECTS AWA R DS

VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | E | |

DOWNS

1a

2

1b

GOLDEN VALLEY3 4

6

11 12

13 14

15 1614

5

7

8

9

10c

16

15

14

13

6

10b

10a


10/16

Before&After

10of10 | Printing formats

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

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

ISSN 1049-0035. All rights reserved

You 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


11/16

Before&After

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver formatPrint: (Specify pages 1216)

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

For presentation formatPrint: (Specify pages 110)


12/16

Before&After

|www.b

am

agazin

e.c

om

1of

5

DesignabeautifulWeb

header

064

5

064

5Designabeaut

ifulWebheader

Golden

Valley

cou

ntryinn

NEW

S

EVENT

S

DININ

G

ACCOMM

ODATION

FA

CILITIE

S

THIN

GST

O

SEE

LINK

S

DIRE

CTI

ONS

CONTA

CT

US

D

esignabeautiful

Createa

neffectiveheaderthee

asyway.

Justthinkinsections.

W

eb

heade

r

GoldenValley

co

untryinn

NEW

S

EVENT

S

DININ

G

ACCOMM

ODATION

FA

CILITIE

S

THIN

GST

O

SEE

LINK

S

DIRE

CTION

S

CONTA

CT

US

Theheaderofas

impleWebpageisitsmostimportantvisual

element.Onman

yblo

gs,itstheonlyvisualelement.Soithasa

big

jobtodo!Itm

ustidentifythesiteand

setitsvisualtone.Itmust

conve

yataglanc

ewhatkindofsiteitisa

ndwhatisitsattitude.

Theheadermust

alsoprovideeasynavigation.Allofthisiseasyt

o

dobybuildin

gth

reesections,oneforeachfunction,andunifyin

g

themwithvisual

similarities.Hereshow

toputthattogether.

WelcometoGoldenValley

TheGoldenValleyCountryInnoffersatranquilexperienceconsistingof

comfortableaccommodation,excellentfood,friendlyatmosphereanda

widerangeofactivities.Quatumdolutpraessedmagnisisniamet,quam

quametiuremacipitiurerautemdolorsienimipisletuersumdolorperat

laaugiamduissimdolore.

Textureandflaspnetexatingendmistofitsnooling.Spaffforlisnt

cubularbutquastic,leamrestartthatcantprebast.Itstope,thisfluant

chasible.Silk,shast,lapeandbehastthethinchack.Ithaslarchtosay

fan.Why?Elesaraandorderisfayofalm.

Acardwhintnotoogumorbont.Prettysimple,gleadandtarm.Texture

andflaspnetexatingendmistofitsnooling.Spaffforlisntcubularbut

quastic,leamrestartthatcantprebast.Itstope,thisfluantchasible.

Silk,shast,lapeandbehastthethinchack.Ithaslarchtosayfan.

Why?Elesaraandorderisfayofalm.Acardwhintnotoogumorbont.

Spaffforlisntcubularbutquastic,leamrestartthatcantprebast.

Textureandflasp

Netexatingendmistofit

snooling.Spaffforlisnt

cubularbutquastic,leam

restartthatcantprebast.

Itstope,thisfluantchasible.

Silk,shast,lapeandbehast

thethinchack.Ithaslarch

tosayfan.Why?Elesaraand

orderisfayofalm.

Acardwhintnotoogumor

bont.Prettysimple,glead

andtarm.Textureandflasp

netexatingendmistofit

snooling.Spaffforlisnt

cubularbutquastic,leam

restartthatcantprebast.

Itstope,thisfluantchasible.

Silk,shast,lapeandbehast

GoldenValley

countryinn

NEW

S

EVENT

S

DININ

G

ACCOMM

ODATION

FA

CILITIE

S

THIN

GST

OSEE

LINK

S

DIRE

CTION

S

CONTA

CT

US

Big

job,sh

allow

space

Th

eh

eader

span

sthepagean

d

is

of

tentheonlyn

on-tex

tvis

ual

elem

e

nt.


13/16

Findanexpressiv

ephoto

Abeautifulphotoiskeytoabeautifulhead

er.Lookforanimageth

atconveys

itsinformationinj

ustasliver.Thesurprise

ishoweasythiscanbe

tofind.

Captureasmuchinformationasyoucan

(Right)Thepastoralscenehastrees,grass,

mountainsandsunlightandlook,allofitisinone

sliver!Thatswhatyouwant,alittleofeverything.

Whatsinterestingishowlittleittakestoconvey

meaningabranch,ablade

ofgrass,abitofsky.

Lookespeciallyfordepth,whic

hisoftenexpressed

withdark-lightvalues(farright);inthisimageyou

canseeforeground,midgroundandbackground.

Before&After|www.bamagazine.com

2of5

DesignabeautifulWeb

header0645

0645Designabeaut

ifulWebheader

Startbydivvying

upthespace

AWebheaderspan

sthepageandisextrem

elyshallow.Divideitintothree

sections:name,im

ageandnavigationlinks.Workoneachoneseparately.

How

b

ig?Asarule,thenamegoesinth

e

upperle

ftandthenavigationatthebottom.

Dontlosesleepoverexactdivisions;thesize

s

ofthesectio

nswilldependonyourname(sho

rt

orlong)and

image.However,avoidsplittingth

e

topspace

exactlyinhalf,whichtendstodraw

attentio

ntothesectionsratherthantoth

e

conten

t;asymmetricaldivisionsarebetter.

3)Navigation

2)Image

1)Name

Notideal:

Halve

s

Better:

Asym

metrical

NEWS

EVENTS

DINING

ACCOMMODATION

FACILITIES

THINGSTOSEE

LINKS

DIRECTIONS

CONTACTUS

GoldenValley

co

untryinn


14/16


3of5

DesignabeautifulWeb

header0645

0645Designabeaut

ifulWebheader

Colorthesections

Samplearangeofcolorsfromthephoto,sortfromdarktolight,th

enapplyacolor

toeachsection.Payattentiontocontrasts.

H

ighcontrastishighenergy

Acommoncolorpaletteunifiesthethree

sections.Becauseallthecolorsexistin

thephoto,thesectionswillworktogether

(usually)regardlessofhowyoumixand

match.Thehigherthecontrastbetweensec-

tions,thehighertheenergy;lowcontrastsare

morepeacefu

l(butusuallylessmemorable).

Light

Dark

Darktolight

Dark

Light

Medium

Dark

Highcontrastseparates

Lowcontrastunites

Setthenameand

navigation

Ifyouhaveachoice,setyourtypeinaface

thatcomplementsyour

photo:Busy

photo/quiettype;classyphoto/classytype

;plainphoto/showytyp

e.

Keepthesettingsimple(1)Averylong

namemustbesetintwoormorelines.With

noascendersordescenderstocollide,upper-

casetypeisidealf

orthis.Inthiscase,aquiet,

eleganttypefaceisagoodcomplementfor

thebeautiful,pain

terlyimage.(2)Avoidenter-

tainingbutscene

-stealingtypefacesand(3)

typefaceswithgo

odbutincompatiblestyles.

Alternatingcolors

greentypeongo

ldand

goldtypeongree

n

helpunifythesections.

GoldenValley

countryinn

GoldenValley

co

untryinn

GOLDEN

V

ALLEY

NEWS

EVENTS

DINING

ACCOMMODATION

FACILITIES

THINGSTOSEE

LINKS

DIRECTIONS

CONTACTUS

123


15/16


4of5

DesignabeautifulWeb

header0645

0645Designabeaut

ifulWebheader

Usetheopposite

color

Here,asemi-abstractphotoconveysD&Tsstyleofarchitecture,bu

titsblue/gray

colorsaretoosubd

uedforthelogo.Thesolutionistousetheoppo

sitecolor.

ARC

H

ITEC

TS

PORTFOLIO

CURRENT

PROJ

ECTS

AWARDS

REVIEWS

CONTACT

US

High-energyo

pposites

Thephotoisfullofcold,corporatebluesthatdon

t

conveytheene

rgeticcharacteroftheyoungdesign

firm.Thesolution:Retainbluesinfluencebyusingits

opposite,orcom

plement,forthelogo.Locateblu

e

onthecolorwh

eel,thenmovestraightacross(left).

Complementarycolorshavenoundertonesincommon

(unlike,forexample,greenandorange,whichsha

reyel-

low)andtheref

orehaveveryhighcontrastandenergy.

Violetandyello

whavethehighestvalue(dark-light)

contrastonthe

colorwheel.

D&T

ARCHITECTS

PORTFOLIO

CURRENT

PROJECTS

AWARDS

REVIEWS

CONTACT

US

Darktolight

Bluefromthephotolookscorrectbutdoesntconveytherightcharacter.

FancybordersinInDesign

(1)Drawarectangleandapp

ly

astrokethetotalwidththat

you

wantthedoublelinetobe;h

ere

itstwopoints.(2)IntheStroke>

Typepulldown(right),select

Thin

Thin(inthiscase),which...

.

.

.convertsthesinglelinetodouble.

(3)IntheObject>CornerE

ffectsdia-

log,selectInverseRounde

d,specify

aSize(here0p9)andclick

OK.

1

2

3

Designtothelogoorothergraphic

FairweatherDownshasuseditslogomore

orlessunchangedforfivedecades.Thats

aclassic!Thebestthingtodointhiscaseisdesignnottothephoto

buttothelogo.

VISITTH

ETRACK

|RACINGINFORMATION|SPECIALDAYS

|NEWS|EVENTS|INSIDER

|SHOPPING

D

OWNS

Borrow

thelogoscharacteristics

Double-linebordersandscallopedcor-

nersofthelogoareeasytotransferto

theothersectionsandmakeaclassic

look.Bec

ausethelogodeterminesthe

look,pho

toscancomeandgo.Note

thewide

contrastoftypestylebetween

Fairweat

herandDOWNSscript/

Roman,small/large,lowercase/upper-

case,yet

similarlineweightsandexcel-

lentcraftsmanshipcombinebeautifully.

Greenandbeige

aresecondary

colors,onecool,onewarm.


16/16

Before&After|www.ba

magazine.com

5of5

DesignabeautifulWeb

header0645

0645DesignabeautifulWebheader

Articleresources

Colors

C5M15Y55K0

C50M40Y65K50

C0M35Y100K0

C0M0Y0K100

C100M0Y100K7

0

C15M20Y45K0

11

12

Gol

denValley

countryinn

NEWS

EVENTS

DINING

ACCOMMODATION

FACILITIES

THINGSTO

SEE

ARC

H

ITEC

TS

PORTFOLIO

CURRENT

PROJECTS

AWARDS

VISITTHET

RACK

|RACINGINFORMATION

|SPECIALDAYS|NEWS|E

|

|

DOWNS

1a2

1b

GO

LDEN

VALLEY

3

4

6

11

12

13

14

15

16

14

5789

10c

16

15

14

13

6 10b

10a

Typefaces

1(ab)CentaurSC&OsF

a

)28.25pt,b)19.5pt

2V

ectora55Roman|6.5pt

3B

lackcurrant

4IT

CBauhausBold

5H

elveticaNeue85Heavy|38pt

6H

elveticaCondensedLight|8.25pt

7S

loopScriptOne|22.5pt

8G

oudyOldStyle|32.5pt

9C

larendonLight|8.5pt

Im

ages

10

(ac)iStockphoto.com|

a

b

c

Before&Aftermag

azine

Before&Afterhasbee

nsharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand

-

able,usefulandevenfunforeveryone.

JohnMcWadePublis

herandcreativedirector

GayeMcWadeAssoc

iatepublisher

VincentPascualSta

ffdesigner

DexterMarkAbelle

raStaffdesigner

DesignadvisorGwen

Amos

Before&Aftermag

azine

323LincolnStreet,Roseville,CA95678

Telephone916-784-3880

Fax916-784-3995

E-mailmailbox@bama

gazine.com

wwwhttp://www.bam

agazine.com

Copyright2006Be

fore&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

Didyoulearnfromthisarticle?Subscribe,and

becomeamorecapable,confidentdesigner

forpenniesperarticle.

Tolearnmore,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalongafreecopyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-mailofnewarticlesas

theybecomeavailable,goto

http://www.bamagazine.com/email

before and after 0645

Documents