Last week I listed some websites with the best navigation structure and how it can really add a lot of character to a website. This week I would like to cover another aspect of a website’s layout that is often overlooked, the footer. The majority of the sites I see do the bare minimum when it comes to footers, maybe an <hr> tag with some copyright information, contact info and links to social media sites or something similar. But what if you want to go above and beyond the norm? What if you don’t want your feet to stink any more? Then I would suggest you include your footer in to the design of your page.
YoDiv
YoDiv is a fun site, not only because of the entertaining icons and artwork, but because the footer provides a wealth of free resources for developers and designers. I’ve seen this strategy of making the bottom of your page ground level, giving everything above it the appearance that it was in the sky, and by making the color below it an earthy, dirt-brown color, suggesting the footer is buried underground.
Viget
Viget utilizes their footer to give viewers an easier way to browse through archived posts or browse by specific categories. Another thing that I really enjoy about this site, and it is actually something I’ve done for clients in the past, is using a skyline at the bottom of the page. This instance is a bit different than the YoDiv site we looked at above because the bottom graphic is very similar to the header graphic, and the footer colors don’t exactly flow smoothly with the rest of the site. I do like how they utilized the footer to deliver the archive and category links though.
Inspiredology
I’ve run across this theme a couple of times, but Inspiredology was the first place I saw it. It’s a fun layout from top to bottom, but the one noteworthy thing about their footer is how they use one simple graphic to tie the entire page together. They could have left the chemistry beaker full of magic potion and the pile of books out and the site would have still been fine. But by placing that image there it ties us back in to the header at the top of the page, giving the site a whole and complete feeling.
Basecamp HQ
Basecamp HQ does a great job at sprucing up their footer by including creative icons and neatly organizing the links. One of the more interesting things I found about this footer was how they used text instead of the standard Twitter or blog icons as their links for each social media presence. This strategy doesn’t emphasize a great deal of importance on either link, as they don’t stick out like icons do, but instead the icons for the services they provide are more dominant. And surely that is what is more important to their business strategy than their social media presence.
Carol Rivello
Carol Rivello has a perfect example of social media icons in use in her footer. Her color selection flows together seamlessly and there aren’t any sharp contrasts that strain the eyes and make it hard to look at. I also like how she uses a simple graphic to add a little character to the footer of the page. It makes the footer a little taller, but without the graphic it would be just another footer and would be easy to overlook.
Branded07
Branded07 uses a few different techniques with their footer. They use an image that signifies you’re at the bottom, they’ve got links and logos galore, and what I really liked the most, a contact form. Interestingly though, I didn’t see any other way to contact them on the site. No links or separate contact page, so it could be a little difficult to spot if you were hoping to get in contact with them.
Toffeenut Design
Toffeenut Design is another fun footer. How could it not be, it has a ninja icon! Like Branded07, Toffeenut also includes an email contact form in their footer, but Toffeenut also includes a contact link in their main navigation cluster at the top of the page. There’s also an abundance of social media icons and ways to get in touch with them, their latest Twitter feed, and all that other good copyright jargon and sitemap linkage that comes standard in a footer.
Hopking Design
Hopking Design is an excellent example of maximizing minimalism. Their footer is not overly tall, it’s not so short that it’s easily overlooked, and it’s not packed full of a string of icons fighting for your attention. It delivers all the information they deem important, contact info, photo blog, and a way to join their newsletter.
Andy Simpson
I’m always fan of including photography in sites. So, naturally, when I came across Andy Simpson’s site and saw his footer had a mini-flickr feed in the footer, I was quite pleased. Along with his flickr feed Andy also includes all the basics and useful info, like how to get in touch with him, page links, a site map, his logo, and even a button to quickly jump back to the top of the page.
Bern
Bern was a bit clever with this design. By using a torn cardboard graphic as the background in every place they have some sort of navigation, it helps frame the page. You see the graphic in the header at the top of the page, just above the main navigation links, you see it down the side, and you see it in the footer. This helps pull the whole site together and keeps you from wondering if you’ve reached the bottom of the page or if there’s more content that’s still loading. I also like that they feature their logo in the footer along with all of their main navigation links. If you’ve scrolled all the way down the page it doesn’t give you the sense that you’ve seen everything there is to see, all the links just make you wonder what you should see next. The other nice thing about it is that it keeps the viewer from having to scroll all the way back to the top of the page to go to another page, it’s much easier to hit the “Back” button than go through all that scrolling or drag the scrollbar back up.
I often feel that the footer of a website is usually something that is an afterthought to designers. They plan a site and lay it all out, then get to the bottom and wonder how they can quickly and easily tie the page off. But why not include it in the design? Why think of your site as a vertical page that scrolls from top to bottom? A website has multiple pages, just like a book. So why not think of your next website more like a book, something that comes full circle at the end and returns you back to the beginning?
About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder.
0 件のコメント:
コメントを投稿