Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

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? Link

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 Link

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

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

Footers - Vimeo, Video Sharing For You13

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

Screenshot15

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

Screenshot17

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

Screenshot19

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

Footers - MB Dragan21

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

Screenshot23

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

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

Screenshot25

Roman Leinwather26 has some green flowers for us…

Screenshot27

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

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

A little city on StrawPollNow.com30.

Footers - StrawPoll—Tiny polls in 140 characters or less31

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

Footers - Billy Hughes at War | Old Parliament House33

HEBAtec34 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 Bielefeld35

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

Screenshot37

Viget.com38 provides navigation in categories and archives.

Screenshot39

Blogsolid40 offers an icon parade in the footer.

Screenshot41

Bits and Pixels42 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 Pixels43

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

Footers - City of Grace Mesa45

3. Illustrations in use Link

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

Screenshot47

Legendary Aircraft48 has a toolbox in its footer.

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

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

Screenshot51

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

Footers - fabspiderâ„¢ everything web - home53

So does Bart-Jan Verhoef54.

Screenshot55

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

Screenshot57

Us Trendy58 — 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.59

Dandelionpath60 with swirls, curves and flowers.

Screenshot61

Colorful curves at the bottom of AIGA Los Angeles62.

Footers - AIGA Los Angeles63

Hicksdesign64 with a retro-theme and brief contact details.

Screenshot65

Codex Transportica66 — simple and distinctive.

Screenshot67

Johanna Hallin68 clips the footer to the site layout.

Screenshot69

Catydesign70‘s cat is sweet…

Screenshot71

…and Olieng72‘s lobster scorpion is even animated!

Screenshot73

Link suggestions in Catalyst Studios74 sketchbook.

Screenshot75

4. Footers with advanced functions Link

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, email subscription and tag clouds can be placed there too.

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

Footers - The Greg Brady Project77

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

Screenshot79

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

Footers - Lucy Blackmore | Artist | Harrogate81

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

Footers - Arrival Design - Web Design Agency83

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

Screenshot84

Media Ambassador85 offers e-mail newsletters…

Footers - Arrival Design - Web Design Agency86

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

Screenshot88

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.

Screenshot89

5. Experimental solutions Link

Utensils in the Surfgarden90.

Screenshot91

1ncu8u5 has a quite grungy footer.

Screenshot

Farbspider92 — design agency presents people working there.

Footers - City of Grace Mesa93

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

Screenshot95

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/
  2. 2 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  3. 3 https://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  4. 4 https://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.vimeo.com/
  13. 13 http://www.vimeo.com/
  14. 14 http://www.kulturbanause.de/
  15. 15 http://www.kulturbanause.de/
  16. 16 http://www.therissingtonpodcast.co.uk/
  17. 17 http://www.therissingtonpodcast.co.uk/
  18. 18 http://www.realmacsoftware.com/rapidweaver/
  19. 19 http://www.realmacsoftware.com/rapidweaver/
  20. 20 http://www.mbdragan.com/
  21. 21 http://www.mbdragan.com/
  22. 22 http://www.blabolnik.cz/
  23. 23 http://www.blabolnik.cz/
  24. 24 http://www.tntpixel.com/
  25. 25 http://www.tntpixel.com/
  26. 26 http://www.lewro.com/
  27. 27 http://www.lewro.com/
  28. 28 http://www.web4biz.ro/
  29. 29 http://www.web4biz.ro/
  30. 30 http://www.strawpollnow.com/
  31. 31 http://www.strawpollnow.com/
  32. 32 http://billyhughes.oph.gov.au/
  33. 33 http://billyhughes.oph.gov.au/
  34. 34 http://www.hebatec.de/
  35. 35 http://www.hebatec.de/
  36. 36 http://www.freelenz.at/
  37. 37 http://www.freelenz.at/
  38. 38 http://www.viget.com/inspire
  39. 39 http://www.viget.com/inspire
  40. 40 http://blogsolid.com/ideas/
  41. 41 http://blogsolid.com/ideas/
  42. 42 http://bitsamppixels.com/
  43. 43 http://bitsamppixels.com/
  44. 44 http://mesa.cityofgrace.com/
  45. 45 http://mesa.cityofgrace.com/
  46. 46 http://www.crazynfunny.com/
  47. 47 http://www.crazynfunny.com/
  48. 48 http://www.legendaryaircraft.hu/
  49. 49 http://www.legendaryaircraft.hu/
  50. 50 http://www.pil.hu/
  51. 51 http://www.pil.hu/
  52. 52 http://lukasztyrala.pl/
  53. 53 http://lukasztyrala.pl/
  54. 54 http://www.subdued.net/
  55. 55 http://www.subdued.net/
  56. 56 http://www.webdesignerwall.com/
  57. 57 http://www.webdesignerwall.com/
  58. 58 http://www.ustrendy.com/
  59. 59 http://www.ustrendy.com/
  60. 60 http://www.dandelionpath.com/
  61. 61 http://www.dandelionpath.com/
  62. 62 http://aigalosangeles.org/
  63. 63 http://aigalosangeles.org/
  64. 64 http://hicksdesign.co.uk/journal/
  65. 65 http://hicksdesign.co.uk/journal/
  66. 66 http://www.codextransportica.com/
  67. 67 http://www.codextransportica.com/
  68. 68 http://www.johannahallin.se/
  69. 69 http://www.johannahallin.se/
  70. 70 http://www.catydesign-studio.com/assort
  71. 71 http://www.catydesign-studio.com/assort
  72. 72 http://www.olieng.net/
  73. 73 http://www.olieng.net/
  74. 74 http://www.catalyststudios.co.uk/
  75. 75 http://www.catalyststudios.co.uk/
  76. 76 http://www.thegregbradyproject.com/
  77. 77 http://www.thegregbradyproject.com/
  78. 78 http://www.rjdesignz.com/
  79. 79 http://www.rjdesignz.com/
  80. 80 http://www.lucyblackmore.co.uk/
  81. 81 http://www.lucyblackmore.co.uk/
  82. 82 http://www.arrivaldesign.co.uk/
  83. 83 http://www.arrivaldesign.co.uk/
  84. 84 http://dennisbloete.de/
  85. 85 http://www.mediaambassador.pl/
  86. 86 http://www.arrivaldesign.co.uk/
  87. 87 http://www.hopkingdesign.com/
  88. 88 http://www.hopkingdesign.com/
  89. 89 http://dunamisdesigns.com/
  90. 90 http://www.surfgarden.de/
  91. 91 http://www.surfgarden.de/
  92. 92 http://www.fabspider.com/
  93. 93 http://www.fabspider.com/
  94. 94 http://www.ollyhite.com/
  95. 95 http://www.ollyhite.com/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

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

    2
    • 2

      hahaha you gotta be kidding, right?! because thats about the worst piece of …. website i’ve laid my eyes on in a while.

      ps. silly rabbit, gif animations are for kids

      -47
    • 4

      sefinspectorbula

      July 20, 2011 4:30 am

      I’m really struggling not to comment on the design of that website…

      -1
    • 5

      I think it’s a nice webpage Rudi!

      -1
  2. 6

    Craig Schlewitz

    April 8, 2008 6:01 pm

    VERY inspirational!
    Great post.
    :]

    4
  3. 7

    I think another great addition would be Abduzeedo.com

    -2
  4. 8

    Olieng’s is a scorpion, not a lobster.

    1
  5. 9

    Fantastic work as usual, guys!

    Dugg!

    0
  6. 10

    lobster? scorpion!

    0
  7. 11

    404 on the Navigation Menus: Trends and Examples link

    mreow.

    1
  8. 12

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

    Anyway, great article!

    1
  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

    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.

    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

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

    -2
  14. 18

    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
  15. 19

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

    Link:

    0
  16. 20

    Excellent, as always.

    0
  17. 21

    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
  18. 22

    DrawntoPixels has a flying hippo’s bum!

    0
  19. 23

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

    0
  20. 24

    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
  21. 25

    Cheers Smashy

    0
  22. 26

    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
  23. 27

    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
  24. 28

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

    0
  25. 29

    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
  26. 30

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

    0
  27. 31

    Great List…as usual!

    0
  28. 32

    Congratulations for your great work!

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

    Thanks a lot!

    0
  29. 33

    One to bookmark, thanks!

    0
  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

↑ Back to top