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
7/29/2019 Before and After 0645
2/16
Before&After
2of10
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, 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
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.
7/29/2019 Before and After 0645
3/16
Before&After
3of10
XiBAmagazine.com U
Design a beautiful Web header 0645
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
NEWS EVENTS DINING ACCOMMODATION FACILITIES THINGS TO SEE LINKS DIRECTIONS CONTACT US
Golden Valleycountry inn
Design a beautiful Web header 3of10
7/29/2019 Before and After 0645
4/16
Before&After
4of10
XiBAmagazine.com U
Design a beautiful Web header 0645
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.
Design a beautiful Web header 4of10
7/29/2019 Before and After 0645
5/16
Before&After
5of10
XiBAmagazine.com U
Design a beautiful Web header 0645
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
Design a beautiful Web header 5of10
7/29/2019 Before and After 0645
6/16
Before&After
6of10
XiBAmagazine.com U
Design a beautiful Web header 0645
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 Valleycountry 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 6of10
7/29/2019 Before and After 0645
7/16
Before&After
7of10
XiBAmagazine.com U
Design a beautiful Web header 0645
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.
Design a beautiful Web header 7of10
7/29/2019 Before and After 0645
8/16
Before&After
8of10
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
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.
Design a beautiful Web header 8of10
7/29/2019 Before and After 0645
9/16
Before&After
9of10
XiBAmagazine.com U
Design a beautiful Web header 0645
Design a beautiful Web header 9of10
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
Golden Valleycountry inn
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
7/29/2019 Before and After 0645
10/16
Before&After
10of10 | Printing formats
XiBAmagazine.com U
Design a beautiful Web header 0645
Design a beautiful Web header 10of10
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
7/29/2019 Before and After 0645
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.
Format: Landscape
Page Size: Fit to Page
Save
Presentation format or
Paper-saver format
For presentation formatPrint: (Specify pages 110)
7/29/2019 Before and After 0645
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.
7/29/2019 Before and After 0645
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
7/29/2019 Before and After 0645
14/16
Before&After|www.bamagazine.com
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
7/29/2019 Before and After 0645
15/16
Before&After|www.bamagazine.com
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.
7/29/2019 Before and After 0645
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