Of all the elements in a modern website, the footer is probably the least appreciated. Users have come to expect basic contact information, privacy policies, and other legal-oriented details to live in the footer, but that doesn’t mean footer designs need to be dull collections of links or tiring repeats of the main navigation. Done well, footers can be helpful, informative, and even mischievous elements in a website’s overall visual design.
In this post, I cite four examples of well-crafted and thought-out footers I’ve come across, leaving room to expand the list as I discover other fine specimens. Of course, suggestions are welcome!
1. Marketwire
Marketwire is a Canadian communications corporation that offers unique solutions to help organizations listen, monitor, analyze, measure, and connect with their audiences in both traditional media and “new media” channels. Their suite of tools and dashboards allow their clients to gather valuable insights into their customers and competitors and make actionable results to increase their value, influence, and reputation.
Marketwire chose to let their website’s main content sections do the talking, so the footer is tasked to show essential contact information with a few informative links. The sweeping gray stripe offers a clear separation from the main content and neatly caps off the overall design. Critical touchpoints, national and international phone numbers and social media channels, are presented in a clean and prominent fashion. Large, colorful social media icons pop nicely off the monochrome background and into focus.
This is a simple but effective design that gets straight to the point and doesn’t leave current or potential customers wondering where to go next.
2. Federal Reserve Bank of Kansas City
The Federal Reserve Bank of Kansas City is one of the twelve banks that make up the Federal Reserve System, the central bank of the United States (Disclosure: I work for the Federal Reserve Bank of Philadelphia, part of the Federal Reserve System). Alongside their dual mandate of monetary policy and bank supervision, the Federal Reserve Banks promote community development in their districts, enrich financial literacy among the public, and publish research data and documents on a wide array of economic topics.
The Kansas City Fed’s footer displays their site’s major website categories, a listing echoed in the top navigation. These categories, however, are shown in alphabetical order vs. the more topical choices in the top navigation, and surface the next level of content to help users find what they’re seeking. All titles are short (no more than four words) to ease scanning.
Bold category headings stand out nicely and draw the eye to key starting points. Common footer elements, such as a link back to the home page, contact information, privacy policy, and FAQs, are centered and offset from the primary and secondary categories to be easily discovered. The bank’s address and phone number have a third distinct style to complete the typography in the banner and headings. Seals at the top and bottom of the footer provide nice visual breaks.
Most Americans aren’t familiar with the inner workings of the Fed and can get lost amidst the vast amount of online content they offer. The Kansas City Fed’s footer delivers a lot of options, but does so in a roomy, clear presentation that can help ease information overload.
3. Wall Street Journal
One of the most recognized news publications in the United States, the Wall Street Journal delivers a staggering array of financial, national, and international news to its readers.
Offset in tones of deepening gray with ice blue links, the five columns of links in the WSJ’s footer are easily scanned and digested despite the fineness of the font size. The reversed contract color scheme is easy to read and distinct from the otherwise busy conglomeration of content in the main section of the site. As with the Kansas City Fed’s footer, key sections are in boldface. The WSJ’s RSS feed and social media links are embedded with small icons whose colors help them to stand out in the crowd. Alternate editions of the WSJ are collected together in the rightmost column and ruled off with a thin, dashed white border.
With nearly 100 links to various content pieces throughout the WSJ’s digital empire, the footer possesses a clean and pleasing design that gives a great overview of the wealth of available information.
4. ThinkGeek
A veritable gold mine of geeky goodness, ThinkGeek is a Fairfax, Virginia-based company specializing in collectables, apparel, games, and all manner of merchandise appealing to the geek in all of us. ThinkGeek is well known for its infectious creativity, whimsical demeanor, inventive products, and outrageous April’s Fool fake-outs.
ThinkGeek’s footer is another clean arrangement of major site categories divided into easily scannable lists. Bold, bright color gradients give richness and depth without sacrificing readability. Timmy, the impish monkey mascot of ThinkGeek, directs your attention to the company’s Twitter stream, videos, and blog from his vantage point at the footer’s left edge. Random “customer action shots” offer additional bursts of fun, user-contributed content that keep the experience fresh.
Best of all, the scene of rampaging robots that grace the bottom of each page turns into a mob of marauding zombies upon reaching the footer. It’s a subtle touch, but an extra bit of awesomeness to reward users for adventuring this far below the fold.
