Have you ever noticed that a basement, or the things that are stored in it, actually say a lot about a person? Hobbies that you pursue and whose equipment you store down there, stocks of food and other things that reflect your worries, or things that you prefer to keep out of sight because they might embarrass you, but which you nevertheless can’t really part with. As meaningful as a basement is in a house, so informative are footers on websites.
Besides the significance of the contents of the cellar and the footer, however, there are other similarities. Both often get little attention when it comes to design (or furnishing). In the case of the basement, this may be acceptable as long as it serves its purpose and does not end in total chaos. The footer, however, is a different matter.
Footer content - what to include?
There are several elements that can be found in almost all footers by default.
- Contact information These are elements such as an email address, phone number, physical address, or social media links.
- Navigation Links The most important links of your website should not just be linked in your top navigation but also in the footer. Additionally to links to your product, services or shop you can also include links to important pages such as About Us, Contact, FAQs, Careers or Terms and Conditions.
- Copyright Information The footer is the typical place for storing your copyright information, trademark notices, or other legal information as well as the privacy policy.
- Social Media Links Next to a hero banner which can normally found above the top navigation, social media links are places in the footer.
- Newsletter Signup If visitors can sign up for a newsletter on your website, you can include a signup form inside of the footer.
- Call to Action Does your hero section or top navigation contain a call to action button that invites visitors to explore or buy your product? Then your footer should do so too.
How to design the perfect footer?
In contrast to your own basement, which remains mostly hidden from foreign eyes, a footer is almost like a second flagship for your website. However, there are a few points that matter when it comes to footer design.
The footer should be consistent with the overall design of the website, including color scheme, typography, and layout. In many cases the footer is designed either in a slightl different background color or in a constrasting color that stands out well against the rest of content.
Try to emphasize important information using font size, weight, and color to differentiate from less important information – also known as hierarchy.
Individual sections can best be separated from each other with sufficient whitespace. In this way, a footer can appear very clear and tidy despite many elements.
Don’t forget that at least 50% of the website is nowadays accessed on smaller devices such as smartphones. So your footer should be responsive to look clear and deliver a good experience even on small screens.
Real life footer example: the beAnywhere.ch footer
At beAnywhere.ch, a project that I work on together with my partner, we decided on a rather large footer that is divided into two parts.
The design, font and the colors are based on the rest of the website to maintain consistency. The top section contains at the left our latest articles as well as posts from the photography blog in the middle. The Quicklinks section contains the most important links for our website visitors who are interested in buying an image from us.
On the far right are our social media links with their icons and the payment methods we accept in our shop. This section is not clickable and therefore does not lead to any other page, but serves to convey trust in us as an online shop, as we work with trustworthy and official payment providers.
In the lower dark part we have placed our contact page and all the legal information such as data policy, disclaimer and cookies as well as our copyright. Due to our rich content in the footer, we at [beAnywhere.ch](http://beanywhere.ch/) have decided to not include our newsletter signup form in the footer.
One more tip
For many users, it has become a standard practice to look for important website content in the footer if it is not listed in the top navigation. Especially the careers page, contact and social media links are among this information that users are searching for in the footer.
Therefore, if these links are not directly accessible in your top navigation or in the hero section, you should definitely put them in the footer to help your users achieve their goal as fast as possible.
Footer deep dive
Here are some good articles that also explain how to design footers professionally:
- The standard reference:
Footers 101: Design Patterns and When to Use Each - Creative footers:
Website Footer Design: Best Practices, Tips and Many Examples - Comprehensive footer guide:
Footer Design – Best Practices Together with 6 Examples
Do you like reading while having your cup of coffee?
The Grab a Coffee newsletter provides you knowledge and tips from UX and UI design, supports you to start a tech design career and gives you insights and real life experience from a remote worker and part-time digital nomad. And all this for the length of having a delicious cup of coffee. Sign up today!
By subscribing you agree to mailerlite’s privacy policy. You can unsubscribe anytime. For more details, review our data policy.