January 25, 2019

Proof is in the Footer

Back to Blog
Burgandy Shoe on Yellow Background

A bad ending

There is nothing worse than binge-watching a tv series, only to find a lack-luster ending. What was the point? You commit all of this time and energy to identifying with the characters, discovering plot twists, and all to be let down with a cliché ending.

In my opinion, the same can be said with web design. I have designed and developed websites for some time; when searching for inspiration, or researching competitor websites, the first thing I will check is the footer.

A large majority of websites that we build use WordPress as a content management system. I have heard people say on several occasions, “I don’t want the site to look like a WordPress site”. This statement has often confused me. How can a tool used to simply manage content have a “look”. Then it dawned on me. The “WordPress” look actually has nothing to do with the CMS itself, but rather the free templates available to the masses. If there is one thing that stands out as “templated” it most certainly is the footer of the website.


Frameworks

For most people who don’t work in the web world, frameworks may be a foreign term. Frameworks are tools designed to help with the development of a website, or web application. Essentially they are libraries of code that have presets for building common elements. This includes, buttons, headers, footer, etc. Once of the most popular frameworks available is “bootstrap” which was developed by Twitter.

Frameworks are great for developers with minimal to no design experience. They offer clean, modern designs that developers can easily put together to bring their highly technical projects to life. The problem with frameworks, is that every out-of-the box website that uses them will look the same (see below). This is that “WordPress” look that people will often refer to. The truth is, the CMS has nothing to do with it.

Example of a bootstrap footer

This is why footers are so important to me. You could have a website with great photography, original iconography and your logo in the header. But, unless the footer pulls your brand into it and has some kind of originality, your site will look like a generic templated “WordPress site”.


5 Effective footers in web design

So… What are some example of effective footers? Well, it was actually quite difficult to put together a list. I found that most large scale companies – most of which you would assume would have the research and resources to put together a thoughtful footer, fell short. With that, I have put together a list of my top 5 favourites below:

Sketch App

sketchapp.com Footer
sketchapp.com

The sketch footer uses brand colours to identify and highlight parent pages. This in conjunction with the large bold CTA above turns a simple clean layout into a fully branded statement.

Famebit

famebit.com Footer
famebit.com

One of my favourite techniques used in footer design is using a brand element to tie the whole website together. The Famebit website uses their halftone pattern as a graphical element showing that thought went into the footer. Also, their technique of layering the CTA buttons over the page and footer area adds the sense of depth, and ultimately makes the design more impactful.

Stripe

Stripe Website Footer
stripe.com

Stripe is one of my favourite brands. Their bright colours, unique iconography and beautiful CSS transitions really make their brand feel like a living organism. The footer on the Stripe website again uses that layered effect for depth, and uses hierarchy to guide the user through their final send off at the bottom of their website.

Super Team Deluxe

superteamdeluxe.com

I stumbled upon Super Team Deluxe on Dribbble one day. I love how animated their brand is, and how they carry over this fun and exciting emotion into their footer. The warped line and illustrations let the user know that this is an original design, while unique link hover states are an added bonus.

Talent Atlas

talentatlas.com

The use of photography and layered iconography in the Talent Atlas footer once again pulls the brand right into the design. The use of layering ensures that the design doesn’t look to be an out-of-the-box template, but rather an impactful design that had thought and care brought into it.

Share this!

Lee TravagliniLee Travaglini"Nothing is impossible, only improbable"

About the Author

Lee Travaglini is the co-owner of Good Lookin Kids Inc. As a web designer his specialties focus on interactive design, including: IA, UI, UX, WordPress theme development and HTML5 game design and development. He also has extensive experience as a web developer using HTML5, CSS3 (adaptive CSS) and has a familiarity with jQuery (Javascript) and PHP.

With over nine years experience in the Interactive Design industry Lee has developed a strong understanding of the language possibilities and limitations that exist within each interactive design project. This understanding has sharpened his ability to adapt to different design styles and practices on a consistent basis.

Being an entrepreneur and a creator Lee is always looking to expand his abilities and is always wiling to try new creative outlets.


Dribble
/lezus