Wie man eine Startseite gestaltet

Die Startseite deiner Website ist wie ein Schaufenster. Sie ist perfekt, um die Aufmerksamkeit deiner potenziellen Kunden anzuziehen.

Lese wie du eine wunderbare Startseite gestaltest, die deine Besucher dazu bringt hineinzuschauen und nach mehr zu suchen.

Einige Besucher kennen dein Unternehmen bereits. Wenn sie deine Website betreten, wissen sie genau, wo sie klicken müssen, um deine Favoriten zu finden. Sie nehmen sich Zeit, um zu stöbern und nach Neuigkeiten zu suchen.

Andere gelangen durch Suchergebnisse auf deiner Startseite. Sie scannen deine Homepage schnell nach Überschriften und Schaltflächen, die sie anklicken können. Sie sind auf einer Mission. Sie haben keine Zeit herauszufinden, wie deine Website funktioniert, oder gar Texte und längere Überschriften zu lesen.

Anstatt zu lesen, scannen sie. Wenn du also nicht schnell das beantwortest nachdem sie fragen und suchen, sind sie innerhalb weniger Sekunden wieder weg.

Das klingt vielleicht ein bisschen beängstigend, ist es aber nicht. Jetzt beginnt der Spaß! Du und deine Besucher werden an deiner Website Freude haben, wenn du die Startseite durchdacht gestaltest. Sehen wir uns an, wie es geht!

Die Vorteile einer gut gestalteten Startseite

1. Eine gut gestaltete Startseite zeigt deinen Kunden, wer du bist und womit du ihnen helfen kannst.

Begrüße deine Besucher, indem du ihnen klar und deutlich sagst, wer du bist, was du für sie tun kannst und welche Superheldenkraft du hast.

Sicherlich hast du schon vom Alleinstellungsmerkmal (unique selling proposition, USP) gehört. Mit anderen Worten ist dass das, was dein Unternehmen besser macht als die Konkurrenz. Mache dir auf Anhieb klar, was deine Stärken sind.

Je klarer deine Frontseite ist, desto besser werden Besucher dich verstehen und desto höher sind deine Chancen, sie als Kunden oder Leser zu gewinnen.

2. Mit einer gut gestalteten Startseite kannst du deine Marke aufbauen.

Die Frontseite hat einen wichtigen Einfluss auf dein Unternehmen. Deshalb solltest du sie professionell gestalten. Achte auf eine starke Markenidentität, damit deine Besucher dich sofort erkennen.

Wahrscheinlich hast du dein Logo, deinen Slogan, deine Markenfarben und Bildmaterial bereits fertig. Falls nicht, ist dafür jetzt der richtige Zeitpunkt. Verwende diese kontinuierlich auf deiner Website. Somit bauen deine Besucher sofort eine Verbindung zwischen deiner Site und Offline-Präsenz auf.

3. Eine gut gestaltete Startseite bringt Conversions

Übersichtlich und erfolgreich mit den richtigen Informationen, strategisch platzierten CTAs (call-to-action) und anderen Navigationsoptionen gestaltet, fesselt diese Besucher.

Sie führt den Besucher tiefer in die Seiten hinein und bietet ein unvergessliches Erlebnis.

Behalte die Reise deiner Kunden im Auge

Die sogenannte Customer Journey beschreibt die Schritte, die dein Kunde von der Landung auf deiner Startseite bis zum Kauf deiner Produkte oder Dienste und darüber hinaus durchläuft.

Wenn du diesen Weg kennst, kannst du deine Start- und folglich alle anderen Unterseiten optimieren.

Versuche dir deine durchschnittlichen Kunden vorzustellen

• Wer sind sie?
• Was ist ihr Ziel?
• Was brauchen diese, wenn sie deine Seite öffnen?
• Wie kannst du deren Bedürfnisse erfüllen?

Insbesondere, Bedürfnisse sollen gestillt werden, ohne dass der Kunde dafür extra Schritte unternehmen und viel Zeit investieren muss.

Sobald du eine bestimmte Zielgruppe oder Persona im Kopf hast, können Details folgen. Gebe ihr einen Namen und einen Avatar, damit es sich noch persönlicher anfühlt.

Beispiel einer Zielgruppe oder Persona

Versuche nun dir die Reise deiner Besucher so vorzustellen, als wäre deine Website ein echtes Geschäft.

Begleite sie vom Eingang bis zur Kasse.

Gehe auf alle Fragen ein.

Mache die Homepage groß genug, um alle Fragen zu beantworten. (Aber übertreibe es nicht. Du kannst immer noch eine Schaltfläche “Mehr lesen” verwenden, um wissbegierige Besucher auf eine andere detailiertere Seite zu schicken).

Kurz gesagt, machst du den Besuch zu einer angenehmen Erfahrung, damit sie wiederkommen.

Profi-Tipp: Verwende eine Chatbox, um einen echten Verkaufsprozess zu imitieren. Auf diese Weise kommunizierst du mit deinen Kunden in Echtzeit über einen Live-Chat.
Hier erfährst du, wie du ein Live-Chat-Fenster einrichtest.

Was ist ein effektives Layout?

Die durchschnittliche Homepage mit allen Unterseiten ist in zwei Bereiche unterteilt – “above the fold“ und “below the fold“.

Diese Begriffe sind durch die Zeitungsbranche geprägt, wo die wichtigsten Geschichten in der oberen Hälfte der ersten Seite platziert werden. So erfährt jeder bereits im Vorbeigehen am Kiosk wichtigsten Neuigkeiten. Diese effiziente Praxis wird im Webdesign groß verwendet.

Das Fold-Schema

Elemente, die oberhalb der Faltung bleiben sollten

Einer der wichtigsten Teile deiner Homepage ist der Inhalt, der in der oberen Hälfte der Startseite erscheint – oder anders ausgedrückt: above the fold. Welche Elemente sollten hier platziert werden?

Übersichtliche Navigation

Gestalte die Navigation so praktisch wie möglich. Denke daran: Je mehr Klicks den Besucher vom Ziel trennen, desto mehr Zeit geht verloren, bis ein Formular ausgefüllt wird, der Besucher das Produkt findet und kauft oder einen Newsletter bestellt.

Nimm nur die notwendigsten Seiten in die Hauptnavigation auf. Verlagere den Rest, wie z. B. die Allgemeinen Geschäftsbedingungen oder zum Beispiel die Datenschutzerklärung, in die Fußzeile.

Verstecke nicht alle deine Dienstleistungen oder Produktkategorien unter einem faden Etikett – nenne diese klar und direkt.

Überfordere deine Besucher nicht mit zu vielen Optionen.

Betrachte folgende Beispiele: Stell dir vor, du bist auf der Suche nach Kakteen für deine Sammlung. Mit welcher Navigation findest du diese schneller und einfacher?

Ein Beispiel für eine nicht ganz so klare Navigation

Ein Beispiel für eine übersichtlichere Navigation

Starke Heldenbilder

Ein weiteres bewährtes Merkmal ist das sogenannte Heldenbild (hero image). In der Regel handelt es sich dabei um ein übergroßes Bannerbild am oberen Rand einer Website.

Hier solltest du deine Mission klar formulieren – wer du bist, was du tust, was du deinen Besuchern geben und wie ihnen helfen kannst.

Seie so eindeutig wie möglich, niemals vage.

Fasse dich kurz. Sei prägnant.

Stelle dir das vor wie eine Plakatwand auf der Autobahn. Du musst die Aufmerksamkeit der schnell fahrenden Autofahrer auf sich lenken und die Botschaft innerhalb von Sekunden vermitteln.

Verwende außerdem die bestmöglichen Bilder, um dich zu zeigen. Menschen reagieren viel eher auf ansprechende Bilder als auf Text.

Schrecke nicht mit minderwertigen Bildern aus irgendeiner online Photo-Bank ab. Zeige dich von deiner echten Seite.

Ein überfülltes Heldenbild und der Bereich des Headers

Klare Call-to-Action-Schaltfläche (CTA)

Engagierte Besucher reagieren auf den Aufruf zum Handeln (call to action), sobald sie diesen sehen, da sie bereits entschlossen sind das Produkt zu kaufen.

Ein Beispiel für einen unklaren Call-to-Action

Ein Beispiel für eine klare Call-to-Action-Schaltfläche

Schüchterne Besucher hingegen benötigen auf der Seite einen weiteren CTA, der mit der richtigen Menge an Text platziert wird.

Denke auch hier an die Customer Journey – platziere den CTA an dem Punkt, an dem der Besucher bereits genug über deine Produkte oder Dienstleistungen weiß und durch den begleitenden Inhalt nur noch auf den nächsten Schritt wartet den Button zu klicken.

Elemente, die unterhalb der Faltung bleiben sollten

Du hast also nach unten gescrollt und befindest dich nun below the fold. Das ist die Stelle, die wenig bis gar nicht gelesen wird.

Denke daran: Menschen lesen nicht, sie scannen. Wie geht man am besten mit dieser Tatsache um?

Gestalte den Rest der Seite als Launchpad

Mache die Startseite zum Startpunkt, von dem deine Besucher leicht zu anderen Seiten gelangen, nach denen sie suchen. Verrate nicht alles auf einmal.

Verwende hier nur Kostproben der auf den anderen Seiten veröffentlichten Inhalte. Fordere die Besucher auf, auf eine bestimmte Schaltfläche oder einen Link zu klicken und mehr über dein Produkt, deine Dienstleistungen, dein Unternehmen usw. zu erfahren. Lasse sie dich entdecken.

Deine Startseite als Launchpad

Mit Social Media und Kundenbewertungen glänzen

Sammele die Kommentare zufriedener Kunden. Präsentiere auch das Firmenlogo deiner Kunden. Wurden deine Dienstleistungen zum Beispiel in renommierten Zeitschriften vorgestellt? Zeige diese mit Stolz!

Zeige Referenzen deiner Kunden

Bewährte Praktiken zur Startseitengestaltung

Altbewährt ist gut.

Menschen suchen nach gewohnten Mustern und Tradition. Deshalb ähneln sich viele Websites. Dies ist nicht unbedingt etwas Schlechtes.

Es wird zum Beispiel erwartet, dass das Logo oben links zur Homepage zurückführt. Oder dass sich die Kontaktinformationen oben rechts befinden.

Auf diese Weise wissen alle sofort, wie sie die Website bedienen, ohne sich allzu viele Gedanken über dessen Funktionalität zu machen. Besucher können somit mehr über deinen Service und/oder Produkte nachdenken. Eine Win-Win-Situation.

Ein Beispiel für ein unkonventionelles Layout der Startseite

Weniger ist mehr

Denke an Coco Chanel: Ziehe immer das letzte Accessoire aus, das du angezogen hast. Das Gleiche gilt für alle Schaltflächen, Textkopien, Videos, Gifs, Memes und Titel, die du gerade auf deiner Startseite hinzugefügt hast. Zeige nur relevantes. Lasse detailierte Inhalte für Unterseiten übrig.

Ein Beispiel für eine überfüllte Startseite

CTA attraktiv und klar gestalten

Wähle für die Schaltfläche kontrastierende Farben zum Hintergrund, damit sie sich abhebt. Verwende kurze, aber selbsterklärende Texte. Lass keinen Raum für Rätselraten, was die Schaltfläche bewirkt, und den Besucher fragen lässt: “Soll ich das überhaupt anklicken?”.

Weniger ist mehr

Um es noch einmal in Erinnerung zu rufen: Menschen lesen nicht. Sie scannen. Übermittele ihnen wichtige Botschaften in möglichst wenigen Worten.

Ja, sie interessieren sich für deine Geschichte, aber nur, wenn diese höchstens zwei Sätze lang ist.

Wähle gute Bilder und Videos

Qualität ist wichtig, um sich von der Masse abzuheben. Was die Bildgröße betrifft, so sollten vorzugsweise das Heldenbild weniger als 600 kB alle anderen Abbildungen weniger als 250 kB einnehmen.

Die visuelle Hierarchie richtig nutzen

Es gibt Überschriften, Untertitel, Absätze und Schaltflächen. Verwende daher immer die gleiche Art der Formatierung für gleich wichtige Inhalte. Verwirre deine Besucher nicht.

Eine Startseite mit chaotischer Hierarchie

Vermeiden falsche Fußzeilen

Die Menschen neigen dazu, auf einen dunkleren Abschnitt der Website zu reagieren, als ob dieser die Fußzeile und somit das untere Ende wäre. Sie werden nicht weiter nach unten scrollen. ­Auch hier gilt: Verwirre deine Besucher nicht mit doppelten Unterteilungen.

Vorsicht vor falschen Fußzeilen – der schwarze Abschnitt in der Mitte als Beispiel

Die wichtigsten Erkenntnisse über die Gestaltung der Startseite einer Website

• Der erste Eindruck zählt. Sei professionell. Verwende hochwertige Bilder und angenehme Farben.
  
  
• Besucher, die auf einer Mission sind, lesen nicht, sie scannen. Halte Texte so kurz und prägnant wie möglich.
  
  
• Machen Sie CTAs attraktiv und unwiderstehlich, indem du die richtige Farbe und treffende Worte wählst.
  
  
• Geben klar an, wer du bist und was du tust. Verwende dafür das Heldenbild
  
  
• Tradition funktioniert. Die meisten Websites verwenden dieselbe Struktur, einfach weil sie funktioniert und von den Besuchern erwartet wird. Profitiere davon. Verwirre deine Besucher nicht.
  
  
• Übertreibe es nicht. Zeige nur das Wichtigste.

Möchtest du alle deine Seiten gestalten, nicht nur die Startseite? Probiere die Schritt-für-Schritt-Anleitung aus.