Footers In Web Design: Creative Examples and Ideas

About The Author

Sven is the co-founder and former CEO of Smashing Magazine. He writes at his Conterest Blog where he focuses on blogs, content strategy, writing and publishing … More about Sven ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

This article 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.

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?

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.

Design Shack
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.

Design Shack
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.

Footers - YoDiv » Home

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

Footers - Vimeo, Video Sharing For You

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

Screenshot

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

Screenshot

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

Screenshot

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

Footers - MB Dragan

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

Screenshot

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

Footers - | p a u l o t a n e d a | portfolio 2008

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

Screenshot

Roman Leinwather has some green flowers for us…

Screenshot

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

Footers - Web design | Realizare website | Promovare web | Optimizare website | Web design Bucuresti

A little city on StrawPollNow.com.

Footers - StrawPoll—Tiny polls in 140 characters or less

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.

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

Footers - HEBAtec Internet Systems: Webdesign Studio und Internet Agentur in Bielefeld

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

Screenshot

Viget.com provides navigation in categories and archives.

Screenshot

Blogsolid offers an icon parade in the footer.

Screenshot

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

Footers - Bits and Pixels

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

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

Legendary Aircraft has a toolbox in its footer.

Footers - Legendary Aircraft - aircraft restoration, repair, rebuild, maintenance, Yak, vintage, oldtimer, aeroplane

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

Screenshot

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

Footers - fabspiderâ„¢ everything web - home

So does Bart-Jan Verhoef.

Screenshot

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

Screenshot

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

Footers - Us Trendy: Music, Fashion, Design and Art Portfolios. All in one place.

Dandelionpath with swirls, curves and flowers.

Screenshot

Colorful curves at the bottom of AIGA Los Angeles.

Footers - AIGA Los Angeles

Hicksdesign with a retro-theme and brief contact details.

Screenshot

Codex Transportica — simple and distinctive.

Screenshot

Johanna Hallin clips the footer to the site layout.

Screenshot

Catydesign’s cat is sweet…

Screenshot

…and Olieng’s lobster scorpion is even animated!

Screenshot

Link suggestions in Catalyst Studios sketchbook.

Screenshot

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, email subscription and tag clouds can be placed there too.

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

Footers - The Greg Brady Project

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

Screenshot

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

Footers - Us Trendy: Music, Fashion, Design and Art Portfolios. All in one place.

Dandelionpath with swirls, curves and flowers.

Screenshot

Colorful curves at the bottom of AIGA Los Angeles.

Footers - AIGA Los Angeles

Hicksdesign with a retro-theme and brief contact details.

Screenshot

Codex Transportica — simple and distinctive.

Screenshot

Johanna Hallin clips the footer to the site layout.

Screenshot

Catydesign’s cat is sweet…

Screenshot

…and Olieng’s lobster scorpion is even animated!

Screenshot

Link suggestions in Catalyst Studios sketchbook.

Screenshot

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, email subscription and tag clouds can be placed there too.

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

Footers - The Greg Brady Project

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

Screenshot

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

Footers - Lucy Blackmore | Artist | Harrogate

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

Footers - Arrival Design - Web Design Agency

Media Ambassador offers e-mail newsletters…

Footers - Arrival Design - Web Design Agency

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

Screenshot

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.

Screenshot

5. Experimental solutions

Utensils in the Surfgarden.

Screenshot

1ncu8u5 has a quite grungy footer.

Screenshot

Farbspider — design agency presents people working there.

Footers - City of Grace Mesa

Further Reading on SmashingMag:

You may also want to take a look at the posts: