Skip to main content

Eine übersichtliche Startseite, die deine Kunden gerne lesen – 7 Grafik-Tipps wie du ihnen die Orientierung leicht machst

von Nicole van Meegen, 18.07.2019
von Nicole van Meegen, 

Der Grund dafür, dass Kunden deine Startseite zu schnell verlassen ist dieser: Sie finden nicht sofort, was sie suchen.

Hier gebe ich dir Tipps, mit welchen grafischen Hilfsmitteln du es schaffst, dass deine Besucher bleiben. Ich zeige dir, wie deine Startseite einfacher zu lesen ist.

Deine Leser werden wissen, wo sie als nächstes klicken können und wo sie die Information finden, die sie suchen.

Wie ist deine Startseite im oberen Bereich aufgebaut?

Der allererste Eindruck ist das wichtigste für deine Kunden.

Auf den ersten Blick machst du klar,

  • um was es auf dieser Webseite geht
  • was du anbietest
  • und was der Nutzen ist.

Der Inhalt spielt hierbei eine große Rolle. Doch der beste Inhalt nutzt nicht viel, wenn er optisch nicht strukturiert ist.

Darum liefere ich dir hier Tipps, wie du deine Überschrift, dein Logo und deine Seiten Navigation lesefreundlich gestaltest.

Die Tipps kannst du für deine übersichtliche Startseite und auf anderen Seiten deiner Webseite anwenden.

TIPP 1: Die Überschriften

Dein Leser beginnt nicht unbedingt oben zu lesen. Er beginnt an der Stelle, die am meisten ins Auge fällt.

In der Regel schaut er zuerst auf die große Hauptüberschrift (H1 genannt). Achte darauf, dass du sie in einer gut lesbaren Schrift schreibst. Es ist wichtig, dass sich ihre Größe klar von allen anderen Texten abhebt.

Ein guter Farbkontrast zum Hintergrund erleichtert ebenfalls das Lesen.

Wäge bewusst ab, ob du Groß- und Kleinbuchstaben oder nur GROSSBUCHSTABEN verwendest. Bei langen Wörtern ist normale Groß- und Kleinschreibung besser zu lesen.

Achte darauf, dass die Überschrift eine angenehme Länge hat.

  • Eine kurze Überschrift mit kurzen Wörtern funktioniert perfekt als Einzeiler.
  • Eine kurze Überschrift mit langen Wörtern stellst du besser in zwei bis maximal drei Zeilen dar.
  • Eine lange Überschrift mit kurzen Wörtern gliederst du ebenfalls in zwei bis drei Zeilen. Vermeide mehr als drei Zeilen.
  • Auf eine lange Überschrift mit langen Wörtern verzichtest du lieber. Sie erschwert es deinem Leser, die wichtigen Informationen zu erfassen. 

TIPP 2: Dein Logo und die Webseiten Navigation

Am Kopf deiner Webseite zeigt dein Logo dem Besucher, mit wem er es hier zu tun hat.

Nutze am besten das Dateiformat SVG, um dein Logo bei jeder Bildschirmgröße scharf darzustellen. SVG ist ein Format für Vektorgrafiken. Das bedeutet, du kannst es ohne Qualitätsverlust vergrößern und verkleinern.

Das ist wichtig, weil auf verschieden großen (mobilen) Geräten wie Smartphone oder Tablet die Darstellungsgröße ständig wechselt.

Das SVG behält glatte und scharfe Konturen. 

Gängig sind auch die Formate JPG oder PNG. Doch beide haben den Nachteil, dass sie das Logo als Pixelgrafik darstellen. Wenn du sie vergrößerst oder verkleinerst werden sie schnell unscharf.

Noch ein wichtiger Tipp: Verlinke dein Logo mit deiner Startseite. Deine Leser können darüber zur Startseite zurückgelangen – von jeder Unterseite deiner Webseite.

TIPP 3: Mit diesen Tipps wird deine Webseiten Navigation leserfreundlich und gut bedienbar:

  • Wähle eine angenehm lesbare Schriftgröße und Schriftart.
  • Achte auf ausreichend Kontrast zum Hintergrund.
  • Eine geringe Anzahl von Menüpunkten bietet eine gute Übersicht (maximal fünf bis sechs Punkte).
  • Kurze aussagekräftige Namen für deine Menüpunkte, sagen deinem Kunden, welche Unterseiten sich dahinter verbergen.

Wie bekommst du Struktur in den Textinhalt deiner Startseite?

Der wichtigste Tipp für dich ist:

Teile deinen Inhalt in kleine Häppchen zum Lesen auf.

Fällt dir manchmal auf, dass du auf anderen Internetseiten nicht jedes Wort liest? Du springst von Absatz zu Absatz und liest zuerst Überschriften und hervorgehobene Texte.

Genauso macht es dein Leser. Er »scannt« den Text und entscheidet dann, in welche Textabschnitte er tiefer eintaucht.

Darum liest er zu lange Textabschnitte nicht. Dein Leser scrollt weiter und sucht den nächsten »Anker« für seine Augen.

TIPP 4:  Wie erreichst du eine gute optische Hierarchie für deinen Text?

Wichtig ist vor allem, dass es zwischen Überschriften und dem normalen Text klare Unterschiede für das Auge gibt.

Sorge für einen klaren Kontrast zwischen den einzelnen Überschriften und zwischen Überschriften und Lesetext. Das erreichst du vor allem durch verschiedene Größen.

Mit unterschiedlichen Farben passend zu deinem Firmen Design hebst du Überschriften und Links hervor.

Die Abstände in deinen Texten lässt du von Ebene zu Ebene kleiner werden.

Das heißt:

  • Die Hauptüberschrift hat nach unten viel Abstand zum nächsten Textelement.
  • Die Unterüberschrift hat weniger Abstand nach unten.
  • Die Abstände in normalen Textabsätzen oder in Aufzählungen sind noch etwas kleiner.

Das hilft deinem Leser, sich zu orientieren.

Wenn du Tipps brauchst, wie du die Texte für deine Startseite zielgerichtet aufbaust, schau dir diesen Artikel von Marketing Texterin Maria Horschig an.

Und so vermeidest du typische Fehler in deinen Texten: Sechs typische Fehler auf einer Startseite.

Wie kannst du deinem Leser zeigen, wann ein neuer Abschnitt im Inhalt beginnt?

Gerade die Startseite lebt davon, dass die Inhalte deiner Webseite »angeteasert« werden. Du lieferst deinem Leser erste kleine Häppchen (sogenannte Teaser), die ihn gespannt machen und die ihn in die Seite ziehen.

Es ist wichtig, das optisch klar wird, wann ein neuer Abschnitt beginnt. Achte darauf, dass jeder Abschnitt sich vom nächsten abhebt.

TIPP 5: So grenzt du die Abschnitte deiner übersichtlichen Startseite voneinander ab:

  • Hinterlege deine Inhalte mit unterschiedlichen Farbflächen. Nutze maximal drei bis vier verschiedene Farben, die zu deinem Firmen Design (Corporate Design) passen. Zwei Farben die sich abwechseln reichen aus (wie weiß und eine weitere Farbe).
  • Trenne sie durch Linien oder kleine Grafiken.
  • Beginne jeden neuen Abschnitt mit einer Überschrift. Dein Leser merkt schnell: Jede Überschrift leitet einen neuen Gedanken ein.
  • Nutze hier Überschriften der Ebene zwei oder drei. Sorge dafür, dass sie sich optisch gut vom Lesetext abheben.
  • Verwende am oberen und unteren Rand größere Abstände als innerhalb der Abschnitte.

Unterscheide zwischen Inhalten, die dein Leser lesen soll und Inhalten die ihn auffordern aktiv zu werden.

TIPP 6: Es gibt Abschnitte auf deiner Startseite, die „nur“ gelesen oder angeschaut werden.

Wie Texte, Aufzählungen, Bilder, Bildunterschriften und Videos.

Verzichte an diesen Stellen auf alles, was deinen Leser ablenkt.

Verwende hier neutrale Hintergründe und lass deine Inhalte fließen, ohne sie optisch zu unterbrechen. (Strukturiere sie mit Überschriften und Aufzählungen.)

TIPP 7: Und es gibt die Bereiche, die gezielt auffordern und aktivieren.

Hier setzt du bewusst Störer Grafiken und Link Buttons (Schaltflächen die zum Klicken auffordern) ein. Du unterbrichst absichtlich den Lesefluss.

Dein Leser weiß, »hier soll ich aktiv werden«, »hier soll ich auf xy klicken um mehr Informationen zu bekommen«.

Diese Störer und Link Buttons kannst du dezent animieren oder grafisch betonen, um sie auffordernder zu gestalten.

Innerhalb von Texten kannst du punktuell Textlinks zu anderen Seiten deiner Webseite setzen.

Fazit: Liefere klare optische Impulse, die deinem Leser auf deiner Startseite den Weg weisen.

Nutze den ersten Eindruck und betone die Hauptaussage mit einer Überschrift, die ins Auge fällt. Achte darauf, dass sie gut lesbar sind.

Mit klaren Abschnitten zeigst du, wo neue Inhalte und Gedanken beginnen.

Der Leser kann jeden Abschnitt separat erfassen und verstehen. Er sieht genau, wo er klicken muss, um tiefer in dein Thema einzusteigen.

Möchtest du mit deiner Webseite starten und hast das Gefühl, dass du mit der optischen Struktur nicht weiterkommst?

Oder hast du keine Zeit, deine Webseite selbst (neu) zu gestalten?

Dann vereinbare gerne ein kostenfreies Erstgespräch mit mir. Ich unterstütze dich bei der Gestaltung deiner übersichtlichen Webseite.

« zurück zur Übersicht
Eine übersichtliche Startseite, die deine Kunden gerne lesen – 7 Grafik-Tipps

Hallo, ich bin Nicole van Meegen

Als Corporate- und Webdesignerin unterstütze ich Selbstständige und KMU. 

Mit einem einheitlichen Erscheinungsbild zeigst du auf den ersten Blick die Professionalität deines Unternehmens. Das weckt Vertrauen. Interessenten werden leichter zu Kunden.

Kommentare (0)

Keine Kommentare gefunden!

Neuen Kommentar schreiben