15 super practical tips for designing web footers_html/css_WEB-ITnose

One of the most important parts of your website is the footer. Yes, I'm serious. This may not be an area where great design or impressive content would exist, but this is where users are looking for information. So don’t ignore this place when designing a website project.

But what elements do you need to include here? How to organize the content of the footer so that it is not obtrusive and maintains the overall aesthetic? You've come to the right place. Here we’ll give you some advice on how to design a good footer and give some examples.

1. Keep the design simple

Yes, this is one of the keys to most design projects, but This is also a top priority and worth mentioning now. Simple design is especially important when dealing with a large amount of information that needs to be placed in the footer. Stick to clean elements, ensure plenty of space, and organize information with purpose. Try to avoid clutter and think about which elements need to be in your footer and why they should be there. The size of the footer is generally related to the number of pages and the amount of information on your website.

Agra-Culture uses colors, icons, and text in the footer, but it’s simple and gets a lot of traffic. Each link is easy to click and the subtle details of the farm image against the green background are a nice touch.

2. Link to your information

The two most important links in the website footer are "About Us" and "Contact" us". Users want to know who you are and want to know about your company and brand. Make it easier for users to find this information. There are also a lot of people who want to know who is on your team and how to contact them (this is an important tool. A lot of people lose their business cards but will come back to your website to find the contact information)

Heckford contains links to information about companies, social networking sites and their work.

3. Include basic contact information

Although you should link to a full "Contact Us" page in the footer Showing relevant contact information isn’t a bad idea either. Include your primary phone number, email, and real address. (Bonus points if it can automatically dial a number, automatically send an email, or display a map on click)

Root Studio makes a footer that goes against almost everything you think a "footer" should be, but It's text-heavy and condensed into a very simple list of contact information. (This is an influential design concept that facilitates users who want to discuss project cooperation)

4. Organization footer links

Categorizing the links and information in the footer content will make people feel better. For example, divide contact information, links, services, social networking sites, and some of your most trafficked content into several columns (or rows). Give each section a title so it's easier to read.

SugarSync's footer information contains many easy-to-view columns. Under the headings "Product," "Company," "Learn More," and "Connect with us," you can easily find what you want to access next.

Interested students will find that Youshu has a similar design. Don’t believe me? Check out the homepage.

5. Include copyright statement

This little line of text can be your savior, don’t forget it. Most websites put it in a separate line at the bottom of the website, but you may consider designing it to be more integrated into the footer. The copyright statement can be handwritten, or just put a small circled c logo. The text usually includes the year of publication and the name of the copyright holder. Multiple copyright claims can be established for content and design (applicable to sites partially created by third parties).

Adventure.com maintains a one-line copyright notice right at the bottom of the screen. Use low contrast for this line of information so that it doesn’t steal the spotlight from the more important information link.

6. Include a call to action

Give users something to do when they reach your footer. This includes signing up for email notifications or inviting them to follow you on social media. Don’t forget the value of this area in terms of converting clicks.

Collabogive adds a "Subscribe to our emails" banner in the footer area. This call-to-action is easy to see, blends in with the footer design, and gives users a way to get the latest news from the organization without having to join it.

7. Use graphic elements

Usually the footer is just a block. Adding a logo or graphic element can add visual interest. Just be careful not to add too many elements to this small space that it won’t bear. Imagine this scene: not only write "Follow our Weibo/blog/whatever", but also include their logo. You can also use small iconic elements next to things like maps or phone numbers (although you may want to add a hover state effect to illustrate this information)

Kikk Festival uses logo and quick contact information in the footer space to highlight event partners. Pay attention to the size of the icons - each one is easy to see and easy to read. Use sliders to fit a lot of information into this small space.

8. Pay attention to contrast and readability

Footer information is usually small, very small. This makes the color, weight, and contrast between text elements and the background very important. Every word should be easy to read. Consider using a simple font (sans serif and medium weight work well). Choose high-contrast colors, such as black text on a white background or white text on a black background. Avoid using different colors or fancy fonts.

P53 Use the most traditional (and most readable) text background combination for footer information? Black and white.

Well, I don’t want to be brilliant in color matching, but I hope it is correct. Please refer to this article: "Become a color matching master in seconds!" 6 Web Design Color Principles That Are Unmistakable"

9. Include the design theme of the website

The website footer does not look good. It should be like a dog's tail. It should look consistent with the design style of the entire website. Colors, styles, and graphic elements should all be consistent. Don’t add an inappropriate box to the footer, this is a very common mistake. From the beginning of the project, you should think about how this area will be presented, so as not to be frustrated by mismatched elements during the design process.

Swiths Interactive Group’s simple footer complements the entire website, which features a person sitting at a table with various items placed on the table. A simple footer displays relevant information and looks integrated with the site.

10. Go small (but not too small)

Usual footers contain a lot of small items, but be careful not to overwhelm them Too small. The text in the footer can be slightly smaller than the font size used in the main body of the website. And icons and images need to be readable in the size you choose (if you can't tell what the icon is, it's too small). Elements must be large enough to be easily clicked or touched. If your links are too small, or too close to each other and users can't click on your links, then just sit in a corner and cry.

Curious Space uses a less traditional footer style, and you can feel its presence from the use of style dimensions. The footer text is slightly smaller and thinner and lighter than the rest of the text on the page, but certainly not so small that it can’t be seen.

11. Use more space

Since footers usually live in small spaces, space and spacing are important. Leave plenty of space for elements in the footer as well as line spacing for text. Enough spacing can make the footer look loose and comfortable. And it’s easy to click or touch. Since most links in the footer link to somewhere else, this is also important for user experience. The space you use in the footer doesn’t have to be exactly the same as the body of your site (especially for sites that require small spacing in the body)

Sailing Collective uses plenty of horizontal and vertical space between elements spacing. Then put them together according to type and whether they can be clicked.

12. Beware of Too Much

Using graphic elements and a header is a good idea, but there is a fine line between just enough and too much separated. Use these elements sparingly and only for specific elements. Ask yourself why you are using a header, icon or photo. If the answer is just "because it looks good," then you need to think again. Every element should have its own meaning. This will help you design a usable footer and make the most of your space.

You can see the less-is-more design aesthetic from the footer of Master & Dynamic. Simple icons and text make it easy to navigate the footer.

13. Create a sense of hierarchy

Like the rest of your website, your footer should have a natural hierarchy. This is a two-pronged design. The footer should be at the very bottom of the entire website hierarchy (after all, that’s where it should be). At the same time, the elements inside it should also have hierarchies. The most important elements (usually contact information, or a call to action, or a site map) should be the most prominent. Standard information, such as copyright information, is usually the smallest in this area.

Griflan Design Inc. tells users what to do in the footer, in the order they want it. First, email them; if email doesn’t work, call them; if neither method works, find them on social media.

14. Consider making a sub-footer

Do you still need a footer? Consider adding a sub-footer layer (this is very popular in practice). Subfooters are great for putting in some extra level, adding space to the footer, keeping it from being too dense, or just to give a little space for interesting content. Use this area to highlight an honor or call to action.

The Smart Passive Income Blog does a great job with its multi-level footer. There is a call to action, then a link to the website, then a sub-footer with light links to social sites, followed by a disclaimer and privacy policy. Footer navigation provides depth and is easy to navigate and click on

15. Do not underline these links

Footer Biggest mistake? Make links underlined. There are still many websites that use underscores in their footer links. This outdated technology is not suitable for modern website design.

Baxter of California has a clean footer with lots of links. Thanks to these simple links without underlining, this footer doesn’t look cluttered.

Summary

The footer can help your website convey a lot of information. It tells users who you are, what your site can do, and how to navigate your site. In addition, it will also show details, such as the attention to detail as a designer and the ability to handle small spaces.

The footer is an important part of the design. Always pay attention. Make sure it contains the best combination of essential information, design elements, and usability so you get the most possible with the least amount of space on every website design project.