{"id":35071,"date":"2022-02-25T15:00:48","date_gmt":"2022-02-25T14:00:48","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35071"},"modified":"2022-02-24T16:06:50","modified_gmt":"2022-02-24T15:06:50","slug":"examples-of-innovative-footer-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-innovative-footer-design\/","title":{"rendered":"15 Stunning Examples of Innovative Footer Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Footers are perhaps the most underrated part of a website, and that\u2019s an injustice that current design trends aim to rectify. Website footers are inherently practical &#8211; they serve to provide information such as contact info, addresses, phone numbers, links to social platforms, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-copyright-footer-code\/\">copyright text<\/a>. Best practices indicate that we shouldn\u2019t fail to place that particular <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-footer\/\">content in the footer<\/a>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In particular, we are noticing that <strong>the footers are becoming larger<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Large footers often come with <strong>various revealing effects<\/strong>, where they appear to be hidden beneath the main page content that can be \u201cpulled off\u201d or slid away to reveal the footer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We are also seeing footers with minimalist content, footers that have<strong> three or more parts<\/strong>, footers with oversized typography, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But instead of talking, let\u2019s move on to showing. Here are some of the best examples of innovative footer design right now:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#canvas-agency\">Canvas Agency<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#solace\">Sol\u2019ace<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#miti-navi\">Miti Navi<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lunchbox\">Lunchbox<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#anti\">Anti<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#aquerone\">Aquerone<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#zoox\">Zoox<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#antinomy\">Antinomy<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#cubitts\">Cubitts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#red-company\">Red Company<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#seed\">Seed<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#vide-infra\">Vide Infra<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#aroz-jewelry\">Aroz Jewelry<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-scott\">The Scott<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#union-construction\">Union Construction<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"canvas-agency\"><\/a>Canvas Agency<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Canvas-Agency.jpg\" class=\"attachment-full size-full\" alt=\"Canvas Agency\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Canvas-Agency.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Canvas-Agency-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Canvas-Agency-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Canvas-Agency-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/thecanvasagency.com\/\" target=\"_blank\" rel=\"noopener\">Canvas Agency<\/a> 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\u2019 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 <strong>a cozy but elegant atmosphere<\/strong>. The footer is rather big and hosts <strong>a conveniently large sign-up form with a witty CTA<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"solace\"><\/a>Sol\u2019ace<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Solace.jpg\" class=\"attachment-full size-full\" alt=\"Solace\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Solace.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Solace-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Solace-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Solace-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website of the furniture and interior decoration shop <a href=\"https:\/\/solace-store.com\/\" target=\"_blank\" rel=\"noopener\">Sol\u2019ace<\/a> reflects the company\u2019s 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. <strong>The huge letters in Basic Commercial font take up the central part of the large footer in a brownish olive hue.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"miti-navi\"><\/a>Miti Navi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Miti-Navi.jpg\" class=\"attachment-full size-full\" alt=\"Miti Navi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Miti-Navi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Miti-Navi-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Miti-Navi-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Miti-Navi-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/miti-navi.com\/fr\" target=\"_blank\" rel=\"noopener\">Miti Navi<\/a> is a company offering a range of naval services &#8211; 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\u2019s most striking part, however, isn\u2019t the hero or central content sections, as it\u2019s usually the case &#8211; it\u2019s the footer. It merges with the preceding section in <strong>a lovely passage from light pink to dark blue, resembling the bow of a sailboat,<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lunchbox\"><\/a>Lunchbox<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Lunchbox.jpg\" class=\"attachment-full size-full\" alt=\"Lunchbox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Lunchbox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Lunchbox-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Lunchbox-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Lunchbox-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/lunchbox.io\/\" target=\"_blank\" rel=\"noopener\">Lunchbox<\/a> 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 <strong>a fun, bright and bold design with plenty of quirky and humorous details<\/strong>, with bright yellow as the prevailing color motif. Again, we have here <strong>a quite oversized unfolding footer that fills up the entire screen and essentially feels like a separate page<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"anti\"><\/a>Anti<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Anti.jpg\" class=\"attachment-full size-full\" alt=\"Anti\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Anti.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Anti-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Anti-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Anti-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.anti-waste.com\/\" target=\"_blank\" rel=\"noopener\">Anti<\/a> 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 <strong>clean and readable, very easily navigable, consisting of just menu links divided into four symmetrical columns<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"aquerone\"><\/a>Aquerone<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aquerone.jpg\" class=\"attachment-full size-full\" alt=\"Aquerone\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aquerone.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aquerone-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aquerone-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aquerone-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Marketed as \u201cEurope\u2019s first luxury CBD and cannabis lifestyle concept store,\u201d <a href=\"https:\/\/www.aquerone.com\/\" target=\"_blank\" rel=\"noopener\">Aquerone<\/a> has a gorgeously crafted website designed by our old acquaintance Niccol\u00f2 Miranda, who we\u2019ve sung praises to in our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-inspired-by-poster-aesthetics\/#niccolo-miranda\">websites inspired by poster aesthetics<\/a>. 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\u2019t go through every single design merit of it right now, so let\u2019s jump straight to the footer. As we scroll all the way down, <strong>the boxed content of the website, tucked within a fine border with round edges, slowly lifts to reveal the underlying footer<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"zoox\"><\/a>Zoox<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Zoox.jpg\" class=\"attachment-full size-full\" alt=\"Zoox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Zoox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Zoox-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Zoox-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Zoox-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.zoox.com\/\" target=\"_blank\" rel=\"noopener\">Zoox<\/a> 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 <strong>a modern, neon-tinted atmosphere with excellent 3D graphics<\/strong>. Designers of the Zoox website wanted to shake things up a bit (but not too much!) in the footer department, treating it as <strong>not necessarily the end of the page, but rather as a spot from which the user can navigate further<\/strong> &#8211; in this particular case, to the Vehicle page. This adds dynamicity to an area that usually has an \u201cend of the road\u201d character and spices up the UX.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"antinomy\"><\/a>Antinomy<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Antinomy.jpg\" class=\"attachment-full size-full\" alt=\"Antinomy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Antinomy.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Antinomy-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Antinomy-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Antinomy-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/antinomy.studio\/\" target=\"_blank\" rel=\"noopener\">Antinomy<\/a> 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 &#8211; 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 <strong>black background with a single word &#8211; Mail &#8211; in large, bold Helvetica Now typeface<\/strong>. The footer is decisively minimalist and <strong>looks and feels like a page, not a section<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"cubitts\"><\/a>Cubitts<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Cubitts.jpg\" class=\"attachment-full size-full\" alt=\"Cubitts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Cubitts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Cubitts-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Cubitts-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Cubitts-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Light and airy, but rich in content and character, the website of the London-based eyewear company <a href=\"https:\/\/cubitts.com\/\" target=\"_blank\" rel=\"noopener\">Cubitts<\/a> is an excellent reflection of the company philosophy and spirit. The website makes it easy to get lost in &#8211; whether you are looking at the absolutely stunning models of spectacles and sunglasses or reading the journal, you\u2019re bound to have a lovely, relaxing time there. But this time \u2018round we have to jump right down to the footer, as that\u2019s our business here today. One piece of text &#8211; the one inviting visitors to reach out to the company via listed channels &#8211; describes the company offices as<strong> \u201celegantly-designed yet upbeat and lively\u201d<\/strong> and that\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"red-company\"><\/a>Red Company<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Red-Company.jpg\" class=\"attachment-full size-full\" alt=\"Red Company\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Red-Company.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Red-Company-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Red-Company-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Red-Company-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.red-company.nl\/\" target=\"_blank\" rel=\"noopener\">Red Company<\/a> 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 <strong>the part that literally couldn\u2019t be more stripped down is the footer<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"seed\"><\/a>Seed<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Seed.jpg\" class=\"attachment-full size-full\" alt=\"Seed\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Seed.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Seed-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Seed-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Seed-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you read our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/extraordinary-deep-green-websites\/\">deep green websites<\/a>, you probably remember <a href=\"https:\/\/seed.com\/\" target=\"_blank\" rel=\"noopener\">Seed<\/a>, 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 &#8211; 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, <strong>allowing for plenty of breathing room<\/strong>, and it is limited to the essentials &#8211; a brand message, a contact form and some usual links.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"vide-infra\"><\/a>Vide Infra<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Vide-Infra.jpg\" class=\"attachment-full size-full\" alt=\"Vide Infra\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Vide-Infra.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Vide-Infra-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Vide-Infra-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Vide-Infra-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/videinfra.com\/\" target=\"_blank\" rel=\"noopener\">Vide Infra<\/a> 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 <strong>a fullscreen section with large, bold elements &#8211; a big circular button leading to the contact page, and a marquee with large typography<\/strong>, inviting the visitor to get a quote. The footer is clean and simple, with select interactions that give it dynamicity and spark.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"aroz-jewelry\"><\/a>Aroz Jewelry<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aroz-Jewelry-1.jpg\" class=\"attachment-full size-full\" alt=\"Aroz Jewelry\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aroz-Jewelry-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aroz-Jewelry-1-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aroz-Jewelry-1-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Aroz-Jewelry-1-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Founded with the mission of approaching jewelry-making the way the old masters did &#8211; with great appreciation and respect both for the craft and for the customers, <a href=\"https:\/\/arozjewelry.com\/en\/\" target=\"_blank\" rel=\"noopener\">Aroz Jewelry<\/a> 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, <strong>the footer is divided into three rather large sections<\/strong> &#8211; 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 &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-scott\"><\/a>The Scott<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/The-Scott.jpg\" class=\"attachment-full size-full\" alt=\"The Scott\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/The-Scott.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/The-Scott-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/The-Scott-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/The-Scott-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Every website has a footer &#8211; one footer, right? Well, some actually have two! The website of the Arizona\u2019s <a href=\"https:\/\/www.thescottresort.com\/\" target=\"_blank\" rel=\"noopener\">Scott Resort<\/a> ends with a rather conventional footer with the signup form, contact details and a menu with links to the usual pages. But that\u2019s not the end of the page &#8211; <strong>keep scrolling and the footer will slide up, revealing another footer<\/strong>. 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, <strong>this footer even has a header,<\/strong> so it looks and feels like a page on its own.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"union-construction\"><\/a>Union Construction<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Union-Construction.jpg\" class=\"attachment-full size-full\" alt=\"Union Construction\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Union-Construction.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Union-Construction-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Union-Construction-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Union-Construction-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/unionconstruction.ca\/\" target=\"_blank\" rel=\"noopener\">Under Construction<\/a> 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 &#8211; but elegant &#8211; 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 &#8211; the contact information (the phone number is given in very loud, large typography), contact links and the company address. As we scroll further down,<strong> the content moves up to reveal the actual footer, which consists of nothing but an image<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]Well, these fine examples of footer design sure change one\u2019s view of this ubiquitous, but often neglected part of a website. We\u2019ve seen some truly remarkable pieces &#8211; 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s 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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Treating the footer as merely a design afterthought would be a huge mistake. A footer that has received due designer attention and care leaves a very positive impression &#8211; it complements and rounds up a page. You&#8217;re about to see some truly remarkable examples of footer design- elegant and sophisticated, bold and distinctive, oversized and double footers, and more<\/p>\n","protected":false},"author":3,"featured_media":35107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,36],"class_list":["post-35071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35071"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35107"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}