Have you ever visited a website that didn't have a footer? Nope, neither have I.
...And I’ve seen a lot of websites.
Working as a web designer, I have looked through thousands, if not tens of thousands of websites, and I can't remember a single one that doesn't have a footer. Well, not a reputable site that I was confident wouldn't give my computer a virus!
Despite this, when a typical web designer starts working on creating a website, they often overlook the importance of designing a great footer that contains all the most necessary information and drives traffic to the right places across the site.
Imagine this scenario - a visitor starts browsing your website, gets to know whatever you’re offering and reaches the bottom of the page, but is still undecided if you’re the right business to partner with or purchase from.
At this point they’re right down the bottom of the page, probably mulling this question over in their head…
Then they see your poorly designed footer. The text is too small, there’s no call to action, the trademark is referencing an old year. It’s all a very clear message to your visitor that your website (and maybe your business?) isn’t being looked after.
The most likely scenario is that the visitor will simply leave your site.
Let's consider a second scenario.
The visitor has read through all the content on your landing page but at the bottom of the page, instead of just navigation links, they’re greeted with a simple contact form, clearly displayed options for making contact, links to your social profiles, and a compelling call to action.
The difference should be obvious.
The user has reached the end of the page and we’ve said all we need to say but they’re still met with clear instructions: “Hey! Did you like our offer? Contact us!”.
Up to this point, we’ve been writing hypothetically about the difference to a website’s ultimate goals between a poorly and really well-designed footer. But this theory has been tested by more than a few businesses who found that using a highly intentional footer can increase the page’s conversion rate up to 50%.
5 Excellent Footer Examples
We’ve established that a well-designed footer is a necessity. But there’s more than one way to cook an egg, as the expression goes.
Let’s take a look at 5 website examples where the design of their footer has really hit the nail on the head. These sites all use equal amounts of creativity, and clever design to produce footers that motivate the user to take an action once they reach the bottom of the page.
Three.js Journey have created a multi-tiered footer that features a striking call to action featured in a roomy purple box. A strong contrast between the site’s white body and the main footer’s black background draws our eyes instantly to this CTA section.
Call to actions should always command the most focus, and this footer has done a great job. They’ve also provided a wealth of information for anyone that was looking for more information in the primary footer. Uncluttered navigation, details about the business and contact information are laid out in a simple and easily consumable fashion.
The Vbbr team have created another very neat footer that’s not flooding us with information.
At the top of the footer is a large call to action encouraging the visitor to make contact, together with a round button that fits perfectly into the style of the project.
What is unusual about this footer is the black box at the bottom right of the footer, with which we can subscribe to the newsletter. It is a bold design decision as it disturbs the symmetry (which we love so much), but in this case, the effect works nicely.
How about a footer that fits the height of the entire screen?
This isn’t an approach that’s super common, but when it works… it works! The biggest risk in designing such a broad footer is it not fitting in with the rest of the website’s styles. This is not the case for the Zammad team. The rest of their site features very large fonts and bold styling choices, so this footer feels like a natural extension.
The first thing we notice with this footer is the two rectangular call to action panels. The left panel is driving visitors towards a free trial, and the right is pushing them to subscribe to a newsletter. This layout makes sense because the left panel is the first focal point and it occupies the most important call to action; subscribing to their platform. The secondary offer; the newsletter is not only on the right but also highlighted with a less intense background colour.
Below the two calls to actions are a lot of links. It’s probably fair to say the fonts in this footer are larger than average. Usually, links in a footer do not exceed 16pt, but here the font size is as much as 20pt. In the design world, this is a big difference.
This footer also includes a nice little button that takes the user to the top of the page, which adds a nice little touch of usability.
We could write an entire article on how to effectively use animations in footers as the one Bello has created.
This footer follows a fairly standard format. It features a few navigation links, logos and social media icons. The layout is similar to the three.js design… but it’s animated and looks awesome.
The way the illustrations are integrated into the call to action makes it instantly eye-catching and gives a usually bland area of the website a bit more character.
At Clean Commit, we’re big innovative design and doing things a bit differently. And this last footer example has certainly bent the rules.
There are practically no navigation links. The invitation to use Natural.ai is the entire height of the footer.
This is a great example of putting the website’s intention at the focus of every choice. This website wants visitors to sign up to use the website. If a visitor has made their way to the footer, chances are they’ve read everything the website has to say and still haven’t come to a decision. Rather than providing navigation links, or information about the company, this footer is pushing the user towards one goal; signing up for an account.
Over the past few years, web designers have finally turned their attention to creating footers that aren’t just an afterthought. Every page has one, and they’re used frequently, so they need to be awesome.
There’s no “best” footer or even a formula that a design should follow. Sometimes stuffing a footer with navigation links will make the most sense. Other times, keeping it super simple and focusing on the call to action is going to yield the best results.
Hopefully, the examples we’ve listed above give you some inspiration to go out and design a super creative footer.
If you’ve seen a footer design recently that made you take a second to admire its design, we’d love to hear about it. Leave a comment below and tell us where we can find it!