Your website’s header makes an immediate impact on your user so it’s important to get it right. Think about what you’re trying to achieve, what’s the first thing you want to tell your users when they visit your site, what will intrigue them and get them to read further?
A header gives you room to play and be creative, especially on the homepage, and there are a number of techniques you can use to connect with your user.
Take a look at these 5 different types of header design and see how the examples have used them creatively to make an impact.
The Huge Header
Takes up a lot of room and can be risky as you’re taking up valuable space, but done right it looks great and makes an impact.
Chris Hortsch
enRoute Film Festival
Simple Art
Alpha Multimedia Solutions
The Web App
Web apps generally want to show a screenshot of their product with a prominent call to action button that will immediately entice users to find out more or signup.
Ekklesia 360
PlanHQ
Campaign Monitor
Wufoo
Traffik
The Illustrated Character
Illustrated characters are currently a popular trend. They add character, personality and a sense of friendliness to your website.
MailChimp
Digimurai
Enrichment
Wishlistr
Cleverful
The Portfolio Screenshots
If you want to show off your work then use this layout to show different examples of work alongside a tagline introducing yourself.
Tony Greer
Mark Lamb
OnWired
Design Moves Me
James Lai Creative
The Carousel
Carousels allow you to fit in more information into the header with a slider effect. Useful for websites with many features or for showing off your portfolio. With the Javascript libraries currently available they are very easy to implement.
Rob Palmer
Icon Designer
Jason Larose Design
Benjamin David
Paramore|Redd
Related content
30 Creative Illustrative Website Headers
25 Stylish Website Footer Designs
20 Websites to Help You Master User Interface Design
Saturday, February 20, 2010
What's New
WebMerge 2.3
WebMerge 2.3, an upgrade to its popular tool for Mac OS and Windows that generates static Web pages from database or spreadsheet data. The new version provides a convenient TagMaker utility for point-and-click tag writing, search-and-replace options in field tags, preset delimiters for parsing affiliate program data feeds, a debugger tool, and other new features. Free trial version available.
Web Design FAQs
the ten most frequently asked questions
The original idea of this site was to provide information for graphic designers moving from traditional print disciplines to those of the World Wide Web. Over the years, it has gone a bit further than that and people from a wide variety of backgrounds, as well as complete novices, write to me to say thanks or ask where they can find out more information about something I've written. I answer as many as I can.
Amongst that mail, there are some questions that keep cropping up again and again and although I've probably answered them before, I thought that I should put the ten most frequently asked ones all together in one article. Hopefully, that will get them out of the way once and for all!
These are in no particular order
How can I make sure that my pages look the same in every browser?
I can answer this in two ways.
The facetious answer is to create your complete page in an image editor and make one whopping, great GIF or JPEG of it. That's the only way you will get the same layout in every browser, but it has so many drawbacks in terms of file size and accessibility that it isn't worth considering.
Designers coming from a print background are used to their designs being absolute, unmoving, set in stone (or paper). The fact is that the Web doesn't allow that degree of control, there are far too many variables – browsers, computers, screens etc. You can't and shouldn't expect your designs to look the same in every browser. They should, however, look acceptable in the majority of browsers and the information accessible, even at a basic level, in all of them.
How can I stop people stealing images from my page?
If you have an image that somebody really wants on your Web page, there is absolutely nothing you can do to stop them doing a screen capture and cropping the image. Disabling the right mouse button (on PCs) is totally futile because pressing F13 (Print Screen) sends everything on the screen to the clipboard where it can be pasted into any graphics editing program.
Most Macs don't have a right mouse button and there are many ways to capture what is on the screen with key combos, in a specific window or from a selected area.
The best you can do is to put a prominent copyright notice on the image, or closely adjacent to it, which will discourage any reputable Web designer from repurposing it. If you can prove that the picture is your copyright, you can sue for infringement if it comes to that.
What do I have to do to get my site listed in search engines?
Nothing!
Eventually, every site gets visited and indexed by search engine 'robots', but if you want it done quickly, you should submit your site URL to Google. Google is by far the most popular search facility and unless you want to target a specific, special interest search engine, getting listed there is your first priority. It's pretty well hidden on the Google site, but here are their instructions for getting listed. If you want a good ranking on Google too (and who doesn't!), check out this ranking information page too.
Do I really have to learn HTML to design Web pages?
Print designers don't need to learn PostScript. Their page layout editors, Quark XPress, Adobe InDesign, etc., take care of all that. The PostScript page description language has been around since the mid '80s and can produce highly accurate artwork for any type of printing.
HTML is not a page description language, it is a markup language that's used to describe how text will appear in a Web browser. Okay, you can place elements other than text on a Web page but the HTML just provides links to the images or Flash files, they aren't actually part of the HTML.
So, HTML provides the framework upon which you can 'style' a Web page using Cascading Style Sheets. Although the behaviour of HTML and Cascading Style Sheets are fairly well documented and understood, the different browsers each speak their own dialects of HTML and CSS so the 'expected' behaviors can't be relied upon.
Good as they are, modern WYSIWYG editors are still not at a level of sophistication where they can accommodate all the browser dialects. It takes human intervention to produce Web pages that are solid and dependable and that requires a good working knowledge of HTML and CSS. Without that knowledge, you are at the mercy of the programs, their foibles and bugs.
Wouldn't you rather be in control?
Why can't I use on my Web pages?
This question comes up frequently from newbies. You can use whatever font you like on your Web pages but, as I mentioned above, HTML can only provide the name of the font, it can't describe the character shapes. If the person viewing your page doesn't have that font installed on their computer, they can't possibly see it because there is no outline description to draw the shape of the font. That's why, in Web design, you have to specify a range of fonts. For instance, if my font spec was 'Futura, Geneva, Arial, sans-serif', very few people would see my first choice, Futura as it is not a commonly installed font so the browser jumps to the next one. Geneva is common on Macs, so Mac users will see the text in that font. Arial, is common on Macs and PCs but because I have put Geneva in front of Arial, it takes precedence on Macs. PC owners will see the Arial. San-serif is a 'catch-all' for computers that don't have any of the preceding fonts installed and displays whatever the default sans-serif font is for the system. As the Web is now accessible from PDAs, mobile phones and other non-computer devices, the incidence of 'oddball', less common, typefaces will only increase.
If you do want to use a specific font for items like logos, menu buttons or headlines, you can make a GIF file of the type set in a graphics editor but you should remember to echo the words in the image's 'alt' attribute so that the words are available for screen reading programs and search engine robots.
Why do my colors look so different on my friend's machine?
In print, Pantone swatches are commonly used to standardise colours. Pantone swatches show how a range of standard ink colours mix in various proportions and if those proportions of ink are mixed by the printer, you stand a pretty good chance of getting something like what you anticipated but not always. The same ink printed on different materials will not reflect light in quite the same way. Pantone 072 looks completely different on glossy and matt paper.
The color on a Web page are determined by mixing proportions of red, green and blue light inside the monitor. Unlike the standard ink colors, there are no standard red, green and blue light sources. The red, green and blue on one monitor is unlikely to be exactly the same as on another one, even if it's the same model – and the colours change over time. Any color you mix from those non-standard ones is unlikely to match from one monitor to another although it is possible to get them closer by tweaking the proportions slightly.
Out of the box, monitors will have a fairly arbitrary colour response. You can, and should, calibrate your monitor to behave more predictably using some kind of calibration software or hardware. All Macs and some PCs (depending on the video card) have basic color calibration software built-in. The default color profiles on Macs are intended for print work and are significantly different from those required for Web design. If you do both print and Web work, you need to create appropriate colour profiles and switch between them – gamma 1.8 for print and 2.2 for Web (and Video).
If your computer is a PC with a cheap monitor, it is really only suitable for non-critical office work and you really should think about getting a monitor/video card that can be adjusted to a more accurate color standard.
What is the size limit for a Web page?
The short answer is, as small as possible.
The size (bytecount) of your page, including any images, determines how long it takes to download. The question really is, how long will people wait for the page to download and render? Obviously it depends on the speed of their connection. A computer on a 500k broadband line is going to download about ten times faster that one on a 56k dial-up. You don't need to worry too much about the broadband users, it's those folk using the 56k modems that you have to consider, there still are a lot of them. Research has shown that once you go over 10 seconds, people start to get fidgety and start moving off elsewhere. So, try to stay within the 50k/10 seconds mark.
It is possible to mask longer downloads by keeping large images down off the bottom of the visible browser area. If you specify the image's pixel dimensions, the text loads up around the images and can be read whilst the images are still downloading. If you don't specify an image's height and width in pixels, the images have to download completely before the text appears. If there is something interesting to read on a page after a few seconds, people don't notice that the images (out of sight) are still loading up and you can get off with a heavier page.
What screen size should I design for?
The most common screen size is 800 x 600 pixels closely followed by the slightly larger 1024 x 768 – according to TheCounter.com, so you should try to keep the main parts of your page within a width of about 720-760 pixels. This browser grid shows the working areas although the stats are now out of date.
Having said that, increasingly more people are using handheld devices to access the web. A typical PDA has a screen resolution of about 240 x 320 (HP iPAQ) to 320 x 480 (Sony Clié). If you want people to access your pages with such devices, you have to take those smaller resolutions into account and design flexible layouts using percentages rather than pixels for all your layout elements and type sizes.
Do I still have to use the 'Web Safe' palette?
A few years ago, when most monitors used 256 colors, it was important to use the Web Safe palette to avoid nasty dithering. Now that nearly everyone has monitors that can display thousands or millions of colors, the Web palette is not so relevant. In fact, on screens that only have 16-bit color, the Web Safe colors are not 'safe' anyway, and dither – although you would have to look pretty close to notice.
I still use the Web Safe palette, partly out of habit and partly due to the fact that I haven't found a better one. Choosing colors from a palette is much easier than 'mixing' them from raw RGB values – but there is nothing to stop you from 'tweaking' those colours if you want them darker, lighter or shifted in tone. A palette is just a convenient starting point that provides a more manageable number of choices that you can later expand upon.
What's wrong with using tables for layout?
Most sites still use tables for Web page layouts. They are easy to understand and fairly predictable but their use for laying out a page is now frowned upon. Various reasons are cited for not using tables for layout – most often to do with the complexity of the markup and the accessibility of the content. Where these reasons are not unimportant, I think the best reason is that they are so limiting.
The preferred alternative, of course, is CSS-P, which until recently has been reasonably well supported in browsers but poorly in the popular WYSIWYG editors. That's changing fast now that the two leading editors, Dreamweaver and GoLive, have been updated to take CSS-P seriously.
As you may know, I changed this site from tables to CSS-P in the middle of last year. When I started doing it, I had to use a text editor as none of the WYSIWYG editors could cope. Some people might disagree, but using a text editor, pure as it might be, is slower and more liable to to produce errors – certainly for a clumsy, dyslexic typist like me. As a 'visual' designer, I like to see what I'm doing and have that constant, immediate feedback. Now, I'm back to my trusty (if not totally bug-free) GoLive for the main part of the work and just go into source mode to tidy things up.
The ability to put elements anywhere on the page, overlapping text over images, images over images and playing tricks with the div border properties, sure beats the 'one-arm-behind-the-back' restrictions of tables.
That's the REAL reason!
WebMerge 2.3
WebMerge 2.3, an upgrade to its popular tool for Mac OS and Windows that generates static Web pages from database or spreadsheet data. The new version provides a convenient TagMaker utility for point-and-click tag writing, search-and-replace options in field tags, preset delimiters for parsing affiliate program data feeds, a debugger tool, and other new features. Free trial version available.
Web Design FAQs
the ten most frequently asked questions
The original idea of this site was to provide information for graphic designers moving from traditional print disciplines to those of the World Wide Web. Over the years, it has gone a bit further than that and people from a wide variety of backgrounds, as well as complete novices, write to me to say thanks or ask where they can find out more information about something I've written. I answer as many as I can.
Amongst that mail, there are some questions that keep cropping up again and again and although I've probably answered them before, I thought that I should put the ten most frequently asked ones all together in one article. Hopefully, that will get them out of the way once and for all!
These are in no particular order
How can I make sure that my pages look the same in every browser?
I can answer this in two ways.
The facetious answer is to create your complete page in an image editor and make one whopping, great GIF or JPEG of it. That's the only way you will get the same layout in every browser, but it has so many drawbacks in terms of file size and accessibility that it isn't worth considering.
Designers coming from a print background are used to their designs being absolute, unmoving, set in stone (or paper). The fact is that the Web doesn't allow that degree of control, there are far too many variables – browsers, computers, screens etc. You can't and shouldn't expect your designs to look the same in every browser. They should, however, look acceptable in the majority of browsers and the information accessible, even at a basic level, in all of them.
How can I stop people stealing images from my page?
If you have an image that somebody really wants on your Web page, there is absolutely nothing you can do to stop them doing a screen capture and cropping the image. Disabling the right mouse button (on PCs) is totally futile because pressing F13 (Print Screen) sends everything on the screen to the clipboard where it can be pasted into any graphics editing program.
Most Macs don't have a right mouse button and there are many ways to capture what is on the screen with key combos, in a specific window or from a selected area.
The best you can do is to put a prominent copyright notice on the image, or closely adjacent to it, which will discourage any reputable Web designer from repurposing it. If you can prove that the picture is your copyright, you can sue for infringement if it comes to that.
What do I have to do to get my site listed in search engines?
Nothing!
Eventually, every site gets visited and indexed by search engine 'robots', but if you want it done quickly, you should submit your site URL to Google. Google is by far the most popular search facility and unless you want to target a specific, special interest search engine, getting listed there is your first priority. It's pretty well hidden on the Google site, but here are their instructions for getting listed. If you want a good ranking on Google too (and who doesn't!), check out this ranking information page too.
Do I really have to learn HTML to design Web pages?
Print designers don't need to learn PostScript. Their page layout editors, Quark XPress, Adobe InDesign, etc., take care of all that. The PostScript page description language has been around since the mid '80s and can produce highly accurate artwork for any type of printing.
HTML is not a page description language, it is a markup language that's used to describe how text will appear in a Web browser. Okay, you can place elements other than text on a Web page but the HTML just provides links to the images or Flash files, they aren't actually part of the HTML.
So, HTML provides the framework upon which you can 'style' a Web page using Cascading Style Sheets. Although the behaviour of HTML and Cascading Style Sheets are fairly well documented and understood, the different browsers each speak their own dialects of HTML and CSS so the 'expected' behaviors can't be relied upon.
Good as they are, modern WYSIWYG editors are still not at a level of sophistication where they can accommodate all the browser dialects. It takes human intervention to produce Web pages that are solid and dependable and that requires a good working knowledge of HTML and CSS. Without that knowledge, you are at the mercy of the programs, their foibles and bugs.
Wouldn't you rather be in control?
Why can't I use on my Web pages?
This question comes up frequently from newbies. You can use whatever font you like on your Web pages but, as I mentioned above, HTML can only provide the name of the font, it can't describe the character shapes. If the person viewing your page doesn't have that font installed on their computer, they can't possibly see it because there is no outline description to draw the shape of the font. That's why, in Web design, you have to specify a range of fonts. For instance, if my font spec was 'Futura, Geneva, Arial, sans-serif', very few people would see my first choice, Futura as it is not a commonly installed font so the browser jumps to the next one. Geneva is common on Macs, so Mac users will see the text in that font. Arial, is common on Macs and PCs but because I have put Geneva in front of Arial, it takes precedence on Macs. PC owners will see the Arial. San-serif is a 'catch-all' for computers that don't have any of the preceding fonts installed and displays whatever the default sans-serif font is for the system. As the Web is now accessible from PDAs, mobile phones and other non-computer devices, the incidence of 'oddball', less common, typefaces will only increase.
If you do want to use a specific font for items like logos, menu buttons or headlines, you can make a GIF file of the type set in a graphics editor but you should remember to echo the words in the image's 'alt' attribute so that the words are available for screen reading programs and search engine robots.
Why do my colors look so different on my friend's machine?
In print, Pantone swatches are commonly used to standardise colours. Pantone swatches show how a range of standard ink colours mix in various proportions and if those proportions of ink are mixed by the printer, you stand a pretty good chance of getting something like what you anticipated but not always. The same ink printed on different materials will not reflect light in quite the same way. Pantone 072 looks completely different on glossy and matt paper.
The color on a Web page are determined by mixing proportions of red, green and blue light inside the monitor. Unlike the standard ink colors, there are no standard red, green and blue light sources. The red, green and blue on one monitor is unlikely to be exactly the same as on another one, even if it's the same model – and the colours change over time. Any color you mix from those non-standard ones is unlikely to match from one monitor to another although it is possible to get them closer by tweaking the proportions slightly.
Out of the box, monitors will have a fairly arbitrary colour response. You can, and should, calibrate your monitor to behave more predictably using some kind of calibration software or hardware. All Macs and some PCs (depending on the video card) have basic color calibration software built-in. The default color profiles on Macs are intended for print work and are significantly different from those required for Web design. If you do both print and Web work, you need to create appropriate colour profiles and switch between them – gamma 1.8 for print and 2.2 for Web (and Video).
If your computer is a PC with a cheap monitor, it is really only suitable for non-critical office work and you really should think about getting a monitor/video card that can be adjusted to a more accurate color standard.
What is the size limit for a Web page?
The short answer is, as small as possible.
The size (bytecount) of your page, including any images, determines how long it takes to download. The question really is, how long will people wait for the page to download and render? Obviously it depends on the speed of their connection. A computer on a 500k broadband line is going to download about ten times faster that one on a 56k dial-up. You don't need to worry too much about the broadband users, it's those folk using the 56k modems that you have to consider, there still are a lot of them. Research has shown that once you go over 10 seconds, people start to get fidgety and start moving off elsewhere. So, try to stay within the 50k/10 seconds mark.
It is possible to mask longer downloads by keeping large images down off the bottom of the visible browser area. If you specify the image's pixel dimensions, the text loads up around the images and can be read whilst the images are still downloading. If you don't specify an image's height and width in pixels, the images have to download completely before the text appears. If there is something interesting to read on a page after a few seconds, people don't notice that the images (out of sight) are still loading up and you can get off with a heavier page.
What screen size should I design for?
The most common screen size is 800 x 600 pixels closely followed by the slightly larger 1024 x 768 – according to TheCounter.com, so you should try to keep the main parts of your page within a width of about 720-760 pixels. This browser grid shows the working areas although the stats are now out of date.
Having said that, increasingly more people are using handheld devices to access the web. A typical PDA has a screen resolution of about 240 x 320 (HP iPAQ) to 320 x 480 (Sony Clié). If you want people to access your pages with such devices, you have to take those smaller resolutions into account and design flexible layouts using percentages rather than pixels for all your layout elements and type sizes.
Do I still have to use the 'Web Safe' palette?
A few years ago, when most monitors used 256 colors, it was important to use the Web Safe palette to avoid nasty dithering. Now that nearly everyone has monitors that can display thousands or millions of colors, the Web palette is not so relevant. In fact, on screens that only have 16-bit color, the Web Safe colors are not 'safe' anyway, and dither – although you would have to look pretty close to notice.
I still use the Web Safe palette, partly out of habit and partly due to the fact that I haven't found a better one. Choosing colors from a palette is much easier than 'mixing' them from raw RGB values – but there is nothing to stop you from 'tweaking' those colours if you want them darker, lighter or shifted in tone. A palette is just a convenient starting point that provides a more manageable number of choices that you can later expand upon.
What's wrong with using tables for layout?
Most sites still use tables for Web page layouts. They are easy to understand and fairly predictable but their use for laying out a page is now frowned upon. Various reasons are cited for not using tables for layout – most often to do with the complexity of the markup and the accessibility of the content. Where these reasons are not unimportant, I think the best reason is that they are so limiting.
The preferred alternative, of course, is CSS-P, which until recently has been reasonably well supported in browsers but poorly in the popular WYSIWYG editors. That's changing fast now that the two leading editors, Dreamweaver and GoLive, have been updated to take CSS-P seriously.
As you may know, I changed this site from tables to CSS-P in the middle of last year. When I started doing it, I had to use a text editor as none of the WYSIWYG editors could cope. Some people might disagree, but using a text editor, pure as it might be, is slower and more liable to to produce errors – certainly for a clumsy, dyslexic typist like me. As a 'visual' designer, I like to see what I'm doing and have that constant, immediate feedback. Now, I'm back to my trusty (if not totally bug-free) GoLive for the main part of the work and just go into source mode to tidy things up.
The ability to put elements anywhere on the page, overlapping text over images, images over images and playing tricks with the div border properties, sure beats the 'one-arm-behind-the-back' restrictions of tables.
That's the REAL reason!
വെബ് designing
Web Design
Web design is the creation of Web pages and sites using HTML, CSS, JavaScript and other Web languages. Web design is just like design in general: it is the combination of lines, shapes, texture, and color to create an aesthetically pleasing or striking look. Web design is the work of creating design for Web pages.
Web design is the creation of Web pages and sites using HTML, CSS, JavaScript and other Web languages. Web design is just like design in general: it is the combination of lines, shapes, texture, and color to create an aesthetically pleasing or striking look. Web design is the work of creating design for Web pages.
Subscribe to:
Posts (Atom)