Website footers are the most under-rated, and powerful element of a website design. They cap off the end of the site, are an amazing place for ‘calls-to-action’, contact information, and navigation. They seem to be under-rated because some people focus exclusively on the ‘header’ or the top of the website, and the ‘billboard’ of the website, ‘above-the-fold’ / or visible before you scroll.
Though the top of the site matters – the footer can be extremely powerful, and serves as the other half of the ‘frame’ of a website – or the other element that stays consistent throughout the site, despite the middle content that swaps out on every page. Because you see the footer on every page, if it’s done right – all of the work is compounded in a positive way throughout the whole site’s design.
Amazing Examples of Website Footers
For each of these awesome footers – I’m going to briefly go through what I love about them, and how you could potentially use the principles from these footers for your footer designs as well.
Pink and white footer design
I’ve been really digging this light pink for a couple years now, and this footer delivers on a lot of things that make love design. The strong contrast between the logo, UI elements and the submit button – as well as the bold simplicity and centering of the menu, and social icons. (Check out this 26 website color schemes post too.)
Super simple black and white footer design
Nerdery – a web development agency’s awesomely simple footer
Clearly – this agency is much more focused on recruiting great talent (with a kind looking smiling face of course as a background photo) than just getting more business on their home page. They’ve opted for brutal simplicity in their website footer, with just conversational call-to-action, a slim navigational element, and social icons. Use this concept by really simplifying down to very few next actions you’d think people would want to take.
A wonderful Minneapolis agency footer – Nina Hale.
A powerful and open footer design that makes ample use of white space.
My god this footer is good. Perhaps I’m just a sucker for black and white color schemes, but when you have this simple of a color palette, the layout of the elements has to be extremely thoughtfully arranged. Use this concept, by balancing the number of navigational elements on either side – and centering a few next (obvious next step) actions you’d want people to take.
A lovely example of an agency website’s colorful footer design.
If you want to amp up the color instead of playing it down, what about a rainbow-esque footer? Use this concept by making introductions of each of your key pages at the bottom of your site, each with their own corresponding color.
Major brand Chobani shows the power of simplicity with their footer design.
Just the logo in white, the navigation, a subscription box, Terms links, social icons, and a copyright. Use this concept by opting for a little more built out footer, without going too far. Of course you’ll need your logo in white – it’s funny how nice this looks, as I’ve tried this recently on a lot of designs, and really adds a pleasant little touch.
“Stay in touch” minimalist footer design.
This is for a fashion brand, and having worked on clothing company websites before – I can say it’s a unique place to be able to express yourself with brutally simple elements. The context of this type of footer is key of course – as not a lot of companies could get away with this. Use this concept on your next clothing brand website, by cutting out all the clutter, sticking with one action, and 5 links at the bottom of page (in this design’s case – two of them are social media links.)
Spinx – a los angeles digital marketing agencies functional footer
I love contact forms in footers. This is a wonderful example of a very robust footer, that still comes across as clean to me. Use this concept by incorporating a contact form in your footer on 1/3rd or half the design, and calling out recent blog posts in the the other half under your contact information.
Our footer design – don’t act like you’re not impressed 😉
We fit a . lot into our footer design, without making it feel cluttered. Use this concept – by moving towards a very simple 3 column layout with understated typography.
A recent footer we designed for a Cornerstone Support.
A little note on the ideal footer design:
You want your website footer to be functional, not just beautiful. We know to expect navigational elements at the end of the page, but people expect to see contact info as well. Here are a couple other things that may make sense to include in a footer design.
- Obvious next steps – they’re done with the website now, so what would they do now ideally?
- What are a list of possible next actions they might take?
- Ideally perhaps a contact form, if you want it to be super simple for them to get in touch?
- I like having badges of organizations a company is a part of so that people can understand the company is part of a community, and is trustworthy, not some lone wolf company that doesn’t follow best practices.
- Social icons so they can join in on the discussion, and perhaps follow you on other platforms.
- I love the Cornerstone example above because of the colorful / attention grabbing call-to-action before the footer. This is our signature move on client sites.