{"id":36595,"date":"2022-10-03T00:40:00","date_gmt":"2022-10-03T07:40:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=36595"},"modified":"2023-03-29T04:08:02","modified_gmt":"2023-03-29T11:08:02","slug":"footer-design-basics","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/","title":{"rendered":"Footer Design \u2013 Best Practices Together with 6 Examples"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/7QuCQreR1I2xaxpG0e1n1RUzv7AhjdaHYhph09NHlQtJp8CPTpeJxks0mCwkd0gPuoPGaaPLpVcpXwgvZZEUbN44aSUy25zqAaWOixXARj9MTnLgPOXZNPWw8aOSEPrMtz0SBxtQMCV7jzrlI1IsmQRX1H2L85Vld0-qkRvomJ3dXOex_0zW4NCe3w\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Website footers are essential UI patterns. They guide visitors to important content while providing an excellent opportunity to add business value and connect with new customers.<\/p>\n\n\n\n<p>This article explores website footer design, do&#8217;s and dont&#8217;s, expert examples, and best practices to inspire your next web project.<\/p>\n\n\n\n<p>Prototype UI designs at higher fidelity and advanced functionality with UXPin. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover the endless possibilities of code-based design.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-website-footer\">What is a Website Footer?<\/h2>\n\n\n\n<p>A website footer is a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-layout-best-practices-12-timeless-ui-patterns-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI pattern<\/a> at the bottom (or footer) of a website or application. Footers are important website components because they display helpful information, including <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-navigation-trends-16-ui-patterns-completely-deconstructed\/\" target=\"_blank\" rel=\"noreferrer noopener\">navigational links<\/a>, contact details, policies, copyright info, and social media links, so users can learn more about your business.<\/p>\n\n\n\n<p>Link the primary header navigation; a website footer appears on every page so users can always access the links and content. Even though it sits at the bottom of a web page, footers are vital components for users and business goals.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-the-purpose-of-a-footer\">What is the Purpose of a Footer?<\/h3>\n\n\n\n<p>How designers use a website footer depends on the business and content. Most websites use the footer for secondary navigation\u2013important links that can&#8217;t fit in the website header like about, product docs, resources, etc.<\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-security-tips\/\" target=\"_blank\" rel=\"noreferrer noopener\">GDPR, CCPA, and other legal information<\/a>, websites must include certain policies, like privacy, terms of use, etc. Designers usually have these links in the footer, so users always know where to find them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sales Benefits<\/h3>\n\n\n\n<p>Many <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-vs-ui-differences\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI\/UX designers<\/a> also use website footers for business purposes like a product CTA or capturing leads via contact page or a newsletter <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-signup-page-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">signup form<\/a>. Footers help users to navigate to feature pages, best-selling product categories or more information about services.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-marketing-benefits\">Marketing Benefits<\/h3>\n\n\n\n<p>Many marketers also use website footers for SEO (search engine optimization) purposes. There are a couple of SEO benefits of footers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Help with boosting pages you want to rank<\/li>\n\n\n\n<li>Homepage links carry weight, meaning search engines see these internal links as important and prioritize accordingly<\/li>\n\n\n\n<li>Increases the likelihood of clicks, thus reducing bounce rates which improve domain authority and rankings<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-should-a-footer-include\">What Should a Footer Include?<\/h2>\n\n\n\n<p>Again, it depends on the website. An eCommerce website will have different priorities for the footer to a blog. Here is a list of items you might include in a footer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation links<\/li>\n\n\n\n<li>Brand engagement and messaging<\/li>\n\n\n\n<li>Testimonials<\/li>\n\n\n\n<li>Copyright<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-navigation-links\">Navigation Links<\/h3>\n\n\n\n<p>There are several types of navigation links businesses include in the footer. These include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utility links:<\/strong> contact information, phone number, email address, physical address, customer service contacts, privacy policy, terms of use<\/li>\n\n\n\n<li><strong>Doormat navigation:<\/strong> A copy of the main navigation for convenience (might be unnecessary for sticky headers)<\/li>\n\n\n\n<li><strong>Secondary task links:<\/strong> job application, investor information, documentation\/specifications, press information, affiliate signups, FAQs<\/li>\n\n\n\n<li><strong>Sitemap:<\/strong> Links to multiple topic\/product categories<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-brand-engagement-messaging\">Brand Engagement &amp; Messaging<\/h3>\n\n\n\n<p>Another common use for a website footer is brand engagement and messaging\u2013links and footer content that encourage people to connect with the company, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Social media icons<\/li>\n\n\n\n<li>Social feeds with several latest posts (usually Instagram or Twitter)<\/li>\n\n\n\n<li>Brand logo<\/li>\n\n\n\n<li>Brand slogan or vision (1-3 sentences)<\/li>\n\n\n\n<li>Email signup<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-testimonials\">Testimonials<\/h3>\n\n\n\n<p>Some brands use the footer for testimonials and reviews. They might even include a Google Business or TrustPilot widget displaying their star rating. These <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-layout-best-practices-12-timeless-ui-patterns-explained\/\">UI patterns<\/a> are excellent for <a href=\"https:\/\/buffer.com\/library\/social-proof\/\">social proof<\/a> and creating interest in your product or service.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-copyright\">Copyright<\/h3>\n\n\n\n<p>The copyright symbol and notice at the bottom of a footer tell visitors that you own the website&#8217;s content. It&#8217;s not a legal obligation, but it is common practice to inform people that you plan to protect your rights to the content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-6-footer-design-examples\">6 Footer Design Examples<\/h2>\n\n\n\n<p>We&#8217;ve chosen six footer design examples from different industries to show how designers create layouts that align with business goals and user needs.<\/p>\n\n\n\n<p>The key takeaway from these examples is how different industries prioritize links and content. Each example also uses a clean, minimalist layout to help visitors find information quickly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-uxpin-saas-footer-design\">UXPin &#8211; Saas Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/8a5sg8afjsPq6v_B2pCYC5DoDjt5QRiD6133hwJVs03SK-aQN1-AulgthyZOthrxqvQdgs-7v5jROJtHYs4DkDQ7rQS5fos6xae_j5OozCkAE7W8p4gRne1Dnn3tLh_6BYsgDTPBNGx6CO3nAV6cWt8-sON-L7CCk70Hvu3GXU1DArpKkkYaM7ey\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>We decided to use our <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin<\/a> website as a SaaS footer example. You&#8217;ll notice we use a sticky header, so our primary navigation is always visible to desktop users.<\/p>\n\n\n\n<p>UXPin&#8217;s footer includes key company, product, and marketing information. Customers often want to know how UXPin, an advanced tool, compares to popular image-based competitors, so we&#8217;ve included several product comparison links.<\/p>\n\n\n\n<p>Other essential footer links for SaaS products are documentation, tutorials, educational content, and other helpful resources. UXPin also includes a language selector, social links, and policy information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-bbc-news-footer-design\">The BBC &#8211; News Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/YOxfacCUI_mKPY-eTvleUjDAbkg_d3WQw8wqYnICzLnAZqtb9q2I-L9GuW2z__q79-tUh2ahdsfE5na1l2uFX8iCne9WIye-xwVurW9GWw57a8vLtVyZSjoVNxfav4rWNOJ73opmlrgC8_5KsLpLZTh88ICQeKRUEKkLDKYV1DZjMoUXX0MwJSm5\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.bbc.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">The BBC (British Broadcasting Corporation)<\/a> is one of the largest news and media organizations worldwide.&nbsp;<\/p>\n\n\n\n<p>The media giant primarily uses its footer to display different 30+ language versions of the website with a separate section for popular news topics. The very bottom of the page features links to legal information, policies, contacts, and advertising with the BBC.<\/p>\n\n\n\n<p>The clean layout is easy to read, allowing users to find content and links fast.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-asos-ecommerce-footer-design\">Asos &#8211; eCommerce Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/6vtzwDfSutHtytwG2urlBxJCsIYelEBt0q1Bdxa9dPOk8JtPUtNK56FfgIoCk65WpkVm80qxiymgKD7NQynEWLWa4l_N04Rs6BL2PD9hefljy0ls04JiNy_fBXsjxdnF-_xmfiXUNYWbo_4sm7NtZAsrItabWc-FyKUKzs-arb9OY9QqupfGk8M9\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>Global eCommerce brand <a href=\"https:\/\/www.asos.com\/us\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Asos<\/a> uses a simple footer design with social media buttons, payment methods, and helpful links. Most important for eCommerce are links for delivery\/returns policy, order tracking, and special promotions\u2013in Asos&#8217; case, they promote student discounts, gift cards, and Black Friday.<\/p>\n\n\n\n<p>As a listed company (<a href=\"https:\/\/finance.yahoo.com\/quote\/ASOMY\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ASOMY<\/a>), Asos must provide investor information and corporate responsibility.&nbsp;<\/p>\n\n\n\n<p>Lastly, as a global eCommerce brand, Asos shows customers which store they are viewing and a link to change to another region and currency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-zorro-design-agency-footer-design\">Zorro Design &#8211; Agency Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/6hMo4pMHY9YSdz4kfUzVKwH_vSz0XU7Qw_SZi-sI5H4om0MifC9DdYJEPRnt_xuhwCVNpRcnNwf4NWbGdNML2rtIwW0VjCxv3LocxNofSMJ1Covn5eL1jIe8p030I0vfx1UYVTrH7f7tS97Zl0ONDT3-Ahuimb8VkkTP2xNsinGVEMv8HKSbdoaWvA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>Agencies generally use their websites for two purposes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Showcase their work<\/li>\n\n\n\n<li>Generate new leads<\/li>\n<\/ul>\n\n\n\n<p>US-based Zorro Design uses a black and white footer design with a bright yellow CTA taking users to a contact form. Zorro&#8217;s designers have designed the footer perfectly, so the CTA sits in the center of the screen, with lots of surrounding whitespace screaming &#8220;CLICK ME!&#8221;<\/p>\n\n\n\n<p>Lastly, Zorro places its logo and slogan to the left with several key links, including recent work, contact, about, and social media buttons.<\/p>\n\n\n\n<p>Zorro&#8217;s footer design is clean and uncluttered, allowing users to absorb and find content quickly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-alex-lakas-freelancer-footer-design\">Alex Lakas &#8211; Freelancer Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/RpcVXNxM37fg2gfeIVEVIngYen8mDZJIeYZtOcbsXvm6IlI5cIl-25k9-YIoUeVlccLnLOQm_DI170F6JaTRabD44-Mu8b1mZPxVOVUeDSKxWeaBv4Q0zwWnCf4ZP3zJX6EEq18qDD2G87xQ9q1TiXLzuNTZoFyQCxoHFRw053TrNHsEEPNaz7HQXA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>Like agencies, freelancers need a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-portfolio-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">portfolio website<\/a> to showcase their work and get clients. <a href=\"https:\/\/www.alexlakas.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Product Designer Alex Lakas<\/a> uses his website footer primarily to connect with potential clients\/employers and designers through his social channels.<\/p>\n\n\n\n<p>As a remote worker, Alex also uses flashing text to tell visitors where he&#8217;s currently working\u2013in this case, it&#8217;s Los Angeles.<\/p>\n\n\n\n<p>Alex&#8217;s dark\/light mode switcher is a nice touch for a UX design portfolio, showing he&#8217;s mindful of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">web accessibility<\/a>. He also has links to past work and a contact page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-booking-com-travel-footer-design\">Booking.com &#8211; Travel Footer Design<\/h3>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/gnQOunULNqJgJEo0b9wZTx40II0Ccxz9B-ESWB3-N90fIDToM6kghd0eF3CTRQCiWeoiwu62kPqMjRgIihV-HdVftt_nDrBwU0nyCi8F7ZjZV3BeNTPt8KMqnv_z1OI5jGkKsghs6aM1EyDQPdYyN2XLaJg0a_MUGFcnnsPvSqzzQX-JNGZajDAJbw\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.booking.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Booking.com<\/a> is one of the world&#8217;s biggest online travel agencies, with over 28 million accommodation listings in more than 70 countries. Booking.com&#8217;s goal is to sell accommodation, but they also want to onboard new properties, so their primary footer CTA is to &#8220;list a property.&#8221;<\/p>\n\n\n\n<p>The website&#8217;s footer also features its five most important links using a large bold typography to stand out. Customers also have several search categories, including regions and accommodation options, for customers to find their ideal destination faster.&nbsp;<\/p>\n\n\n\n<p>As a listed company (NASDAQ: BKNG), Booking.com includes links to all necessary investor and corporate information.<\/p>\n\n\n\n<p>At the bottom of the page, Booking.com features several logos of the company&#8217;s holding group, <a href=\"https:\/\/www.bookingholdings.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Booking Holdings Inc.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-design-a-footer\">How to Design a Footer?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-prioritize-links\">Prioritize Links<\/h3>\n\n\n\n<p>The first step to designing a great footer is prioritizing your links. Designers must consider user needs and business goals to create something meaningful and helpful to visitors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-less-is-more\">Less is More<\/h3>\n\n\n\n<p>Cluttered UIs always perform poorly. They&#8217;re difficult to digest and can confuse users. Reducing UI elements, links, and text can help drive traffic to your most important content\u2013which takes us back to point one, prioritize your links properly!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-a-single-cta\">Use a Single CTA<\/h3>\n\n\n\n<p>A single CTA helps guide visitors to your most important task or business goal. Footer designs are usually two-tone, often black and white, providing the perfect background for a bright-colored CTA to pop and grab people&#8217;s attention.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-footers-mobile-friendly\">Make Footers Mobile-Friendly<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mobile-first design<\/a> is crucial for website footers. On a desktop, you may have 3-4 columns, while on a smartphone, you have one. The more columns and links, the more users have to scroll to find content. Place your most important links and content in the first column, so users see this first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-hierarchy-to-display-importance\">Use Hierarchy to Display Importance<\/h3>\n\n\n\n<p>The examples from Booking.com, Zorro Design, The BBC, and Alex Lakas used visual hierarchy to show users their most important links. Different sizes, colors, and weights are effective techniques for displaying importance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-stay-compliant\">Stay Compliant<\/h3>\n\n\n\n<p>Legal information like policies and disclaimers are crucial for modern <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-design-and-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design<\/a>. Designers must research their company&#8217;s obligations regarding where and how to display these links.<\/p>\n\n\n\n<p>For example, financial and investment products in some countries must display their disclaimer information in the footer, so it&#8217;s always visible to customers. See this footer example from Chase Bank.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/DujZnpZOx8v1ch77w7cJcgje9GhL1vfeZCK8N7ViI7yAWVl4UdrQu4bKnrfZvf5YJNzc0JULWjn0YTIRPsHOtE7zwT7FB9B0h3zAGW7Bw_VS1ci0t5rk2RVO9BjkEIbcH6ydEQfAhNwWT43T2T7b6MeUyj0KhYUy9rPMbwR-B-k8BZfqb60XZeWddQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-branding-opportunities\">Branding Opportunities<\/h3>\n\n\n\n<p>Your website&#8217;s footer is a fantastic opportunity to connect users with your brand&#8217;s touchpoints, like social media, newsletter signup, and company links.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-be-helpful\">Be Helpful<\/h3>\n\n\n\n<p>Users often scroll to a website footer looking for help like documentation, tutorials, blog, and other resources. The UXPin footer design is a perfect example of providing multiple resources to educate customers about our products.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-designing-footers-with-uxpin\">Designing Footers With UXPin<\/h2>\n\n\n\n<p>Create beautiful, interactive, responsive website footers in UXPin. With UXPin, designers can build prototypes with code-like functionality to improve user testing and get better feedback from stakeholders.<\/p>\n\n\n\n<p>UXPin also includes built-in accessibility tools, including a contrast checker and color blindness simulator to test designs on the flying without leaving the canvas.<\/p>\n\n\n\n<p>Deliver better products faster with UXPin\u2013the world&#8217;s most advanced code-based design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> and deliver better user experiences to your customers with UXPin.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Website footers are essential UI patterns. They guide visitors to important content while providing an excellent opportunity to add business value and connect with new customers. This article explores website footer design, do&#8217;s and dont&#8217;s, expert examples, and best practices to inspire your next web project. Prototype UI designs at higher fidelity and advanced functionality<\/p>\n","protected":false},"author":3,"featured_media":36598,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,11,4,6,7],"tags":[],"class_list":["post-36595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-tutorials","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Footer Design \u2013 Best Practices Together with 6 Examples | UXPin<\/title>\n<meta name=\"description\" content=\"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Footer Design \u2013 Best Practices Together with 6 Examples\" \/>\n<meta property=\"og:description\" content=\"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-03T07:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-29T11:08:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Footer Design \u2013 Best Practices Together with 6 Examples\",\"datePublished\":\"2022-10-03T07:40:00+00:00\",\"dateModified\":\"2023-03-29T11:08:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/\"},\"wordCount\":1678,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Footer-design.png\",\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"Tutorials\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/\",\"name\":\"Footer Design \u2013 Best Practices Together with 6 Examples | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Footer-design.png\",\"datePublished\":\"2022-10-03T07:40:00+00:00\",\"dateModified\":\"2023-03-29T11:08:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Footer-design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Footer-design.png\",\"width\":1200,\"height\":600,\"caption\":\"Footer design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/footer-design-basics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Footer Design \u2013 Best Practices Together with 6 Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Footer Design \u2013 Best Practices Together with 6 Examples | UXPin","description":"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/","og_locale":"en_US","og_type":"article","og_title":"Footer Design \u2013 Best Practices Together with 6 Examples","og_description":"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/","og_site_name":"Studio by UXPin","article_published_time":"2022-10-03T07:40:00+00:00","article_modified_time":"2023-03-29T11:08:02+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Footer Design \u2013 Best Practices Together with 6 Examples","datePublished":"2022-10-03T07:40:00+00:00","dateModified":"2023-03-29T11:08:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/"},"wordCount":1678,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png","articleSection":["Blog","Responsive Web Design","Tutorials","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/","name":"Footer Design \u2013 Best Practices Together with 6 Examples | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png","datePublished":"2022-10-03T07:40:00+00:00","dateModified":"2023-03-29T11:08:02+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Discover how to design a website footer that your users will love. Get 8 digestable tips together with must-known examples of footer design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/09\/Footer-design.png","width":1200,"height":600,"caption":"Footer design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/footer-design-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Footer Design \u2013 Best Practices Together with 6 Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=36595"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36595\/revisions"}],"predecessor-version":[{"id":44009,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/36595\/revisions\/44009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36598"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=36595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=36595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=36595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}