Rules and Tips for Web Site Footer Design

sample171-940x198
The design of web site footers has changed drastically in the last few years.Gone are the days when footers were a place for repeating the top navigation bar and the copyright information.Web designers realized that they can be used for different marketing purposes, not only highlighting the links but also directing the viewer’s attention to specific areas .
Footers are now an important feature in web layout structure, appearing as the end of a list or a stopping point.  This is the section of the site that signifies that the viewer is ready to leave.
Studies show that people are more likely to remember what they have visited at the end of the list.  Footers are featured in prime web layout real estate to draw the viewer’s attention to what they are supposed to be remembering.
 Below we look at two forms of footers (compound and non-compound) and review some rules and samples.
Structure of a web site
Rules and tips for a nice web footer design
This shows how we navigate a site from header to footer. Footer located at end of the list and it is a stopping point.  Where you are ready to leave the site.
Below are the calls to action, lists, links and information people include in their footers:
  • Personal image or information
  • Fields to enter information.
  • Newsletter subscriptions.
  • Link to social media (one or multiple)
  • Links redirecting viewers back to important pages in the site.
  • Resources
  • Repeating the Navigation bar
Important rule:To design a better footer, remember to clearly separate the footer from the content of the web page.

There are many different tools that can be used to do this, such as:

  • Change the background design.
  • Use different texture.
  • Add a separator line.
  • Color changes.
  • Adding an illustration or image.
  • Typography.

 

Or a combination of all or some of these.
There are two different formats utilized in designing footers.The first is a compound footer,which means that the footer contains different or smaller sections and parts.The second format is a non-compound footer, which is made up of only one section.
 Non-compound footers:

Non-compound footers are very common. Here are some samples to review:
Source: http://www.bishopwearmouth.co.uk/
This example used both texture and images. A nice drumstick image was used to separate this footer from the content contained above. A smooth texture on the blue gave a nice preview to what lay below
 Rules and tips for a nice footer design
http://www.jenierteas.com/
The graphic of the sea is a great separator. The ship is featured prominently in the middle, directing eye movement from left to right. This is aligned with the three columns of information below.
 Minimal footers:
 Rules and tips for a nice footer design
 Source: http://freehandfuturist.com/
The footer can be simple and minimal but still effective, as shown above
Or like this:Tips and rules for desgining a great web footer
 This example contains one call to action as well as social media links.
Source: http://2012.hd-live.co.uk/
 Rules and tips for footer designhttp://www.umw.edu/
 The footer is also a great place to include more useful links.
 Rules and tips for footer design
http://www.hdqt.co.uk/
In this footer, the designer used the footer as a mini site with its own header.  They thought up new phrases to replace the common “fill in the form” or “subscribe” fields, and also incorporated a storytelling element.
  Compound footers:
Compound footers are not as common as non-compound, but are still utilized well in the following examples:

This compound footer contains two sections. At the top are important input fields and links.  An image of the site owner is also used, as is a link to twitter.  The lower part (with the black bar) focuses on contact with the aid of a graphic.
 Rules and tips for footer design
 Source: http://www.radiumlabs.com/
 Rules and tips for footer design
Source: http://www.comfortbrothers.com
This is an excellent example of a compound footer.  A zigzag line is used as separation of color as well as texture. Information is divided into different sections based on importance.  The viewer’s eye movement is directed to the bottom right corner by the bright color to where the final call to action is placed.  Note how they used different font sizes and architecture in the information contained in the footer.
 Tips and rules for footer design
Source: http://www.goodsonbros.com
The spotlight on the coffee beans on the table, as well as the texture of the table is a perfect separator and a good place to draw the viewer’s attention.  The cat’s eyes lead the viewer to the call to action “Follow Us.”  This is another excellent example of how the designer used the red background to present information in a silent and muted form.  It’s not just a separator, but it also gives useful information. The background squares make a beautiful separator. Also, social media has a lower value to this business, based on its location in this layout.
 Rules and tips for footer design
Source: http://patagoniacreative.com/Please note how the background’s squares made a beautiful separator.You can easily understand that the social media links for their site has the lowest value based on its placement.
Typography as a separator
 Rules and tips for footer design
http://www.thedailybeast.com/In this compound footer, the use of different font faces and sizes created different sections in the site.
 Use of icons in the footer:
Rules and tips for footer design
http://www.thecassette.fr/
There are many links and data contained in this footer; however with a great use of icons, typography, light, and texture the information is presented easily without overloading the viewer.
 Use of illustration:
This is a simple footer with just navigation. The nice illustration makes sure to draw the viewer’s attention to the footer with a birds eye-view angle.
 Tips and rules for footer design
http://tapbots.com/
The characters used for different sections are prefect for drawing attention to the footer and directing the viewer’s line of site to sections the designer wishes to highlight .
 Rules and tips for footer design
Source: http://www.volll.com/#section_mainThis footer uses illustrations to help separate sections.
Rules and tips for footer design
http://www.branded07.com/
In this sample the illustration works as a background, and surrounds what the designer wanted viewers to pay attention to.

If you are interested in this subject please download the forth e-book of digital design toolkit on the side bar.

About the author:

. Follow her on Twitter / Facebook.

11 comments on “Rules and Tips for Web Site Footer Design

  1. Footer links are important for make an easy navigation from any page, for the good seo we should take care of url of footer links and header links, some time canonical problem occurs and that affects on seo. Thanks for sharing

    Windsor
    web master

Leave a Reply

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

*

nine + = 17

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>