Rules and Tips for Web Site Footer Design

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:
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
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
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.
 Rules and tips for footer design
 The footer is also a great place to include more useful links.
 Rules and tips for footer design
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
 Rules and tips for footer design
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
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: 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 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
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
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: footer uses illustrations to help separate sections.
Rules and tips for footer design
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.

11 Responses to “Rules and Tips for Web Site Footer Design”

  1. The Print Blog

    Thanks for those awesome examples of footers. Whenever I do web design I always overlook the footer, but these examples are making me reconsider my design process in the future.

  2. Mariya

    the article is good, but picture is too small and cant see red lines and red text on pictures…

  3. Joseph R. B. Taylor

    Good timing for this post. I’m in the midst or auditing and standardizing footers across a 30+ network of sites so I enjoyed seeing those creative examples in one place.


  4. Karina

    Hi Saya,
    really good idea this post, I actually have never seen a similar post. Thanks for the inspiration. Take care.

  5. Web Page Design

    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

    web master

  6. making a website

    If you are going for most excellent contents like I do,
    only pay a visit this web site all the time for the reason that it presents quality contents,


Leave a Reply

  • (will not be published)

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