What is a good website?

Your team is creating tens, maybe even hundreds of websites every week, and one thing each of these websites has is a header. It’s usually the first thing visitors see when they visit a site. To help you build great headers for your sites, here are 11 tips to guide you.

1. Emphasize the most important elements

Consider the main thing that you want site visitors to do on a site, and make sure that this element is clearly visible in the header. For example, for nonprofit sites have a Donate Now icon; for restaurant sites, have a Book a Table icon.

In general, headers contain information that makes it easier for visitors to interact with the site, including:

·         Navigation links

·         Company logo

·         Call to action (Book a Table, Donate, Call Us)

·         Contact information

·         Social media icons

·         Tagline

·         Multi-language toggle

·         Shopping cart

Consider which of these are most important for your sites, and emphasize them.

2. Use clear, readable fonts

Text in a header must be readable at a glance. Use words that are short, when possible, and choose fonts that are clear and in relatively large font size. Headers are not usually the place for stylized fonts, as these can be harder to read.

 Headers must be readable at a glance, so use clear, readable fonts.

3. Use transparent headers for sites with impressive images

For sites that have dazzling images, try using a transparent header. This gives maximum exposure for images, while still showing important links.

If you’ve used a sticky header, having it transparent on the scroll can be a bit distracting, because as the images move, the header background will move too. To overcome this, add a colour to the background, so that scrolling images don’t distract users from the links.

For sites with dazzling images, try a transparent header.

4. Shrink the header on scroll to keep key info visible

The shrinking header is a great way of minimizing the number of space headers take when users scroll while keeping key site information accessible. They are particularly handy if you’ve designed a really big, impactful header. The shrinking header can show primary navigation elements and the logo, and change colour as users scroll.

5. Got a Shop? Put it at the top!

In eCommerce sites, place a shopping cart icon in the header. This enables site visitors to complete their purchase easily and in a single click, regardless of where they’ve gone on the site.

Hover / selected effects show users where they are in a site.

7. Choose a layout that flatters the logo

Headers are often the first thing site visitors see, so having the company logo is important. Choose a header layout that best suits the logo shape and style. In general, round and square logos look best in the centre; rectangular ones look good to the right or left side.

Round and square logos look great in the middle.

8. Use design elements that express the company’s personality

You can use colours and effects to express a company’s personality. For example, if a brand is light-hearted, having a floating effect when visitors hover the navigation can support this feeling. By contrast, a floating effect may be less appropriate for clients that offer professional services, such as lawyers and real estate agents. Use design effects that show a company’s personality. For a modern look that lets images and buttons shine, try an expandable header.

10. Change them up to keep your websites fresh

Headers are incredibly flexible, and have a huge impact on how your sites appear. That’s why changing header layouts is a great way of keeping websites looking fresh, with minimal effort.

You don’t need to choose a new template or alter the entire layout. Just change the header layout, make sure it looks great on all devices, and you’ve given your site a facelift, with minimal effort.

Visit our website: www.lgwdesignz.com or call us on +61390216892