Website Footer: 13 Beispiele und Tipps für effektives Footer Design

Wer eine eigene Website erstellen will, investiert oft viel Zeit und Liebe in Details wie das Design, die Bilder, den Aufbau und die Texte einer Website. Leider wird der Website Footer hierbei häufig vernachlässigt. Dabei sind es oft kleine Details wie der Header und Footer-Bereich einer Website, die den größten Unterschied machen.

Da der Footer für alle Arten von Websites wichtig ist, widmen wir uns ihm in diesem Beitrag ganz ausführlich. Neben einer Vielzahl von praktischen Beispielen erklären wir dir, welche Elemente für ein effektives Footer Design wichtig sind, damit du zukünftig das volle Potenzial deiner Fußzeile ausschöpfen kannst.

Der Footer ist das unterste Element einer Website.

Es handelt sich hierbei um den Inhaltsstreifen, der sich ganz unten auf einer Webseite befindet und von jeder Unterseite aus abgerufen werden kann. Der Website Footer sieht auf jeder Unterseite gleich aus und wird meist so gestaltet, dass er sich farblich etwas vom Rest der Website unterscheidet und so hervorgehoben wird.

Als Abschluss einer Website-Struktur signalisiert der Footer deinen Besucher:innen, dass sie das Ende deiner Seite erreicht haben. Nutzer:innen, die bis zum Ende scrollen, sind oft auf der Suche nach weiteren wichtigen Informationen, die sie bisher nicht auf deiner Website gefunden haben.

Hierin liegt die größte Chance des Footers. Nutze ihn also, um wertvolle, interessante und nützliche Inhalte und Informationen anzubieten. Zusätzlich solltest du hier wichtige Pflichtinformationen integrieren.

Je nachdem, wie viele Informationen der Footer enthalten soll, kann er in mehrere Abschnitte untergliedert werden. So kannst du zum Beispiel eine Spalte den Informationen zum Unternehmen widmen und Angebot & Vorteile in einer anderen Spalte darstellen. Auch Kontaktmöglichkeiten und Hilfe-Center können einen Abschnitt haben.

Hierbei handelt es sich nicht um Pflichtinformationen für den Footer, sondern für Websites allgemein. Dazu gehören das Impressum, die Datenschutzerklärung, die AGBs und der Hinweis zum Copyright.

Der Footer bietet eine hervorragende Möglichkeit, den Kund:innen Kontaktmöglichkeiten wie Telefonnummer und E-Mail-Adresse anzuzeigen und die Öffnungszeiten anzugeben. Hierfür kannst du ein kurzes Kontaktformular für die Kontaktaufnahme einrichten und im Footer abbilden.

Bei Shops sollten auch Zahlungsinformationen und Lieferanten angegeben werden. Außerdem ist der Footer ein guter Ort, um Versandpartner und Gütesiegel anzugeben.

Vergiss nicht, die Links zu deinen Social-Media-Kanälen abzubilden. Entweder als verlinktes Wort oder in Form von Icons.

Für wiederkehrende Fragen bietet sich ein Hilfe-Bereich an, den man ebenfalls am besten über eine Verlinkung im Footer erreicht.

E-Mail-Marketing ist heutzutage zu einem Schwerpunkt im Online-Business geworden und Kund:innen freuen sich immer wieder über Newsletter, die einen Mehrwert bieten. Nutze den Footer, um einen CTA zur Anmeldung sowie ein Online-Formular für deinen Newsletter hinzuzufügen.

Du bietest in deinem Unternehmen besondere Services oder andere Vorteile an? Im Footer findest du Platz, genau darauf hinzuweisen. Ob du deinen Kund:innen einen Kaufratgeber bietest oder einen Zugang für eine B2B-Plattform hast. Hier ist ein richtiger Ort dafür.

Jedes Unternehmen hat eine interessante Geschichte zu erzählen und als Kund:innen möchten wir uns heutzutage auch mehr mit den Werten eines Unternehmens auseinandersetzen, bevor wir eine Kaufentscheidung treffen. Nutze den Footer und verlinke auf deine „Über uns“-Seite und biete Jobsuchenden oder der Presse Möglichkeiten an, weitere Informationen zu finden.

Heutzutage ist nahezu jedes Unternehmen in Social Media vertreten. Die beste Art, zu seinen eigenen Konten zu verlinken, bietet immer noch der Footer. Hier kannst du entscheiden, ob du die Symbole in den jeweiligen Firmenfarben hinzufügst, oder einfarbige Symbole nutzt, um einen minimalistischen Ansatz zu verfolgen.

Je nach Branche und Themenbereich deiner Website kann die Darstellung der kompletten Sitemap im Footer für die interne Verlinkung genutzt werden.

Es gibt ein paar grundlegende Informationen, die die Besucher deiner Website in deinem Footer erwarten, damit sie nicht erst wieder zum Anfang deiner Website scrollen müssen, um sie zu finden.

Hierbei handelt es sich meistens um Informationen, für die du in der Hauptnavigation keinen Platz findest, ohne dass der Header-Bereich zu vollgepackt wirken würde. Ein klassisches Beispiel hierfür sind die Rechtstexte und Kontaktinformationen.

Im Idealfall konvertieren deine Besucher:innen bereits oben auf deiner Website zu Nutzer:innen und / oder Kund:innen. Ist dies noch nicht geschehen, kann ihnen der Footer wertvolle Informationen bieten, um die Conversion zu erleichtern.

Außerdem kannst du hier die Chancen erhöhen, dass sich Besucher:innen noch mehr mit deinem Content auseinandersetzen, indem du sie zu interessanten Seiten wie deinen Social-Media-Kanälen navigierst.

Am besten erstellst du für alle Elemente deines Footers separate Seiten und verlinkst diese dann im Footer. So verbesserst du die Footer Navigation und vermeidest Duplicate Content (doppelte Inhalte), was gleichzeitig die SEO (Suchmaschinenoptimierung) deiner Website verbessert.

Ein wichtiger SEO-Faktor ist die Verweildauer von Besucher:innen auf deiner Website. Je mehr sie sich also durch deine Website klicken und sich mit deinen Inhalten auseinandersetzen, desto länger bleiben sie auf deiner Seite aktiv. Daher solltest du dafür sorgen, dass du mit deinen Inhalten das Interesse deiner Nutzer:innen hältst – und das gilt auch für den Content in deinem Footer.

Jetzt, da du die wichtigsten Footer Elemente kennst, fragst du dich vielleicht: Wie sollte der Footer aussehen? Achte darauf, dass du dem Footer-Design genauso viel Aufmerksamkeit widmest wie dem Rest deines Inhalts.

Grundsätzlich sollte der Footer zum Erscheinungsbild und dem Design deiner Website passen. Gleichzeitig sollte er sich der Footer Bereich jedoch deutlich vom Content abheben, damit er als eigenständiges Designelement auffällt.

Das gelingt dir am besten, indem du den Footer farblich abhebst und ihn zum Beispiel etwas heller oder dunkler gestaltest als den Rest deines Website-Hintergrunds.

Achte auf ein klares und einfaches Erscheinungsbild, damit die Besucher:innen diese letzten wichtigen Informationen leicht aufnehmen können. Dafür sollte das Footer Design klar strukturiert sein und eine übersichtliche Footer-Navigation ermöglichen. Nur so finden sich deine Nutzer:innen auch zurecht. Entscheide, welche Informationen du hervorheben willst, indem du dich auf deine Unternehmensziele beziehst. Wie oben bereits erwähnt, kannst du das durch die Verwendung von Spalten, Abschnitte und Icons bieten.

Jeder Inhalt auf deiner Website ist eine Chance, deine Persönlichkeit und deine Markenidentität widerzuspiegeln. Das gilt auch für deine Fußzeile. Verwende deine Markenfarben und Variationen dieser. Verwende außerdem eine klare Sprache und klare Wortwahl, die zu den restlichen Texten deiner Website passen.

Studio Bloom nutzt mit einem auffälligen breiten Footer geschickt den Platz, um auf den Instagram-Account des Unternehmens hinzuweisen. Die Marke für Handwerkskunst aus Freiburg – getreu dem Motto “Handmade with love” – lädt Interessent:innen dazu ein, mehr handgemachte Produkte über Instagram zu entdecken. Toll ist ein CTA-Button im Footer, mit dem Kund:innen den angezeigten Feed erweitern können.

Die Hintergrundfarbe des Footer-Designs passt sich nahtlos dem Design der gesamten Website an und hebt sich dennoch ab, indem sie in einer der Sekundärfarben gehalten wird. Die Anmeldung zum Newsletter sticht sofort durch die Platzierung einer weißen Box für die Übermittlung der E-Mail-Adresse hervor. Dadurch finden interessierte Kund:innen sofort den Weg in den Newsletter-Verteiler.

Studio Bloom gliedert unter der Überschrift „Customer Care” alle notwendigen und hilfreichen Informationen und zwar genau dort, wo Kund:innen diese Links erwarten.

Der in Hamburg Altona ansässige Spezialist für Leuchten und Gewinner des German Design Awards 2018 Midgard, unterstreicht mit dem Footer das minimalistische Design seiner Produkte und führt dieses konsequent fort.

Der Footer legt keinen besonderen Wert auf Schnickschnack, sondern zeigt den Kund:innen den Weg zu Social Media und Newsletter, ohne große Umwege gehen zu müssen. Es wurde bewusst darauf verzichtet, Feeds von Instagram und Co. zu integrieren. Die Icons zu Social Media fügen sich mit ihrem einfachen, in schwarz-weiß gehaltenen Erscheinungsbild sehr gut in die gesamte Webseite ein.

Die Handlungsaufforderung „Hier“ im CTA für die Anmeldung zum Newsletter ist klar und deutlich und unterstreicht die Mentalität der norddeutschen Marke.

Diese Website des Restaurants House Number 3 enthält alle wichtigen Informationen in der Fußzeile der Website. Mit Google Maps und einem Live-Chat sind sie leicht zu erreichen. Diese kleinen Details zeigen, dass sie an die Bedürfnisse ihrer Kund:innen gedacht haben und offen sind, mit ihnen in Kontakt zu treten.

Es gibt zwar keine Sitemap in der Fußzeile, aber das Hauptmenü der Website ist am oberen Rand des Bildschirms angebracht, sodass die Besucher leicht durch die Seiten navigieren können.

Schließlich gibt es ein eindeutiges Farbschema, das sich in der Fußzeile fortsetzt und sich nahtlos in das Design einfügt.

Das Hamburger Schuhlabel Shoohs hat den Footer genau wie ihre Schuhe gestaltet – zeitlos, modern und elegant. Obwohl die Marke eine Vielzahl an Informationen und nützlichen Links in den Footer gepackt hat, wirkt dieser auf keinen Fall überladen, sondern eher aufgeräumt und gut strukturiert.

Shoos lädt Kund:innen dazu ein, über Social Media Kontakt für eine Stilberatung aufzunehmen und verspricht eine Bearbeitung der allgemeinen Anfragen innerhalb von 24 Stunden. Ebenso wird die Kontaktaufnahme durch Hinzufügen einer Service-Hotline und durch die Angabe der Öffnungszeiten erleichtert.

Als besonderen Clou hat Shoohs kleine Icons der akzeptierten Zahlungsmöglichkeiten in den Website-Footer integriert. Somit wissen Kund:innen mit Vorliebe für Ballerinas und Loafers sofort, auf welche Art sie ihre Bestellung bezahlen können. Für den Fall, dass man die Zahlung in einer anderen Währung als Euro bevorzugt, hat Shoohs ein Drop-down-Menü integriert, mit dem man die angezeigte Währung im Shop anpassen kann.

Als Lifestyle-Marke mit einem starken Schwerpunkt auf visuellen Elementen hat Lola Pate beschlossen, ihren Instagram-Feed in den Footer zu integrieren. Das stärkt nicht nur die Markenidentität, sondern verleitet die Besucher der Website auch dazu, auf die Produktbilder zu klicken und sie in einem größeren Format anzusehen.

Die Marke hat diesen Platz auch genutzt, um einen letzten CTA einzubauen, der die Besucher einlädt, „unserem Stamm beizutreten“. Dieser strategische Schachzug, gepaart mit witzigen Mikrotexten, wird die Leute dazu bringen, sich in die Mailingliste einzutragen.

Und für den Fall, dass die Kunden es übersehen haben, ist die Versand- und Rückgabeseite hier verlinkt – ein gutes Verfahren, wenn man einen Online-Shop eröffnet.

Der Upcycling-Spezialist Cruisin’ Design aus Rüdesheim am Rhein hat seinen Footer in 4 übersichtliche Blöcke unterteilt und nutzt dadurch optimal den Platz, um seinen Kund:innen alle relevanten Informationen bereitzustellen.

Durch einzelne Farbakzente, wie die Wiederholung des Logos im Footer oder die farblichen Icons mit den akzeptierten Zahlungsmöglichkeiten lockert die Marke den an sich in schwarz mit weißer Schrift gehaltenen Footer auf. Besonders auffällig ist hier der CTA mit einem Link direkt zum Online-Shop, der bewusst in rot designt wurde, um sofort die Aufmerksamkeit auf sich zu ziehen.

Der Hersteller von recycelten Produkten aus alten Fahrzeugteilen hat zusätzlich einen Teil seiner Navigationsstruktur im Footer untergebracht, um seinen Kund:innen eine möglichst einfache Navigation zu bieten.

Dieses Footer Beispiel enthält alle Informationen, die Besucher:innen erwarten. Willowbrook Farm verwendet ein übersichtliches Menü, das zu allen Seiten der Website führt, ein verlockendes Angebot, sich anzumelden und eine Möglichkeit, mit uns in Kontakt zu treten. Dank des Farbkontrasts sticht der „Abonnieren“-Button hervor und macht ihn noch einladender.

Das Design steht im Einklang mit dem Rest der Website des Kleinunternehmens und sorgt für ein harmonisches Gesamtbild. Die Farbpalette erinnert an die Natur, ebenso wie die Illustration - eine nette Idee, die der Fußzeile ein freundlicheres Aussehen verleiht.

Die Berliner Landjungs sorgen nicht nur für wunderschöne Produkte, sondern haben auch einen übersichtlichen Footer designt, auf dem man direkt alle wichtigen Informationen über das Unternehmen finden kann.

Im Footer wird bewusst darauf verzichtet, Social Media Icons zu integrieren. Der Weg auf Facebook oder Instagram erfolgt schlicht und einfach über einen Klick auf das jeweilige Wort, welches den minimalistischen Ansatz der DIY-Möbelgestalter unterstreicht, denen auch sonst nichts Neues in den Onlineshop kommt.

Besonders gelungen ist der CTA zum Abonnieren des Newsletters, der sich in seiner Gestaltung deutlich vom Rest des Footers abhebt und die Kund:innen direkt einlädt, auf den Button zu klicken. Besonders hilfreich ist die Integration einer „Nach oben“-Schaltfläche, mir der man direkt an den Anfang der jeweiligen Seite gelangt, ohne nach oben scrollen zu müssen.

Die Marke für nachhaltige Accessoires zeigt, dass gutes Design nicht kompliziert sein muss. Mit nur zwei neutralen Farben vermittelt die Fußzeile der Website alle wichtigen Informationen und bietet gleichzeitig ein ansprechendes Design.

Jérome Studio hat ein übersichtliches Layout mit einem klaren Sinn für Hierarchie geschaffen. Die Fußzeile ergänzt das restliche Design, fügt sich perfekt in die andere klare Ästhetik ein und bildet einen eleganten Look.

Die Verwendung einer serifenlosen und einer serifenbetonten Schriftart verleiht dem Design einen subtilen Touch, der dazu beiträgt, die Überschriften vom restlichen Text zu unterscheiden. Die gleiche Schriftart wird auf der gesamten Website verwendet, um ein einheitliches Design zu gewährleisten.

Die Fußzeile der Website dieses Online-Kunstladens verbindet einen modernen Look mit einer nostalgischen Schriftart, die an eine Schreibmaschine erinnert. In Kombination mit dem unkonventionellen Text, der Besucher dazu einlädt, „durch Blumen mit uns zu sprechen“, wird deutlich, dass Useless Treasures eine gut durchdachte und einzigartige Markenidentität hat. Das zeigt sich auch an dem Gif in der Fußzeile, das einen augenzwinkernden Charakter hat und dich dazu verleitet, einen zweiten Blick darauf zu werfen.

Als Unternehmen, das Kunst online verkauft, hat Useless Treasures darauf geachtet, die wichtigsten Details in die Fußzeile aufzunehmen: Versandinformationen, Rückgabebedingungen und Logos für die Zahlungsarten. Außerdem gibt es einen Link zu ihrem Designer-Instagram-Account und ihrer Website, die zu den besten Portfolio-Websites in diesem Bereich gehört.

Die am Bodensee ansässige Seesucht Manufaktur hat sich bewusst für einen dunklen Hintergrund im Footer entschieden, der sich somit deutlich vom Rest der Website abhebt. Kund:innen können sich so auf die regionalen, nachhaltigen und langlebigen Produkte aus Holz konzentrieren, aber wissen so auch genau, wo sie weitere Informationen finden.

Der Footer ist klar in drei Bereiche aufgeteilt. Unter dem Punkt Kontakt werden alle Möglichkeiten aufgelistet, die Öffnungszeiten angegeben und darauf hingewiesen, dass die Marke über kein Ladengeschäft verfügt. Der Bereich Informationen verfügt nicht nur über rechtliche Hinweise, sondern er enthält auch Tipps und Tricks zur Holzpflege und Infos über das verwendete Verpackungsmaterial.

Über den minimalistischen Button für Social Media erhalten Firmen und Großhändler weitere Informationen sowie ein B2B Log-in in den Händlershop, welcher an dieser Stelle besonders gut aufgehoben ist und im Header eher stören würde.

Das nachhaltige Unternehmen Charles Shirts aus Mainz produziert faire Shirts in einem minimalistischen Design, welches man direkt bei der Gestaltung des Footers wiedererkennt.

Der Footer hebt sich durch einen weichen Hintergrund gezielt vom Rest der Website ab und bietet übersichtlich nicht nur viele Informationen, die man als Kund:innen von einem Footer erwartet, sondern unterstützt aktiv bei einer Kaufentscheidung. Dazu zählen vor allem der Kaufratgeber und ein Größenguide, die einen tollen Mehrwert bieten.

Charles Shirts nutzt den Footer auch gezielt, um auf offene Stellen im Unternehmen hinzuweisen und unterstützt durch Verlinkungen zu Social Media, zum eigenen Shop sowie zur eigenen „Über uns”-Seite

Tiefenbacher Lehmann steht für ein klares Design, welches man ebenfalls bei der Gestaltung des minimalistischen Footers wiedererkennt. Der Footer nutzt bewusst nicht den gesamten verfügbaren Platz aus, sondern liefert auf kleinem Raum sehr übersichtlich Verlinkungen zu wichtigen Informationen und Seiten mit Mehrwert.

Die Wahl der Hintergrundfarbe lässt einen leicht auf die warm aufleuchtende Farben der Produkte schließen und vermittelt gleichzeitig eine besondere Atmosphäre. Unter dem auffälligen CTA zur Anmeldung für den Newsletter finden sich vier Bereiche, die neben den rechtlichen Informationen auch weiterführende Links für Unternehmen und Presse beinhalten.

Neben den klaren Symbolen für Social Media findet sich am rechten Rand ein „Nach oben”- Pfeil, der den Kund:innen die Nutzung der Website erleichtert.

Es gibt kein Regelwerk oder eine eindeutige Anleitung für die Gestaltung eines Website Footers. Daher bleibt es dir selbst überlassen, welche Elemente du mit aufnehmen willst und wie du dein Footer-Design gestalten möchtest.

Tatsache ist aber, dass ein übersichtlich und schön gestalteter Footer-Bereich für einen professionellen Online-Auftritt sorgt und das Nutzererlebnis auf deiner Website verbessert, indem er die Navigation erleichtert.

Alexandra Eger

Content-Managerin