How To Design a Functional Header and Footer

The header and footer are one of the most important design elements for your website. Your header is the first thing that visitors see on your website. The footer is where visitors will go in search of a way to contact you about your business or product. Designing these features to optimise your website and reflect your aesthetic will help you improve engagement and drive traffic to other important channels such as the social media. We have some tips to help you design a beautiful and functional header and footer.

Designing Your Header

It only takes a visitor 50 milliseconds to decide what they think of your website. The header plays a significant role in forming this opinion.

The first thing to incorporate into your header is your logo, as well as any slogans that you have (if you have any that is). Along with the graphic, you will want to add site navigation to the header area. A navigation section will allow visitors to your website to find the information that they need. Your navigation section should include the ‘about us’ section, contact information and any product or article categories if you are an E-Commerce store. Your header and navigation sections are static and will remain at the top of your website as your visitors browse the different pages. 

The header is the first impression that visitors get of your brand. You want to make it count. Keep every aspect of the header in line with your branding, including typography and colour choices. 

If your website is content-heavy, or if you have a catalogue of products, a search engine function in the header will improve the user experience. This section is also an opportunity to promote your other social media profiles. These widgets typically come included as an option with most website providers such as WordPress. 

For a sleek look, stick to the traditional logos of social media websites as opposed to creating anything new. These logos will make it easier for visitors to recognise the other platforms that they can follow you on, and it can help increase your following on social media. 

E-commerce websites will typically include a shopping cart function in the header section, allowing customers to check their basket. If your website has a visitor account function, then this will also be where you will want to place the sign-up and login functions.

One important consideration is making your header mobile-friendly. There are simple modifications that you can make to your website to optimise it for mobile browsing. Focus on your branding and allow for minimalistic design by adding a hidden navigation a.k.a “Hamburger”. This design will help your visitors to scroll through the navigation options as seamlessly as possible.

Good headers

Here you can see some of the examples of good headers. There is essentially nothing wrong with them and they stick to the mentioned rules.

Nice headers

Header gone wrong

And here something did not work out completely 🙁 Check it and make opinion yourself. Feels like 90ties doesn’t it?

Confusing header

Designing Your Footer

A footer is essentially a smaller header that appears at the bottom of your website page. Just like a header, the footer is a permanent fixture that remains in place as visitors make their way between different pages on your site. The footer is a prime spot of real estate and the perfect opportunity to optimise your website and provide your visitors with additional information. By the time a visitor reaches your footer, they should already have a good idea of your brand and what you have to offer. The footer is prime real estate that will let you transfer visitors into newsletter subscribers and customers. 

Consider adding contact information, additional website navigation and a newsletter registration to your footer – if you have any newsletter that is; And well if you do not have, maybe now it is time to think about creating it! You will want to design your footer to tie your website together. Focus on incorporating the typography and colours of your brand into the footer. If your website aims at building a client-base, you can add a ‘contact us’ form that creates a simple process for visitors to get directly in touch with you.

This footer is a spot for all your legal disclaimers, including your copyright information. You can also add links to your terms of use and privacy policy. If your website is an e-commerce site, this is the ideal spot for your returns and exchange policy. 

The key to perfecting your header and footer is to choose a design that is both functional and attractive to look at for visitors. You want to create an easy-to-use experience for your visitors, that gives them an instant insight into your brand’s image. You want every inch of your header and footer to be practical and to enhance the user experience.

Again some nice examples



And the wrong one

[The original article was written in English. To other languages it was automatically translated by Google Translate]

Leave a Reply

Your email address will not be published. Required fields are marked *