15 Super Practical tips for designing a page footer

Source: Internet
Author: User
Tags readable c logo

Editor's note: To say a thing, before opening a "design studio" site, wood to think of the interface is miserable, slow God and notice that there is no link to the footer design, stunned to pay attention to, found that many professional designers will sometimes hastily deal with the footer design, so today deliberately to share this article, Gather all the 15 design tips for the footer design to learn!

One of the most important parts of your site is the footer. Yes, I'm serious. This may not be the place for great design or impressive content, but this is where users look for information. So don't overlook this place when designing a website project.

But what elements do you need to include here? How to organize the contents of the footer so that it is not abrupt and maintain the overall beauty? You've come to the right place. Here we will put forward some suggestions on how to design a good footer, and give some examples.

1. Keep the design simple

Yes, that's one of the keys to most design projects, but it's also a priority, and it's worth saying right now. Simple design is especially important when you need to deal with a lot of information that needs to be in the footer. Adhere to clean up the elements, ensure adequate space and organize information purposefully. Try to avoid clutter, think about which elements need to appear in your footer, and why they are there. The size of the footer is generally related to the number of pages on your site and the amount of information.

Agra-culture uses colors, icons, and text in the footer, but it's simple and has a lot of traffic. Each link is easy to click, and the subtle details of a farm image in a green background are a good attempt.

2. Link to your information

The two most important links in the site 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 a lot of people who want to know about your team members and how they contact them (this is an important tool.) A lot of people lose their business cards, but will go back to your website to find contact information.

Heckford contains a lot of links to companies, social networking sites, and their work information.

  3. Include basic contact information

Although you should link to a complete "Contact us" page, it is not bad to display the relevant contact information in the footer. Write the main phone number, mailbox and real address. (If you can automatically dial when you click, automatically send mail or show a map, that's bonus points)

Root Studio does a footer that almost violates everything you think should be a "footer," but it's a large text and is compressed into a very simple list of contact information. (This is an influential design concept, convenient for those who want to talk about project cooperation users)

 4. Links to organizational footers

Classifying the connection and information of the footer content the organization can feel better. For example, contact information, links, services, social networking sites, and some of the most significant content of your flow into a few columns (or lines). Give each section a title so it's easy to see.

SugarSync footer information contains many columns that are easy to see. Under the heading "Product", "Company", "Learn" and "Connect with us", you can easily find what you want to visit next.

Interested students will find that the gifted is similar to the design, not the first look at the letter stamp?

 5. Include copyright notice

This little word can be your savior, don't forget it. Most websites do it on a single line at the bottom of the site, and you can consider designing it more into the footer. Copyright notices can be handwritten, but also can be put in a circle with small C logo. The text usually contains the year of publication and the name of the copyright owner. You can create multiple copyright notices for content and design (for Web sites created partly by third parties).

Adventure.com retains a line of copyright notices just below the screen. This line of information uses a low contrast so that it does not rob the limelight of more important information links.

6. Inclusion of the call for action

When the user browses to your footer, give them something to do. Include registering for email notifications, or inviting them to pay attention to you in social media. Don't forget the value of this area in converting clicks.

Collabogive added a "subscribe to our Mail" banner in the footer area. This appeal is easy to see, integrated with footer design, and provides users with a way to get the latest news without having to join the organization.

7. Using graphical elements

Usually the footer is just a block. Add a logo or graphic element to add visual interest to it. Just be careful not to add too many elements to this cramped space that it cannot afford. Imagine the scene: not just "focus on our Tweets/blogs/Anything", but also their logos. You can also use small, iconic elements to add to a map or phone number (but you may want to add a hover state effect to illustrate this information).

Kikk Festival use logos and quick contact information to highlight active partners in the footer space. Note the size of the icons--each is easy to see and easy to read. Use the slider to make a lot of information appear in this small space.

 8. Be careful of contrast and readability

Footer information is usually small, very small. This makes the color, character weight, and contrast between text elements and backgrounds very important. Every word should be easy to read. Consider using a simple font (sans serif font and medium weight is fine). Choose High contrast colors, such as white background or black lettering. Avoid the use of different colors or gorgeous fonts.

P53 uses the most traditional (and most readable) combination of text backgrounds-black and white-for footer information.

 9. Include the design theme of the website

The site footer should not look like a Dog. It should look consistent with the design style of the entire site. colors, styles, and graphic elements should all be aligned. Don't add an inappropriate box to the footer, which is a common mistake. From the beginning of the project, you should think about how this place should be presented, so as not to be able to do it in the design process because of mismatched elements.

Swiths Interactive Group's simple footer complements the entire Web site, where a person sits at a table with various items on the table. The simple footer shows the relevant information and looks like it is integrated with the site.

 10. Do it small (but not too small)

The usual footer contains a lot of small items, but be careful not to make them too small. The footer text can be slightly smaller than the font size used by the site body. Icons and images are readable in the size you choose (if you don't see what the icon is, it's too small). Elements must be large to be easily clicked or touched. If your link is too small, or too close to each other to cause users to not point to your link, then you can squat in the corner to cry.

Curious space uses a less traditional footer style, and you can feel its presence in the use of style dimensions. Footer text slightly smaller, and more than the other text on the page lighter, of course, is not too small to see.

  11. Use a little more space

Because the footer usually lives in the small space, the space and the spacing appear very important. Leave a lot of space for the elements in the footer as the line spacing of the text. Enough spacing allows the footer to look relaxed and comfortable. and easy to click or touch. Because most of the links in the footer are linked to other places, this is also important for the user experience. The space you use in the footer does not need to be exactly the same as the subject of your site (especially for those sites that need to use small spacing in the main body)

Sailing Collective uses enough horizontal and vertical spacing between elements. And then depending on the type and whether it can be clicked separately put together.

12. Guard against too many things

It's a good idea to use graphical elements and a head, but just a little bit better and too far. Use these elements sparingly and only for specific elements. Ask yourself why you want to use your head, icon, or photo. If the answer is just "because it looks good", you have to rethink it. Every element should have its meaning. This will help you design the available footers and make the most of your space.

From the footer of Master & Dynamic you can see less and more design aesthetics. Simple icons and text allow you to easily navigate the footer.

 13. Create a sense of hierarchy

As with other parts of the site, the footer should have a natural level. This is a two-part design, and the footer should be at the bottom of the entire site hierarchy (this is where it should be). At the same time its internal elements should also have hierarchies. The most important elements (usually contact information, or call information or site map) should be the most prominent. Standard information, such as copyright information, is usually the smallest in the area.

Griflan Design Inc. tells the user what to do in the footer in the order they want. First, send them emails, call them if they don't work, and find them on social media if they're useless.

  14. Consider making a child footer

Do you still need a footer for your footer? Consider adding a child footer layer (which is popular in practical applications). Sub-footers are ideal for placing extra layers, increasing the footer space, preventing it from being too dense, or simply providing a little space for interesting content. Use this area to highlight an honor or call to action.

The Smart passive income Blog's multiple-level footer is doing well. There is a call to action, followed by a website link, followed by a light-colored link to the social networking site's footer, followed by a disclaimer and privacy policy. The level of footer navigation provides a certain depth, easy to browse and click

  15. Do not add underscores under these links

Biggest error in footer? Let the link be underlined. There are still a lot of websites using underscores in the links in their footers. This outdated technology does not apply to modern web design.

Baxter of California has a clean and tidy footer that contains a large number of links. Thanks to these simple links without underscores, this footer doesn't look cluttered.


Footers can help convey a lot of information to your site. It tells the user who you are, what the site can do, and how to browse your site. It also shows the 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 be careful. Make sure that it's the best combination of basic information, design elements, and usability to get the most out of the smallest possible space in each Web design project.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.