What’s below the fold is not visible for users. This conventional wisdom seems to rule the most of website designs today. Due to this trend website footer becomes one of the most neglected website elements that is paid little to no attention. Web designers use a footer as a place to store everything that didn’t fit the header. That’s why we see tons of mediocre footers with mosaics of information pieces that don’t combine well.
![](data:image/svg+xml;charset=utf-8,<svg height="342" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Footers are usually considered to have the lowest CTR among other website elements. Despite there’s no clear data on this statement, designers mostly avoid placing call-to-action elements to the footer. But if there’s still a part of users that reaches the end of a page and sees the footer then why don’t you just try to make use of it?
What Website Footer Contains?
Footers are usually filled with data that you can’t or don’t wish to place in header or across the page. Contact form, About info, phone number, address and map, all this would look clumsy in the header, so a site’s footer seems to be the best place to provide this data.
Upperquad
![](data:image/svg+xml;charset=utf-8,<svg height="353" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Footers often contain e-mail sign-up form for users’ engagement. Social buttons are also often placed in the footer. In many cases the footer may be used for additional navigation. Thus, a search bar may be arranged there as well as additional navigation menu. E-commerce websites may place info about physical stores locations, shipping and return policies in the footer. Most blogs add to the footer plugins to showcase the recent or the most popular posts.
Travel Agency Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="289" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
How to Make Footer Design Work
Footer is not just a beautiful decoration that finishes the website design. Properly organized, it may be useful for everybody. Let’s learn what points in footer design and structure you shouldn’t ignore.
Watch the SEO
There were times when website owners stuffed the footer with keywords to make pages more prominent for search engines. It was some kind of stratagem to increase the popularity of some less visible pages by linking to them from the footer.
Today search engines like Google have a wide range of tracking tools that can diagnose keyword-stuffed links even if they are hidden in the footer. This may cause a lot of problems for the website owner. So avoid meaningless keyword-stuffed links aimed at search engines and shift your attention to creating valuable footer links that add to the UX. Think of your users first, not of search engines.
Blocklevel
![](data:image/svg+xml;charset=utf-8,<svg height="225" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Watch the Hierarchy
Elements organization in the footer is as much important as on other parts of the website. Maintaining strong hierarchy and clear structure is essential for creating a good UX. There are always some links that are more general and important. Thus you should arrange them so your users would be able to understand the importance.
Blu Homes
![](data:image/svg+xml;charset=utf-8,<svg height="200" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
You may set categories of footer links to guide a visitor right to the necessary content. If you put some call-to-actions or sign-in forms in the footer, make them prominent and visible in first place. Then put everything else what is less important.
Big Hero 6
![](data:image/svg+xml;charset=utf-8,<svg height="532" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Watch the Footer Content
Thus again we speak about the quality of links and data you provide in the footer. Traditionally footer contains “Home”, “About”, “Contacts”, “Terms and Conditions” sections. People expect to see those links in the footer so it’s good to have them there. When considering to add some other links to the footer you should ask yourself: “Do my users expect to see that content in the footer?”
Dragone
![](data:image/svg+xml;charset=utf-8,<svg height="319" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Add valuable content to the footer that your users may wish to explore. Sometimes adding to the footer a Testimonials section or mentioning some famous brands that used your services is a good idea. Ecommerce websites may add a map right to the footer to make locations more prominent for their users.
Template with a Map in the Footer
![](data:image/svg+xml;charset=utf-8,<svg height="728" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Footers mostly provide users with some info on the company. We may call such footers static ones. But sometimes you may come across contact or sign-up forms placed on the footer. This makes such footer functional and pushes users to interact with them more.
Car Rent Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="286" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Web Template for Architecture Design Company
![](data:image/svg+xml;charset=utf-8,<svg height="468" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Watch the Social Links
Footer is a great place of addition social media buttons. They will be more prominent there that in any other place and more engaging. use default social buttons or add some custom ones that will be familiar to your users. Choose a shape and color that will make those buttons stand out of the background so your users definitely notice them.
Inside the Hub
![](data:image/svg+xml;charset=utf-8,<svg height="255" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Watch the Design
The footer design should maintain the overall website design style. However, you may still use some tricks to make your footer more attractive and prominent. Separate the footer area with a contrast color line. Thus you will make it clear for users and attract attention to this area.
Basketball Website Template
![](data:image/svg+xml;charset=utf-8,<svg height="506" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Some companies make the footer design to remind of ground or floor to justify its title. If it keeps up to the website design it may look great and pay a lot to the overall image. Otherwise you should better go with a more sophisticated design solution. Actually, simplicity and elegance is the best solution for the footer design. Images and graphics are cool for the footer design. They also draw users’ attention to footer and its content.
My Rainbow Nursery
![](data:image/svg+xml;charset=utf-8,<svg height="204" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Innovatio
![](data:image/svg+xml;charset=utf-8,<svg height="459" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Don’t forget about using enough whitespace in the footer, you may even go for a lot of it. It’s a perfect way to put more emphasis to its content and make your CTAs and links work for you. Prominent and readable typography is vital, especially if you think of responsiveness and wish your footer to pop on any device.
Valerie Martinez
![](data:image/svg+xml;charset=utf-8,<svg height="254" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Another great idea for a cool footer is adding a sub-footer. It may also be made in contrasting tones that correspond to the overall design color scheme. Sub-footer is a great place for adding some cool info, creating visual hierarchy and providing dimension to the design.
Alectia
![](data:image/svg+xml;charset=utf-8,<svg height="408" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
With this approach to the footer design you can engage more visitors, offer them better navigation on your website, more info about your company. It really matters for you, doesn’t it? So you’d better stop ignoring your footer design and content.