Wie man eine Startseite gestaltet

Wie man Startseite einer Website richtig gestalltet

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

Lesen Sie, wie Sie eine wunderbare Startseite gestalten, die Ihre Besucher dazu bringt hineinzuschauen und nach mehr zu suchen.

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

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

Anstatt zu lesen, scannen sie. Wenn Sie ihnen also nicht schnell die Antworten geben, nach denen sie suchen, sind sie innerhalb weniger Sekunden wieder weg.

Das klingt vielleicht ein bisschen beängstigend, ist es aber nicht. Jetzt beginnt der Spaß! Sie und Ihre Besucher werden an Ihrer Website Freude haben, wenn Sie dessen Startseite durchdacht gestalten. Sehen wir uns an, wie es geht!

Die Vorteile einer gut gestalteten Startseite

1. Eine gut gestaltete Startseite zeigt Ihren Kunden, wer Sie sind und womit Sie ihnen helfen können.

Begrüßen Sie Ihre Besucher, indem Sie ihnen klar und deutlich sagen, wer Sie sind, was Sie für sie tun können und welche Superheldenkraft Sie haben.

Sicherlich haben Sie schon von einem Alleinstellungsmerkmal (unique selling proposition, USP) gehört. Mit anderen Worten ist das das, was Ihr Unternehmen besser macht als die Konkurrenz. Machen Sie auf Anhieb klar, was Ihre Stärken sind.

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

2. Mit einer gut gestalteten Startseite können Sie Ihre Marke aufbauen.

Die Frontseite hat einen wichtigen Einfluss auf Ihr Unternehmen. Deshalb sollten Sie sie professionell gestalten. Achten Sie auf eine starke Markenidentität, damit Ihre Besucher Sie sofort erkennen.

Wahrscheinlich haben Sie Ihr Logo, Ihren Slogan, Ihre Markenfarben und Ihr Bildmaterial bereits fertig. Falls nicht, ist dafür jetzt der richtige Zeitpunkt. Verwenden Sie sie kontinuierlich auf Ihrer Website. Somit bauen Ihre Besucher sofort eine Verbindung zwischen Ihrer 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, dass den Besucher zum neuen Kunden macht.

Behalten Sie die Reise Ihres Kunden im Auge

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

Wenn Sie diesen Weg kennen, können Sie Ihre Start- und folglich alle anderen Unterseiten optimieren.

Versuchen Sie, sich Ihre durchschnittlichen Kunden vorzustellen

  • Wer sind sie?
  • Was ist ihr Ziel?
  • Was brauchen diese, wenn sie Ihre Seite betreten?
  • Wie können Sie ihre 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 Sie eine bestimmte Persona im Kopf haben, sind Sie bereit für die Details.Geben Sie ihr einen Namen und einen Avatar, damit es sich noch persönlicher anfühlt.

Beispiel einer Zielgruppe oder Persona

Beispiel einer Zielgruppe oder Persona

Versuchen Sie nun, sich die Reise Ihrer Besucher so vorzustellen, als wäre Ihre Website ein echtes Geschäft.

Begleiten Sie sie vom Eingang bis zur Kasse.

Gehen Sie auf alle Fragen ein.

Machen Sie die Homepage groß genug, um alle ihre Fragen zu beantworten. (Aber übertreiben Sie es nicht. Sie können immer noch eine Schaltfläche “Mehr lesen” verwenden, um wissbegierige Besucher auf eine andere Seite schicken).

Kurz gesagt, machen Sie den Besuch zu einer angenehmen Erfahrung, damit sie wiederkommen.

Profi-Tipp: Verwenden Sie eine Chatbox, um einen echten Verkaufsprozess zu imitieren. Auf diese Weise kommunizieren mit Ihren Kunden in Echtzeit über einen Live-Chat.
Hier erfahren Sie, wie Sie ein Live-Chat-Fenster einrichten.

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

Das Fold-Schema

Elemente, die oberhalb der Faltung bleiben sollten

Einer der wichtigsten Teile Ihrer 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

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

Nehmen Sie nur die notwendigsten Seiten in die Hauptnavigation auf. Verlagern Sie den Rest, wie z. B. die Allgemeinen Geschäftsbedingungen oder die Datenschutzerklärung, in die Fußzeile.

Verstecken Sie nicht alle Ihre Dienstleistungen oder Produktkategorien unter einem faden Etikett – nennen Sie sie klar und direkt.

Überfordern Sie Ihre Besucher nicht mit zu vielen Optionen.

Betrachten Sie diese Beispiele: Stellen Sie sich vor, Sie sind auf der Suche nach Kakteen für Ihre Sammlung. Mit welcher Navigation finden Sie schneller und einfacher das Kakteenangebot, das Sie suchen?

Ein Beispiel für eine nicht ganz so klare Website-Navigation

Ein Beispiel für eine nicht ganz so klare Navigation

Ein Beispiel für eine übersichtlichere 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 sollten Sie Ihre Mission klar formulieren – wer Sie sind, was Sie tun, was Sie Ihren Besuchern geben und Ihnen helfen können.

Seien Sie so eindeutig wie möglich, niemals vage.

Fassen Sie sich kurz und prägnant.

Stellen Sie sich das vor wie eine Plakatwand auf der Autobahn. Sie müssen die Aufmerksamkeit der schnell fahrenden Autofahrer auf sich lenken und Ihre Botschaft innerhalb von Sekunden vermitteln.

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

Schrecken Sie sie nicht mit minderwertigen Bildern aus irgendeiner online Photo-Bank ab. Zeigen Sie sich von Ihrer besten Seite.

Ein überfülltes Heldenbild und Bereich des Headers

Ein überfülltes Heldenbild und Bereich des Headers

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

Engagierte Besucher reagieren auf den Aufruf zum Handeln, sobald sie ihn sehen, da sie bereits entschlossen sind das Produkt zu kaufen.

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

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

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

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.

Denken Sie auch hier an die Customer Journey – platzieren Sie den CTA an dem Punkt, an dem der Besucher bereits genug über Ihre 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

Sie haben also nach unten gescrollt und befinden sich nun below the fold. Das ist die Stelle, die wenig bis gar nicht gelesen wird.

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

Gestalten Sie den Rest der Seite als Launchpad

Machen Sie die Startseite zum Startpunkt, von dem Ihre Besucher leicht zu anderen Seiten gelangen, nach denen sie suchen. Verraten Sie nicht alles auf einmal.

Verwenden Sie hier nur Kostproben der auf den anderen Seiten veröffentlichten Inhalte. Fordern Sie die Besucher auf, auf eine bestimmte Schaltfläche oder einen Link zu klicken und mehr über Ihr Produkt, Ihre Dienstleistungen, Ihr Unternehmen usw. zu erfahren. Lassen Sie sie entdecken.

Ihre Startseite als Launchpad

Ihre Startseite als Launchpad

Mit Social Media und Kundenbewertungen glänzen

Sammeln Sie die Zeugnisse Ihrer zufriedenen Kunden. Präsentieren Sie auch das Firmenlogo Ihrer Kunden. Wurden Ihre Dienstleistungen zum Beispiel in renommierten Zeitschriften vorgestellt? Zeigen Sie dies mit Stolz!

Zeigen Sie die Referenzen Ihrer Kunden

Zeigen Sie die Referenzen Ihrer 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 Ihren Service und/oder Produkte nachdenken. Eine Win-Win-Situation.

Ein Beispiel für ein unkonventionelles Layout der Startseite

Ein Beispiel für ein unkonventionelles Layout der Startseite

Weniger ist mehr

Denken Sie an Coco Chanel: Ziehen Sie immer das letzte Accessoire aus, das Sie angezogen haben. Das Gleiche gilt für alle Schaltflächen, Textkopien, Videos, Gifs, Memes und Titel, die Sie gerade auf der Startseite hinzugefügt haben. Zeigen Sie nur relevantes. Lassen Sie Inhalte für Unterseiten übrig.

Ein Beispiel für ein unkonventionelles Layout der Startseite

Ein Beispiel für eine überfüllte Startseite

CTA attraktiv und klar gestalten

Wählen Sie für die Schaltfläche kontrastierende Farben zum Hintergrund, damit sie sich abhebt. Verwenden Sie kurze, aber selbsterklärende Texte. Lassen Sie keinen Raum für Rätselraten, was die Schaltfläche bewirkt, oder für die Frage des Besuchers: “Soll ich ihn überhaupt anklicken”.

Weniger ist mehr

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

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

Wählen Sie 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. Verwenden Sie daher immer die gleiche Art der Formatierung für gleich wichtige Inhalte. Verwirren Sie Ihre Besucher nicht.

Eine Startseite mit chaotischer Hierarchie

Eine Startseite mit chaotischer Hierarchie

Vermeiden Sie 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: Verwirren Sie Ihre Besucher nicht mit doppelten Unterteilungen.

Vorsicht vor falschen Fußzeilen - der schwarze Abschnitt in der Mitte

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

Die wichtigsten Erkenntnisse über die Gestaltung der Startseite einer Website

  • Der erste Eindruck zählt. Seien Sie professionell. Verwenden Sie hochwertige Bilder und angenehme Farben.

  • Besucher, die auf einer Mission sind, lesen nicht, sie scannen. Halten Sie die Texte so kurz und prägnant wie möglich.

  • Machen Sie CTAs attraktiv und unwiderstehlich, indem Sie die richtige Farbe und treffende Worte wählen.

  • Geben Sie klar an, wer Sie sind und was Sie tun. Verwenden Sie dafür das Heldenbild

  • Tradition funktioniert. Die meisten Websites verwenden dieselbe Struktur, einfach weil sie funktioniert und von den Besuchern erwartet wird. Profitieren Sie davon. Verwirren Sie Ihre Besucher nicht.

  • Übertreiben Sie es nicht. Zeigen Sie nur das Wichtigste.

Möchten Sie alle Ihre Seiten gestalten, nicht nur Ihre Startseite? Probieren Sie die Schritt-für-Schritt-Anleitung aus.