4f56166fdbe6035b62000012.context Design

Ways to go about your footer design – with examples

Picking the right footer for a design can be harder than it seems. But a good footer can have a great impact—both on the impression you make, and the actual behavior of your visitors. In this article I will show you which footer to pick for the occasion, and have a look at more specific elements you can put in it. I will provide examples from the list of footers I put together on Usabilla Discover.

Like many website elements, we owe the concept of a footer to printed typography. In print, the page number is often in the footer, and sometimes it contains the title of the current chapter or section. In web design, the footer at the bottom of each page has evolved to serve a few different functions. But by definition, it’s always located on the bottom of the page, and its lay-out never changes across the site.

Different kinds of footers

You can use the footer to guide your visitor in doing something after they are done reading or scanning the page. Mostly, this is to keep your visitors reading; to have them react to a call to action; or to help them out should they not find what they want. And, if you have a lot of sections with content, the footer is an excellent place to provide a full overview of every creak and little spot there is to be found on your site.

Footers that unlock the whole site

It can be a challenge to provide a sensible way to navigate a big site with a lot of sections. Even with drop down menu’s, there is a limit to the number of elements you can stuff into your main navigation. That’s why the Fat Footer—which contains the whole sitemap—has become a common design pattern. This can be a good choice for big corporate sites, or online shops. For example, have a look at the footer from Zappos. They take the idea quite far:

The idea is that people mostly will find what they need by using the main navigation and search. The footer is a fallback, to help the people who inadvertently still got stuck. But the example of Zappos shows this solution can also be a neat psychological trick: it gives the user an impressive visual indication of the size of the site. Flaunt it if you have it.

Not only big sites use the footer as an extra means of navigation. It often is a home for pages that are boring and basic in comparison to the rest of the site. Examples are the contact page, the terms of service, the privacy policy, or the team page.

Choosing which of these links to put in your footer depends on design patterns, and the context of your site. Over time, some links came to be expected in the footer, like the contact page and terms of conditions. But what is unimportant enough to only keep in your footer depends on what your site needs to communicate. For a company offering software, a FAQ page probably should go in the main navigation. An online bookstore could probably get away with putting it in the footer, because it’s common sense to use the main navigation for easy access to different categories of books.

Call to action footers

The footer is also often used to place a call to action button or form. This can be a simple subscribe link to the newsletter which is placed in a sitemap footer. But some sites make a call to action the single focus point of their footer. See this footer by English Workshop:

English Workshop offers English courses, and has a large site. As a footer, they only include a contact form. This is the way they get leads from the site, because you can’t enroll for a course online.

Here is another, more corporate example:

Although Blue Fountain Media include the usual footer items at the bottom, they choose to put a newsletter form in the middle. On the sides they use contact information and their Twitter stream.

Design Agency Demi have a beautiful site where they showcase their work. As a footer, they choose to highlight their location, and provide simple links for email, Facebook and Twitter:

Keep people browsing

Some sites are built for people to browse around without having a clear end goal in mind. For example, a visitor of the site of an artist wants to be surprised by the offered work. See this footer on the page of Italian artist Vivaultra:

A footer like this can be a great way to get users to wander around your site.

Most blogs also aim to keep people around. They also rely on readers to share their work and subscribe to their updates, so they can expand their reach. Most blogs have a mixture of recent or favorite articles, newsletter subscription options, and social sharing options. Merlin Mann’s 43 Folders has a footer containing all these elements:

This footer shows a lot of attention to detail: the introductions for favorite posts are handwritten, there are random quotes shown that fit the theme of the site well, and the design is very consistent.

Thinking about which footer to choose

I hope that I gave you some things to think about when you need to design the footer of your next project. See if you can figure out what you want your users to do when they are done reading your page, and didn’t go for something in your main navigation, or your main call of action. Before browsing for inspiration, try to pick the elements you need first. It can make a big difference.

Once you know what you want to include in your footer, browse Usabilla Discover for inspiration. You can see what other designers thought about these footers and many others by browsing my list of footers. If you haven’t got an invite, request one, and we will hook you up for our private beta!

Leave a Reply

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