Footer design has come a long way in the last few years, as can be seen in the many footer design showcases on various web design-related blogs. Creativity and aesthetics aside, what are the elements that make up a great footer design?
Many web site footers contain some level of site map. Often this is a duplication or expansion of the main navigation in order to aid the visitor as they move around the site.
With more options for where visitors may want to go, e-commerce sites can have a much more detailed site map.
It's probably a good idea for a site of any significant size to have a site map. And if you do have a site map, your users will expect to find a link to it in the footer.
Despite the expanded use of the footer, it's still regarded as the place to go for copyright information and legal-related links such as your privacy policy and terms of use.
It makes sense for commercial websites to have their contact information easily available. Where better than in the footer?
In addition, for businesses with a physical location, a link to a map and driving directions can be a great help for visitors.
Some sites have taken it a step further than simply providing contact information by including a contact form in the footer as well.
If space is tight, a call-to-action button makes a good alternative to encourage prospective customers to get in touch.
Many online stores provide a convenient email signup form in the footer. Signing up for (yet) another email is often an impulse action for customers, so it's sensible to make this as easy as possible.
If a site design does not allow for a search form in the header or if search is an action of secondary importance, the footer provides a viable alternative location. It's unlikely, however, that visitors will know to look for search in the footer without discovering it first through browsing.
The footer makes a great place to place your social media links in an easily accessible place on every page.
By breaking a footer up into columns, it's easy to include lists of recent news, blog posts, tweets, etc. These can give visitors a quick insight into what is going on with your organization and encourage them to venture further into your site.
It's common to place country/language selectors in a 'utility' navigation in the header. However, if a site design does not support such a layout then the footer is a good alternative location.
It's a good idea for online stores to let customers know upfront what methods of payment are accepted. Putting this information in the footer makes it readily available to visitors.
The footer is a good location for other e-commerce related information, such as security badges, guarantees and offers, as well as customer support information.
The footer makes a good place for blogs to list post archives or categories. Tag clouds seem to be less popular these days, but can fit within the navigational context of the footer well.
Since almost any page on a website can be the first one that a visitor encounters, a quick summary of the company or person can help orient new visitors. This overview can also help to add a little personality to pages that would otherwise be dry and factual.
Footers make a great location to showcase your best content or work so that you can do your best to ensure that visitors don't miss it, even when they reach the bottom of the page.
Similar to displaying featured work, listing awards and accolades in the footer allows you to show off your success and expertise without being too upfront.
If your site is one of a number in a network, it makes sense to link out to your partner sites. The footer is an ideal place for these links.
While the footer can contain features that aid usability and drive visitor interaction, it can also be a great place to add a touch of personality and have a little fun. After all, we're all people.
Posted on: March 1, 2010 | 42 Comments






42 Comments Posted (Add Yours)
Great collection for inspiration!!!
1. Posted by Lendl Allen V. Trazo on March 02, 2010
Very nice article. Reminds us all that the footer doesn't have to be dull and boring.
2. Posted by Misael on March 03, 2010
Some great examples that will come in handy for my current re-design. Thanks.
3. Posted by Evan Skuthorpe on March 03, 2010
thanks my footer will now be redesigned ;)
4. Posted by frankie Hemsworth on March 06, 2010
I do enjoy this transition to more creative footers. It enhances the user experience, but can also serve as a last pitch for someone about to leave the site.
5. Posted by Joseph McCulough on March 06, 2010
Great post! I really like Nick's new design for N-Design Studio, especially the footer too. Great idea for having a search field in the bottom right. I need to add call-to-actions on my footer - it's the one thing that really needs work on my blog.
Cheers,
Robin
6. Posted by Ocular Harmony on March 06, 2010
Really great post. A solid collection of helpful components all in one place...Nice!
7. Posted by Web Design Raleigh on March 07, 2010
Great footers.
8. Posted by TechyMinds on March 08, 2010
Looks like you covered pretty much everything. The About section is a nice design touch. Great round up.
9. Posted by jay design on March 09, 2010
I'm working on two sites right now and I want interesting, useful, creative footers for both of them. This is a great starting point! Keep up the good work.
10. Posted by Nelson on March 09, 2010
Looks like you have covered all the bases. Excellant job in getting the entire range of design ideas together. Well written.
11. Posted by Raleigh Web Design on March 11, 2010
Its always good to have types of payments on footnotes right?
12. Posted by New Orleans Web Design on March 11, 2010
Great examples, and inspiring.
13. Posted by Monolith Multimedia on March 12, 2010
amazing collection of footer design very inspiring please keep posting
14. Posted by MarathiManus on March 14, 2010
Great post, very inspirational and will be looking to add something like these in the near future.
15. Posted by web design barnsley on March 15, 2010
A footer should match the personality, design and branding of your site. Some really good examples above great post.
16. Posted by Digital Marketing UK on March 15, 2010
Great Post i like it.
17. Posted by Free CSS Templates on March 15, 2010
Brilliant Post! This has really given me some inspiration to design more interesting and functional footers!
18. Posted by Luke Fowell on March 15, 2010
We have used some of the examples posted. But plenty of new once I see to be considered. Thanks for posting.
19. Posted by web design Hertfordshire on March 19, 2010
Don't stuff every listed suggestion in the footer or it can grow to be larger than the main content ;). Good ideas.
20. Posted by Tom on March 22, 2010
good and nice article
21. Posted by sara on March 23, 2010
Footers have definately become a more interactive part of a web site and there are many good uses as mentioned in this article that have been found. I tend to try to keep forms out of the footer although most of the other aforementioned uses we have included at some point or other. Maybe we are seeing a more crammed footer because the whole design of header and body of web sites is now a more blog / US style with less elements (cleaner). We still need somewhere to put the other stuff and the footer can help with this.
22. Posted by Web Design Leeds on March 24, 2010
Nice articles. Footers used to be a place where people dumped privacy, copyright notice, terms and conditions and so on... but since there are so many websites emerge every seconds, it makes sense to use every avenue available to make your website is more visible to either the search engine and the visitors. I personally think websites look nice with a thick footer compared to a boring thin footer :)
23. Posted by Lukas Sumarli on March 24, 2010
i really was not aware of these stuffs till
thanks for sharing
your site is worth bookmarking in my browser
24. Posted by Interesting Facts on March 26, 2010
I'm probably guilty of not thinking much past putting navigation links in the footer, its good to see a different perspective every once in a while!
Thats a good inspirational article...thanks
25. Posted by Web Design Norfolk on March 27, 2010
I've added a comment box to my website which is really useful although we should really get round to adding a captcha box because we do get horrible spam something which clogs up my inbox no end!
26. Posted by Richard on April 02, 2010
Great post, I have wanted to look at footer design and content in greater depth for some time. Generally when designing web sites we have stuck to the usual suspects and added contact info, email, copyright etc. Recently with ecommerce web designs we have added more navigation. As more and more new site designs seem to fill the footer with links I wonder whether it is starting to go to far and become a place where navigation that doesn’t fit up top is thrown in at the bottom because everyone else is doing it?
27. Posted by Alec on April 04, 2010
Very Very Help article. cover all type of possible footer design...
28. Posted by Vivek Mahadik on April 06, 2010
Thanks for inspiring examples :-)
29. Posted by Åsel on April 06, 2010
It's a good article! There is so much you want to share in the footer that readability and usability is going down. For clients it is sometimes difficult to choose.
30. Posted by Nicky on April 06, 2010
Thank you very much for sharing these great information. Well explained, and teach people about the in and out on the footer of a website.
31. Posted by Li Ma Chicago on April 08, 2010
Adding a creative element to a websites footer design is a great way to enhance the overall appeal of the website. It's also helps your viewers scroll through the whole website maximizing your exposure.
32. Posted by Ronen Hen on April 08, 2010
Some great ideas on how to incorporate the important footer information you need on each page.
Contact info on each is an important one in case the visitor prints out the page for future reference or to put in the need to call pile for their project.
33. Posted by S Emerson on April 11, 2010
Really cool post. I saw those all kind of footer before, but I never think about mine. Thanks this gotta be my inspiration to fill my new site footer's with better stuff.
34. Posted by Tito Kamtiyono on April 19, 2010
I saw one on best CSS vault: http://www.bestcssvault.com/tropica-web-design/#respond
That was cool, it had a search and nice mouseovers in the footer etc...
35. Posted by Ian G on April 19, 2010
Great footers, plenty of inspiration! Thanks Ted.
36. Posted by Yorkshire Web Design on April 19, 2010
It's not a requirement, but I'm seeing more "Powered by" mentions in the footer. You can use this to state the CMS you're using or any other technology your Web site's built upon (ie Wordpress,AWS,etc).
37. Posted by Ed at Kliky on April 19, 2010
Less is more. If possible don't have a footer!
38. Posted by Nick Yeoman on April 27, 2010
I love footers. . . Its one of the best part if not the only part of a web page where you can splurge on the design as hard as you want. . . The header is one thing, its already given that it would have the logo and other stuff, but the footer is somewhat similar to the signature on a contract where you , as a designer would place your mark on. . .
Great article by the way
39. Posted by John Tanedo on June 20, 2010
Really awesome post. Inspirational
40. Posted by Sharif khan on June 24, 2010
Another useful and very comprehensive article, great work.
41. Posted by Jim Shannon on June 28, 2010
Thanks for that. Always good to get some inspiration for footer designs to stop them looking boring!
42. Posted by Web Design West Yorkshire on July 06, 2010