design a beautiful web header - wordpress.comdesign a beautiful web header 0645 start by divvying up...

16
Before&After ® Continued X i BAmagazine.com U Design a beautiful Web header 0645 Golden Valley country 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

Upload: others

Post on 25-Sep-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

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

Page 2: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

2 of 10

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 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, it’s the only visual element. So it has a big 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. Here’s how to put that together.

Welcome to Golden ValleyThe Golden Valley Country Inn offers a tranquil experience consisting of

comfortable accommodation, excellent food, friendly atmosphere and a

wide range of activities. Quatum dolut praessed magnisis niamet, quam

quamet iurem acipit iurer autem dolor si enim ipisl etuer sum dolorperat

la augiam duissim dolore.

Texture and flasp net exating end mist of it snooling. Spaff forl isn’t

cubular but quastic, leam restart that can’t prebast. It’s tope, this fluant

chasible. Silk, shast, lape and behast the thin chack. “It has larch to say

fan.” Why? Elesara and order is fay of alm.

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

and flasp net exating end mist of it snooling. Spaff forl isn’t cubular but

quastic, leam restart that can’t prebast. It’s tope, this fluant chasible.

Silk, shast, lape and behast the thin chack. “It has larch to say fan.”

Why? Elesara and order is fay of alm. A card whint not oogum or bont.

Spaff forl isn’t cubular but quastic, leam restart that can’t prebast.

Texture and flasp

Net exating end mist of it

snooling. Spaff forl isn’t

cubular but quastic, leam

restart that can’t prebast.

It’s tope, this fluant chasible.

Silk, shast, lape and behast

the thin chack. “It has larch

to say fan.” Why? Elesara and

order is fay of alm.

A card whint not oogum or

bont. Pretty simple, glead

and tarm. Texture and flasp

net exating end mist of it

snooling. Spaff forl isn’t

cubular but quastic, leam

restart that can’t prebast.

It’s tope, this fluant chasible.

Silk, shast, lape and behast

Golden Valleycountry inn

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

Big job, shallow space The header spans the page and is

often the only non-text visual element.

Page 3: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

3 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Start by divvying up the spaceA Web header spans the page and is extremely shallow. Divide it into three sections: 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.

Don’t 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

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

Golden Valleycountry inn

Design a beautiful Web header 3 of 10

Page 4: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

4 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Find an expressive photoA beautiful photo is key to a beautiful header. Look for an image that conveys its 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 sunlight—and look, all of it is in one sliver! That’s what you want, a little of everything. What’s interesting is how little it takes to convey meaning—a 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.

Design a beautiful Web header 4 of 10

Page 5: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

5 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Color the sectionsSample a range of colors from the photo, sort from dark to light, then apply a color to 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).

LightDark

Dark to light

DarkLight

MediumDark

High contrast separates

Low contrast unites

Design a beautiful Web header 5 of 10

Page 6: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

6 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Set the name and navigationIf you have a choice, set your type in a face that complements your photo: Busy photo/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

country inn

Golden Valleycountry inn

GOLDEN VALLEY

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

1

2

3

Design a beautiful Web header 6 of 10

Page 7: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

7 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Use the opposite colorHere, a semi-abstract photo conveys D&T’s style of architecture, but its blue/gray colors are too subdued for the logo. The solution is to use the opposite color.

D&TA R C H I T E C T S

PORTFOLIO • CURRENT PROJECTS • AWARDS • REVIEWS • CONTACT US

High-energy opposites The photo is full of cold, corporate blues that don’t convey the energetic character of the young design firm. The solution: Retain blue’s 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.

D&TA 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 doesn’t convey the right character.

Design a beautiful Web header 7 of 10

Page 8: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

8 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Fancy borders in InDesign(1) Draw a rectangle and apply a stroke the total width that you want the double line to be; here it’s 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 graphicFairweather Downs has used its logo more or less unchanged for five decades. That’s a 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 logo’s characteristics Double-line borders and scalloped cor-ners of the logo are easy to transfer to the 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 DOWNS—script/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.

Design a beautiful Web header 8 of 10

Page 9: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

9 of 10

XiBAmagazine.com U

Design a beautiful Web header 0645

Design a beautiful Web header 9 of 10

Typefaces

1 (a–b) 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 pt

6 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 (a–c) 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

Golden Valleycountry inn

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

D&TA R C H I T E C T S

PORTFOLIO • CURRENT PROJECTS • AWARDS • REVIEWS • CONTACT US

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

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

Page 10: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

10 of 10 | Printing formats

XiBAmagazine.com U

Design a beautiful Web header 0645

Design a beautiful Web header 10 of 10

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 directorGaye McWade Associate publisherVincent Pascual Staff designerDexter Mark Abellera Staff designer Before & After magazine323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995E-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 article

To 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

Page 11: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Before&After ®

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver format Print: (Specify pages 12–16)

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

SavePresentation format or

Paper-saver format

For presentation format Print: (Specify pages 1–10)

Page 12: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Be

fore

&A

fter | w

ww

.bamagazine.com

1 of 5

De

sign

a b

ea

utifu

l We

b h

ea

de

r 06450645

De

sign

a b

ea

utifu

l We

b h

ea

de

r

Golden Valley

country innN

EWS

• EVEN

TS • D

ININ

G

• AC

CO

MM

OD

ATIO

N

• FAC

ILITIES • TH

ING

S TO SEE

• LINK

S • D

IREC

TION

S • C

ON

TAC

T US

Design a beautiful

Create an

effective head

er the easy w

ay. Ju

st thin

k in section

s.

Web header

Golden Valley

country innN

EWS

• EVEN

TS • D

ININ

G

• AC

CO

MM

OD

ATIO

N

• FAC

ILITIES • TH

ING

S TO SEE

• LINK

S • D

IREC

TION

S • C

ON

TAC

T US

Th

e head

er of a sim

ple W

eb p

age is its mo

st imp

ortan

t visual

elemen

t. On

man

y blo

gs, it’s the on

ly visual elem

ent. So

it has a

big jo

b to

do

! It mu

st iden

tify the site an

d set its visu

al ton

e. It mu

st co

nvey at a glan

ce wh

at kind

of site it is an

d w

hat is its attitu

de.

Th

e head

er mu

st also p

rovide easy n

avigation

. All o

f this is easy to

d

o b

y bu

ildin

g three sectio

ns, o

ne fo

r each fu

nctio

n, an

d u

nifyin

g th

em w

ith visu

al similarities. H

ere’s how

to p

ut th

at togeth

er.

We

lcom

e to

Go

lde

n V

alle

yThe G

old

en V

alley Country In

n o

ffers a tranquil exp

erience co

nsistin

g o

f

com

fortab

le accom

modatio

n, excellen

t food, frien

dly atm

osp

here an

d a

wid

e range o

f activities. Quatu

m d

olu

t praessed

mag

nisis n

iamet, q

uam

quam

et iurem

acipit iu

rer autem

dolo

r si enim

ipisl etu

er sum

dolo

rperat

la augiam

duissim

dolo

re.

Texture an

d fl

asp n

et exating en

d m

ist of it sn

oolin

g. S

paff fo

rl isn’t

cubular b

ut q

uastic, leam

restart that can

’t preb

ast. It’s tope, th

is fluan

t

chasib

le. Silk, sh

ast, lape an

d b

ehast th

e thin

chack. “It h

as larch to

say

fan.” W

hy? E

lesara and o

rder is fay o

f alm.

A card

whin

t not o

ogum

or b

ont. Pretty sim

ple, g

lead an

d tarm

. Texture

and fl

asp n

et exating en

d m

ist of it sn

oolin

g. S

paff fo

rl isn’t cu

bular b

ut

quastic, leam

restart that can

’t preb

ast. It’s tope, th

is fluan

t chasib

le.

Silk, sh

ast, lape an

d b

ehast th

e thin

chack. “It h

as larch to

say fan.”

Why? E

lesara and o

rder is fay o

f alm. A

card w

hin

t not o

ogum

or b

ont.

Spaff fo

rl isn’t cu

bular b

ut q

uastic, leam

restart that can

’t preb

ast.

Textu

re a

nd

flasp

Net exatin

g en

d m

ist of it

snoolin

g. S

paff fo

rl isn’t

cubular b

ut q

uastic, leam

restart that can

’t preb

ast.

It’s tope, th

is fluan

t chasib

le.

Silk, sh

ast, lape an

d b

ehast

the th

in ch

ack. “It has larch

to say fan

.” Why? E

lesara and

ord

er is fay of alm

.

A card

whin

t not o

ogum

or

bont. Pretty sim

ple, g

lead

and tarm

. Texture an

d fl

asp

net exatin

g en

d m

ist of it

snoolin

g. S

paff fo

rl isn’t

cubular b

ut q

uastic, leam

restart that can

’t preb

ast.

It’s tope, th

is fluan

t chasib

le.

Silk, sh

ast, lape an

d b

ehast

Golden Valley

country innN

EWS

• EVEN

TS • D

ININ

G

• AC

CO

MM

OD

ATIO

N

• FAC

ILITIES • TH

ING

S TO SEE

• LINK

S • D

IREC

TION

S • C

ON

TAC

T US

Big

job

, shallo

w sp

ace

The header spans the page and is often the only non-text visual elem

ent.

Page 13: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Find

an e

xp

ressive

ph

oto

A b

eautifu

l ph

oto

is key to a b

eautifu

l head

er. Loo

k for an

image th

at con

veys its in

form

ation

in ju

st a sliver. Th

e surp

rise is how

easy this can

be to

fin

d.

Cap

ture

as mu

ch in

form

ation

as you

can

(Right) The pastoral scene has trees, grass, m

ountains and sunlight—and look, all of it is in one

sliver! That’s what you w

ant, a little of everything. W

hat’s interesting is how little it takes to convey

meaning—

a branch, a blade of grass, a bit of sky. Look especially for depth, w

hich is often expressed w

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

can see foreground, midground and background.

Be

fore

&A

fter | w

ww

.bamagazine.com

2 of 5

De

sign

a b

ea

utifu

l We

b h

ea

de

r 06450645

De

sign

a b

ea

utifu

l We

b h

ea

de

r

Start b

y divvyin

g u

p th

e sp

aceA

Web

head

er span

s the p

age and

is extremely sh

allow. D

ivide it in

to th

ree sectio

ns: n

ame, im

age and

navigatio

n lin

ks. Wo

rk on

each o

ne sep

arately.

Ho

w b

ig? A

s a rule, the name goes in the

upper left and the navigation at the bottom.

Don’t lose sleep over exact divisions; the sizes

of the sections will depend on your nam

e (short or long) and im

age. How

ever, avoid splitting the top space exactly in half, w

hich tends to draw

attention to the sections rather than to the content; asym

metrical divisions are better.

3) Navig

ation

2) Imag

e1) N

ame

No

t ide

al:

Halves

Be

tter:

Asym

metrical

NEW

S • EV

ENTS

• DIN

ING

• A

CC

OM

MO

DA

TION

• FA

CILITIES

• THIN

GS TO

SEE • LIN

KS

• DIR

ECTIO

NS

• CO

NTA

CT U

S

Golden Valley

country inn

Page 14: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Be

fore

&A

fter | w

ww

.bamagazine.com

3 of 5

De

sign

a b

ea

utifu

l We

b h

ea

de

r 06450645

De

sign

a b

ea

utifu

l We

b h

ea

de

r

Co

lor th

e se

ction

sSam

ple a ran

ge of co

lors fro

m th

e ph

oto, so

rt from

dark to

light, th

en ap

ply a co

lor

to each

section

. Pay attentio

n to

con

trasts.

Hig

h co

ntrast is h

igh

en

erg

y A

comm

on color palette unifies the three sections. B

ecause all the colors exist in the photo, the sections w

ill work together

(usually) regardless of how you m

ix and m

atch. The higher the contrast between sec-

tions, the higher the energy; low contrasts are

more peaceful (but usually less m

emorable).

LightD

ark

Dark to light

Dark

Light

Medium

Dark

High contrast separates

Low contrast unites

Se

t the

nam

e an

d n

avigatio

nIf yo

u h

ave a cho

ice, set you

r type in

a face that co

mp

lemen

ts you

r ph

oto

: Bu

sy p

ho

to/q

uiet typ

e; classy ph

oto

/classy type; p

lain p

ho

to/sh

owy typ

e.

Ke

ep

the

settin

g sim

ple

(1) A

very long nam

e must be set in tw

o or more lines. W

ith no ascenders or descenders to collide, upper-case type is ideal for this. In this case, a quiet,

elegant typeface is a good complem

ent for the beautiful, painterly im

age. (2) A

void enter-taining but scene-stealing typefaces and (3

) typefaces w

ith good but incompatible styles.

Alternating colors—

green type on gold and gold type on green—

help unify the sections.

Golden Valley

country inn

Golden Valley

country inn

GO

LDEN

VALLEY

NEW

S • EV

ENTS

• DIN

ING

• A

CC

OM

MO

DA

TION

• FA

CILITIES

• THIN

GS TO

SEE • LIN

KS

• DIR

ECTIO

NS

• CO

NTA

CT U

S

123

Page 15: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Be

fore

&A

fter | w

ww

.bamagazine.com

4 of 5

De

sign

a b

ea

utifu

l We

b h

ea

de

r 06450645

De

sign

a b

ea

utifu

l We

b h

ea

de

r

Use

the

op

po

site co

lor

Here, a sem

i-abstract p

ho

to co

nveys D

&T

’s style of arch

itecture, b

ut its b

lue/gray

colo

rs are too

sub

du

ed fo

r the lo

go. Th

e solu

tion

is to u

se the o

pp

osite co

lor.

D&T

AR

CH

ITE

CT

S

PORTFO

LIO

CU

RRENT

PROJEC

TS •

AW

ARDS

REVIEWS

CO

NTAC

TU

S

Hig

h-e

ne

rgy o

pp

osite

s The photo is full of cold, corporate blues that don’t convey the energetic character of the young design firm

. The solution: Retain blue’s influence by using its

opposite, or complem

ent, for the logo. Locate blue on the color w

heel, then move straight across (left).

Com

plementary colors have no undertones in com

mon

(unlike, for example, green and orange, w

hich share yel-low

) and therefore have very high contrast and energy. V

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

contrast on the color wheel.

D&T

AR

CH

ITE

CT

S

PORTFO

LIO

CU

RRENT

PROJEC

TS •

AW

ARDS

REVIEWS

CO

NTAC

TU

S

Dark to light

Blue from

the photo looks correct but doesn’t convey the right character.

Fancy b

ord

ers in

InD

esig

n(1) D

raw a rectangle and apply

a stroke the total width that you

want the double line to be; here

it’s 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 O

bject>C

orner Effects dia-log, select Inverse Rounded, specify a Size (here 0p9) and click O

K.

12

3

De

sign

to th

e lo

go

or o

the

r grap

hic

Fairweath

er Dow

ns h

as used

its logo

mo

re or less u

nch

anged

for fi

ve decad

es. Th

at’s a classic! T

he b

est thin

g to d

o in

this case is d

esign n

ot to

the p

ho

to b

ut to

the lo

go.

VIS

IT T

HE

TR

AC

K | R

AC

ING

INF

OR

MA

TIO

N | S

PE

CIA

L D

AY

S | N

EW

S | E

VE

NT

S | IN

SID

ER

| SH

OP

PIN

G

DO

WN

S

Bo

rrow

the

log

o’s ch

aracteristics

Double-line borders and scalloped cor-

ners of the logo are easy to transfer to the other sections and m

ake a classic look. B

ecause the logo determines the

look, photos can come and go. N

ote the w

ide contrast of typestyle between

Fairweather and D

OW

NS—

script/R

oman, sm

all/large, lowercase/upper-

case, yet similar line w

eights and excel-lent craftsm

anship combine beautifully.

Green and beige are secondary colors, one cool, one w

arm.

Page 16: Design a beautiful Web header - WordPress.comDesign a beautiful Web header 0645 Start by divvying up the space A Web header spans the page and is extremely shallow. Divide it into

Be

fore

&A

fter | w

ww

.bamagazine.com

5 of 5

De

sign

a b

ea

utifu

l We

b h

ea

de

r 06450645

De

sign

a b

ea

utifu

l We

b h

ea

de

r

Article

reso

urce

s

Co

lors

C5 M

15 Y55 K0

C50 M

40 Y65 K50

C0 M

35 Y100 K0

C0 M

0 Y0 K100

C100 M

0 Y100 K70

C15 M

20 Y45 K0

11

12

Golden Valley

country innN

EWS

• EVEN

TS • D

ININ

G

• AC

CO

MM

OD

ATIO

N

• FAC

ILITIES • TH

ING

S TO SEE

• LINK

S • D

IREC

TION

S • C

ON

TAC

T US

D&T

AR

CH

ITE

CT

S

PORTFO

LIO

CU

RRENT

PROJEC

TS •

AW

ARDS

REVIEWS

CO

NTAC

TU

S

VIS

IT T

HE

TR

AC

K | R

AC

ING

INF

OR

MA

TIO

N | S

PE

CIA

L D

AY

S | N

EW

S | E

VE

NT

S | IN

SID

ER

| SH

OP

PIN

G

DO

WN

S

1a2 1b

GO

LDEN

VALLEY3

4

6

1112

1314

1516

14

5789

10 c

16 15 14 13

6 10b

10a

Type

face

s

1 (a–b

) Centaur SC

& O

sF a) 28.25 pt, b) 19.5 pt

2 Vectora 55 Rom

an | 6.5 pt

3 Blackcurrant

4 ITC B

auhaus Bold

5 Helvetica N

eue 85 Heavy | 38 pt

6 Helvetica C

ondensed Light | 8.25 pt

7 Sloop ScriptOne | 22.5 pt

8 Goudy O

ld Style | 32.5 pt

9 Clarendon Light | 8.5 pt

Ima

ge

s

10 (a–c) iStockphoto.com

| a b c

Be

fore

& A

fter m

ag

azin

e

Befo

re & A

fter has b

een sh

aring its p

ractical app

roach

to

graph

ic design

since 1990. B

ecause o

ur m

od

ern w

orld

h

as mad

e design

ers of u

s all (ready o

r no

t), Befo

re &

After is d

edicated

to m

aking grap

hic d

esign u

nd

erstand

-ab

le, usefu

l and

even fu

n fo

r everyon

e.

Joh

n M

cWa

de

Pu

blish

er and

creative directo

rG

ay

e M

cWa

de

Asso

ciate pu

blish

erV

ince

nt P

ascu

al Staff d

esigner

De

xte

r Ma

rk A

be

llera

Staff design

er

Design

adviso

r Gw

en

Am

os

Be

fore

& A

fter m

ag

azin

e323 Lin

coln

Street, Ro

seville, CA

95678 Te

lep

ho

ne

916-784-3880 Fax 916-784-3995E

-mail m

ailbo

x@b

amagazin

e.com

w

ww

http

://ww

w.b

amagazin

e.com

Co

py

righ

t ©2

00

6 B

efo

re &

Afte

r ma

ga

zine

IS

SN

10

49

-00

35

. All rig

hts re

serv

ed

.

You

may p

ass alon

g a free cop

y of th

is article to o

thers

by clickin

g here. Yo

u m

ay no

t alter this article, an

d yo

u

may n

ot ch

arge for it. Yo

u m

ay qu

ote b

rief section

s fo

r review; p

lease credit B

efore &

After m

agazine, an

d

let us kn

ow

. To lin

k Befo

re & A

fter magazin

e to yo

ur

Web

site, use th

is UR

L: http

://ww

w.b

amagazin

e.com

. Fo

r all oth

er perm

ission

s, please co

ntact u

s.

Su

bscrib

e to

Be

fore

& A

fter

Did

you

learn fro

m th

is article? Sub

scribe, an

d

beco

me a m

ore cap

able, co

nfi

den

t design

er

for p

enn

ies per article. To

learn m

ore, go

to

http

://ww

w.b

amagazin

e.com

/Sub

scribe

E-m

ail this article

To p

ass alon

g a free cop

y of th

is article to

oth

ers, click here.

Join

ou

r e-list

To b

e no

tified

by e-m

ail of n

ew articles as

they b

ecom

e available, go

to

http

://ww

w.b

amagazin

e.com

/email