| 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 | |
 |
|
| 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: | |
|
|
| 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:
|
|
| 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 | |
 |
|
| 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: | |
 |
|
| Source: http://freehandfuturist.com/ | |
| The footer can be simple and minimal but still effective, as shown above | |
Or like this: |
|
| This example contains one call to action as well as social media links. | |
| Source: http://2012.hd-live.co.uk/ | |
 http://www.umw.edu/ |
|
| The footer is also a great place to include more useful links. | |
 |
|
| 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. |
|
 |
|
| Source: http://www.radiumlabs.com/ | |
 |
|
| 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. | |
 |
|
| 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. | |
 |
|
| 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 | |
 |
|
| 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: | |
 |
|
| 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. | |
 |
|
| 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 . | |
 |
|
| Source: http://www.volll.com/#section_mainThis footer uses illustrations to help separate sections. | |
 |
|
| 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.
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.
the article is good, but picture is too small and cant see red lines and red text on pictures…
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.
Thanks!
Joe,
Thanks, I am glad it worked with your schedule.
interesting wayout you describe in this article. thanks
Hi Saya,
really good idea this post, I actually have never seen a similar post. Thanks for the inspiration. Take care.
Karina
Thanks Karina
Great post. Thanks.
You are welcome
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
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,
thanks