Design a beautiful Web header

Before&After BAmagazine.com ® i U X Golden Valley country inn NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US Design a beautiful Web header Create an effective header the easy way Just think in sections Continued  Continued  Design a beautiful Web header 0645 Before&After BAmagazine.com ® i U X Design a beautiful Web header Design an effective header the easy way Just think in sections Golden Valley country inn NEWS EVENTS • • DINING Golden Valley country inn NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US Welcome to Golden Valley The Golden Valley Country Inn offers a tranquil experience consisting of Texture and flasp comfortable accommodation, excellent food, friendly atmosphere and a Net exating end mist of it wide range of activities Quatum dolut praessed magnisis niamet, quam snooling Spaff forl isn’t cubular but quastic, leam quamet iurem acipit iurer autem dolor si enim ipisl etuer sum dolorperat restart that can’t prebast la augiam duissim dolore It’s tope, this fluant chasible Texture and flasp net exating end mist of it snooling Spaff forl isn’t Silk, shast, lape and behast the thin chack “It has larch cubular but quastic, leam restart that can’t prebast It’s tope, this fluant to say fan.” Why? Elesara and chasible Silk, shast, lape and behast the thin chack “It has larch to say order is fay of alm fan.” Why? Elesara and order is fay of alm A card whint not oogum or bont Pretty simple, glead A card whint not oogum or bont Pretty simple, glead and tarm Texture and tarm Texture and flasp and flasp net exating end mist of it snooling Spaff forl isn’t cubular but net exating end mist of it 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.” snooling Spaff forl isn’t cubular but quastic, leam restart that can’t prebast Why? Elesara and order is fay of alm A card whint not oogum or bont It’s tope, this fluant chasible Spaff forl isn’t cubular but quastic, leam restart that can’t prebast Silk, shast, lape and behast Big job, shallow space The header spans the page and is often the only non-text visual element • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US 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 by building three sections, one for each function, and unifying them with visual similarities Here’s how to put that together  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Start by divvying up the space A Web header spans the page and is extremely shallow Divide it into three sections: name, image and navigation links Work on each one separately 1) Name 2) Image Golden Valley country inn NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US 3) Navigation 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 Not ideal: Halves Better: Asymmetrical  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Find an expressive photo A 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  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Color the sections Sample 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 separates Dark to light Light Dark Low contrast unites 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 sections, the higher the energy; low contrasts are more peaceful (but usually less memorable) Dark Light Medium Dark  of 10  Design a beautiful Web header 0645 Before&After Design a beautiful Web header ® BAmagazine.com of 10 i U X Set the name and navigation If 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 Golden Valley country inn NEWS Alternating colors— green type on gold and gold type on green— help unify the sections • EVENTS • DINING • ACCOMMODATION • FACILITIES Keep the setting simple (1) A very long name must be set in two or more lines With no ascenders or descenders to collide, uppercase type is ideal for this In this case, a quiet, elegant typeface is a good complement for the beautiful, painterly image (2) Avoid entertaining but scene-stealing typefaces and (3) typefaces with good but incompatible styles • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US Golden Valley country inn GOLDEN VALLEY  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Use the opposite color Here, 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 Dark to light D&T ARCHITECTS P ORT FO LI O • C UR RE NT PR OJE CT S D&T ARCHITECTS PO RT FO LI O • C UR R E NT P RO J E C TS • AWAR D S • REVIEWS • C O N TAC T U S Blue from the photo looks correct but doesn’t convey the right character • AWARD S • REVIEWS • CONTA C T 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 yellow) and therefore have very high contrast and energy Violet and yellow have the highest value (dark-light) contrast on the color wheel  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Design to the logo or other graphic Fairweather Downs has used its logo more or less unchanged for five decades That’s a classic! The best thing to in this case is design not to the photo but to the logo DOWNS VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING Green and beige are secondary colors , one cool, one warm Borrow the logo’s characteristics Double-line borders and scalloped corners 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/uppercase, yet similar line weights and excellent craftsmanship combine beautifully 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 dialog, select Inverse Rounded, specify a Size (here 0p9) and click OK  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com of 10 i U X Article resources Typefaces 1a 1b Golden Valley country inn NEWS • EVENTS • DINING • ACCOMMODATION 10a • FACILITIES • THINGS TO SEE • LINKS • (a–b) Centaur SC & OsF a) 28.25 pt, b) 19.5 pt 11 C5 M15 Y55 K0 Vectora 55 Roman | 6.5 pt 12 • CONTACT US DIRECTIONS Blackcurrant 13 C0 M35 Y100 K0 Helvetica Neue 85 Heavy | 38 pt GOLDEN VALLEY Helvetica Condensed Light | 8.25 pt Sloop ScriptOne | 22.5 pt D&T C50 M40 Y65 K50 ITC Bauhaus Bold 11 12 Colors 15 C100 M0 Y100 K70 16 C15 M20 Y45 K0 Goudy Old Style | 32.5 pt 10b 14 C0 M0 Y0 K100 Clarendon Light | 8.5 pt ARCHITECTS P O RT F O L I O • CURRENT PROJECTS • AWA R D S Images • REVIEWS • C O N TA C T U S 10 (a–c) iStockphoto.com | a b c 13 14 10c DOWNS VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING 14 15 16  of 10  Design a beautiful Web header 0645 Before&After ® Design a beautiful Web header BAmagazine.com 10 of 10 Subscribe to Before & After i U X 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 understandable, useful and even fun for everyone 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 John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer E-mail this article To pass along a free copy of this article to others, click here Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Join our e-list To be notified by e-mail of new articles as they become available, go to http://www.bamagazine.com/email 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  10 of 10 | Printing formats  Design a beautiful Web header 0645 Before&After BAmagazine.com ® i U X 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 For presentation format Print: (Specify pages 1–10) For paper-saver format Print: (Specify pages 12–16) Print Format: Landscape Page Size: Fit to Page Save Presentation format or Paper-saver format  Back | Paper-saver format  DINING • EVENTS • ACCOMMODATION • • THINGS TO SEE • EVENTS FACILITIES DINING LINKS • • CONTACT US • DINING DIRECTIONS Texture and flasp • ACCOMMODATION • • ACCOMMODATION FACILITIES • FACILITIES THINGS TO SEE • • THINGS TO SEE LINKS • • LINKS DIRECTIONS • • DIRECTIONS CONTACT US • CONTACT US Design a beautiful Web header 0645  • Golden Valley country inn NEWS Design a beautiful Web header • • Golden Valley country inn NEWS EVENTS 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 to say fan.” Why? Elesara and the thin chack “It has larch 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 It’s tope, this fluant chasible restart that can’t prebast Silk, shast, lape and behast of Before&After | www.bamagazine.com 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 by building three sections, one for each function, and unifying them with visual similarities Here’s how to put that together • Create an effective header the easy way Just think in sections • Golden Valley country inn NEWS Welcome to Golden Valley The 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 cubular but quastic, leam restart that can’t prebast It’s tope, this fluant Texture and flasp net exating end mist of it snooling Spaff forl isn’t 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 Why? Elesara and order is fay of alm A card whint not oogum or bont Silk, shast, lape and behast the thin chack “It has larch to say fan.” Spaff forl isn’t cubular but quastic, leam restart that can’t prebast Big job, shallow space The header spans the page and is often the only non-text visual element 0645 Design a beautiful Web header  Start by divvying up the space • DINING • ACCOMMODATION FACILITIES • THINGS TO SEE • LINKS • • CONTACT US 2) Image DIRECTIONS Not ideal: Halves Better: Asymmetrical 0645  EVENTS • A Web header spans the page and is extremely shallow Divide it into three sections: name, image and navigation links Work on each one separately 1) Name • Golden Valley country inn NEWS 3) Navigation 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 Find an expressive photo Design a beautiful Web header A 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 of Before&After | www.bamagazine.com 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 0645 Design a beautiful Web header  Light Dark Color the sections EVENTS • DINING • ACCOMMODATION FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US Golden Valley country inn GOLDEN VALLEY Dark Light Medium Dark Design a beautiful Web header 0645  Low contrast unites Dark to light Sample 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 separates 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 sections, the higher the energy; low contrasts are more peaceful (but usually less memorable) Set the name and navigation • Golden Valley country inn NEWS • If 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 Alternating colors— green type on gold and gold type on green— help unify the sections 3 of Before&After | www.bamagazine.com Keep the setting simple (1) A very long name must be set in two or more lines With no ascenders or descenders to collide, uppercase type is ideal for this In this case, a quiet, elegant typeface is a good complement for the beautiful, painterly image (2) Avoid entertaining but scene-stealing typefaces and (3) typefaces with good but incompatible styles 0645 Design a beautiful Web header  ARCHITECTS D&T Use the opposite color AWAR DS RE VI EWS • PO RTFO LI O • • C U R R E NT P R O J E C T S CONTA C T U S • AWA R D S • • C O N TA C T U S Dark to light REVIEWS 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 yellow) and therefore have very high contrast and energy Violet and yellow have the highest value (dark-light) contrast on the color wheel Design a beautiful Web header 0645  • Here, 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 CURR ENT P ROJ ECT S ARCHITECTS • D&T P ORT F OL I O Blue from the photo looks correct but doesn’t convey the right character Design to the logo or other graphic 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 of Before&After | www.bamagazine.com converts the single line to double (3) In the Object>Corner Effects dialog, select Inverse Rounded, specify a Size (here 0p9) and click OK VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING DOWNS Fairweather Downs has used its logo more or less unchanged for five decades That’s a classic! The best thing to in this case is design not to the photo but to the logo Green and beige are secondary colors , one cool, one warm Borrow the logo’s characteristics Double-line borders and scalloped corners 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/uppercase, yet similar line weights and excellent craftsmanship combine beautifully 0645 Design a beautiful Web header  1a • EVENTS • ACCOMMODATION FACILITIES • • 11 12 THINGS TO SEE • AWA R DS 11 C5 M15 Y55 K0 Colors 12 Typefaces (a–b) Centaur SC & OsF a) 28.25 pt, b) 19.5 pt 16 C15 M20 Y45 K0 15 C100 M0 Y100 K70 14 C0 M0 Y0 K100 13 C0 M35 Y100 K0 C50 M40 Y65 K50 Vectora 55 Roman | 6.5 pt • CONTACT US DIRECTIONS Blackcurrant 10a • ITC Bauhaus Bold Helvetica Neue 85 Heavy | 38 pt C ONTA C T US a b c Helvetica Condensed Light | 8.25 pt Goudy Old Style | 32.5 pt Sloop ScriptOne | 22.5 pt Clarendon Light | 8.5 pt • Images 10 (a–c) iStockphoto.com | • R EV I EW S 10b LINKS GOLDEN VALLEY C UR R E N T PR O J EC TS • Article resources DINING country inn • Golden Valley NEWS ARCHITECTS D&T • 0645  1b PORT F OL IO 13 14 10c DOWNS VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING Design a beautiful Web header 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 Copyright ©2006 Before & After magazine ISSN 1049-0035 All rights reserved Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Design advisor Gwen Amos John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer 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 understandable, useful and even fun for everyone 14 15 16 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 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 of Before&After | www.bamagazine.com http://www.bamagazine.com/email they become available, go to 0645 Design a beautiful Web header [...]... fluant chasible Why? Elesara and order is fay of alm A card whint not oogum or bont Silk, shast, lape and behast the thin chack “It has larch to say fan.” Spaff forl isn’t cubular but quastic, leam restart that can’t prebast Big job, shallow space The header spans the page and is often the only non-text visual element 0645 Design a beautiful Web header  Start by divvying up the space • DINING • ACCOMMODATION... CONTACT US • CONTACT US Design a beautiful Web header 0645  • Golden Valley country inn NEWS Design a beautiful Web header • • Golden Valley country inn NEWS EVENTS 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 to say fan.” Why? Elesara and the thin chack “It has larch order is fay... Design advisor Gwen Amos John McWade Publisher and creative director Gaye McWade Associate publisher Vincent Pascual Staff designer Dexter Mark Abellera Staff designer 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 understandable,... prebast It’s tope, this fluant Texture and flasp net exating end mist of it snooling Spaff forl isn’t 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... 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 It’s tope, this fluant chasible restart that can’t prebast Silk, shast, lape and behast 1 of 5 Before&After | www.bamagazine.com The header of a simple Web page is its most important visual element On many blogs, it’s the only visual element... an image that conveys its information in just a sliver The surprise is how easy this can be to find 2 of 5 Before&After | www.bamagazine.com 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. .. ACCOMMODATION FACILITIES • THINGS TO SEE • LINKS • • CONTACT US 2) Image DIRECTIONS Not ideal: Halves Better: Asymmetrical 0645  EVENTS • A Web header spans the page and is extremely shallow Divide it into three sections: name, image and navigation links Work on each one separately 1) Name • Golden Valley country inn NEWS 3) Navigation How big? As a rule, the name goes in the upper left and the navigation... 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 Find an expressive photo Design a beautiful Web header A beautiful photo is key to a beautiful header. .. 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 Copyright ©2006 Before & After magazine ISSN 1049-0035 All rights reserved Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail mailbox@bamagazine.com www http://www.bamagazine.com Design. .. Golden Valley country inn NEWS Welcome to Golden Valley The 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 cubular but quastic, leam restart that can’t