15 Stunning Examples of Innovative Footer Design
Footers are perhaps the most underrated part of a website, and that’s an injustice that current design trends aim to rectify. Website footers are inherently practical – they serve to provide information such as contact info, addresses, phone numbers, links to social platforms, and copyright text. Best practices indicate that we shouldn’t fail to place that particular content in the footer, because the visitors are used to finding it there. But from the strictly design perspective, not too much attention is generally paid to that part of a page. Today, however, we are seeing more and more of some innovative footer design practices, as designers decide to experiment a bit and give the footer the attention it deserves.
In particular, we are noticing that the footers are becoming larger. Previously limited to the very bottom of the page, thin and inconspicuous, footers today seem to claim more room, growing in height, often occupying the entire screen. This practice allows for cleanliness and order, but also allows the designers to place illustrations, animations and large pieces of visual content into this area.
Large footers often come with various revealing effects, where they appear to be hidden beneath the main page content that can be “pulled off” or slid away to reveal the footer.
We are also seeing footers with minimalist content, footers that have three or more parts, footers with oversized typography, and so on.
But instead of talking, let’s move on to showing. Here are some of the best examples of innovative footer design right now:
The Canvas Agency offers artist representation services in a modern, dynamic and truly supportive way. Created more as a community than a classic agency, Canvas creates a safe and inspiring environment in which all its artists can work, thrive and grow. The agency website basically serves as a wall for showcasing the artists’ works and the artists themselves, arranged on a simple light background in warm hues. As we scroll down to the footer, the background turns to a very deep purple or burgundy, with the just barely visible agency logo. Coupled with white typography and light pink interface elements, it creates a cozy but elegant atmosphere. The footer is rather big and hosts a conveniently large sign-up form with a witty CTA, while the bottom section is reserved for the usual links to inner pages and social platforms, arranged in several columns. The unusual height of the footer allows for the elements to occupy each its own place, so the entire section does not look cluttered at all.
The website of the furniture and interior decoration shop Sol’ace reflects the company’s dedication to natural and sustainable materials, natural tones, curved, soft lines and an overall classical design. Everything is finely balanced and perfectly matched in an airy visual environment. The layout allows the showcased products to get all the attention, which is only logical, after all. However, when we get to the footer, things change a bit. While the branding aspect itself previously conceded full spotlight to the items, remaining discrete, the footer allows it to become louder for just a bit. The huge letters in Basic Commercial font take up the central part of the large footer in a brownish olive hue. The bold typography is counterbalanced by fine grid lines and borders, as well as with the quite minute lettering used for the footer menu links.
Miti Navi is a company offering a range of naval services – a shipyard for sailboats, charter boats and refit services. The breezy, elegant color palette is based around dark blue and powder-pink and complemented by the lovely Voyage typography, landing the entire layout a supremely sophisticated feel. The website’s most striking part, however, isn’t the hero or central content sections, as it’s usually the case – it’s the footer. It merges with the preceding section in a lovely passage from light pink to dark blue, resembling the bow of a sailboat, and proceeds with a clean, elegant layout with neatly balanced content and some subtle lines to provide additional order. This is also an excellent example of the use of GT Pressura typeface, which here instills a sense of professionalism and technical expertise.
Lunchbox is an integrative system for restaurants, created to encompass everything that operating a restaurant could possibly entail in terms of digital experience, from ordering to marketing and loyalty. The website sports a fun, bright and bold design with plenty of quirky and humorous details, with bright yellow as the prevailing color motif. Again, we have here a quite oversized unfolding footer that fills up the entire screen and essentially feels like a separate page. Menu links are neatly arranged to the sides, an illustration in line with the site aesthetics occupies the center, and the main protagonist of the footer is the CTA inviting the visitors to book a product tour. The section ends with a large company logo, rounding up the exciting, engaging website experience.
Anti is a product design studio that creates lamps made from reclaimed waste materials. A cyclical approach to materials and production that respects the environment are the focal points of the studio mission, as they only use waste to create their products. Their website is a modern, elegant, monochromatic display of both the mission and the products, neatly divided into geometric sections and a combination of horizontal and vertical navigation. Thanks to this, the homepage is not long and we quickly arrive to the footer with black background, located below a gray product section. The footer is clean and readable, very easily navigable, consisting of just menu links divided into four symmetrical columns. Menu titles are given in Silk Serif, while the sans serif Aeonic typeface is used for the items. The result is simple, elegant, and to the point.
Qode Themes: Top Picks
View Collection
Marketed as “Europe’s first luxury CBD and cannabis lifestyle concept store,” Aquerone has a gorgeously crafted website designed by our old acquaintance Niccolò Miranda, who we’ve sung praises to in our piece on websites inspired by poster aesthetics. In a soft gray and beige palette, with plenty of wonderful little motifs inspired by ancient Rome, the website is supremely elegant and extremely well-executed. We can’t go through every single design merit of it right now, so let’s jump straight to the footer. As we scroll all the way down, the boxed content of the website, tucked within a fine border with round edges, slowly lifts to reveal the underlying footer. The bottommost part of the website looks like it was hidden beneath the content all the while, and the interaction between the sections has a distinct physical quality. The footer consists of neat columns, as well as the company logo and social items, neatly divided in the footer top and bottom sections.
Zoox is a mobility-as-service company that has developed a fully autonomous unmanned vehicle for urban commuting. Something between a cab and a bus, the Zoox unites the latest vehicle design trends with functionality and innovative technological solutions. The company website offers a modern, neon-tinted atmosphere with excellent 3D graphics. Designers of the Zoox website wanted to shake things up a bit (but not too much!) in the footer department, treating it as not necessarily the end of the page, but rather as a spot from which the user can navigate further – in this particular case, to the Vehicle page. This adds dynamicity to an area that usually has an “end of the road” character and spices up the UX.
Antinomy is a famous, award-winning creative studio building digital experiences, with clients that include the ranks of Visa, WeTransfer, SpaceX and Alicia Keys. The entire agency website is composed of white and black sections – textual content mostly takes up the white ones, while the black sections include full-width images. This changes in the footer, though, where the designers opted for black background with a single word – Mail – in large, bold Helvetica Now typeface. The footer is decisively minimalist and looks and feels like a page, not a section. It takes up the entire screen, the menu is located in the top area (resembling a header menu), the name of the agency is in the top left and the logo in the top right corner. The agency address and social links are the only content beneath the Mail link and there are no decorative elements or superfluous details whatsoever. It is a bold, somewhat rigid, and definitely striking footer.
Light and airy, but rich in content and character, the website of the London-based eyewear company Cubitts is an excellent reflection of the company philosophy and spirit. The website makes it easy to get lost in – whether you are looking at the absolutely stunning models of spectacles and sunglasses or reading the journal, you’re bound to have a lovely, relaxing time there. But this time ‘round we have to jump right down to the footer, as that’s our business here today. One piece of text – the one inviting visitors to reach out to the company via listed channels – describes the company offices as “elegantly-designed yet upbeat and lively” and that’s actually an excellent description of this footer, too. Airy like the rest of the website, but with a slightly dimmer background, the footer features a lovely illustration, some brand statements, links and newsletter signup form, as well as a live chat popup. Rather convenient contents, but, just like the rest of the website, presented with just the right mix of elegance and wit.
Red Company is an innovative real estate company based in Rotterdam, Netherlands. Their website is a modern, professional and well-crafted display of the company goals and mission, alongside their most successful and emblematic projects. It features interesting design solutions, such as sections with horizontal navigation, as well as the right dose of interactivity and animation. The overall mood is quite minimalist through the website, but the part that literally couldn’t be more stripped down is the footer. Consisting of just the logo and three contact routes, the elegant full screen footer with black Freight typography on a white background exudes sheer confidence.
If you read our article on deep green websites, you probably remember Seed, an innovative probiotics company with a gorgeously crafted website. The dark green mood of the website is set by a couple of carefully chosen hues – some of which are plain and the others have a texture to them. These are broken up by areas of white, like the section preceding the footer, livening up the atmosphere and creating a welcome contrast. The content is distributed mostly around the edges of the footer area, allowing for plenty of breathing room, and it is limited to the essentials – a brand message, a contact form and some usual links.
Vide Infra is a branding, web and product design agency with offices in Riga and Moscow. The agency has won a number of accolades for its work and has worked with clients such as General Electric, British Airways, DNB and Air Baltic. Their monochromatic website exudes a distinctly contemporary and serious character, and its design has won several accolades. Going down to the footer, we again see a fullscreen section with large, bold elements – a big circular button leading to the contact page, and a marquee with large typography, inviting the visitor to get a quote. The footer is clean and simple, with select interactions that give it dynamicity and spark.
Founded with the mission of approaching jewelry-making the way the old masters did – with great appreciation and respect both for the craft and for the customers, Aroz Jewelry from Belgium not only designs and manufactures fine pieces but also grants them second life, through reparation and restoration of old pieces. The company website is a lovely, soft and feminine presentation of fine pieces of jewelry, bathed in pastel colors and neatly sectioned with thin lines. But the real masterpiece here would have to be the footer. Starting well before the actual bottom of the page, the footer is divided into three rather large sections – the first one invites the visitor to get in touch and has a gorgeous full width image as the background. The middle one is shorter and features simply a link to Instagram on a warm brown background. The final section is the closest to the conventional menu design – simple white links and company address on a dark background. This is a design that keeps in line with the latest trends in terms of oversized and fullscreen footers, but takes it up a notch by proposing a neatly sectioned three-piece footer.
Every website has a footer – one footer, right? Well, some actually have two! The website of the Arizona’s Scott Resort ends with a rather conventional footer with the signup form, contact details and a menu with links to the usual pages. But that’s not the end of the page – keep scrolling and the footer will slide up, revealing another footer. This one occupies the entire screen, has a light, airy background and features links to all the hotels and locations from the Scott line. In fact, this footer even has a header, so it looks and feels like a page on its own.
Under Construction is a Canadian company offering bathroom and kitchen renovation services, most notably ceramic works and floor heating. The website is an elegant and minimalistic showcase of the services and completed works, with mostly conventional – but elegant – design solutions. The footer, however, is something of an exception. The main homepage content ends in what we might actually expect to find in the footer – the contact information (the phone number is given in very loud, large typography), contact links and the company address. As we scroll further down, the content moves up to reveal the actual footer, which consists of nothing but an image of what appears to be a towel branded with the company logo. To keep things on the conventional side, the copyright text and the Back to Top link complete the footer, and the page ends with a completely empty, black footer bottom area. The mood of the entire footer section is edgy and dark, but tidy and professional.
Wrapping It Up
Well, these fine examples of footer design sure change one’s view of this ubiquitous, but often neglected part of a website. We’ve seen some truly remarkable pieces – elegant and sophisticated, bold and distinctive, oversized and double footers are proving that to treat the footer as merely a design afterthought would be a huge mistake.
Visitors always appreciate the effort. To see a footer that has received due attention and care leaves a very positive impression, it complements and rounds up a design. One caveat is in order, though: if you plan on designing an oversized, loud or in any other way unusual footer, make sure it is in line with the overall character of your website. The footer should round up and complete a layout, not throw it off balance. And if it’s designed with care and love, it can complement the layout in delightfully unsuspected ways. If you have your own footer design favorites that you think merit the attention, make sure to give us a shout in the comments.
