20 großartige Beispiele für das Design von Website-Fußzeilen

Wenn Sie ein Website-Projekt starten, möchten Sie Ihre Designbemühungen natürlich auf die Homepage und den Header konzentrieren. Infolgedessen wird die Fußzeile häufig zu einem nachträglichen Gedanken - sie wird in eine schlecht gestaltete Müllhalde für Urheberrechtsinformationen, Haftungsausschlüsse und Spam-SEO-Links verwiesen. Aber so sollte es nicht sein.

Die Fußzeile einer Website ist genauso wichtig wie die Kopfzeile, wenn nicht noch wichtiger. Warum? Denn die Fußzeile ist für viele Besucher die letzte Anlaufstelle. Der Punkt, an dem sie sich für den Service anmelden, einen anderen Artikel lesen oder einfach Ihre Kontaktdaten benötigen. Fragen Sie sich: Was sollen Ihre Besucher tun, wenn sie am Ende der Seite angekommen sind? Die Antwort, die Sie finden, ist ein guter Ausgangspunkt für die Gestaltung Ihrer Website-Fußzeile.

Strategischer Ansatz

Diese Antwort wird sich natürlich von Projekt zu Projekt ändern, abhängig von der Art der Website und dem gewünschten Ergebnis. Wenn Sie beispielsweise ein Blog entwerfen, ist es von entscheidender Bedeutung, die Benutzer auf der Website zu halten. Daher ist es häufig ratsam, Links zu den neuesten und beliebtesten Posts in der Fußzeile zu platzieren. Wenn die Website jedoch für ein Produkt werben soll, ist in der Regel entweder ein Aufruf zum Handeln oder ein kleines Anmeldeformular die bessere Wahl.



Überlegen Sie genau, welche Inhalte in der Fußzeile platziert werden sollen. Während es verlockend ist, es als Raum zu nutzen, um verschiedene Kleinigkeiten zu platzieren, wird dies sein Potenzial schwächen. Beim Entwerfen einer großartigen Fußzeile geht es nicht darum, den besten Weg zu finden, um viele nicht verwandte Inhalte zu gestalten, sondern darum, unnötige oder überflüssige Informationen zu priorisieren und zu ignorieren.

Denken Sie an Konventionen

Es ist jedoch wichtig, sich daran zu erinnern, dass einige Konventionen existieren, und diese beim Entwerfen von Website-Fußzeilen zu berücksichtigen. Beispielsweise scrollen viele Benutzer, die versuchen, Kontaktdaten für ein Unternehmen abzurufen, zum Ende der Seite. Sie können jedoch weiterhin wichtigere Informationen priorisieren, indem Sie Gestaltungselemente wie z. B. Skalierung verwenden, um ein starkes Gefühl für Hierarchie in der Fußzeile Ihrer Website zu erzeugen.

Das folgende Schaufenster soll verschiedene Möglichkeiten zeigen, wie Website-Fußzeilen verwendet werden können - wir hoffen, dass Sie es nützlich finden.

01. Tapbots

Website-Fußzeile

In der Fußzeile von Tapbots wird die Illustration effektiv eingesetzt - was auf vielen Websites nicht immer der Fall ist

Tapbots sind Utility-Roboter, die für iPhone und iPod touch entwickelt wurden. Diese von Paul Haddad und Mark Jardine entwickelten Roboter bieten alle Hilfe, die Sie in der Fußzeile der Website benötigen.

Nebeneinander stehen vier wunderschöne Illustrationen, die jeweils für die von ihnen bereitgestellten Informationen relevant sind. Besonders gut gefallen uns die Charaktere im Manga-Stil, die Hilfe und weitere Details über das Unternehmen bieten.

02. Mama & Popcorn

Website-Fußzeile

Die auffällige Fußzeile von Mom & Popcorn wird von Bildern dominiert, die von den 50ern und 60ern inspiriert wurden

Bei Mom & Popcorn dreht sich alles um Gourmet-Popcorn, altmodische Süßigkeiten und Limonaden. Diese Website im Retro-Stil bietet Kunden eine bequeme, schnelle und einfache Möglichkeit, ihre Lieblingssüßigkeiten online zu finden.

Die Fußzeile ist hell und lebendig und wird von verschiedenen auffälligen Bildern dominiert, die von den 50ern und 60ern inspiriert wurden. Unter den Nostalgikern finden Benutzer alle Informationen über das Unternehmen, die sie möglicherweise benötigen, einschließlich Standort, Produkte, Nachrichten, Kontaktinformationen und mehr.

03. Soho behoben

Website-Fußzeile

In der Fußzeile von Soho Fixed finden Sie alles, was Sie zum Navigieren auf der Website benötigen, um mehr über die zur Veröffentlichung anstehenden Motorräder zu erfahren

Soho Fixed ist ein Team von Künstlern und Fahrradtechnikern, die alle paar Wochen ein einzigartiges, maßgeschneidertes Rennrad mit festem Rad und einfacher Geschwindigkeit bauen und es auf dieser Website zum Verkauf anbieten.

Das Website-Design im Retro-Stil enthält eine Fußzeile mit einer zweiten Menüleiste, die es den Benutzern erleichtert, sich zurechtzufinden. Es gibt auch prominente Schaltflächen für soziale Netzwerke sowie ein E-Mail-Eingabeelement, wenn Sie informiert werden möchten, wenn ein neues Fahrrad auf die Website kommt.

04. Urban Pie

Website-Fußzeile

In der Fußzeile der Urban Pie-Website werden illustrierte Zeichen verwendet, um Besucher willkommen zu heißen

Die Firma Urban Pie hat es sich zur Aufgabe gemacht, die bestmöglichen Gourmet-Kuchen zu kreieren. Da das Produkt von größter Bedeutung ist, hält die Unternehmenswebsite die Dinge einfach und unterhaltsam und bietet wichtige Informationen sowie eine Auswahl an Illustrationen im Cartoon-Stil.

Die Fußzeile der Website enthält keine Informationen oder Handlungsaufforderungen, sondern lediglich eine skizzierte Skyline und einige ansprechende illustrierte Tortenfiguren, die die Besucher der Website begrüßen. Eine nette Geste.

05. Jared Johnson

Website-Fußzeile

Jared Johnson priorisiert seine Kontaktinformationen, um das Auffinden zu erleichtern

Während das Einfügen von Kontaktinformationen in die Fußzeile zu einer Art Konvention geworden ist, gibt es viele Fälle, in denen diese Informationen nicht nur erforderlich sind, sondern priorisiert werden sollten. Dies gilt insbesondere für Dienstleister wie freiberufliche Designer und Unternehmen mit einer physischen Adresse.

Der freiberufliche Designer Jared Johnson hat die Kontaktinformationen auf seiner einseitigen Folio-Site priorisiert. Die Art und Weise, wie er Farbe und Skalierung verwendet, um seine E-Mail-Adresse und Telefonnummer vom Rest der Fußzeile zu unterscheiden, stellt sicher, dass sie leicht zu finden sind. Dies ist wichtig, wenn Sie ein freiberuflicher Designer sind.

06. Cantilever Fish & Chips

Website-Fußzeile

Die Öffnungszeiten für Cantilever Fish & Chips finden Sie ganz einfach in der Fußzeile der Website

Auf der einseitigen Website von Cantilever Fish & Chips werden am Ende der Seite Standort, Kontaktdaten und Öffnungszeiten angezeigt. Auf diese Weise halten sie sich an die Konvention, diese Informationen am Ende der Seite zu platzieren. Was diese Website jedoch auszeichnet, ist die innovative und attraktive Art und Weise, wie sie präsentiert wird.

07. Jason kann

Website-Fußzeile

Die Fußzeile von Jason Mayo enthält eine kurze Biografie sowie einige ungewöhnliche Statistiken

Das Platzieren einer kurzen textbasierten Information wie eines Profils, einer Biografie oder eines Testimonials in der Fußzeile ist eine effektive Möglichkeit, einen Einblick in die Entität zu gewähren, die die Website darstellt. Für viele Websites ist das Platzieren des Autorenprofils in der Fußzeile eine hervorragende Möglichkeit, diese nicht nur zu bewerben, sondern auch dem Inhalt der Website Glaubwürdigkeit zu verleihen.

Die Statistiken oben in der Fußzeile auf der Website von Jason Mayo verbessern sein Kurzprofil, geben einen Einblick in seinen Charakter und seine Fähigkeiten und verleihen ihm einen Hauch von Individualität.

08. Das Ministerium für Typ

Website-Fußzeile

Ein Profil des Erstellers des Ministeriums für Schrift verleiht dem Inhalt Glaubwürdigkeit

Die Fußzeile von The Ministry Of Type enthält ein kurzes Profil über den Schöpfer und Autor Aegir Hallmundur. Das Vorhandensein seines Profils erhöht die Glaubwürdigkeit des Inhalts der Website und fördert das Portfolio des Autors und die freiberuflichen Aktivitäten bei den Lesern.

09. Monokel

Website-Fußzeile

In der Fußzeile werden Links zu weniger wichtigen Bereichen der Monocle-Site angezeigt, um die Komplexität der Hauptnavigation zu verringern

Das Platzieren der sekundären Navigation in weniger wichtigen Bereichen einer Website ist auch eine hervorragende Möglichkeit, die Fußzeile zu verwenden, da dies dazu beitragen kann, die Hauptnavigation zu deaktivieren, was wiederum die Benutzerfreundlichkeit verbessert. Dies ist ein besonders guter Ansatz für große Websites.

Monocle platziert Links zu weniger wichtigen Bereichen seiner Website in der Fußzeile, wodurch die Komplexität der Hauptnavigation verringert wird. Eine Suchleiste ist ebenfalls enthalten, damit Benutzer nach zusätzlichen Informationen suchen können, ohne zum Anfang der Seite zurückblättern zu müssen.

10. Das Gleiche gilt

Website-Fußzeile

Ditto hat seine Navigation vom oberen Rand der Seite in die Fußzeile verschoben

Der Brillenhändler Ditto geht die Idee weiter und verschiebt seine Navigation vom oberen Rand der Seite in die Fußzeile. Auf diese Weise schränken sie die Optionen ein, die Gelegenheitsbenutzern zur Verfügung stehen, sodass sie Kunden leicht durch ihren Produktauswahlprozess führen können. Benutzer mit bestimmten Zielen scrollen jedoch natürlich zum Ende der Seite, um die benötigten Informationen zu finden.

elf. Site Inspire

Website-Fußzeile

Die Fußzeile des Site Inspire-Blogs fordert die Leser auf, weiterzulesen

Für Blogs und Nachrichten-Websites ist es von größter Bedeutung, den Benutzer auf der Website zu halten, da viele dieser Websites auf die Maximierung der Seitenaufrufe angewiesen sind, um Einnahmen zu erzielen. Das Anbieten von Links zu beliebten oder kürzlich veröffentlichten Inhalten in der Fußzeile ist ein guter Weg, um dies zu erreichen.

Die Fußzeile auf Site Inspire ist sehr einfach und enthält nur ein kurzes Profil und Links zu kürzlich veröffentlichten Inhalten. Ein solcher Ansatz bietet den Lesern die Möglichkeit, auf mehr Inhalte zuzugreifen, wenn sie am Ende der Seite angekommen sind. Dies bedeutet, dass sie mit größerer Wahrscheinlichkeit weiterhin auf der Website surfen.

12. Web Designer Wand

Website-Fußzeile

Die Fußzeile von Web Designer Wall enthält Links zu aktuellen Leserkommentaren

Web Designer Wall bietet neben einem kurzen Profil Links zu aktuellen Posts und Benutzerkommentaren in der Fußzeile. Das Verknüpfen mit aktuellen Kommentaren ist eine besonders gute Strategie, wenn hinter dem Blog eine starke Community steht, die intelligente, aber unterschiedliche Meinungen hat, die wahrscheinlich das Interesse anderer Leser wecken.

13. Rdio

Website-Fußzeile

Die Fußzeile von Rdio priorisiert soziale Medien

Für viele Einzelpersonen und Unternehmen ist die Entwicklung einer starken Social-Media-Präsenz ein Eckpfeiler ihrer digitalen Strategie. Die Priorisierung von Social-Media-Links in der Fußzeile ist daher eine effektive Möglichkeit, Benutzer nach dem Surfen auf der Website zu ihren verschiedenen Social-Media-Außenposten zu führen.

In der Fußzeile auf der Homepage von Rdio werden die verschiedenen Social-Media-Dienste priorisiert, indem um diese Elemente herum viel Platz frei bleibt, um die Aufmerksamkeit der Benutzer auf sich zu ziehen.

14. Spark Box

Website-Fußzeile

Spark Box führt Feeds von Twitter, Dribbble und Flickr in seiner Fußzeile aus

Das Ohio Studio Spark Box geht noch einen Schritt weiter und platziert Feeds von Diensten wie Twitter, Dribbble und Flickr in seiner verspielten Fußzeile. Dies macht potenzielle Follower auf ihre Präsenz in diesen sozialen Netzwerken aufmerksam.

fünfzehn. Karma

Website-Fußzeile

Karma hat einen sekundären Aufruf zum Handeln in seiner Fußzeile

Websites für Produkte oder Dienstleistungen enthalten in der Regel eindeutige Handlungsaufforderungen in der Kopfzeile der Website. Das Hinzufügen einer sekundären Handlungsaufforderung in der Fußzeile ist jedoch eine effektive Methode, um vorsichtigere Benutzer anzulocken, die vor der Anmeldung mehr erfahren möchten.

Der Dienst 'Soziale Bandbreite' Karma ergänzt die primäre Handlungsaufforderung auf seiner Website durch eine sekundäre Handlungsaufforderung in der Fußzeile jeder Seite. Die Handlungsaufforderungstaste ist groß, freundlich und wird wahrscheinlich nicht übersehen.

16. Scriptogr.am

Website-Fußzeile

Scripto.gram ermutigt Anmeldungen durch einen eindeutigen Aufruf zum Handeln in der Fußzeile

Die Web-Publishing-App Scriptogr.am hat einen ähnlichen Ansatz gewählt. Wie die Call-to-Action-Schaltfläche auf der Karma-Website soll auch die in der Fußzeile enthaltene Call-to-Action-Schaltfläche sicherstellen, dass sie die Aufmerksamkeit der Benutzer auf sich zieht.

17. Das Nomen-Projekt

Website-Fußzeile

Das Noun-Projekt priorisiert die Newsletter-Anmeldung durch einen spielerischen Einsatz der Skalierung

Während das Platzieren großer benutzerfreundlicher Handlungsaufforderungstasten in der Fußzeile eine effektive Strategie ist, gehen viele Websites dieses Konzept noch einen Schritt weiter, indem sie Formulare in die Fußzeile aufnehmen, sodass Benutzer eine Vielzahl von Aufgaben ausführen können, z. B. das Abonnieren von Newslettern oder das Initiieren von Kontakten auf jeder Seite.

Die Fußzeile für den Icon-Service Das Noun-Projekt priorisiert seine Newsletter-Anmeldung durch einen spielerischen Einsatz der Skalierung. Durch die Erfassung von Benutzerdetails auf diese Weise können sie sich lange nach dem Besuch der Website an potenzielle Kunden vermarkten.

18. Das Nationale LGBT-Museum

Website-Fußzeile

Die Fußzeile der Website des LGBT-Museums enthält ein großes, freundliches Kontaktformular

Die Fußzeile auf der einseitigen Website des LGBT-Museums enthält ein großes, freundliches Kontaktformular, in dem Benutzer aufgefordert werden, Kontakt mit ihnen aufzunehmen. Ein solcher Ansatz minimiert das Zögern der Benutzer, sich an die Organisation zu wenden.

19. Neues Babylon

Website-Fußzeile

Die Fußzeile von New Babylon verwendet Farbe, um sich klar vom Hauptinhalt zu trennen

Bei Websites, auf denen für Veranstaltungen geworben wird, bei denen Sponsoren und Unterstützer in der Fußzeile angezeigt werden, kann die Veranstaltung glaubwürdig erscheinen, insbesondere wenn diese Sponsoren relevant und bekannt sind.

Auf der einseitigen Website des Kunstfestivals New Babylon werden in der Fußzeile Sponsoring-Informationen angezeigt, die durch Variation der Hintergrundfarbe klar vom Hauptinhalt getrennt werden.

zwanzig. Kikk Festival

Website-Fußzeile

Die Fußzeile der Kikk Festival-Website fördert Sponsoren und Unterstützer von Veranstaltungen effektiv

Die Fußzeile auf der Kikk Festival-Website ist ebenfalls sehr gut gestaltet und ein großartiges Beispiel dafür, wie die Fußzeile effektiv zur Anzeige von Sponsoren und Unterstützern von Veranstaltungen verwendet werden kann.

Wörter :: Nathan Leigh Davis und das Creative Bloq-Team

Nathan Leigh Davis ist Designer und Webentwickler und lebt und arbeitet in Melbourne, Australien. Er arbeitet hauptsächlich als interaktiver Design- und Webentwickler, beherrscht jedoch Markenidentität, Design für Print und kreative Ausrichtung gleichermaßen.

Jetzt lesen:

Haben Sie eine großartige Website-Fußzeile gesehen? Erzähl uns davon in den Kommentaren!