How to Create an Effective Website Footer, Plus 12 Examples
Sometimes, it’s the smallest details that make the biggest difference. When it comes to creating a website, designing your site’s footer probably won’t be at the top of your to-do list. While you may have plenty of things to think about, bear in mind that this often overlooked piece of content can be make-or-break for certain visitors.
With some thought and strategic planning, a well-designed footer can help you accomplish your business goals.
This guide will cover everything from what to include in your website footer to how to create your own. Plus, you’ll find a selection of 12 website footer examples for your inspiration:
What is a website footer?
A website footer is the strip of content located at the very bottom of a webpage, and is often repeated on every page of a website. Your website’s header, on the other hand, is the section that appears on the top fold of a website.
While your homepage design is often what provides visitors with a first impression of your site, your footer is likely to be the last thing people see. With the right content and design, it can craft a positive and lasting impression, while helping you achieve your website’s main objectives.
This strategic spot is the ideal place to add a final CTA (call-to-action), encouraging site visitors to get in touch or subscribe to your mailing list. Your footer can serve as a secondary website menu, making sure that visitors haven’t missed out on any crucial information and guiding them to your various pages with clear navigation. In addition, you can choose to highlight certain elements, such as awards you’ve won, testimonials or your social accounts.
Best practices for website footer design
As you’ll see in the website footer examples below, footers do vary in size. However, most of them are fairly small and only contain the most pertinent information.
Anyone who’s designed a mobile website before will tell you that a small piece of real estate doesn’t necessarily mean a simpler design process. Limited space means that you have to carefully consider the importance of each element you’re including, in order to utilize the space in the best way possible.
Here are the most important points to consider when designing your website’s footer:
Include the essentials
There are a few basic bits of information that visitors will expect to see in your website footer. And as it’s repeated on every page of your website, these details will always be within reach for your site visitors, and you’ll only have to deal with it once.
Other than that, it’s common to add a navigation menu and contact details, such as your business email, phone number, address and social media channels. You can also create a short online form for getting in touch.
Last but not least, make sure to add the year and copyright symbol. This will help protect you against anyone trying to plagiarise your website.
Provide clear navigation
Even if your site visitors have reached the bottom of your page, it doesn’t mean that it’s time for them to leave. On the contrary - whether they’re feeling lost, disinterested or hungry for more, you can encourage them to keep browsing by adding a clear website navigation menu in your footer.
List the various sections of your site and link to them, providing visitors with an overall understanding of the content you offer. In addition, adding a search bar will help any frustrated visitors quickly find the info they’re looking for.
Express your personality
Every piece of content on your website is a chance to reflect your unique personality and brand identity. The same goes for your footer. It should be cohesive with the rest of your web design, to offer a smooth browsing experience.
Stick to your brand colors and voice. This is also a great spot to add a touch of quirky microcopy that will grab your visitors’ attention. Whether you’re inviting them to sign up to your blog or check out your social channels, try to reflect your tone and personality in your choice of words. After all, “let’s be friends” or “we’d love to hear from you” can be much more enticing than a simple “subscribe here.”
Make it aesthetic
Just because it appears at the very bottom of your website, it doesn’t mean that your footer should be any less appealing than the rest of your site. In fact, it could be the last thing your visitors see. Make sure you’re dedicating just as much thought into its design as you are with the rest of your content. Keep your design clean and simple, so that visitors can easily consume these final, crucial bits of information.
Take into account the basic principles of design, considering hierarchy and layout. Decide which information you want to emphasize by relating back to your business goals. Do you want visitors to head to your online store, sign up to your upcoming webinar, or get in touch? Whatever it is, make this element stand out through the use of size, color or whitespace. Need a little more inspo? Check out the latest web design trends and see how website footers are being used.
12 outstanding website footer examples
Now that you’ve got the basics down, it’s time to delve into some web design inspiration. Whether you’re building your website from scratch or using a website template, these footer examples created by Wix users will provide you with plenty of ideas for designing your own.
01. House Number 3
This restaurant website has provided all the essential info in their website footer. They are easily contactable, with a Google Maps and live chat widget. These small details indicate that they’ve considered the needs of their customers and are open to getting in touch.
Although there’s no sitemap in the footer, the website’s main menu is fixed to the top of the screen, which means that visitors can easily navigate through their pages.
Lastly, there’s a distinct website color scheme that continues in the footer, helping it merge seamlessly into the design.
02. Lola Pate
As a lifestyle brand with a strong emphasis on visuals, Lola Pate has decided to add their Instagram feed to their footer. This not only strengthens their brand identity, but also entices site visitors to click and view their product images in a larger format.
The brand has also utilized this spot to include a final CTA, inviting visitors to “join our tribe.” This strategic move, paired with fun microcopy, is sure to get people subscribing to their mailing list.
And just in case their customers missed it, the shipping and returns page is linked to here, a good practice when starting an online store.
03. Willowbrook Farm
This website footer example includes all the information a site visitor would expect to see. There’s an organized menu leading to all the website’s pages, a tempting offer to subscribe and a way for getting in touch. Thanks to the use of color contrast, the “Subscribe” button stands out, making it all the more inviting.
The design is in line with the rest of the farm’s small business website, making for a harmonious overall look. The color palette evokes a sense of nature, as does the illustration - a nice touch that helps give the footer a friendlier look.
This chic website footer by letsone perfectly captures the essence of their brand, while providing visitors with all the information they may require. By using the same recognizable background as in their header, they’ve created a cohesive look. They’ve also included their logo in the footer, again strengthening their branding efforts.
All of the elements are arranged in a highly organized manner, with lists and headers. The hierarchy is very clear, with the CTA placed at the top of the footer, written in a large font. To make sure that visitors don’t miss the live chat option, they’ve made it stand out with a bright, contrasting shade of pink.
05. Jérome Studio
This sustainable accessories brand shows that good design needn’t be complex. With just two neutral colors, their website footer does an excellent job of conveying all the right information and maintaining an appealing design.
Jérome Studio has created an organized layout with a clear sense of hierarchy. The footer complements the rest of the design, perfectly merging with the other crisp aesthetics and forming an elegant look.
The use of both a serif and sans-serif font adds a subtle design touch that helps differentiates between the headers and the rest of the text. The same font pairing is used throughout the website, ensuring a unified design.
06. Useless Treasures
This online art store’s website footer merges a contemporary look with a nostalgic font that’s reminiscent of a typewriter. Combined with unconventional text, inviting visitors to “talk to us with flowers,” it’s clear that Useless Treasures has a well thought-out and unique brand identity. This is also seen through the gif they’ve included in the footer, adding a tongue-in-cheek vibe that makes you want to take a second look.
As a business that sells art online, Useless Treasures has made sure to include the most important details in their footer: shipping info, returns policy and logos to represent their payment methods. There’s also a link to their designer Instagram account and their website, which is one of the best portfolio websites in the field.
07. Seven Grams Caffe
Nothing says coffee like earthy tones and a steaming coffee machine. Seven Grams Caffe evokes coffee vibes throughout their website, with a warm color scheme and mouth-watering close-ups of baked goods. Their website footer is the ideal ending to this journey, setting the scene with an atmospheric blurred photo of a cafe.
In addition, they've managed to convey all the necessary details in the small space of the footer, including their opening times and phone numbers. They've also made sure to highlight their three New York locations, linking to Google Maps so that it's extra easy for their customers to find them.
08. Avec Clyde
Ethical clothing brand, Avec Clyde, has gone for a simple website footer that complements their online store’s clean design. It’s subtle and unobtrusive, letting visitors focus on the rest of the website, while still serving as a useful source of information.
While the fixed menu at the top of the screen serves as the website’s main navigation method, the footer lets customers view other important details that they’re likely to be looking for. For example, they have a link to their sizing page - a nice touch for a fashion brand, plus a link to their FAQ page.
The microcopy saying “let’s be friends” is especially inviting, helping to emphasize their easy-going approach.
High quality food supplier, Harasat, has crafted a professional, no-frills website footer. Everything is perfectly aligned, forming an aesthetic, grid-like layout. Using just three colors - dark gray for the background, light gray and white - Harasat has included all the necessary information. By clearly laying out the website’s content, visitors can easily understand what it is that this brand does and keep on browsing through the site.
Each detail has been well thought out, from the hover effect on the text that changes color when your cursor is on it, to the three different locations listed. Instead of showing the address and phone number of each location all at once, visitors are invited to click on the locations to see each one’s contact details. This subtle touch is what helps form this clean, professional look, and keep the footer from feeling cluttered.
10. Becca Slack
This personal website by content creator, writer and comedian Becca Slack features an elegant and spacious footer. Placed at the bottom of her one-page website, it’s the ideal ending to her showcase of works and videos.
By emphasizing her contact details and providing a contact form, Becca encourages potential collaborators or employers to reach out to her. On top of the traditional ways of getting in touch, Becca has also included a live chat option and social icons, linking to her preferred social media channels.
All of this is packaged in a neat design that utilizes just three colors, and a subtle font pairing that echoes the design on the rest of her website. The white-on-blue submit button stands out, inviting visitors to get in touch.
11. Triptyc London
This fashion brand keeps it clean and simple, with a two-tone website footer that neatly wraps up all the essentials. The overall design is chic, perfectly fitting with their website design, as well as with their product - high quality shirts for women.
On top of that, Triptyc has used this last chance to invite visitors to subscribe to their mailing list. A to-the-point “Subscribe Now” button stands out against the dark background, encouraging visitors to take action.
12. Holly Oddly
This self-proclaimed “peculiar paper and weird wares” brand has included a nice addition to their footer. Unlike the other website footer examples here, Holly Oddly has chosen to incorporate a short description of herself and the brand in this section. To read more, you can easily head to the ‘About’ page. This piece of content helps inject a personal touch, making site visitors feel at home and reinforcing her personal brand.
She has also stuck to the same color palette as the rest of the website, by adding a hover effect that makes the text appear pink when hovered over. With a successful Instagram account, Holly Oddly has made sure to focus visitors’ attention to the Instagram icon in the footer, helping grow her number of followers.
By Dana Meir
Design Expert & Writer