30 Inventive Website Footer Designs

Friday, August 18, 2017

Not long ago we posted a collection of creative WordPress header designs. This week we have decided to make a compilation of inventive website footer designs.

The majority of the sites we see on the web do the bare minimum when it comes to footers, maybe an <hr> tag with some copyright information, contact info and links to social media sites or something similar. But what if you want to go above and beyond the norm?

I often feel that the footer of a website is usually something that is an afterthought to designers. They plan a site and lay it all out, then get to the bottom and wonder how they can quickly and easily tie the page off. But why not include it in the design? Why think of your site as a vertical page that scrolls from top to bottom? A website has multiple pages, just like a book. So why not think of your next website more like a book, something that comes full circle at the end and returns you back to the beginning?

These website footer designs are like treasure to designers. Don’t forget to click on the image to visit each site (they have some awesome header designs and content), and if you would like to show off your footer, leave a comment.

Bcandullo

Bcandullo’s footer design is girly and uses a beautiful, blue gradient. This footer is mostly focused on showing contact info. You even get a contact form. It’s all about finding clients and this is an awesome approach.

Branded07

Branded07,s footer has a nice vector illustration incorporated. It also offers a quick “Get in touch” widget with a small contact form.

Yodiv

YoDiv is a fun site, not only because of the entertaining icons and artwork, but because the footer provides a wealth of free resources for developers and designers. I’ve seen this strategy of making the bottom of your page ground level, giving everything above it the appearance that it was in the sky, and by making the color below it an earthy, dirt-brown color, suggesting the footer is buried underground.

Inspiredology

I’ve run across this theme a couple of times, but Inspiredology was the first place I saw it. It’s a fun layout from top to bottom, but the one noteworthy thing about their footer is how they use one simple graphic to tie the entire page together. They could have left the chemistry beaker full of magic potion and the pile of books out and the site would have still been fine. But by placing that image there it ties us back into the header at the top of the page, giving the site a whole and complete feeling.

PSD Tuts

PSDTuts footer is filled with useful info. Want to know more about their copyright rules? You can find out here. Also if you’re interested in writing a tutorial or send them some suggestions, you can easily do that as links are provided.

Basecamp HQ

Basecamp HQ does a great job at sprucing up their footer. One of the more interesting things I found about this footer was how they integrated the corner graph.

Carol Rivello

Carol Rivello has a perfect example of social media icons in use in her footer. Her color selection flows together seamlessly and there aren’t any sharp contrasts that strain the eyes and make it hard to look at. I also like how she uses a simple graphic to add a little character to the footer of the page. It makes the footer a little taller, but without the graphic, it would be just another footer and would be easy to overlook.

Andy Simpson

I’m always a fan of including photography in sites. So, naturally, when I came across Andy Simpson’s site and saw his footer had a mini-Flickr feed in the footer, I was quite pleased. Along with his Flickr feed, Andy also includes all the basics and useful info, like how to get in touch with him, page links, a site map, his logo, and even a button to quickly jump back to the top of the page.

Viget Inspire

Viget Inspire’s blue colored footer is divided into 2 columns and has focus on contact info.

Sam Rayner

Sam Rayner’s website footer has a cool way of displaying its widgets. You’ll see a cool gallery widget showing his latest work, an RSS icon and a Recommended Posts element.

CSS Tricks

CSS Tricks footer is full of useful links like Navigation, About, Other Projects, Subscription and FAQ.

Productive Dreams

Productive Dreams’ website footer is simple, has a dark background and a cute, little, illustration.

Simple bits

Simplebits footer is simple, yet informative. You’ll get a bunch of useful links for social media accounts.

Matt Brett

Mat Brett’s dark brown footer design has two featured buttons and some text, on a dark background.

Blup

This is another great example of a footer design with little or almost no information, but with a super cool vector illustration.

UsTrendy

UsTrendy’s light footer with pink accents is all about links! It offers many useful links to important pages of the site.

Biola

Biola’s red footer design has some interesting icons which help in creating a bond with the readers.

BoagWorld

This is a huge, fullscreen footer with lots of links that offer some really useful information to the readers.

Bern

Bern footer design doesn’t have any widgets but it has an awesome map element added to it. This is what makes it look so good.

LoonDesign

Loon Design’s footer is all about showing the most recent works in a Portfolio gallery widget. It also shows a brief description of the owner.

Albertlo

This is a nice, informative footer design with an About section, a detailed contact information widget and a nice Testimonials element.

Cappen

This is a stunning example of how you can successfully create a minimalist, fullscreen footer for a single page website.

Hugo & Marie

When creating a footer layout it’s important to keep in mind to also have an outstanding design that will impress your users.

Elastique

Here is another beautiful footer that demonstrates elegance by using a dark background and simple, white links divided into 4 columns.

Brave People

Here is an excellent footer that has a simple but very effective design. It uses big fonts and a black and white color palette.

Feedly

Feedly offers a single place to easily read all the news you rely on. It lets you organize all your favorite publications, podcasts and blog updates, in just one place. Their footer includes a simple CTA.