Design Tips For Extra Large Website Footers

So you want a beautiful footer that’s usable and easy on the eyes? No problem!

There’s a lot you can do for effective footers and with so much variety comes lots of room for testing. One of my favorite styles of footers is the large oversized footer design. Typically you see this on company sites or big blogs.

With all that room you can add branded graphics, extra links, or split up all your major pages into sections.

Every website footer should make navigation easier. With a large oversized footer you give yourself even more room to make navigation a breeze. And that’s exactly what I’ll cover in this post sharing tips & trends for designing usable oversized footers on the web.

Organize Link Hierarchies

This is one of the most common reasons to create a footer design. If you’re building a large footer then you want tons of space for something, right?

So try using that space to fill in some links.

You can add the most popular posts & categories from your site’s blog into different columns. Or you can organize smaller less important pages that just can’t fit into your top navigation.

Just make sure to use titles and headings to organize your links so they’re easy to browse. Immediately the YoDiv site comes to mind.

yodiv oversized footer

Their footer splits into multiple columns where each one has a top “main” header. This makes it easy to browse links at a glance so you can clearly tell the footer hierarchy without much effort.

Of course, their design is pretty nice too. I’m a big fan of illustrations in web design and YoDiv pulls this off without a hitch.

You can also find something similar on the Amazon homepage.

Amazon large footer

However they’re a huge company with dozens of services beyond their physical products. So Amazon really needs all that space to create headings with relevant links.

In fact, each little text box you see in the footer is its own link. There are no sub-headings or link lists.

This method works for Amazon because they have so much to link out to. It may not work for a smaller company website, but it certainly doesn’t hurt to try.

My personal favorite hierarchy design style is large heading text with smaller footer links organized into columns. GameDev Market does an excellent job with this style in their footer.

GameDevMarket homepage

The links don’t jump off the page so as to clash with other colors. But they also don’t feel impossible to read.

Good link hierarchies should be evident even while glancing around the site. It gets tougher when you have a few larger columns but if you plan your links properly you’ll find a way to make it work.

Throw In A Contact Form

I only recommend this trend for portfolio sites designed for businesses or personal use.

My reasoning is that very few portfolios actually have many pages. That means your large footer won’t be filled up with too many links… but it should be filled with something.

Have a look at the footer for Zoyogurt. They feature contact details along with a contact form prominently in the design.

Zoyogurt website

I think this works very well because most people will want to connect with the business. They’ll want to know the location, phone number, hours, and maybe even want to send over an email.

If your site doesn’t have too many pages then I do recommend adding a contact form.

In fact you could even fill up the entire footer with a contact form. This would look similar to Vanila’s footer designed entirely around the form.

Vanila contact form

Ultimately this comes back to your site’s needs and goals. Don’t want too many messages from strangers? Then forego the contact form and fill your footer with other stuff.

Add Branding & Graphics

Branding is a subtle yet powerful reminder to each visitor about which site they’re on.

If you have space in your footer try adding a small logo, icon, or graphic to illustrate your brand. It may not seem like much but people will remember.

Smashing Magazine homepage

Take for example the newest redesign of Smashing Magazine. In their footer you’ll find a couple illustrations with their cat mascot along with a friendly bird.

Even people who don’t know about their cat will eventually figure out it’s the mascot. It appears on many of their products, in their conferences, and on their books.

Brand yourself so that people always remember your site.

But you don’t even have to go into full illustrations or custom designs. You can just repeat colors, textures, patterns, or icons used earlier in the site.

Branded7 footer layout

For example Branded7 Art uses light background colors all throughout the page.

Their footer repeats this illustration to connect the site with this artwork. It’s a very subtle branding technique but you can do this too if you have any tileable patterns or backgrounds you can reuse.

Push Tons Of Related Content

I typically look at footer content in two ways:

  1. Sharing links not found elsewhere on the site
  2. Pushing unique content encouraging people to stick around

If you have a portfolio or business site then you probably want the first option. But if you have a large blog or content site then you may opt towards the second.

Try adding related products, blog posts, social feeds, anything that’ll get people clicking. Fill up your oversized footer with links to encourage people to click around and keep engaging with your site.

Jason Santa Maria portfolio

Jason Santa Maria uses a lot of custom link sections in his big footer.

There’s basically a widget for everything from promoting his latest projects to pushing some recommended books and even linking to his social accounts.

Just make sure the content you’re sharing is valuable to your audience. People may not care about pictures of what you ate for lunch off Instagram. But if you update more with design shots then an IG footer widget may earn you more followers.

Likewise a large business site such as Giftrocket can capitalize on their footer by adding location links.

Giftrocket footer

This borrows from the hierarchy idea I mentioned earlier. You’ll find a whole list of company links along with some popular categories & popular cities for the service.

All of this is wrapped inside an oversized footer with some pretty impressive brading. Overall one of the best footer designs I’ve seen and it goes really well with the whole layout.

Think about what kinds of links people would want to see in your footer. If you don’t have that many to cram inside then don’t sweat it!

But if you do have a lot of content to share try planning your footer around it all. Make a little room for everything to give visitors some variety to pick through.

Try To Capture Emails Too

If you run an email newsletter then you know how tough it can be to build a list.

Just designing a great newsletter is tough. But gathering signups can take months before you see real solid numbers.

One nice place to add an opt-in form is inside your footer. RunSociety does a nice job of this with a large spacious email field taking up the very top of the footer.

RunSociety homepage

There’s also a nice column structure for links and those are pretty easy to go through too. Nobody says you have to only use one of these trends at a time!

But footer email fields are just one more chance for people to sign up for your list. It’s a great way to build subscribers without taking up precious real estate in the more “central” areas of your layout.

Another really nice example can be found on WebDesigner Depot.

WebDesigner Depot email opt-in

Granted this isn’t really much of an oversized footer to begin with. It basically holds the email field along with a list of tags & categories to click through.

But it’s got a beautiful style that really contrasts on the page. This is sure to grab attention and likely to increase total subscribers in the long run.

Take a look around some of your favorite blogs and see if any use this design trend.

ConversionXL email sign up in footer

The folks at ConversionXL don’t even have the opt-in field inside the footer. Instead it’s connected to the top of the footer where it kinda stands on its own.

No absolute right or wrong answers here. Just design strategies and ideas to get you started working on a custom footer design.

Moving Forward

I always advise designers to make lists of websites with features they like. You can bookmark the best oversized footers out of all your favorite sites and organize them for later research.

But I certainly hope these tips can help you start down the right track. These should give you plenty of trends for testing and get your brain thinking of new design ideas to work into future projects.

And once you get beyond the footer design have a look at these related articles to help you craft the rest of your site:

Jake is a writer & designer covering the latest tech on the web. He frequently writes about user experience and resources for building usable websites. Check out more work on his portfolio site and find his latest updates on Twitter @jakerocheleau.


28

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.