fbpx
  REQUEST A FREE CONSULTATION
Supercharge your SEO! Subscribe to our newsletter for the latest SEO tactics & best practices

The Importance of a Successfully Designed Footer

By
Updated March 31, 2017
No Comments

 

Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Most sites contain templated information that can be found on every page of the site. In this tutorial I’ll go over how to incorporate the design aesthetic that we’ve created for the site so far, and what to include in the footer to make valuable use of the space.

Call To Action:

It’s common to not finish the site with a next action, but I think it’s a good opportunity to add some call to action. In this example, prior to those final footer blocks I’ll use a stock photo from pic jumbo. In the first video I added some color and opacity to the hero unit, so I’ll copy those same filters to use on the photo above the footer.

I will commonly include some call to action that will be on every page, so I’ll choose relevant CTAs, and create an attention grabbing headline.

Visual Balance:

Going back to balance, looking at how we started on top, we have a dark area, so I’m going to add a dark area to complete the site at the bottom.

In this example I create 2 sections, using color to indicate the difference. I use a dark gray at the very bottom to put some standard information in, like the copyright.

Common Footer Items:

When it comes to deciding what to include in the footer section, include the things that users expect to see there. Typically this will contain:

Hook better leads with hard-working digital marketing

We help small businesses get more traffic and leads with Professional Visibility™ through web design & SEO

Free Marketing PlanGet a Free Demo
Ready to hook better leads and save time with hard-working digital marketing? Start the Conversation
  • Contact Form
  • Social Media Links
  • Contact Info (ie. address, email and phone number)
  • Map of Location
  • Sign up for Emails

Where it’s necessary, add a title to the section. In my example I grabbed a headline font that I used higher up on the page and labeled this ‘Contact Information’.

Font Awesome, which we downloaded in the previous video, has icons you can use for the different social media icons.

Since you can’t embed a real map in your file, grab a screenshot and add the image into your design.

Once you’ve got your footer content finished, it should align well as evenly sized columns, so for this example each footer content piece is one third horizontally.

Get a Free Instant SEO Audit



 

Watch this quick video to see how savvy businesses save time and hook better leads:
 

Takeaways:

  • Repeat styles that you’ve used already in your design. I like to try to keep styles to a minimum.
  • Reuse the colors, and font styles where you can. This will be helpful for the programmer when the page gets turned into code.
  • You’re not hired to just make things pretty, but to make things effective, so try to think about users intention when making decisions about content to place at any point on the page.
  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, an SEO and Web Design company focused primarily on driving traffic and leads for small businesses, roofers and construction companies.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Want to hook better leads with hard-working digital marketing?


Get a free consultation now