Smashing Magazine we smash you with the information that will make your life easier. really.

Footers In Modern Web Design: Creative Examples and Ideas

By Smashing Editorial, April 8th, 2008 in Design Showcase | 181 Comments | Forum

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 Solutions which showcases even more excellent examples of CSS-based footers.
Navigation Menus: Trends and Examples with recent trends, examples and innovative solutions for design of modern navigation menus.
Pagination Gallery: Examples And Good Practices 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 Practices 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.

CSS Beauty presents its recent forum discussions and job openings at the bottom of the page. It’s unclear whether they belong to the footer, though.

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.

A typical example is DesignShack with the whole navigation menu placed at the bottom of the site.

Designshack has the complete navigation, layout selection, colour selection and further information in the footer.

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.

YoDiv sends little bubbles in race.

Volll has a family of octopus and an umbrella on the ground.

Vimeo takes a look at little humans from user’s perspective.

Kulturbanause.de with a waterfall and water ground. Beautiful and (really) unusual WordPress blog design.

The Rissington Podcast has a ~~helicopter~~ plane ready to fly. Comic in use.

Rapidweaver has taken care of the smallest details. This sweet language selection fits perfectly to the site design.

MB Dragan loves hand-drawing. We too. Simple and beautiful.

Miloslav Lešetický is an illustrator which is why one of his illustrations is placed in the footer.

Paul Otaneda with a light green theme in the footer. Icons, a tree and three birds inclusive.

TNTPixel — oh-oh, you better be careful with this one.

Roman Leinwather has some green flowers for us…

…and on Web4Biz.ro it seems to be quite cold at this period of time.

A little city on StrawPollNow.com.

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.

Billy Hughes at War with Billy Hughes doodled in the footer.

HEBAtec has a number of different features in the footer. Among them RSS feed and a search box.

Freelenz.at knows how to arrange blog postings, comments, RSS feed icon and Flickr thumbnails. And, oh, a beautiful plant too!

Viget.com provides navigation in categories and archives.

Ungarbage with (probably) too many links.

SprintBio plays with variations of green.

Blogsolid offers an icon parade in the footer.

Bits & Pixels has a quite colorful footer with some icons. The design fits perfectly to the overall site design which is pretty colorful too.

Still, often overall layout colors and the footer design are very similar. Example: City of Grace Mesa

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.

Isn’t he sweet? Apart from that, he is Crazy and Funny. At least that’s what his creators promise.

Legendary Aircraft has a toolbox in its footer.

Bistro Williams offers juicy fruits at the bottom of its site.

Pil.hu with a pen, an envelope and a desk.

?ukasz Tyra?a shows some hand-drawn sketches.

So does Bart-Jan Verhoef.

We feature Nick La’s Webdesignerwall quite often, but it definitely deserves it. The attention to details is amazing.

Us Trendy — all in one place, including RSS-feed-icon, swivels and a butterfly. Isn’t it too much?

Dandelionpath with swirls, curves and flowers.

Colorful curves at the bottom of AIGA Los Angeles.

Hicksdesign with a retro-theme and brief contact details.

Codex Transportica — simple and distinctive.

Nicolas Le Bas presents a footer in a completely different way. Three info-cards are placed next to each other, at different angles, with same backgrounds.

Johanna Hallin clips the footer to the site layout.

Catydesign’s cat is sweet…

…and Olieng’s ~~lobster~~ scorpion is even animated!

Link suggestions in Catalyst Studios sketchbook.

The fingerprints at the bottom of the layout on Instant Amber.

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.

Ten Thousand Things presents contact information, some advertisement and the most popular tags.

The Greg Brady Project combines a contact form and the footer.

Rahul Joshi has 4 columns: one for Flickr images, one for further pages, one for copyright and one for contact details.

Lucy Blackmore has a stick-it-note which leads to the home page of the site.

Paul Wallas has placed a tag cloud into his footer.

Arrival Design gets right to the point. Here is what they do. And here is how you contact them.

Dennis Blöte with contact details and a minimalistic contact form.

Media Ambassador offers e-mail newsletters…

… and so does Hopkingdesign. Not a good idea as you won’t attract many subscribers.

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

Utensils in the Surfgarden.

1ncu8u5 has a quite grungy footer.

Farbspider — design agency presents people working there.

OllyHite.com — not too impressive content, but a unique design.

Published in Design Showcase, April 8th, 2008
Tags: creativity, footer, ideas, layouts, navigation, trends

1.

Rudi (April 8th, 2008, 6:00 pm)

nice collection smash
maybe you can include Link [www.gus-bali.org] for this category :P
2.

Craig Schlewitz (April 8th, 2008, 6:01 pm)

VERY inspirational!
Great post.
:]
3.

Brian (April 8th, 2008, 6:04 pm)

I think another great addition would be Abduzeedo.com
4.

Armen (April 8th, 2008, 6:32 pm)

Fantastic work as usual, guys!

Dugg!
5.

Robert Marbun (April 8th, 2008, 6:47 pm)

lobster? scorpion!
6.

Jimi D (April 8th, 2008, 6:47 pm)

404 on the Navigation Menus: Trends and Examples link

mreow.
7.

Mini0n (April 8th, 2008, 7:09 pm)

LOL
And it’s a plane, not an helicopter… xD

Anyway, great article!
8.

Kyle (April 8th, 2008, 7:29 pm)

Olieng’s is a scorpion, not a lobster.
9.

Vincent (April 8th, 2008, 7:36 pm)

That one in Olieng’s website is not a lobster, but a scorpion! O_O

I love the mono-chromic kind of footer. They are simple but sharp to the eyes. Very good!
10.

Dulce (April 8th, 2008, 8:03 pm)

This should makes us think that footers, even looking insignificant at the bottom of the websites, should not be taken for granted but to maximize the overall website design. I’m always a follower of Nick La. He deserves to be mentioned here, as always. Another smashing compilation! Keep it coming.
11.

Peter T - Webshop (April 8th, 2008, 8:32 pm)

Great post. Here’s another good resource for website footers, Link [yample.com]

Peter
Link [webshopinabox.peter-tashjian.com]
12.

Jamie Le Souef (April 8th, 2008, 10:31 pm)

Fantastic read! I’ve been looking for design ideas for footers for a client. This has helped me along nicely :)
13.

Mike (April 8th, 2008, 11:41 pm)

Thanks very much for the feature (Catalyst Studios) - it means a lot to be mentioned in the same article as Nick La and Jon Hicks!

But seriously… how did you find out about the site?

o_-
14.

kuldeep (April 9th, 2008, 12:04 am)

I think even we have great footer. Let us know what do u think.

Link: Link [www.moviepresslive.com]
15.

Dave Bowker (April 9th, 2008, 12:07 am)

Excellent, as always.
16.

Gary D (April 9th, 2008, 12:34 am)

It’s a nice idea to enhance the footer but don’t forget that from an interation design perspective the purpose of a footer is to indicate where the page ends to the user so they can stop scrolling. As usual it’s important to balance usabilty with style.
17.

vickym (April 9th, 2008, 12:35 am)

Link [www.drawn2pixels.co.uk] has a flying hippo’s bum!
18.

Meander365 (April 9th, 2008, 12:43 am)

Good article. I’ve been searching for a footer-inspiration type page for a while. One to bookmark. Cheers.
19.

sandie sørensen (April 9th, 2008, 12:54 am)

Well.

Smashing magazine. I tried to surf to this link, but I was surprised to find an article about “error”-messages instead. I was a bit confused for a while there….
20.

Chris (April 9th, 2008, 12:54 am)

Cheers Smashy
21.

sandie sørensen (April 9th, 2008, 12:55 am)

Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds.

-I ment this was linking to the “error-article”…
22.

sandie sørensen (April 9th, 2008, 12:56 am)

Appropos footers.
I think your own site: Smashing Magazine needs a link to the top in the footer…
23.

Rob (April 9th, 2008, 12:58 am)

I was gonna say that :P it’s a Spitfire…
24.

roger (April 9th, 2008, 3:13 am)

Dear Smashing Magazine

Are you psychic or do you have some kind of secret spy agent sitting on my computer listening to my search request to google?

Last week i’m looking for fresh new rss icons to use for a new project and i look at my news feed and there it is.

This week i’m searching mr google for new footer’s for another project and again you arrive timely in my news with another appropriate post ;)

Thanks for all the great posts, dug, stumbled etc etc…..
25.

Richard (April 9th, 2008, 3:31 am)

The same sites we’ve all seen before…Hicksdesign (albeit great), webdesignerwall, etc. Snore.
26.

BeyondRandom (April 9th, 2008, 3:58 am)

Great List…as usual!
27.

Clara Vazquez (April 9th, 2008, 5:24 am)

Congratulations for your great work!

When inspiration is needed go to smashingmagazine….It’s incredible!

Thanks a lot!
28.

lica (April 9th, 2008, 5:37 am)

One to bookmark, thanks!
29.

Travis Sloan (April 9th, 2008, 5:55 am)

Some nice bits of useful info, but YOUR page really sucks. It takes forever to load, way to many external feeds/includes, ect. It is slow and even after it loads, it scrolls in a herky jerky way that just makes me decide to leave and never return. I hope you clean this mess up as, the article was pretty good.
30.

Carl Crawley (April 9th, 2008, 6:18 am)

Great Article…. in #1 (Yodiv) - They are “Divlets” and they are in a queue for jobs. Take it from a bonafide “Divlet” :-)
31.

AJ (April 9th, 2008, 6:40 am)

wow, thank you guy!
32.

Jiri (April 9th, 2008, 7:33 am)

Very useful! Just one thing - Miloslav Leseticky is not an illustrator, but web designer.
33.

Rachael (April 9th, 2008, 7:45 am)

I personally really like the footer on Link [www.guitarangel.net]
34.

Stew (April 9th, 2008, 8:02 am)

Ha ha , I know Olly Hite a bit from home. Nice bloke.
35.

Fred Epner (April 9th, 2008, 10:04 am)

how about fixed navigation on the bottom like Link [www.betterinteractive.com]
36.

Melissa (April 9th, 2008, 10:04 am)

Great list of examples. Actually gave me a few inspirational ideas…

@Rachael: Cheers for the nice comment! :D Although my site is naked for CSS Naked Day today, the style will be back up at midnight. :P
37.

imsraaia (April 9th, 2008, 11:27 am)

Superb… inspiring work…
38.

Kirk (April 9th, 2008, 2:54 pm)

congratulations on your great work
39.

Adrian (April 9th, 2008, 3:31 pm)

what about last.fm?, I expected it to be commented here when I read the post title.
40.

Prasad (April 9th, 2008, 6:31 pm)

Fantastic!! Thanks for sharing.
41.

Mike (April 9th, 2008, 7:03 pm)

Great colection! I’m impressed! Where you guys find all these cool sites? I also like this footer Link [globator.net] [globator.net]
42.

Mithun (April 9th, 2008, 8:29 pm)

Excellent collection
43.

OverZero.it (April 9th, 2008, 11:47 pm)

Simply, thank you.
44.

David (April 10th, 2008, 5:05 am)

Very well! Good Ideas and a lot of great works.

Here another footer: Link [www.davidhellmann.com]
45.

Reginald (April 10th, 2008, 8:26 am)

This is a wonderful and informative article. I must agree that most individual online entities may actually take their foot space for granted. Since, it has been beaten into our heads that the top portion of any web page is the most important. Hence, great attention should be placed in this area.

Thanks for reshaping my focus to an all encompassing one.
46.

Dan Denney (April 10th, 2008, 8:57 am)

Thank you very much for this!
47.

Creativepayne (April 11th, 2008, 7:55 am)

I am so guilty of this! Thanks for bringing it to my attention. Nice examples too!
48.

Robert (April 11th, 2008, 10:40 am)

Nice collection. I would maybe add Link [blackmoondev.com] to this collection. Cheers
49.

Chrissie (April 11th, 2008, 10:51 am)

I would have liked to have seen:
1) ecommerce sites
2) full screen shots so we can see the context of the footer in the whole page
50.

Web Design Egypt (April 12th, 2008, 3:30 am)

they are such an amazing collection … Great Job Guys
51.

Ralph (April 12th, 2008, 11:32 pm)

Great list with much more ideas. Thank you for your great work, again ;)

Ralph
52.

PoLR.co.uk (April 13th, 2008, 2:19 am)

Once again a great list to look through for inspiration.
53.

glenndavid (April 13th, 2008, 7:40 am)

Link [www.henryhoffman.com] this one has a pretty impressive footer too
54.

Gerrard (April 15th, 2008, 5:34 am)

Real footer and real feet COOKIEFACE
55.

Blue Buffalo (April 15th, 2008, 7:13 am)

Awesome collection!! Thanks!
56.

Pedro Assumpção (April 15th, 2008, 9:08 am)

Hi, great post and collection.
In my blog Link [www.codesignville.com] has a special footer too, or better, three footers, depending the hour of the access. Take a look there.
Thanks and congratulations.
57.

Alfred Fox (April 15th, 2008, 5:44 pm)

This is a really great collection of work right here. I agree that many people over look the use of a well designed footer while others take full advantage of the what that curious space can do for an effective design.

Once again thank you for the imagery!

Alfred Fox
Link []
Link [www.alfredfox.com]
58.

Nancy (July 28th, 2008, 11:27 pm)

Yeah your article really so interesting and good about footer values who dont knows about it.
59.

Alanya (October 11th, 2008, 12:17 pm)

Another great post from this page, thank you!
Link [www.alanya.biz]
60.

Whimsy Collective (October 31st, 2008, 8:53 pm)

Link [vandelaydesign.com] This was shared in the Fresh Bookmarks of Smashing Magazine and worthy of knowing this site once it disappears. BTW, how do we access the Fresh Bookmarks in a single page?
61.

Kazelagj (November 12th, 2008, 6:03 am)

Hi webmaster!
62.

Kazeljtn (November 12th, 2008, 6:14 am)

Hi webmaster!
63.

john (November 17th, 2008, 10:19 am)

Amazing! Really usefull one. like it very much.
See this site Link [www.busimonster.com]
64.

Avinash (January 14th, 2009, 7:17 am)

This is a very good collection of footers, I think smashmagzine could also think of explaining customization of these with good samples that would lead the users to get much out of its efforts in helping the webmasters and bloggers
65.

Anonymous (February 3rd, 2009, 8:39 am)

Respect given. Incredible.
66.

Robert Krieg (February 11th, 2009, 12:51 am)

Hello you!
Wow, interessting collection!

I would like to know how you feel about the footer I designed for my page. Actually I was inspired by such a footer-collection of drweb.de

Greetings

Robert
67.

omgwtflol (March 7th, 2009, 3:28 am)

i like.
68.

bastiano (March 19th, 2009, 4:42 am)

Codex Transportica is the most beautiful blog design I have seen.
69.

Nikki (March 29th, 2009, 9:24 am)

Lovely collection of footers. I admire the amount of people turning to their footers to host content and art. It’s a great surprise to find on a great design.

Shameless plug: Link [snailbird.com].
70.

Mike (April 16th, 2009, 11:07 am)

Apparently, sites with beautifully designed footers are beautifully designed in general.

Go figure.
=)
71.

Babylya (May 13th, 2009, 9:50 pm)

Да,согласен с предыдущими блоггерами
^..^ :-)
72.

ENAN (May 19th, 2009, 1:44 am)

Olieng’s is a scorpion, not a lobster
73.

piano` (June 7th, 2009, 10:03 pm)

thanks for the great ideas! ^^ need them for my web page design
^^~
74.

Symon (June 12th, 2009, 10:47 am)

Inspiration overload!
75.

Nockalgok (June 14th, 2009, 12:43 am)

Хм,согласен с предыдущими ораторами
^..^ Bye
76.

Nockalgok (June 15th, 2009, 12:32 am)

Молодца,согласен с предыдущими высказываниями
^..^ Bye
77.

Nockalgok (June 20th, 2009, 12:01 am)

Хм,несогласен с предыдущими блоггерами
Споки Bye
78.

Tom Kaare (June 25th, 2009, 11:48 pm)

Excellent collection, maybe you should add this site? I like when you play with a logo in the footer.