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 Shack5
CSS Beauty6 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 DesignShack7 with the whole navigation menu placed at the bottom of the site.

Design Shack8
Designshack9 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.

YoDiv10 sends little bubbles in race.

Footers - YoDiv » Home11

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

Footers - volll13

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

Footers - Vimeo, Video Sharing For You15

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

Screenshot17

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

Screenshot19

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

Screenshot21

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

Footers - MB Dragan23

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

Screenshot25

Paul Otaneda26 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 200827

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

Screenshot29

Roman Leinwather30 has some green flowers for us…

Screenshot31

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

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

A little city on StrawPollNow.com34.

Footers - StrawPoll—Tiny polls in 140 characters or less35

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 War36 with Billy Hughes doodled in the footer.

Footers - Billy Hughes at War | Old Parliament House37

HEBAtec38 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 Bielefeld39

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

Screenshot41

Viget.com42 provides navigation in categories and archives.

Screenshot43

Ungarbage44 with (probably) too many links.

Screenshot45

SprintBio46 plays with variations of green.

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

Blogsolid48 offers an icon parade in the footer.

Screenshot49

Bits and Pixels50 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 Pixels51

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

Footers - City of Grace Mesa53

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 Funny54. At least that’s what his creators promise.

Screenshot55

Legendary Aircraft56 has a toolbox in its footer.

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

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

Footers - Bistro Williams // Event Location No.159

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

Screenshot61

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

Footers - fabspiderâ„¢ everything web - home63

So does Bart-Jan Verhoef64.

Screenshot65

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

Screenshot67

Us Trendy68 — 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.69

Dandelionpath70 with swirls, curves and flowers.

Screenshot71

Colorful curves at the bottom of AIGA Los Angeles72.

Footers - AIGA Los Angeles73

Hicksdesign74 with a retro-theme and brief contact details.

Screenshot75

Codex Transportica76 — simple and distinctive.

Screenshot77

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

Screenshot79

Johanna Hallin80 clips the footer to the site layout.

Screenshot81

Catydesign82‘s cat is sweet…

Screenshot83

…and Olieng84‘s lobster scorpion is even animated!

Screenshot85

Link suggestions in Catalyst Studios86 sketchbook.

Screenshot87

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

Screenshot89

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 Things90 presents contact information, some advertisement and the most popular tags.

Footers - Blog ~ Ten Thousand Things91

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

Footers - The Greg Brady Project93

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

Screenshot95

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

Footers - Lucy Blackmore | Artist | Harrogate97

Paul Wallas98 has placed a tag cloud into his footer.

Footers - Paul Wallas99

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

Footers - Arrival Design - Web Design Agency101

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

Screenshot102

Media Ambassador103 offers e-mail newsletters…

Footers - Arrival Design - Web Design Agency104

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

Screenshot106

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.

Screenshot107

5. Experimental solutions

Utensils in the Surfgarden108.

Screenshot109

1ncu8u5110 has a quite grungy footer.

Screenshot111

Farbspider112 — design agency presents people working there.

Footers - City of Grace Mesa113

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

Screenshot115

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/
  2. 2 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  3. 3 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  4. 4 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  5. 5 http://www.cssbeauty.com/
  6. 6 http://www.cssbeauty.com/
  7. 7 http://www.designshack.co.uk/
  8. 8 http://www.designshack.co.uk/
  9. 9 http://www.designshack.co.uk/
  10. 10 http://www.yodiv.com/
  11. 11 http://www.yodiv.com/
  12. 12 http://www.volll.com/#section_main
  13. 13 http://www.volll.com/#section_main
  14. 14 http://www.vimeo.com/
  15. 15 http://www.vimeo.com/
  16. 16 http://www.kulturbanause.de/
  17. 17 http://www.kulturbanause.de/
  18. 18 http://www.therissingtonpodcast.co.uk/
  19. 19 http://www.therissingtonpodcast.co.uk/
  20. 20 http://www.realmacsoftware.com/rapidweaver/
  21. 21 http://www.realmacsoftware.com/rapidweaver/
  22. 22 http://www.mbdragan.com/
  23. 23 http://www.mbdragan.com/
  24. 24 http://www.blabolnik.cz/
  25. 25 http://www.blabolnik.cz/
  26. 26 http://www.paulotaneda.com.br/
  27. 27 http://www.paulotaneda.com.br/
  28. 28 http://www.tntpixel.com/
  29. 29 http://www.tntpixel.com/
  30. 30 http://www.lewro.com/
  31. 31 http://www.lewro.com/
  32. 32 http://www.web4biz.ro/
  33. 33 http://www.web4biz.ro/
  34. 34 http://www.strawpollnow.com/
  35. 35 http://www.strawpollnow.com/
  36. 36 http://billyhughes.oph.gov.au/
  37. 37 http://billyhughes.oph.gov.au/
  38. 38 http://www.hebatec.de/
  39. 39 http://www.hebatec.de/
  40. 40 http://www.freelenz.at/
  41. 41 http://www.freelenz.at/
  42. 42 http://www.viget.com/inspire
  43. 43 http://www.viget.com/inspire
  44. 44 http://www.ungarbage.com/
  45. 45 http://www.ungarbage.com/
  46. 46 http://www.sprintbio.com/
  47. 47 http://www.sprintbio.com/
  48. 48 http://blogsolid.com/ideas/
  49. 49 http://blogsolid.com/ideas/
  50. 50 http://bitsamppixels.com/
  51. 51 http://bitsamppixels.com/
  52. 52 http://mesa.cityofgrace.com/
  53. 53 http://mesa.cityofgrace.com/
  54. 54 http://www.crazynfunny.com/
  55. 55 http://www.crazynfunny.com/
  56. 56 http://www.legendaryaircraft.hu/
  57. 57 http://www.legendaryaircraft.hu/
  58. 58 http://www.williams-bistro.de/
  59. 59 http://www.williams-bistro.de/
  60. 60 http://www.pil.hu/
  61. 61 http://www.pil.hu/
  62. 62 http://lukasztyrala.pl/
  63. 63 http://lukasztyrala.pl/
  64. 64 http://www.subdued.net/
  65. 65 http://www.subdued.net/
  66. 66 http://www.webdesignerwall.com/
  67. 67 http://www.webdesignerwall.com/
  68. 68 http://www.ustrendy.com/
  69. 69 http://www.ustrendy.com/
  70. 70 http://www.dandelionpath.com/
  71. 71 http://www.dandelionpath.com/
  72. 72 http://aigalosangeles.org/
  73. 73 http://aigalosangeles.org/
  74. 74 http://hicksdesign.co.uk/journal/
  75. 75 http://hicksdesign.co.uk/journal/
  76. 76 http://www.codextransportica.com/
  77. 77 http://www.codextransportica.com/
  78. 78 http://imperium74.free.fr/wordpress/index.php
  79. 79 http://imperium74.free.fr/wordpress/index.php
  80. 80 http://www.johannahallin.se/
  81. 81 http://www.johannahallin.se/
  82. 82 http://www.catydesign-studio.com/assort
  83. 83 http://www.catydesign-studio.com/assort
  84. 84 http://www.olieng.net/
  85. 85 http://www.olieng.net/
  86. 86 http://www.catalyststudios.co.uk/
  87. 87 http://www.catalyststudios.co.uk/
  88. 88 http://instantamber.com/
  89. 89 http://instantamber.com/
  90. 90 http://www.ttthings.com/
  91. 91 http://www.ttthings.com/
  92. 92 http://www.thegregbradyproject.com/
  93. 93 http://www.thegregbradyproject.com/
  94. 94 http://www.rjdesignz.com/
  95. 95 http://www.rjdesignz.com/
  96. 96 http://www.lucyblackmore.co.uk/
  97. 97 http://www.lucyblackmore.co.uk/
  98. 98 http://www.paul-wallas.co.uk/
  99. 99 http://www.paul-wallas.co.uk/
  100. 100 http://www.arrivaldesign.co.uk/
  101. 101 http://www.arrivaldesign.co.uk/
  102. 102 http://dennisbloete.de/
  103. 103 http://www.mediaambassador.pl/
  104. 104 http://www.arrivaldesign.co.uk/
  105. 105 http://www.hopkingdesign.com/
  106. 106 http://www.hopkingdesign.com/
  107. 107 http://dunamisdesigns.com/
  108. 108 http://www.surfgarden.de/
  109. 109 http://www.surfgarden.de/
  110. 110 http://www.1ncu8u5.co.uk/
  111. 111 http://www.1ncu8u5.co.uk/
  112. 112 http://www.fabspider.com/
  113. 113 http://www.fabspider.com/
  114. 114 http://www.ollyhite.com/
  115. 115 http://www.ollyhite.com/

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertisement
  1. 1

    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
  2. 102

    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
  3. 203

    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
  4. 304

    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
  5. 405

    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
  6. 506

    Hi guys,

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


    Sree

    0
  7. 607

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

    1

↑ Back to top