A website footer is something most people overlook at first glance. After all, it sits well below the fold. You might even wonder if most people even find their way to your footer. However, many users will actually jump to the end of the page to find things such as contact information.
Footers are important to the user experience (UX) because they come with certain audience expectations. While you can certainly add your own twist, you’ll want to be sure you include what people expect to see. Start with your preferences for footers and go from there.
What Do People Expect to See in a Footer?
Have you ever landed on a page and been unable to find what you need in the main navigation bar or within the body of the page? Footers serve the gap, including links to things such as a privacy policy or information about the company. Most people know they can jump to the bottom and get contact info, for example.
The design of your page matters right down to your footer. Around 80% of users say if they don't like a website's design, they'll just hop to a competitor's page. You work hard to get people to your site. Make sure you’re hitting all the elements to keep them there.
Standard contents found in a website footer include:
- Contact information
- About link
- Privacy policy
- Return policy
- Location information and/or directions
- Copyright
- Terms of service
- Phone number
- Social icons
At the same time, you don’t want your footer too cluttered. Pick and choose the elements you notice your site visitors click on the most. Heat maps can help you decide what your users expect from your footer.
The best way to learn how to create a rock-solid footer is by studying examples of really fabulous foots' with excellent UX and UI. The layout of the footer often makes a difference in creating a useful, streamlined look. Here are ten of our favorites.
1. Overpass
Source: http://overpass.studiovoila.com
Overpass does a ton of things right with their beautiful footer. First, they continue with the website palette and then with a bold background of blue and yellow. They also include social media icons, a copyright symbol, and links to pertinent information on the site.
One of our favorite features of this particular footer is the call to action (CTA) button inviting site visitors to learn more.
Eleanor is the founder and managing editor of Designerly Magazine. She’s also a freelance designer with a focus on customer experience. She lives in Philly with her husband and dogs, Bear and Lucy.
2. Ode à la Rose
Source: https://www.odealarose.com
Ode à la Rose adds all the elements you’d expect to see in a footer but then they also share their Trust Score based on consumer reviews. This adds an element of trust to the website and makes people more likely to spend their money there.
3. Bad Boys
Source: https://bad-boys.vercel.app
The Bad Boys website for the movie has a really effective footer at the bottom of the page. In addition to links to popular areas, they also include a subscribe form so users can stay updated about news related to the movie. Rather than just serving as a static footer, the form makes the page more interactive and gives owners a chance to stay in touch.
4. Blue Stag
Source: https://bluestag.co.uk
Blue Stag is a design agency. What better way to showcase their abilities than with an animated footer? Notice the other elements are sparse. The focus goes to the blue stag as he trots across the page.
If adding something a bit more interactive, such as animations, try to limit the other elements in your footer. You don’t want your page to look too busy.
5. Randomize
Source: https://random-ize.com
Randomize touts itself as “the most random website on the internet.” One thing we love about their footer is how they show off their fun side and prove they’re random. They add in feeds for some of their social media, which gives some random fun facts they’ve posted.
Adding social media feeds can encourage people to follow you on various networks and help you gain more traction from the content you post.
6. Lifehacker
Source: https://lifehacker.com
Lifehacker has a gorgeous footer. The black background makes the white text pop. They then add social media icons in vivid colors, which draws the user’s attention to those links. The rest of the links are what you’d expect on any site, including an About page, link to their store, privacy policy and a link to jobs they have available.
Sticking with something very neutral for your background can help your footer stand out.
7. Roblox
Source: https://www.roblox.com
Roblox is a game and because of that they offer something a bit different for their footer. While they still have the typical About Us and Privacy links, they also include links to ways you can download their game. Note the rectangular CTAs featuring the Apple store, Google Play, Amazon, Xbox One and Microsoft.
The UX is excellent because it meets user expectations. When in doubt, think about what would be most helpful to your audience and choose elements for your interface that are most helpful to your customers.
8. Two Robbers Seltzer Co.
Source: https://tworobbers.com
We love the entire look of the Two Robbers Seltzer Co. website. First, it takes on a fun, cartoonish look. However, the best part is the scrolling tickers letting users know where their beverages are now available.
There is also a signup link that is quick and to the point. Users only have to enter an email and click "Submit." Finally, they share social media, links and copyright in columns that are neat and don't take up a ton of space.
9. Fandom
Source: https://www.fandom.com
We adore this Fandom footer with navigation on the left side. Users can navigate anywhere they want right from the footer. They can also explore some pages not listed in the main navigation bar, download an app or follow Fandom on social media all from one location.
Fandom’s footer is arguably one of the most user-friendly ones we’ve seen. We also like how neat and uncluttered the interface appears even though there is a ton of info contained there.
10. Chi Chi
Source: https://us.chichiclothing.com
What isn’t to love about the Chi Chi footer? Not only do they provide helpful information users are likely seeking, but they share reviews and links to social media. They also share the types of payments they take across the very bottom of the page.
They even work in a call-to-action sign-up inviting you to join for news and updates. Useful details specific to the industry also make the site highly usable, such as the sizing guide.
Other Website Footers Famous for UI/UX Design
The ten examples above are ones we’ve not visited before. You can also study the designs of highly successful online retailers for additional inspiration. For example, Amazon does a ton of analysis of their users’ behavior. What they include in their footer works well for their model.
Seek out examples in your specific industry. If you run a small heating and cooling company serving local customers, your footer will look different than a hair product retailer with a global clientele.
Add new elements and run A/B tests to see what your audience responds to. The best footers embrace excellent design over time, tweaking and changing elements to find the perfect mix for the right audience.
