January 25, 2019
Proof is in the FooterBack to Blog
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.
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.
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:
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.
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 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
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.
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.