Blog
Website footer: 13 best practices & examples

Website footer: 13 best practices & examples

Unique footer designs encourage people to further engage and interact with a website. Check out these 13 website footer examples for inspiration.

Blog
Design
Website footer: 13 best practices & examples

Website footer: 13 best practices & examples

Unique footer designs encourage people to further engage and interact with a website. Check out these 13 website footer examples for inspiration.

21-day portfolio

Design and build a custom portfolio website, visually, within 21 days.

Start course
Start course
Written by
Jeff Cardello

As a designer, it's easy to get wrapped up with the major components of a web design. After all, there's coming up with the layout, putting in the navigation, and making sure that everything works together. When it comes to the footer, you may just blow it off. We get it.

But a footer acts as a passage to further engagement. It shuttles people to different pages. It prompts them to take action. It keeps them on a website. Before we look at examples of unique footers, let’s discuss why footers are important.

4 reasons why website footer design is important

Behold the footer. After all the time and effort it takes to design a website, it's tempting to want to neglect this final piece. Though a footer may be an element tucked away at the very bottom of a webpage, it doesn’t mean the end to a user’s experience. Instead, the footer can function as a gateway to other content, display enticing social icons, gather email addresses, and further communicate information that people would need to know.

Footers mean better navigation

Let's say someone has looked through all of the landing page content and ends up at the bottom of the page. They may have further questions or other areas they want to explore. The best website footers are like a microcosm of the rest of a web design, encapsulating the most important parts of it, giving someone direct access with a well-structured list of navigational options.

Website footers communicate relevant information

Whether it’s a tagline or some other summation of a brand’s products or services, a footer leaves you with one last impression. This can make the difference as to whether they’ll follow through on calls to action or go further into the rest of the website. This final bit of copy may occupy a small space, but it can have a big impact on how someone will engage with the rest of a design.

Footers also provide a place to put in all of the necessary contact information like the physical address, phone number, email signup, and other details someone may need to know. They may also contain legal information and a copyright symbol. Footers are a no-nonsense part of a design that presents practical information that would be out of place anywhere else.

Footers give a final call to action

If you want someone to sign up for a newsletter, begin a subscription to a product or service, or collect email addresses in another way, a website footer may be the last chance to gather this important customer information. All of the content leading up to this may very well make someone ready to enter in their email address and come that much closer to becoming a loyal customer.

Footers can boost search engine optimization

When Google web crawlers scan through a website, one of the factors they analyze is the number of relevant links. Presenting a sitemap or other inline links gives them a better structure to help determine what your web design is about. Laying out navigational links in a website footer design may give your website an SEO boost and help it gain traction in organic search engine results.

13 unique website footer designs

Check out these 13 websites that do footer designs the right way.

1. Avo

avo's website

Data and analytics can go far in helping a company achieve their higher purpose. Avo gives businesses a powerful platform for managing and wrangling all their important data.

Yes, there's some heavy technical information here, but this webpage design avoids falling into the void of boring that so many technology businesses fall into. Slick illustrations, plenty of color, and dimensionality are sprinkled throughout, giving it a fun energy that balances out the more serious aspects of Avo’s product.

avo's footer

Let’s take a look at the footer. The call to action grabs your attention right off with “Start using Avo today.” Directly beneath it is a space to enter in an email address to begin this process. They don’t litter their layout with too many inline footer links and keep things straightforward. And we love the avocado embarking on an oceanic adventure to the right, which symbolizes so well taking this first step.

The social media icons on the right are another nice touch, and a horizontal glance through the screen space brings your eyes straight to them.

By minimizing the amount of links and allowing enough breathing room around the different visual elements, Avo succeeds with a footer that’s clean and simple with just the right amount of personality.

2. Clade Design

clade design website

Full of contrasting shapes, engaging microinteractions, and a joyful palette of colors, this homepage for the design firm Clade Design stands out in its quirky sense of creativity.

A repeated shape through this layout is the background wave. We see it at the top in blue, and it has a few different background colors for each section. At the bottom of the page is a similar blue wave, making this footer a great bookend to the top of the design. Even if you weren’t paying attention, you would intuitively get the sense that you were at the end from this website footer design. 

clade design footer

This footer design example is a lesson in simplicity. It consists of a minimal number of links, a Contact Us call-to-action button on the far left of the screen, and a short social media icon block on the right. This footer fits in well with the rest of the design, with a clean layout and a clear call to action.

3. Designies

designies website

Giving its visual elements ample negative space and filling the webpage with 3D cartoonlike geometric shapes makes Designies’ website a visually engaging piece of design. As both a portal for designers and clients alike to connect, Designies does not disappoint with its own cool aesthetic.

With a website layout full of white space, the footer’s dark pink pushed against dark gray and black bursts from the design. When scrolling to this final section, the main top navigation fades out, leaving the blue Become a Designie call-to-action button alone in the top right corner. Stripping away the menu brings focus to this CTA button. The inline links take over as the main navigation, and if someone wants to venture into different parts of the website, it’s easy to find a link that will take them there. No one is ever left hanging without a clear means of navigation, no matter where they are. 

designies footer

With a huge space dedicated to their newsletter signup and a hip combination of colors, Designies’ footer makes it the perfect conclusion to their landing page.

4. Think32

think32

We always like seeing specialized marketing agencies. Having a focus is a strong strategy for standing out from the competition.

Think32, from Australia, is a marketing agency for dental practices. The dental imagery is subtle, with the overall design projecting the type of modern stylization that any sort of high-performing agency would embrace. We’re sure that 9 out of 10 web designers and dentists would agree.

think32 footer

The footer puts the call to action right in the center, with a light pink subscribe button next to the email contact form, bringing focus straight to it. We also really like the inclusion of “Thoughtful marketing for dental practices” in the left-hand space, which sums up the philosophy of their agency, further emphasizing their expertise.

5. Hologram

hologram website design

Hologram provides businesses with what they need to connect their technology with cellular networks. Whether it’s electric scooters, drones, or a sensor on a piece of industrial equipment, Hologram and the SIM cards they manufacture help businesses link up their tech.

This is a specialized realm of technology with quite a few complexities, but Hologram doesn’t skimp on making this design visually appealing. With scroll-triggered animations and microinteractions, the design offers plenty of opportunities to engage and navigate further into their content.

hologram footer

Just like what we saw on the Designies website, this footer also performs the top navigation disappearing act. The inline links in the footer then provide all of the navigational options.

Right at the top of the footer we get a box with a purple and blue tinged gradient and 2 call-to-action buttons. The box’s shifting colors stand out from the solid square of dark blue below it, giving it the sense that it’s on a layer above the footer. This works so well in making this call-to-action block stand out from the rest of the footer.

Hologram’s website footer design is what is known as a fat footer. With an extensive list of links, it works as another means of navigation through the web design and gives search engines a more precise idea what the website is about.

Related reads: WordPress to Webflow: how Hologram modernized their website

6. Savvy

savvy website

Do you see anything familiar with this 2-tier footer below? (Hint: Look at the last entry.) Stay tuned ... this will come up again. But let’s jump in with this footer from Savvy

savvy footer

The design features one big footer block at the bottom of the webpage with straight lines and a smaller box with rounded corners above it containing a purple call-to-action button to “Get started.”

Savvy builds custom tools and apps for businesses with low code, and the Z-layout that precedes this footer shows all that they do. This path through the web design leads straight to the footer content, with inline links leading to the most important pages and an email subscription form as a secondary call to action.

7. Astra

Getting your website hacked can cause major stress. First there's the very real possibility of having sensitive data compromised. Then there's the major ding that your online reputation takes. Astra's software helps businesses and others running websites with a strong defense against cyberattacks.

This could have been a long slog through the gloom and doom that hackers do, but instead the design focuses on the optimism of being set free from this worry. With a blue, orange, and yellow color scheme, it's an uplifting user experience.

astra footer

The footer, with its solid block of navy blue, signals a full stop after the bright shapes and airy layout that lead up to it. With a uniform set of columns, inline links to the rest of the website, and a tidy social media block, this linear layout contrasts with the rest of the design, making it the perfect endpoint.

8. Fiddler Labs

Let’s be honest, for those not familiar with the intricacies of AI and data science (this author included), Fiddler Labs’ website may be a tad intimidating.

Though it features a lot of technical information, the site also boasts an equal amount of creative design. A short scroll reveals layered visuals, giving the layout a sense of dimensionality, and animated screenshots, iconography, and other visual elements keep things interesting.

fiddler footer

And then there’s this footer, which features a straightforward breakdown of the site’s architecture. We love the arrangement of just 2 items per column in the beginning that builds up to the email form on the right. This is such a great visual hook, and it guides someone straight to the subscription form. 

9. Brass Hands

brass hands website

As you cruise through the website for the branding agency Brass Hands, you get a smooth user experience with scroll-triggered text gently shifting into place, featured projects that zoom in on hover, and other nuggets of design goodness. Nothing is jarring or out of place, with the entire layout bound together by a sense of consistency.

brass hands footer

When you float on down to the footer, it’s a gentle landing. The simple line of “Let’s work together” and links to their social media make this footer a clean end to Brass Hands’ landing page.

10. Vectornator

vectornator website

Many designers stick with the tried and true ways of making vector-based art, and that’s okay. But it’s always interesting to see software companies like Vectornator come in with a different spin. The website showcases plenty of stunning examples of what's possible with their tool. This contemporary layout is also heavy with animations full of quick edits that capture the creative process of using Vectornator.

vectornator footer

When you get to the footer, you’ll already have been dazzled by Vectornator’s creative possibilities. There’s no need to rehash what makes this software special or to add anything new in the footer.

Scrolling down to the footer makes the top navigation fade away, leaving the inline links it contains pointing you in the direction you want to go. This is a fantastic lesson in restraint, showing how some of the best footers are the simplest designs.

11. Hi5

hi5 website

Hi5 is all about team building. This fun app lets team members give each other accolades, communicate, and provide feedback, and it gives managers a chance to analyze how everyone’s doing in meeting the company goals. The design reflects this positive spirit, with a playful color palette of blues, yellows, and pinks, as well as plenty of content communicating how the Hi5 app can strengthen teams.

The left-hand side of the footer stacks buttons giving you the option to download the app on Google Play, WhatsApp, the Apple App Store, and elsewhere. The dark blue makes these buttons impossible to miss, making them the focal point of the footer.

Hi5 fills the right side of the footer with company information, including the addresses of their international offices and a block of social media buttons.

This footer has many different parts to it but uses enough white space and color that everything stays in order.

12. Appasaurus

appasaurus website

Occupying the web design for the app development agency Appasaurus are numerous dinosaurs. The design opens up with an offbeat and funny illustration of their employees as these prehistoric animals. This oddball theme is kept up throughout this delightful webspace, with a whole cast of dinosaurs rendered in a casual style.

appasaurus footer

Above the footer we’re treated to one last dinosaur, the tyrannosaurus, with the words, “Don’t let your app go the way of the dinosaurs.” This is such a fun tie-in to the rest of the design and fits in nicely with the white pricing button just below it. With a black background that always looks good in combination with white and blue, we get a small list of navigational options as well as links out to their social media. With an irreverent style that extends to their footer, Appasaurus shows that a bit of absurdity can make for a more enjoyable user experience.

13. Flowbase 

flowbase footer

Are you inspired by any of these footers for your next Webflow project? Flowbase offers 10+ different footer layouts that you can clone. They offer plenty of UI kits and other elements you can use for your Webflow designs. If you haven’t checked them out already, take some time to familiarize yourself with what they have to offer.

The footer may be the beginning of a customer’s journey

With a well-ordered layout of links, blocks of social media icons, newsletter signups, and other additional options, footers occupy an important space. Instead of signaling the close of a website, they should inspire someone to go deeper, learn more, and further connect with a brand. Though they occupy the bottom of a design, you as a designer should make footers a top priority.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Get started for free
Last Updated
October 8, 2020