- April 8th, 2008
- 112 Comments
According to classic principles of web design, everything at the bottom of the page isn’t that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren’t really able to catch visitors’ attention which is why footers are often forgotten or ignored and not given the attention they deserve.
In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven’t found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, “back to the top”-link and contact details. But if most designers forget it, why don’t make use of it? Why don’t use footers to impress visitors with something they actually don’t expect at all?
This post presents creative examples of footers and ideas for footer design. We’ve tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.
You might also want to take a look at the posts
- CSS-Based Footers: Modern Solutions1 which showcases even more excellent examples of CSS-based footers.
- Navigation Menus: Trends and Examples2 with recent trends, examples and innovative solutions for design of modern navigation menus.
- Pagination Gallery: Examples And Good Practices3 with good practices of pagination design as well as some examples of when and how the pagination is usually implemented.
- Tag Clouds Gallery: Examples And Good Practices4 presents creative examples and ideas for design of tag clouds.
What are footers good for?
Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.
However, you can also use the footer to express something artistic and very personal. For instance, if you are a Seinfeld fan, why don’t place a small Kramer somewhere next to the contact details in your footer? Thus, with one small detail you can make your site more distinctive and focus visitors’ attention to yourself.
Blog designs usually have a bunch of different data hidden or displayed in their footers. For instance, the latest posts, comments, last job opening, last forum discussion or link to a random post.
Some designers go even further and place the whole navigation at the bottom of the page. In such cases the site is split in two parts; the upper part takes care of the content while the bottom section takes care of everything else. In such cases it’s not really reasonable to speak about footers.
There is a number of possibilities: footers can contain personal illustrations, links to related sites, photos, web forms, icons, a lot of creativity. We’ve found out that quite often footers unfortunately also have SEO-spam and advertisement which don’t belong there in the first place.
1. Imitate proximity to the ground
Well, that’s quite strange. But we’ve observed this trend too often to dismiss it. Many designers tend to imitate the proximity to the ground. This means that they attempt to complete layouts with illustrations of the ground — in such cases trees, birds, buildings and the horizontal perspective are usual. Funny characters, mascots, illustrations and hand-drawing are also typical for such footers.
2. Colors clearly separate content and footer
Since the main function of the footer is to complete the layout, often it is given a color which has a high contrast to colors dominating in the overall site design. Vivid colors can be observed as often as dark ones.
3. Illustrations in use
Often illustrations are used to give the footer some particular meaning it needs to convey. Possibilities are endless. In most cases designers use vivid images and cartoons.
4. Footers with advanced functions
Apart from visual appeal, footers can be used effectively to convey some important information quickly and shortly. Contact information, address, sitemap, main sections can therefore often be found in the footer. However, also further functionalities, such as RSS-feed, e-mail-subscription and tag clouds can be placed there too.
Dennis Blöte with contact details and a minimalistic contact form.
The same holds for the search box. Footer has a lot of place, but it’s not really helpful to place a search box only in the footer.
5. Experimental solutions
- 1 http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/
- 2 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 3 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
- 4 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
- 5 http://www.cssbeauty.com/
- 6 http://www.cssbeauty.com/
- 7 http://www.designshack.co.uk/
- 8 http://www.designshack.co.uk/
- 9 http://www.designshack.co.uk/
- 10 http://www.yodiv.com/
- 11 http://www.yodiv.com/
- 12 http://www.volll.com/#section_main
- 13 http://www.volll.com/#section_main
- 14 http://www.vimeo.com/
- 15 http://www.vimeo.com/
- 16 http://www.kulturbanause.de/
- 17 http://www.kulturbanause.de/
- 18 http://www.therissingtonpodcast.co.uk/
- 19 http://www.therissingtonpodcast.co.uk/
- 20 http://www.realmacsoftware.com/rapidweaver/
- 21 http://www.realmacsoftware.com/rapidweaver/
- 22 http://www.mbdragan.com/
- 23 http://www.mbdragan.com/
- 24 http://www.blabolnik.cz/
- 25 http://www.blabolnik.cz/
- 26 http://www.paulotaneda.com.br/
- 27 http://www.paulotaneda.com.br/
- 28 http://www.tntpixel.com/
- 29 http://www.tntpixel.com/
- 30 http://www.lewro.com/
- 31 http://www.lewro.com/
- 32 http://www.web4biz.ro/
- 33 http://www.web4biz.ro/
- 34 http://www.strawpollnow.com/
- 35 http://www.strawpollnow.com/
- 36 http://billyhughes.oph.gov.au/
- 37 http://billyhughes.oph.gov.au/
- 38 http://www.hebatec.de/
- 39 http://www.hebatec.de/
- 40 http://www.freelenz.at/
- 41 http://www.freelenz.at/
- 42 http://www.viget.com/inspire
- 43 http://www.viget.com/inspire
- 44 http://www.ungarbage.com/
- 45 http://www.ungarbage.com/
- 46 http://www.sprintbio.com/
- 47 http://www.sprintbio.com/
- 48 http://blogsolid.com/ideas/
- 49 http://blogsolid.com/ideas/
- 50 http://bitsamppixels.com/
- 51 http://bitsamppixels.com/
- 52 http://mesa.cityofgrace.com/
- 53 http://mesa.cityofgrace.com/
- 54 http://www.crazynfunny.com/
- 55 http://www.crazynfunny.com/
- 56 http://www.legendaryaircraft.hu/
- 57 http://www.legendaryaircraft.hu/
- 58 http://www.williams-bistro.de/
- 59 http://www.williams-bistro.de/
- 60 http://www.pil.hu/
- 61 http://www.pil.hu/
- 62 http://lukasztyrala.pl/
- 63 http://lukasztyrala.pl/
- 64 http://www.subdued.net/
- 65 http://www.subdued.net/
- 66 http://www.webdesignerwall.com/
- 67 http://www.webdesignerwall.com/
- 68 http://www.ustrendy.com/
- 69 http://www.ustrendy.com/
- 70 http://www.dandelionpath.com/
- 71 http://www.dandelionpath.com/
- 72 http://aigalosangeles.org/
- 73 http://aigalosangeles.org/
- 74 http://hicksdesign.co.uk/journal/
- 75 http://hicksdesign.co.uk/journal/
- 76 http://www.codextransportica.com/
- 77 http://www.codextransportica.com/
- 78 http://imperium74.free.fr/wordpress/index.php
- 79 http://imperium74.free.fr/wordpress/index.php
- 80 http://www.johannahallin.se/
- 81 http://www.johannahallin.se/
- 82 http://www.catydesign-studio.com/assort
- 83 http://www.catydesign-studio.com/assort
- 84 http://www.olieng.net/
- 85 http://www.olieng.net/
- 86 http://www.catalyststudios.co.uk/
- 87 http://www.catalyststudios.co.uk/
- 88 http://instantamber.com/
- 89 http://instantamber.com/
- 90 http://www.ttthings.com/
- 91 http://www.ttthings.com/
- 92 http://www.thegregbradyproject.com/
- 93 http://www.thegregbradyproject.com/
- 94 http://www.rjdesignz.com/
- 95 http://www.rjdesignz.com/
- 96 http://www.lucyblackmore.co.uk/
- 97 http://www.lucyblackmore.co.uk/
- 98 http://www.paul-wallas.co.uk/
- 99 http://www.paul-wallas.co.uk/
- 100 http://www.arrivaldesign.co.uk/
- 101 http://www.arrivaldesign.co.uk/
- 102 http://dennisbloete.de/
- 103 http://www.mediaambassador.pl/
- 104 http://www.arrivaldesign.co.uk/
- 105 http://www.hopkingdesign.com/
- 106 http://www.hopkingdesign.com/
- 107 http://dunamisdesigns.com/
- 108 http://www.surfgarden.de/
- 109 http://www.surfgarden.de/
- 110 http://www.1ncu8u5.co.uk/
- 111 http://www.1ncu8u5.co.uk/
- 112 http://www.fabspider.com/
- 113 http://www.fabspider.com/
- 114 http://www.ollyhite.com/
- 115 http://www.ollyhite.com/