2013_05_featured_website_footers Design

How To Design A More Effective Website Footer

It goes without saying that the success of a website depends on many different aspects. For example, the overall usability, the visual design, and the brand consistency all affect whether or not users are happy with your site. How easily can they find their way around? How much do they trust you and your content? Do they think it’s fun use your site?

In previous articles, we already discussed some aspects that make your website more effective, such as your website header, navigation menu, and content structure. Now, lets take a look at your website footer. Every website has one and there are many different things you can do improve your website footer.

Here are 6 ways how to design a more effective website footer:

1. Visual appeal

Let’s start with a very basic, yet effective aspect of your website footer: Its visual appeal. Even if you don’t put any social media buttons, links, or other information in your footer, it can still make up a powerful part of your site. You might want to keep your site clear and simple, avoiding unnecessary clutter and confusion. At the same time, you don’t want it to look steril, uncreative, or even boring. Your footer is perfect for adding some visual details and beauty to your site. Grant your visitors some eye candy – without putting the clarity and usability of your site at risk.


This footer is very energetic, bright, and fun, highlighting the essential service of the company.

Yesinsurance.co.uk is a regular insurance company from the UK. However, their site looks anything but typical for their industry. Instead of the classical color scheme that is associated with trust and expertise, Yes Insurance has chosen for more happy and energetic colors. While the header and content area are kept clean and focused, the footer is the exact opposite. It doesn’t hold any information and neither is it in any way serious. Rather, it is very bright, fun, and highlights the essential service of the company: Living a carefree and happy life.


The visual appeal of a website affects your visitors emotionally. Emotions are an essential aspect of effective web design.

The footer of Urban Pie is very appealing as well. The style, visuals, and colors perfectly match the rest of the site, adding to it’s overall appeal and character. The footer does not hold any information. Now, you could argue that this makes it irrelevant, not contributing to the effectiveness of the site at all. However, the emotional aspect of web design is very important and even a simple visual can have huge effects on how we perceive a site.

2. Visual framework

Next to the pure visual appeal, your website footer can also be part of a visual framework for your website. As the word framework already gives away, you can wrap your entire site in a visual frame. The framework starts with a visual element in your header. When repeating this same, or a similar element in the middle, or at the end of a page, you give your visitors a clear indication of what belongs together and that they are still on the same site.


A visual framework can be wrapped around your entire page, guiding your visitors from top to bottom.

The Pixel Creative Blog wraps its entire content in a visual framework. It starts with a beautiful illustration in the header, followed by a tree trunk that goes all the way down to the footer of the page. The footer itself is yet another awesome illustration with lots of details waiting to be discovered by the reader.


The colorful and characteristic illustration from the header is repeated at the end of the page.

The web design blog Webdesigner Depot has chosen to make their footer part of a visual framework. The colorful and characteristic illustration from their header is repeated at the end of the site. This way, visitors are not distracted by random design elements while reading through the content area. However, at the very top and at the end of the page, they are being reminded what site they are on.

3. Content summary

You can also use your footer to offer your users a summary of your content. Imagine, a visitor is looking for something very specific on your site. They start at the very top and follow the path that seems most promising to bring them to the desired content. Eventually, they will reach the bottom of one of your pages and if they still haven’t reached their goal, they might get frustrated at that point. However, when offering them an alternative navigation at the end of every page, it’s like you say: “Sorry for that, why don’t you try again?”


Use your footer area to ensure your visitors they are on the right track and help them find what they are looking for.

The web design and SEO agency HitReach have a very detailed footer area. Not only do they show a clear, hierarchical link structure for their site, they also offer a visual and very inviting graphical explanation of what they do. So in case you scroll all the way down their page and start doubting whether you are even on the right site, they kindly reassure you that you are.


The top navigation only holds the most important links. All other links are exclusively listed in the footer area.

Wistia even goeas a step further. While they only place the most important links in their top navigation, their footer offers a comprehensive list of links to all their content. The links are structured well and its easy to decide where to go next – assuming you are actually looking for something specific.

4. Interesting links

Do you have interesting content that you want to share with your visitors? But dedicating an entire content area would be too much? Or just not reasonable? Your footer is the perfect place to provide your visitors with interesting links and resources. This way, you can make content available on every page, without giving up valuable screen real estate in your content area. Keep your content area to what’s really relevant, not nice to have.


The footer is used to display a selection of links on every page of the site.

The eco-lifestyle community Ecoki have dedicated their footer area to popular and featured articles of their own blog as well as recommended resources, such as other eco focused websites. This allows them to display these links on every page, while the rest of the content changes according to the selected content category.


*The visual is a great attention grabber, guiding the visitor’s line of sight to the provided content. *

Branded07 also decided to feature a selection of favorite and inspiring links in the footer area. Besides these links, the footer contains a subtle contact form and a big visual. The visual is a great attention grabber to guide the visitor’s line of sight to the provided content.

5. Trust

Your footer can also be a great way to convey trust. Remember, your footer should be the same, or at least very similar on every page of your site. This allows you use it for information that is also handy to provide throughout your visitors’ stay on your site. Also, you can place information here that is important, but doesn’t fit in with the rest of your content, such as contact details, social media buttons, copyright statements, etc.


The footer contains a lot of information that makes the site trustworthy.

The site of Stone Laboratory packs a lot of information in their footer area. However, they manage to do so in a very clear and not at all overwhelming way. Besides an overview of the sites’ content, there is a lot of information that adds to the trustworthiness of the site. For example, detailed contact information allow me not only to get in touch, but I can even decide whether I want to send an email, call, or even visit them in person. I even get directions to their physical address if I want.


A personal design adds to the trustworthiness of the whole site.

The designer and developer Brad Candullo has chosen for a very personal design for his online portfolio. The footer of the site is no exception, which adds a lot of trust to the site. It is divided into three columns: Contact info, a contact form, and his resume for download. That information together with the chosen colors and design elements leave no doubt that Brad is a real and authentic person, and that I actually get to speak to him when calling one of the numbers provided.

13 comments

  1. Rob RS

    Getting your footer right can really make a different to your website. It’s often overlooked but well worth the effort. Nice article-thanks!

  2. John

    Get your house in order first. Give your site a footer :) G

  3. Dave

    Footer also has certain requirements for SEO, legal T&Cs, etc., that you fail to mention in this article.

  4. Web Design Studio

    Well every website should have a footer as mentioned in your post. Great tips.

  5. Peter

    I just happen to stumble upon this site article. Very educative article. But it did not address my question, I want to know HOW to design footer for my site, I am using JOOMLA CMS for most of my works. Thanks

  6. Sabina Idler

    Hi Peter,

    Thanks for taking the time to read the article and for your kind words. I’m afraid I don’t have any experience with Joomla cms and I cannot give you technical advice on how to go about your footer if that’s what you are looking for. The article focusses on design ideas and inspirations of how to get the most out of your footer.

  7. Amy

    Sabina,

    Just wondering if you had learned much about the changes in the way Google is looking at text link footers ever since Penguin? Has this change the way you counsel on setting up footers? Thanks.

  8. Sabina Idler

    Hi Amy,

    I’m afraid, SEO is not my field of expertise and I’m not very familiar with the Penguin update.

  9. Jobette

    My worries on these well designed footer is that it can get more attention that the actual content specially the services.

  10. Kaosar

    How nice footer content.how to make this footer?

  11. Mobstaa

    I love how this blog is all about footers and this website doesn’t have one on it’s own.

  12. تسديد مديونيات

    This website was… how do I say it? Relevant!!
    Finally I have found something which helped me. Appreciate it!
    تسديد القروض بنك الراجحي

  13. Dawn

    Thanks. Never gave it a thought to personalize a footer. Why I’m clueless on how to do so. I do have a question. Are there links I could go to that will allow me to add a designed footer? Thanks and thanks for the suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *