SEARCH
  Basics Design Principles How to Create An Effective Complex Footer: Content Design and Examples

How to Create An Effective Complex Footer: Content Design and Examples

In the past, copyright information and the website name were the main elements found at the bottom of a website. Sometimes, the most heavily used navigation links would be included as well. Users expect to get information from the internet faster and faster - and it's only going to continue. By creating a complex footer on your website, you can cater to the individuals looking for specific information quickly.

img

The bottom of a website is more powerful than some might realize. The footer of a website is always there - vital information for your site is available on every single page, without crowding the sidebar or content area. By strategically deciding which information is the most effective, a strong footer can increase user activity on your website. This article will explain ways to incorporate relevant and user-friendly elements into your footer.

The Basics

A complex footer can include a number of items, but the most effective elements are navigation, contact information and social media icons. These are three heavily used sections of a website because they impact searching, communication and conversation for your service, product or information.

Navigation

Breaking out navigation is helpful to the user because he or she can quickly scan the pages of the website, as if they were looking directly at a site map. This is especially useful if the website has a dropdown navigation. It makes a search even quicker for the user when he or she can look at all the pages available at once.

One of the most important things to keep in mind when displaying navigation in the footer is to keep it organized. If you have a lot of pages on your site, you should pick and choose which pages will be most useful to your audience. Once they're more interested in your service, product or information, they will be able to dig deeper into your site through other links. Separate the pages into different lists. For example, make the word "about" in all capital letters and bold, and anything that falls below that section, keep in a normal weight and lowercase. This will help users navigate more quickly.

Texture Lovers
Texture Lovers placed the most utilized sections of their websites in the footer. Users can quickly access the popular pages of the site.

img

Contact Information

The footer is a great place to put contact information because many times when a person comes to a website, they're searching for a way to communicate. A user gets easily frustrated if it takes them more than a few seconds to find what they're looking for.

If you have an office, display your address, phone number, email, fax number, etc. If the website is for online purposes only, display the information that you can. Users will appreciate the quick access to important information. Having your physical address also gives users a sense that your business is credible, especially in e-commerce situations.

Sunrise Design
Sunrise Design include their office address in their contact information so users can quickly communicate with them.

img

Social Media

If the website you're working with isn't on social media, you're probably thinking about involving social media. Social networking sites are a popular marketing tool right now, so it's important to allow people to find your different profiles quickly. You can put in one of the hundreds of icons already created, or you can create your own social media icons to fit the branding of your site.

Once again, remember to keep it organized. If you're on 18 different social media sites, make them small or only include the top four or five icons you utilize. Too many outlets can be overwhelming for users.

Energy Cell
Energy Cell uses their twitter feed to keep users updated and current with their recent news and projects.

img

Incorporate More Elements into the Footer

Blog Categories, Archives, and Tags

If your site is less service and more blog-based, you could remove the navigation and incorporate a list of the blog's top categories, tags or archives. These three elements are useful to a reader because they can quickly move to a new section of your blog.

Viget Inspire Blog
The Viget blog uses categories and archives to fill its footer. The amount of archives compared to categories isn't ideal because it leaves a lot of empty space beneath the categories. However, it's a clean layout and it sticks to the grid.

img

Recent Comments or Recent Posts

Blogging platforms like WordPress give you the ability to incorporate plugins that display your most recent or most commented posts. Using these creates an opportunity to drive more traffic to your posts.

Punchnel's
Punchnel's utilizes the recent comments and recent posts elements to engage their readers. By also including emails for communication, it gives its readers the ability to easily get in touch.

img

Call to Action Buttons and/or Links

The footer is a great place to link to important items on your site, such as an online store or a contact page with a form. If you have a client login, this is also helpful to your customers. Instead of having them dig around in the content or sidebar, direct people to your footer. It's easy to get to and it never moves. If you plan to add a call to action, I would recommend having the link somewhere else on the site above the footer. As much as we hope users will scroll through the entire site, this isn't always the case.

David Hellman Portfolio
David Hellman's site uses a call to action with his portfolio samples. This gives his users another opportunity to take a look at his work.

img

Contact Form

Including a contact form in the footer saves users a step and allows them to submit their information immediately. As long as you don't need an excessive amount of input fields, this is a helpful element to include.

Griffinabox
Griffinabox utilizes a small contact form in its footer. This allows quick communication for users.

img

Back to Top

To help users navigate to the top of a website, a 'back to top' button can be included. This button reduces scrolling and quickly gets the viewer where they want to go. This element is useful if you have a blog with a long feed.

Headscape
Headscape put a creative button into their footer that says, 'The Only Way Is Up' that leads users back to the top of their website.

img

Design, Styling and Placement

Using An Artistic Design

One of the newer trends in web design is to create an illustrated footer. These aren't necessarily complex footers on their own, but you can integrate the two and give a little more detail to your site.

InfinVision
InfinVision uses a great mix of elements, while keeping the footer layout clean. They used small, illustratrated elements to add detail to the footer. The contact form allows users to get in touch quickly and easily. They've also added a nice touch by creating their own personalized social media icons.

img

Grid

As you design your site on the grid, make sure to keep your footer on that grid as well. Keep your different information sections even, or make two large sections and one small section. Give each section even margins as well. The more organized your content is, the more user-friendly it will be.

Forty Seven Media
Forty Seven Media has several different elements included in the footer, but they stick to the grid to create a clean layout.

img

Background Color

If you choose to use a solid color footer with no illustration, make sure your color has a strong enough contrast from the rest of your content. It can be confusing to your viewers they can't decipher where the content stops and footer begins.

Well Done Marketing
Well Done Marketing uses a black, textured background next to a light, graph paper background to differentiate between content and the footer.

img

Examples

Here are a few more examples to show different ways complex footers can be used effectively in web design.

Tulsa Tough
img

Biola University
img

Carsonified
img

Cool Tribe
img

Ecto Machine
img

Fubiz
img

Obox Design
img

Productive Dreams
img

Rubbik
img

Sohtanaka
img

Conclusion

A complex footer can be a useful addition to your site design. If you include relevant information and easy access to popular information, you can give your users a better experience. The more user-friendly your site, the better chance you have to get returning visitors. Do you prefer complex footers or simple footers when you design websites?

ABOUT THE AUTHOR

Onextrapixel OXP

Onextrapixel is a leading online magazine and resource site for designers and web developers. The Singapore based portal aims to collect, explore, as well as share useful tips, news, tutorials, tools and resources; on design, development and other inspiration. We hope that everyone will find something here that is useful and interesting.

subscribe to newsletter