Date: 25 Mar 2022 By: Carrie Cousins Category: Layouts Length: Reading Time: 8 minutes
One of the most important places on your website is the footer. Yes, seriously. It might not be the area with the best design or the most impressive content, but it’s a place where users often go to for information. Therefore, it is extremely important that you do not neglect this area when planning a web design project.
But what elements should you consider? How do you keep the footer organized and consistent with your overall aesthetic without being obtrusive? You are in the right place. Here we look at tips for creating a great footer with examples of some websites that do it well.
Reading: How to create a footer for your website
1. Keep the design simple
Yes, this is one of the keys to most design projects, but it’s worth mentioning right at the start. Simple design is important when working with a lot of information, which is likely to be the case with a footer. Stick to clean items, plenty of space, and organize with purpose. Try to avoid clutter and think about what elements live in your footer and why they should be there. Footer size is often related to the amount of information and number of pages on your site.
Agra-Culture uses color, icons and text in the footer, but it’s simple and has a great flow . Each link is easy to click and the subtle detail with the farm image in the green box is a nice touch.
2. Link to Your Information
Two of the most important links in a website’s footer are the About Us and Contact Us pages. Users will want to know who you are and what your company or brand is about. Make it easy to find this information. Many will also want to know what your team members are and how to reach them. (This is an important tool. Many people lose business cards and return to your website to get that contact information.)
Heckford includes numerous links to the company, social media, and information about his work.
3. Include basic contact information
While you should link to a full “Contact Us” page, it’s also nice to include relevant contact information in the footer. Provide a primary phone number, email address, and physical address. (Bonus points for setting each element to auto-dial, email, or card clicks.)
Root Studio created a footer that defies almost everything you imagine when you think of ” footer” but it works. The text is large (as is the field that contains it) and reduced to a super-simple list of contact information. (This is a powerful design concept for a website that wants users to contact them for projects and work.)
4. Organize Footer Links
Grouping like footer elements can organize links and information well. View multiple columns (or rows) of relevant information such as contact, links, services, social media, and sections of your most popular pages. Place each section below and in the header so each item is easy to see and find.
SugarSync includes multiple information columns for easy access to footer information. With the headings “Product”, “Company”, “More Information” and “Connect with Us” you can easily find the part of the website you want to use next.
5. Add a copyright notice
See also: How to Make a WordPress Website: Step-by-Step Guide for Beginners
That little line of text can be a lifesaver. Do not forget it. While most sites include it as a single line at the bottom of the screen, you can style it to be more integrated with the rest of the footer. A copyright notice may be written or contain the small, round “c” symbol. The text often includes the year of publication and the name of the copyright owner. Several copyright notices may reflect content and design (for pages partially created by third parties).
Adventure.com keeps it simple with a copyright notice at the bottom right of the screen. The information is in low-contrast type so it doesn’t get in the way of more important foot navigation elements.
6. Include a call to action
Once users navigate to your footer, give them something to do while they’re there. Add a field to sign up for an e-newsletter or invite them to follow you on a social media channel. Don’t forget the value of this spot in terms of click conversions.
Collabogive dedicated a lot of space in the footer to “Join Our Newsletter”. This call-to-action is easy to see, fits the theme, and allows users to interact without necessarily participating in a campaign.
7. Use Graphic Elements
Too often footers are just a block of text. Add logos or graphic elements for additional visual interest. Just be careful not to overload this small space with too many items. Think of it this way: instead of spelling out “Follow me on Facebook/Twitter/whatever,” include symbols for those outlets.You could also use small iconic elements for links like maps or phone numbers (but you should probably include a hover state that also has the information “written out”).
The Kikk Festival uses the space in the Footer to highlight festival partners using only logos and quick contact information. Note the size of the icons – each one is easy to see and read – and the use of a slider so that a large number of items can be displayed in a small space.
8. Pay attention to contrast and readability
Footer information is usually small… very small. So it’s important to think about color, weight, and contrast between the text elements and the background. Every word should be legible. Consider simple fonts (medium-weight sans serifs are nice) and a touch more line than you would normally use. Opt for colors with high contrast, e.g. For example, a light background with black text or a dark background with white text. Avoid different colors or squiggly fonts.
P53 uses one of the classic (and most readable) text and background combinations for footer information – white on black.
9. Cultivate your design theme
The website footer shouldn’t look like an afterthought. It should match the overall design theme of the site. Colors, styles and graphic elements should reflect the overall tone. Don’t make the common mistake of adding a “box” footer that doesn’t match. Think about this space and how to use it from the beginning of a project to avoid getting stuck with a mismatched element late in the design process.
Swiths Interactive Group uses a simple footer that fully integrated into the overall look of the website, which shows a person seated at a desk with items scattered around. The simple footer shows relevant information and looks like it belongs on the page.
10. Think small (but not too small)
See also: How to Do Mail Merge Using Google Docs (Step-by-Step Guide)
Footers, by their very nature, contain many small elements. Just be careful not to go too small. Text can be a few points smaller than the size used for the main part of the website. Icons or images must be legible at the size you choose. (If you can’t tell what the icon is, it’s probably too small.) Elements must be large enough to be easily clicked or tapped. If users can’t access the links because they’re too small or too close together, they won’t work as intended.
While Curious Space uses a fairly unconventional footer style, you can get a good sense of the scale out the font sizes used. Footer text is slightly smaller, thinner, and lighter than all other text on the page, but still large enough to be easily read.
11. Use lots of space
Because footers usually appear in tight spaces, space and spacing are important. Leave plenty of space around elements in the footer and between lines of text. Adequate spacing keeps the footer area from feeling cramped or uninviting. It also goes a long way towards click or tap capability. Since many (if not all) elements in the footer link to something else, this is an important aspect of user experience. The amount of space you use doesn’t have to perfectly reflect the spacing on the rest of the site, although it can. (This is especially true for sites that use close spacing in the main part of the site for a specific effect or impact.)
Sailing Collective uses a lot of space between elements, both vertically and horizontally. They are grouped by type and are clickable.
12. Be careful with too many objects
Although using graphic elements and headers is a good idea, there’s a line between just right and too much. Use these items sparingly and for a very specific purpose. Ask yourself why you’re using a header, icon, or photo. If the answer is “because it looks good,” think again. Each element should serve a purpose. This will help you design a usable footer that makes good use of the available space.
Less is more as you can see from the master footer) The sub-footer can be a great place to create extra hierarchy, add dimension to the footer area when it’s too dense, or just provide space for fun content. Use this space to highlight awards or include a call to action.
The Smart Passive Income Blog does a great job with a multi-level footer. There’s a call-to-action, then website links, then a sub-footer with media mentions in a faded color, followed by website disclaimers and policies. The navigation levels provide depth in the footer and make it easier to skim and click through.
15. Don’t underline all those links
The biggest mistake in the footer? Allow links to have underlines. There are still a large number of websites with underlined links in the footer. This outdated technique is not suitable for a modern website design.
Baxter of California has a clean footer with lots of links. Thanks to the easy linking without all those annoying underlines, it doesn’t look cluttered.
Conclusion
A footer can say a lot about your website. It tells users who you are, what they can do, and how to navigate your website. It also shows subtle things about you as a designer, like attention to detail and the ability to work in small spaces.
The footer is an important part of the design. Be sure to. Make sure you use the right mix of information, design elements, and usability with any web design project to make the most of bottom-line space.
See also: How to Make a TeamSpeak Server: For Linux, Windows, macOS Pointing Domain to the Server
