top of page

Copied

Website footer design: 12 examples and best practices to create yours


Website footer

Sometimes, it’s the smallest details that make the biggest difference. When it comes to choosing how to make 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. It's considered an essential part of your 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.


Lastly, your footer provides you with an organized place in which to include basic information like terms and conditions, privacy policy and other legal issues. With all these formalities placed in one location, you’ll be able to dedicate the rest of your site to creating an engaging user experience and attracting new customers.





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 learning how to build 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.





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.



Website footer example by House Number 3



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.



Website footer example by Lola Pate



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.



Website footer example by Willowbrook Farm



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.



Website footer example by letsone



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.



Website footer example by Jerome Studio



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.


Website footer example by Useless Treasures



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.



Website footer example by Seven Grams Caffe



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.



Website footer example by Avec Clyde



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.



Website footer example by Harasat



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.



Website footer example by Becca Slack



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.


They’ve incorporated a dedicated menu in the footer to answer all the questions and queries their customers may have, whether it be terms and conditions, their use of cookies or which payment methods they accept.


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.



Website footer example by Triptyc London



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.



Website footer example by Holly Oddly


What to put in a website footer


A website footer is prime real estate that can serve multiple purposes. It should be informative, functional and engaging, while remaining visually appealing. Here are some key elements to consider including in your website footer:


  • Contact information: Make it easy for visitors to reach you by providing your email address, phone number and physical address (if applicable). You can also include a contact form or link to a dedicated contact page.

  • Navigation: Include links to your main website pages, especially those that aren't readily accessible from the main menu. This could include your About Us page, Contact page, Privacy Policy and Terms of Service.

  • Copyright notice: Display the current year and a copyright notice to protect your website content.


  • Call to action (CTA): Encourage visitors to take a specific action, such as subscribing to your newsletter, signing up for a free trial or following you on social media.

  • Social media icons: Make it easy for visitors to connect with you on social media by displaying icons for the platforms you're active on.

  • Legal information: Include links to your Privacy Policy, Terms of Service and any other legal documents required by your industry or location.

  • Sitemap: Provide a link to your sitemap to help visitors find specific pages easily.

  • Testimonials: Showcase positive feedback from customers or clients to build trust and credibility.

  • Awards and recognition: Highlight any awards or recognition your business has received to demonstrate your expertise and success.

  • Logo: Include your logo in the footer for branding consistency.



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.


Stick to design conventions and include your privacy policy and terms of use. This will also help you appear professional and trustworthy.


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.”


Looking to start a blog? Get started with our blog creator. 



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.


Was this article helpful?

bottom of page