Footers In Modern Web Design: Creative Examples and Ideas

Advertisement

According to classic principles of web design, everything at the bottom of the page isn’t that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren’t really able to catch visitors’ attention which is why footers are often forgotten or ignored and not given the attention they deserve.

In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven’t found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, “back to the top”-link and contact details. But if most designers forget it, why don’t make use of it? Why don’t use footers to impress visitors with something they actually don’t expect at all?

This post presents creative examples of footers and ideas for footer design. We’ve tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.

You might also want to take a look at the posts

What are footers good for?

Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.

However, you can also use the footer to express something artistic and very personal. For instance, if you are a Seinfeld fan, why don’t place a small Kramer somewhere next to the contact details in your footer? Thus, with one small detail you can make your site more distinctive and focus visitors’ attention to yourself.

Blog designs usually have a bunch of different data hidden or displayed in their footers. For instance, the latest posts, comments, last job opening, last forum discussion or link to a random post.

Design Shack
CSS Beauty presents its recent forum discussions and job openings at the bottom of the page. It’s unclear whether they belong to the footer, though.

Some designers go even further and place the whole navigation at the bottom of the page. In such cases the site is split in two parts; the upper part takes care of the content while the bottom section takes care of everything else. In such cases it’s not really reasonable to speak about footers.

A typical example is DesignShack with the whole navigation menu placed at the bottom of the site.

Design Shack
Designshack has the complete navigation, layout selection, colour selection and further information in the footer.

There is a number of possibilities: footers can contain personal illustrations, links to related sites, photos, web forms, icons, a lot of creativity. We’ve found out that quite often footers unfortunately also have SEO-spam and advertisement which don’t belong there in the first place.

1. Imitate proximity to the ground

Well, that’s quite strange. But we’ve observed this trend too often to dismiss it. Many designers tend to imitate the proximity to the ground. This means that they attempt to complete layouts with illustrations of the ground — in such cases trees, birds, buildings and the horizontal perspective are usual. Funny characters, mascots, illustrations and hand-drawing are also typical for such footers.

YoDiv sends little bubbles in race.

Footers - YoDiv » Home

Volll has a family of octopus and an umbrella on the ground.

Footers - volll

Vimeo takes a look at little humans from user’s perspective.

Footers - Vimeo, Video Sharing For You

Kulturbanause.de with a waterfall and water ground. Beautiful and (really) unusual WordPress blog design.

Screenshot

The Rissington Podcast has a helicopter plane ready to fly. Comic in use.

Screenshot

Rapidweaver has taken care of the smallest details. This sweet language selection fits perfectly to the site design.

Screenshot

MB Dragan loves hand-drawing. We too. Simple and beautiful.

Footers - MB Dragan

Miloslav Lešetický is an illustrator which is why one of his illustrations is placed in the footer.

Screenshot

Paul Otaneda with a light green theme in the footer. Icons, a tree and three birds inclusive.

Footers - | p a u l o t a n e d a | portfolio 2008

TNTPixel — oh-oh, you better be careful with this one.

Screenshot

Roman Leinwather has some green flowers for us…

Screenshot

…and on Web4Biz.ro it seems to be quite cold at this period of time.

Footers - Web design | Realizare website | Promovare web | Optimizare website | Web design Bucuresti

A little city on StrawPollNow.com.

Footers - StrawPoll—Tiny polls in 140 characters or less

2. Colors clearly separate content and footer

Since the main function of the footer is to complete the layout, often it is given a color which has a high contrast to colors dominating in the overall site design. Vivid colors can be observed as often as dark ones.

Billy Hughes at War with Billy Hughes doodled in the footer.

Footers - Billy Hughes at War | Old Parliament House

HEBAtec has a number of different features in the footer. Among them RSS feed and a search box.

Footers - HEBAtec Internet Systems: Webdesign Studio und Internet Agentur in Bielefeld

Freelenz.at knows how to arrange blog postings, comments, RSS feed icon and Flickr thumbnails. And, oh, a beautiful plant too!

Screenshot

Viget.com provides navigation in categories and archives.

Screenshot

Ungarbage with (probably) too many links.

Screenshot

SprintBio plays with variations of green.

Footers - SprintBio - Distibutors of environmentally friendly boilers, burners and heat pumps

Blogsolid offers an icon parade in the footer.

Screenshot

Bits and Pixels has a quite colorful footer with some icons. The design fits perfectly to the overall site design which is pretty colorful too.

Footers - Bits and Pixels

Still, often overall layout colors and the footer design are very similar. Example: City of Grace Mesa

Footers - City of Grace Mesa

3. Illustrations in use

Often illustrations are used to give the footer some particular meaning it needs to convey. Possibilities are endless. In most cases designers use vivid images and cartoons.

Isn’t he sweet? Apart from that, he is Crazy and Funny. At least that’s what his creators promise.

Screenshot

Legendary Aircraft has a toolbox in its footer.

Footers - Legendary Aircraft - aircraft restoration, repair, rebuild, maintenance, Yak, vintage, oldtimer, aeroplane

Bistro Williams offers juicy fruits at the bottom of its site.

Footers - Bistro Williams // Event Location No.1

Pil.hu with a pen, an envelope and a desk.

Screenshot

?ukasz Tyra?a shows some hand-drawn sketches.

Footers - fabspiderâ„¢ everything web - home

So does Bart-Jan Verhoef.

Screenshot

We feature Nick La’s Webdesignerwall quite often, but it definitely deserves it. The attention to details is amazing.

Screenshot

Us Trendy — all in one place, including RSS-feed-icon, swivels and a butterfly. Isn’t it too much?

Footers - Us Trendy: Music, Fashion, Design and Art Portfolios. All in one place.

Dandelionpath with swirls, curves and flowers.

Screenshot

Colorful curves at the bottom of AIGA Los Angeles.

Footers - AIGA Los Angeles

Hicksdesign with a retro-theme and brief contact details.

Screenshot

Codex Transportica — simple and distinctive.

Screenshot

Nicolas Le Bas presents a footer in a completely different way. Three info-cards are placed next to each other, at different angles, with same backgrounds.

Screenshot

Johanna Hallin clips the footer to the site layout.

Screenshot

Catydesign‘s cat is sweet…

Screenshot

…and Olieng‘s lobster scorpion is even animated!

Screenshot

Link suggestions in Catalyst Studios sketchbook.

Screenshot

The fingerprints at the bottom of the layout on Instant Amber.

Screenshot

4. Footers with advanced functions

Apart from visual appeal, footers can be used effectively to convey some important information quickly and shortly. Contact information, address, sitemap, main sections can therefore often be found in the footer. However, also further functionalities, such as RSS-feed, e-mail-subscription and tag clouds can be placed there too.

Ten Thousand Things presents contact information, some advertisement and the most popular tags.

Footers - Blog ~ Ten Thousand Things

The Greg Brady Project combines a contact form and the footer.

Footers - The Greg Brady Project

Rahul Joshi has 4 columns: one for Flickr images, one for further pages, one for copyright and one for contact details.

Screenshot

Lucy Blackmore has a stick-it-note which leads to the home page of the site.

Footers - Lucy Blackmore | Artist | Harrogate

Paul Wallas has placed a tag cloud into his footer.

Footers - Paul Wallas

Arrival Design gets right to the point. Here is what they do. And here is how you contact them.

Footers - Arrival Design - Web Design Agency

Dennis Blöte with contact details and a minimalistic contact form.

Screenshot

Media Ambassador offers e-mail newsletters…

Footers - Arrival Design - Web Design Agency

… and so does Hopkingdesign. Not a good idea as you won’t attract many subscribers.

Screenshot

The same holds for the search box. Footer has a lot of place, but it’s not really helpful to place a search box only in the footer.

Screenshot

5. Experimental solutions

Utensils in the Surfgarden.

Screenshot

1ncu8u5 has a quite grungy footer.

Screenshot

Farbspider — design agency presents people working there.

Footers - City of Grace Mesa

OllyHite.com — not too impressive content, but a unique design.

Screenshot

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    nice collection smash
    maybe you can include my site for this category :P

    3
  2. 6

    Craig Schlewitz

    April 8, 2008 6:01 pm

    VERY inspirational!
    Great post.
    :]

    3
  3. 7

    I think another great addition would be Abduzeedo.com

    -1
  4. 8

    Fantastic work as usual, guys!

    Dugg!

    0
  5. 9

    lobster? scorpion!

    0
  6. 10

    404 on the Navigation Menus: Trends and Examples link

    mreow.

    1
  7. 11

    LOL
    And it’s a plane, not an helicopter… xD

    Anyway, great article!

    1
  8. 12

    Olieng’s is a scorpion, not a lobster.

    0
  9. 13

    That one in Olieng’s website is not a lobster, but a scorpion! O_O

    I love the mono-chromic kind of footer. They are simple but sharp to the eyes. Very good!

    0
  10. 14

    This should makes us think that footers, even looking insignificant at the bottom of the websites, should not be taken for granted but to maximize the overall website design. I’m always a follower of Nick La. He deserves to be mentioned here, as always. Another smashing compilation! Keep it coming.

    0
  11. 15

    Peter T - Webshop

    April 8, 2008 8:32 pm

    Great post. Here’s another good resource for website footers, http://yample.com/popupon/?p=54

    Peter
    http://webshopinabox.peter-tashjian.com/WebShopInABox.htm

    0
  12. 16

    Fantastic read! I’ve been looking for design ideas for footers for a client. This has helped me along nicely :)

    0
  13. 17

    Thanks very much for the feature (Catalyst Studios) – it means a lot to be mentioned in the same article as Nick La and Jon Hicks!

    But seriously… how did you find out about the site?

    o_-

    1
  14. 18

    I think even we have great footer. Let us know what do u think.

    Link:

    0
  15. 19

    Excellent, as always.

    0
  16. 20

    It’s a nice idea to enhance the footer but don’t forget that from an interation design perspective the purpose of a footer is to indicate where the page ends to the user so they can stop scrolling. As usual it’s important to balance usabilty with style.

    0
  17. 21

    DrawntoPixels has a flying hippo’s bum!

    0
  18. 22

    Good article. I’ve been searching for a footer-inspiration type page for a while. One to bookmark. Cheers.

    0
  19. 23

    sandie sørensen

    April 9, 2008 12:54 am

    Well.

    Smashing magazine. I tried to surf to this link, but I was surprised to find an article about “error”-messages instead. I was a bit confused for a while there….

    1
  20. 24

    Cheers Smashy

    0
  21. 25

    sandie sørensen

    April 9, 2008 12:55 am

    Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds.

    -I ment this was linking to the “error-article”…

    0
  22. 26

    sandie sørensen

    April 9, 2008 12:56 am

    Appropos footers.
    I think your own site: Smashing Magazine needs a link to the top in the footer…

    0
  23. 27

    I was gonna say that :P it’s a Spitfire…

    0
  24. 28

    Dear Smashing Magazine

    Are you psychic or do you have some kind of secret spy agent sitting on my computer listening to my search request to google?

    Last week i’m looking for fresh new rss icons to use for a new project and i look at my news feed and there it is.

    This week i’m searching mr google for new footer’s for another project and again you arrive timely in my news with another appropriate post ;)

    Thanks for all the great posts, dug, stumbled etc etc…..

    0
  25. 29

    The same sites we’ve all seen before…Hicksdesign (albeit great), webdesignerwall, etc. Snore.

    0
  26. 30

    Great List…as usual!

    0
  27. 31

    Congratulations for your great work!

    When inspiration is needed go to smashingmagazine….It’s incredible!

    Thanks a lot!

    0
  28. 32

    One to bookmark, thanks!

    0
  29. 33

    Some nice bits of useful info, but YOUR page really sucks. It takes forever to load, way to many external feeds/includes, ect. It is slow and even after it loads, it scrolls in a herky jerky way that just makes me decide to leave and never return. I hope you clean this mess up as, the article was pretty good.

    -1
  30. 34

    Great Article…. in #1 (Yodiv) – They are “Divlets” and they are in a queue for jobs. Take it from a bonafide “Divlet” :-)

    0
  31. 35

    wow, thank you guy!

    0
  32. 36

    Very useful! Just one thing – Miloslav Leseticky is not an illustrator, but web designer.

    0
  33. 37

    I personally really like the footer on http://www.guitarangel.net

    -1
  34. 38

    Ha ha , I know Olly Hite a bit from home. Nice bloke.

    0
  35. 39

    how about fixed navigation on the bottom like

    0
  36. 40

    Great list of examples. Actually gave me a few inspirational ideas…

    @Rachael: Cheers for the nice comment! :D Although my site is naked for CSS Naked Day today, the style will be back up at midnight. :P

    0
  37. 41

    Superb… inspiring work…

    0
  38. 42

    congratulations on your great work

    0
  39. 43

    what about last.fm?, I expected it to be commented here when I read the post title.

    0
  40. 44

    Fantastic!! Thanks for sharing.

    0
  41. 45

    Great colection! I’m impressed! Where you guys find all these cool sites? I also like this footer Link [globator.net]

    0
  42. 46

    Excellent collection

    0
  43. 47

    Simply, thank you.

    0
  44. 48

    Very well! Good Ideas and a lot of great works.

    Here another footer: Link

    0
  45. 49

    This is a wonderful and informative article. I must agree that most individual online entities may actually take their foot space for granted. Since, it has been beaten into our heads that the top portion of any web page is the most important. Hence, great attention should be placed in this area.

    Thanks for reshaping my focus to an all encompassing one.

    0
  46. 50

    Thank you very much for this!

    0
  47. 51

    I am so guilty of this! Thanks for bringing it to my attention. Nice examples too!

    0
  48. 52

    Nice collection. I would maybe add BlackMoonDev.com to this collection. Cheers

    -1
  49. 53

    I would have liked to have seen:
    1) ecommerce sites
    2) full screen shots so we can see the context of the footer in the whole page

    0
  50. 54

    Web Design Egypt

    April 12, 2008 3:30 am

    they are such an amazing collection … Great Job Guys

    0
  51. 55

    Great list with much more ideas. Thank you for your great work, again ;)

    Ralph

    0
  52. 56

    Once again a great list to look through for inspiration.

    0
  53. 57

    http://www.henryhoffman.com/ this one has a pretty impressive footer too

    0
  54. 58

    Real footer and real feet COOKIEFACE

    0
  55. 59

    Awesome collection!! Thanks!

    0
  56. 60

    Pedro Assumpção

    April 15, 2008 9:08 am

    Hi, great post and collection.
    In my blog Codesignville has a special footer too, or better, three footers, depending the hour of the access. Take a look there.
    Thanks and congratulations.

    0
  57. 61

    This is a really great collection of work right here. I agree that many people over look the use of a well designed footer while others take full advantage of the what that curious space can do for an effective design.

    Once again thank you for the imagery!

    Alfred Fox
    afox@alfredfox.com
    Web Design

    0
  58. 62

    Yeah your article really so interesting and good about footer values who dont knows about it.

    0
  59. 63

    Another great post from this page, thank you!
    http://www.alanya.biz

    0
  60. 64

    Whimsy Collective

    October 31, 2008 8:53 pm

    25 Impressive Blog Footers This was shared in the Fresh Bookmarks of Smashing Magazine and worthy of knowing this site once it disappears. BTW, how do we access the Fresh Bookmarks in a single page?

    0
  61. 65

    Hi webmaster!

    0
  62. 66

    Hi webmaster!

    0
  63. 67

    Amazing! Really usefull one. like it very much.
    See this site http://www.busimonster.com

    0
  64. 68

    This is a very good collection of footers, I think smashmagzine could also think of explaining customization of these with good samples that would lead the users to get much out of its efforts in helping the webmasters and bloggers

    0
  65. 69

    Respect given. Incredible.

    0
  66. 70

    Hello you!
    Wow, interessting collection!

    I would like to know how you feel about the footer I designed for my page. Actually I was inspired by such a footer-collection of drweb.de

    Greetings

    Robert

    0
  67. 71

    i like.

    0
  68. 72

    Codex Transportica is the most beautiful blog design I have seen.

    1
  69. 73

    Lovely collection of footers. I admire the amount of people turning to their footers to host content and art. It’s a great surprise to find on a great design.

    Shameless plug: Snailbird.com.

    0
  70. 74

    Apparently, sites with beautifully designed footers are beautifully designed in general.

    Go figure.
    =)

    0
  71. 75

    Да,согласен с предыдущими блоггерами
    ^..^ :-)

    0
  72. 76

    Olieng’s is a scorpion, not a lobster

    0
  73. 77

    thanks for the great ideas! ^^ need them for my web page design
    ^^~

    0
  74. 78

    Inspiration overload!

    -1
  75. 79

    Хм,согласен с предыдущими ораторами
    ^..^ Bye

    0
  76. 80

    Хм,несогласен с предыдущими блоггерами
    Споки Bye

    0
  77. 81

    Excellent collection, maybe you should add this site? I like when you play with a logo in the footer.

    -1
  78. 82

    I like your list there are very good site design here :)
    i recently discovered a site with a nice cartoon like footer

    0
  79. 83

    Some really great footers here. I like what they did on vimeo. When I created something similar for our daycare listing site I wasn’t sure if it was really necessary to overcomplicate the design. In fact, we received mixed reviews from the site review forums on the footer. A well designed footer adds “personality” to the site, IMO.

    0
  80. 84

    I love the footer like this: denisefanov.ru. Very simple. A-ha-ha-haha:)))

    0
  81. 85
  82. 86

    Artem Russakovskii

    December 30, 2009 3:31 pm

    olieng.net link should be removed – it now points to a reported attack site.

    0
  83. 87

    Even I ‘ve a similar kind of footer like one of these.

    0
  84. 88

    Hmm Well I was just searching on Google for some psychic readings and psychic articles and just came across your blog, generally I just only visit blogs and retrieve my required information but this time the useful information that you posted in this post compelled me to reply here and appreciate your good work. I just bookmarked your blog.

    0
  85. 89

    Here’s a cool footer that I designed last week:
    http://www.thephotopeople.org.uk/

    My design company is:
    grandeurgraphics.com

    0
  86. 90

    Very nice collection of footers, but it sucks that some of them are not as they were before because some of the owners changed their footers.

    0
  87. 91

    Sasha Baksht, Techbridge

    May 24, 2010 10:58 pm

    Some nice footers at the Techbridge’s new site techbridge.ca

    0
  88. 92

    I think a good idea is to put it in the real world and see what happens with it. Great ideas have an initial impact and unprecedented success. So I think avatarpublicity.com site creators have released a very unique idea: a naked female avatar as a billboard. Go idea. We’ll see what impact you have.

    0
  89. 93

    Evan Skuthorpe

    June 3, 2010 2:55 am

    These are really great!

    -1
  90. 94

    looks nice

    Ravikumar V.

    0
  91. 95
  92. 96

    Check out the NASCAR shopping site footer. It rocks. It’s made out of smashed asphalt. Pretty cool for Nascar.
    store.nascar.com/home/index.jsp

    0
  93. 97

    “According to classic principles of web design, everything at the bottom of the page isn’t that important. Most users think like that.”

    what principles? and do users really think that? what is this based on?

    given the extent of this article, one would surmise that the author in fact believes the opposite: users think the footer important.

    otherwise, what’s the point?

    0
    • 98

      Everything that is within a website should be there for a reason, but some elements are more important than others. Just because the majority of website users won’t scroll within a website doesn’t mean that you disregard the footer or anything else below the fold.

      0
  94. 99

    Hello dude,i like Your blog ideal much. achieve u have on suggestion for my website? thanks being Your New attention

    0
  95. 100

    Hello dude,i like this Ones blog very a lot. attain u allow suggestion for my blog? thanks for Ones New attention

    0
  96. 101

    These are really cool footers!

    Would love to design one myself!

    Could someone explain me where to start with designing?

    Which program should I use, etc, etc….

    Thanks in advance!

    Frits Vrielink

    0
  97. 102

    im realy looking to change my website Footer design and i dont know which one to choose irtouring is my site and i will appreciate if one suggest me some sample design
    Thank’s

    0
  98. 103

    Thanks for this list. I’m currently re-designing my business website and it’s given me quite a few ideas

    0
  99. 104

    catch visitors’ attention which is why footers are often forgotten or ignored and not given the attention they deserve.

    0
  100. 105

    Estimados,

    Quisiera saber como añadir -crear-personalizar o cambiar el pie de página de comentarios, para que no pase desapercibido al los visitantes que visitan mi blog

    Saludos!!!!!!!!!!!

    -1
  101. 106

    Footers have definitely moved on from the simple copyright notice and disclaimer. We’ve done some call-to-action tracking across a number of sites and get most interest/clicks from either the very top of an article or right before the footer so @Gary D has a point about balancing design with purpose. A clear but fun footer like http://www.helpthehoneybees.com, http://www.loungeinthevalley.com.au or http://www.bemappy.com could help to keep people interested and direct them on to other areas of the site.

    2
  102. 107

    I have really learned result-oriented things from your blog post. Also a thing to I have observed is that usually, FSBO sellers will probably reject an individual. Remember, they will prefer not to ever use your providers. But if you maintain a gradual, professional romance, offering assistance and remaining in contact for around four to five weeks, you will usually have the ability to win a conversation. From there, a house listing follows. Cheers

    0
  103. 108

    Why not make use of it—— would be the proper grammar. Why don’t looks awkward and is incorrect. I hope your first language is not English. The content is informative, but when grammar slips that badly it makes the author look dumb.

    1
  104. 109

    What a great collection! Excellent post.

    Thank you Tom for your point on grammar; solid design principles should be applied to language as well as to websites.

    0
  105. 110

    I really like the sophisticated look of the Billy Hughes at war footer. The hand drawn illustration type I think works really well also.

    0
  106. 111

    Hi guys,

    Just FYI – Rapidweaver and MB Dragan have changed their footer designs and no longer look like the ones mentioned here.


    Sree

    0
  107. 112

    Lovely designs. I love the ones that imitate proximity to the ground.
    Well planned and well executed!

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top