fbpx
Supercharge your SEO! subscribe to our newsletter For the latest SEO tactics & best practices
5
Gorgeous footer design for website design

11 Website Footer Designs – Hall of Fame Examples and Best Practices


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

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

Amazing Footer Website Design Examples

 

 

Super simple black and white footer design

This marketing agency doesn’t shy away from utilizing the bottom of every page, with a quick sentence about what makes them special. Then it moves into copyright, a ‘start a conversation’ call-to-action, a couple key items they may want you to view, social icons and functional ‘terms / privacy policy’ pages. They then have a caveat about the opinions of the people on their podcast. Use this concept by being open to dropping elements back with a grey that’s not much different than the dark grey background. This makes the other elements stick out more.

Nice looking website footers

 

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.

Nerdery Footer Design

 

A wonderful Minneapolis agency footer – Nina Hale.

Nina Hale - Footer Design

 

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.

 

Gorgeous footer design for website design

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.

Colorful Footer Design

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.

Chobani Footer Design - Web design bottom of page inspiration

 

“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.)

Stay in touch minimalist Footer Design

 

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.

 

Spinx Footer design

 

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.

Hook Agency - Agency Footer Design Inspiration

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.

 

  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to Get Started?

Get a free consultation now