Website Header Design: The First Thing Your Visitors See
A web site header is the first thing that visitors see when they visit your website, you can say it is the cover page for your website, and just like any cover page of a magazine it has to look interesting, beautiful and informative.
People usually say that a picture is worth a thousand words and i believe that to be true because a header say a lot about your website in more than a thousand words at first glance and gives your webpage a theme.
People tend to get more attracted by pictures rather than words so if one uses a good website header then visitors will enjoy the experience of visiting your website and will want to come back again.
Website headers can be categorized either by the type of image and graphic effects used or by the size they occupy on the website page. There are six types of website headers based on the type of image used information displayed and visual effects used:
1. Stationery or Static headers
These are headers that display pictures and texts that have no motion i.e. they are not animated. Pictures used are mostly in GIF, JPEG or PNG format. They can be designed using graphic design software like Adobe Photoshop, Gimp and Corel Draw.
They are not that much catching to the eyes, it’s like looking at a television set that displays a single image all day, but if used effectively they can really create a big impression. So one needs to look for a qualified graphics designer who knows how to bring out the best effects on static photos to properly display your information using texts.
2. Animated headers
These type of headers are created using animated pictures and texts. They can be designed using graphic design software like Adobe Photoshop, Corel Draw, Gimp and Adobe Illustrator.
The pictures are then imported to animation creation softwares like adobe fireworks to change them from static to motion headers. Pictures used in these type of headers usually are in the GIF picture format. These are usually fun to watch but animations usually tend to not have smooth transitions.
3. Illustrated characters
These type of website headers employ the use of animated characters to add friendliness to your website since visitor can interact with the characters by playing with them or asking them questions.
4. Flash headers
Flash animated headers are created using graphic design software then the static images can be imported to flash creation software such as adobe flash to be converted to animated text and pictures.
They tend to have a smoother transition and have rich graphics. Flash headers can further be categorised into two based on how the animations start and continue showing:
• Start up animations
These are animations which are displayed immediately after the website header loads and terminate animation after one loop.
• Continuous animations
These are animations that which start animating immediately after the start up animation has stopped. They usually keep on looping until when one leaves the webpage.
5. Portfolio headers
This header can be used to display the works that your company has done by displaying different screenshots of your work either using static images or animated images.
6. Web app headers
Web app headers are used to display screen shots of your company's product and services. They can be very attractive if used properly and one can integrate a call-to-action button that coaxes the user to find out more about the products being offered or end up signing so as to get access to your company's services.
Based on the size they occupy on a web page website headers can also be categorised into the following:
- Fixed size headers
These headers occupy a certain fixed size on your web pages on your visitors browser the choice of size is yours. But it should not be too big until it makes the whole webpage look ugly.
- Extendible size headers
These headers extend their size across the whole webpage irrespective of the screen resolution used by the visitor.
Comments (0)
Mar 21 2012
Posted: under Gwt - GlobalWorldTech, Web Design, Web Development.
Tags: Header Design, Header Designs For Websites, Web Header Design, Website Header Designs, Website Header Images, Website Headers








