Eine gute Website erkennt man nicht daran, dass sie schön ist.

Man erkennt sie daran, dass der Besucher in wenigen Sekunden versteht, worum es geht, und dass er am Ende tut, wozu die Seite gebaut wurde.

Dieser Beitrag geht die Bestandteile durch, die dafür zusammenkommen müssen: die fünf Grundmerkmale, das Layout, Gestaltung, Typografie, Farben, kleine Interaktionen und die Frage, welche dieser Mittel sich für einen kleinen Betrieb überhaupt lohnen.

Inhalt

Die fünf Merkmale einer guten Website

1. Bedienbarkeit

Der Besucher muss ohne Nachdenken finden, was er sucht.

Dazu gehören ein aufgeräumtes Layout, verständlich benannte Menüpunkte, eine Darstellung, die auf dem Handy funktioniert, und kurze Ladezeiten.

Die Ladezeit prüfen Sie mit „PageSpeed Insights“, und zwar getrennt für Handy und Rechner.

2. Inhalt, der etwas beantwortet

Der Text muss die Fragen Ihrer Kunden beantworten, nicht Ihre Firma beschreiben.

Ein Hinweis dazu, weil in Ratgebern oft das Gegenteil steht: es geht nicht darum, regelmäßig neue Inhalte zu veröffentlichen.

Fünf Seiten, die eine Frage vollständig beantworten, wirken jahrelang.

Zwanzig dünne Beiträge ziehen den Gesamteindruck Ihrer Website nach unten.

3. Auffindbarkeit

Je Seite ein eigener Titel, eine eigene Beschreibung und ein Zielbegriff.

Dazu eine saubere Überschriftenstruktur und interne Verweise, die sagen, wohin sie führen.

4. Gestaltung

Das Aussehen entscheidet über den ersten Eindruck und damit darüber, ob überhaupt jemand liest.

Für Grafiken und Bilder genügen Werkzeuge wie „Canva“ oder „Adobe Express“, Sie brauchen kein Profiprogramm.

5. Der nächste Schritt

Eine Website, die Besucher anzieht und keine Anfragen erzeugt, hat ihre Aufgabe nicht erfüllt.

Auf jeder Seite gehört genau eine klare Aufforderung, was als Nächstes zu tun ist, und auf dem Handy eine antippbare Telefonnummer.

Das Layout

Das Layout ist die Anordnung der Elemente auf einer Seite: wo das Logo sitzt, wo die Navigation, wie Text und Bilder verteilt sind.

Fertige Layouts finden Sie auf Marktplätzen wie „Themeforest“ oder als Vorlagen in Ihrem System.

In WordPress installieren Sie ein Layout als Theme und passen es über die Einstellungen oder einen Seitenbaukasten an.

Zum Zusammenhang mit der Auffindbarkeit eine Richtigstellung, weil dieser Punkt gern überhöht wird.

Ein schönes Layout bringt Ihnen keine bessere Platzierung.

Was tatsächlich wirkt, sind zwei Dinge, die vom Layout abhängen: eine saubere Überschriftenstruktur, an der Google den Aufbau Ihrer Seite erkennt, und die Ladezeit, denn ein überladenes Layout ist langsam.

Alles andere entscheidet der Inhalt.

Minimalistisches Design

Minimalistisch heißt: alles weglassen, was keine Aufgabe hat.

Der Nutzen ist nicht ästhetisch, sondern praktisch.

Weniger Elemente heißt weniger Ablenkung, und weniger Ablenkung heißt, dass der Besucher das findet, worauf es Ihnen ankommt.

Als Vorbilder werden meist dieselben Unternehmen genannt: Apple mit einem einzigen großen Produktbild, Google mit einem Suchfeld und sonst fast nichts, Tesla mit einem aufgeräumten Aufbau.

Eine Einordnung dazu: diese Firmen können sich das leisten, weil jeder weiß, was sie verkaufen.

Ihr Betrieb muss das erst erklären.

Kopieren Sie also das Prinzip und nicht die Leere.

Die fünf Bausteine

  1. Weißraum. Der leere Platz zwischen den Elementen. Er ist kein verschenkter Raum, sondern das Mittel, mit dem Sie Wichtiges hervorheben.
  2. Wenige Farben. Zwei bis drei, dazu neutrale Töne. Eine begrenzte Palette wirkt ruhiger und ist leichter durchzuhalten.
  3. Klare Schriften. Gut lesbar, ohne Schnörkel, höchstens zwei verschiedene.
  4. Eine erkennbare Rangfolge. Wichtiges groß und oben, Nebensächliches kleiner. Über Größen, Abstände und Kontrast steuern Sie den Blick.
  5. Wenige Menüpunkte. Vier bis sechs reichen für die meisten Betriebe.

Und hier ein Punkt, bei dem viele Anleitungen danebenliegen.

Es wird oft empfohlen, die Navigation auch auf großen Bildschirmen hinter einem Symbol mit drei Strichen zu verstecken, weil das minimalistisch aussieht.

Das ist gestalterisch reizvoll und kostet Sie Besucher.

Was nicht zu sehen ist, wird seltener angeklickt.

Auf dem Handy ist das versteckte Menü sinnvoll, weil dort kein Platz ist.

Auf dem Rechner lassen Sie Ihre Menüpunkte sichtbar.

Typografie

Typografie entscheidet darüber, ob Ihr Text gelesen wird, und das noch vor dem Inhalt.

Die Schriftart

Serifenschriften, also die mit den kleinen Füßchen, wirken klassisch und seriös.

Serifenlose Schriften wirken modern und sachlich.

Höchstens zwei verschiedene, sonst zerfällt das Bild.

Bei Google Fonts finden Sie eine große kostenlose Auswahl.

Eine Warnung dazu, die genau an diese Stelle gehört: binden Sie diese Schriften lokal ein, also von Ihrem eigenen Server.

Werden sie direkt von Google geladen, geht die IP-Adresse jedes Besuchers mit, und das ist einer der häufigsten Abmahngründe überhaupt.

Größe und Abstände

Mindestens 16 Pixel für den Fließtext, eher mehr.

Der Zeilenabstand darf großzügig sein, denn er entscheidet stärker über die Lesbarkeit als die Schriftgröße.

Wer sich in die Feinheiten der Buchstabenabstände einarbeiten will, findet mit „Kern Type“ eine Übung dafür.

Für eine Firmenwebsite ist das allerdings nicht nötig, dort entscheiden Größe und Zeilenabstand.

Kontrast

Die Schrift muss sich deutlich vom Hintergrund abheben.

Hellgrau auf Weiß sieht auf dem Entwurf elegant aus und ist auf einem Handy in der Sonne unlesbar.

Mit dem „Contrast Checker“ von WebAIM prüfen Sie, ob Ihre Kombination den Anforderungen der Barrierefreiheitsrichtlinien entspricht.

Darstellung auf kleinen Bildschirmen

Eine Schrift, die am Rechner passt, kann auf dem Handy zu klein sein.

Sie prüfen das über die Entwicklerwerkzeuge Ihres Browsers, erreichbar per Rechtsklick auf eine freie Stelle und dann Untersuchen.

Dort lassen sich verschiedene Gerätegrößen simulieren.

Die Simulation ersetzt aber nicht den Blick auf ein echtes Gerät, weil Schriftgrößen und Berührungsflächen dort anders wirken.

Mikro- und Makrotypografie

Zwei Fachbegriffe, kurz erklärt.

Mikrotypografie meint die Feinheiten im Satz: Abstände zwischen Buchstaben, Wörtern und Zeilen.

Makrotypografie meint das Gesamtbild: Format, Satzspiegel, Gliederung und das Verhältnis von Schrift zu Bild.

Für Ihre Website ist die zweite die wichtigere, weil sie darüber entscheidet, ob eine Seite ruhig oder unruhig wirkt.

Farben

Farben lösen Assoziationen aus, und diese werden in der Farbpsychologie beschrieben.

  • Rot steht für Energie und Dringlichkeit.
  • Blau für Vertrauen und Sachlichkeit, deshalb die häufigste Farbe bei Banken und Versicherungen.
  • Grün für Natur, Gesundheit und Wachstum.
  • Gelb für Freude und Aufmerksamkeit.
  • Orange für Freundlichkeit und Zugänglichkeit.
  • Lila für Kreativität und Hochwertigkeit.
  • Schwarz für Eleganz und Stärke.

Und jetzt die Einordnung, die zu solchen Listen gehört.

Diese Zuordnungen sind Konventionen, keine Naturgesetze.

Sie unterscheiden sich zwischen Kulturen, und die Forschung dazu ist deutlich dünner, als die Sicherheit solcher Aufzählungen vermuten lässt.

Nehmen Sie sie als Ausgangspunkt und nicht als Begründung.

Wichtiger als die Bedeutung einer Farbe ist, dass Sie bei zwei oder drei bleiben und diese überall gleich verwenden.

Farben kombinieren

Komplementärfarben liegen sich im Farbkreis gegenüber, etwa Blau und Orange, und erzeugen starken Kontrast.

Analoge Farben liegen nebeneinander, etwa Blau und Grün, und wirken ruhig.

Monochrome Paletten nutzen verschiedene Abstufungen einer Farbe und wirken einheitlich.

Beim Zusammenstellen helfen „Adobe Color“ und „Color Hunt“ mit fertigen Paletten.

Und eine Regel, die wichtiger ist als jede Palette: Farbe darf nie die einzige Information sein.

Ein Formularfeld, dessen Fehler nur durch einen roten Rahmen angezeigt wird, ist für farbfehlsichtige Besucher unbrauchbar.

Schreiben Sie zusätzlich hin, was fehlt.

Mikrointeraktionen

Mikrointeraktionen sind kleine Rückmeldungen der Website auf eine Handlung des Besuchers.

Der Zweck ist nicht Verzierung, sondern Bestätigung: der Nutzer soll sehen, dass etwas passiert ist.

  • Reaktion beim Überfahren. Eine Schaltfläche ändert die Farbe, sobald der Mauszeiger darüber liegt, und zeigt damit, dass sie anklickbar ist.
  • Rückmeldung nach dem Klick. Ein kurzer Effekt bestätigt, dass die Aktion angekommen ist. Fehlt er, klicken Nutzer ein zweites Mal.
  • Ladeanzeige. Sie zeigt, dass die Seite arbeitet, statt eingefroren zu wirken.
  • Formularprüfung. Der nützlichste Fall von allen: direkt am Feld anzeigen, was fehlt, statt erst nach dem Absenden eine Fehlermeldung zu zeigen.

Umgesetzt wird das mit CSS oder mit Bibliotheken wie „GSAP“ für aufwendigere Animationen, „Hover.css“ und „Animate.css“ für fertige Effekte und „Lottie“ für animierte Vektorgrafiken.

Zwei Einschränkungen, die in Werbetexten fehlen.

Jede Animation kostet Ladezeit, und eine schnelle Seite ohne Effekte schlägt eine langsame mit Effekten.

Und ein Teil Ihrer Besucher hat im Betriebssystem eingestellt, dass Bewegungen reduziert werden sollen, etwa weil ihnen davon schlecht wird.

Diese Einstellung lässt sich technisch auslesen, und eine gut gemachte Website hält sich daran.

Emotionen und Vertrauen

Entscheidungen fallen nicht rein sachlich, auch nicht bei einem Handwerksauftrag.

Wer sich auf einer Website gut aufgehoben fühlt, bleibt länger und fragt eher an.

Vier Stellschrauben.

Bilder. Echte Fotos von Ihnen, Ihrem Team und Ihrer Arbeit wirken um ein Vielfaches stärker als gekaufte Stockbilder.

Bei Handwerk und Gastronomie sind Vorher-Nachher-Bilder das Wirksamste, was Sie zeigen können.

Sprache. Schreiben Sie, wie Sie mit einem Kunden reden würden.

Fachbegriffe, die der Leser nachschlagen müsste, kosten Vertrauen statt es aufzubauen.

Ihre Geschichte. Wie Sie angefangen haben, warum Sie das machen, ein konkretes Projekt mit Ausgangslage und Ergebnis.

Die Über-uns-Seite ist dafür der richtige Ort, und sie wird häufiger gelesen, als die meisten Betriebe glauben.

Belege von anderen. Bewertungen, Referenzen mit Namen und Ort, Auszeichnungen.

Menschen orientieren sich daran, was andere entschieden haben, besonders wenn sie das Fachliche selbst nicht beurteilen können.

Und der Punkt, der über allem steht: eine Seite, die schnell lädt, verständlich aufgebaut ist und auf dem Handy funktioniert, erzeugt mehr Vertrauen als jede Gestaltung.

Ärger ist auch eine Emotion.

Scrollytelling

Der Begriff setzt sich aus Scrollen und Geschichtenerzählen zusammen.

Gemeint ist eine Seite, auf der sich Inhalte verändern, während der Besucher nach unten scrollt: Bilder wechseln, Grafiken bauen sich auf, Text erscheint zum passenden Moment.

Es funktioniert gut, wenn eine Entwicklung erzählt oder eine komplexe Zahlenlage erklärt werden soll, weil der Leser das Tempo selbst bestimmt.

Und jetzt die ehrliche Einordnung, die in Begeisterungsartikeln fehlt.

Scrollytelling ist aufwendig in der Umsetzung, schwer zu ändern, wenn der Inhalt sich ändert, und es bricht auf kleinen Bildschirmen schneller als jede andere Technik in diesem Beitrag.

Für Redaktionen, Berichte und Datengeschichten lohnt es sich.

Für eine Firmenwebsite, die Anfragen erzeugen soll, ist das Geld an anderer Stelle besser angelegt.

Lottie-Animationen einbauen

Lottie-Animationen sind animierte Vektorgrafiken, die als JSON-Datei vorliegen.

Der Vorteil gegenüber einem Video: sie sind klein, bleiben in jeder Größe scharf und lassen sich steuern.

  1. Animation aussuchen. Auf „LottieFiles“ finden Sie tausende kostenlose Animationen. Laden Sie die gewünschte als JSON-Datei herunter und prüfen Sie dabei die Lizenz, denn eine Firmenwebsite ist gewerbliche Nutzung.
  2. Plugin installieren. In WordPress unter Plugins und Neu hinzufügen nach einem Lottie-Plugin suchen, installieren, aktivieren.
  3. Animation einfügen. Auf der gewünschten Seite einen neuen Block hinzufügen, den Lottie-Block wählen und die JSON-Datei hochladen.
  4. Verhalten einstellen. Größe, automatischer Start, Endlosschleife, Geschwindigkeit und Reaktion auf den Mauszeiger.

Vier Dinge, die Sie dabei beachten sollten.

Sparsam einsetzen, denn auch kleine Dateien summieren sich, und ein zusätzliches Plugin lädt eigenen Programmcode nach.

Die Animation muss zu Ihrem Betrieb passen, eine verspielte Figur auf der Seite eines Steuerberaters wirkt nicht modern, sondern unpassend.

Auf dem Handy prüfen, ob sie überhaupt sinnvoll dargestellt wird.

Und der Inhalt muss auch ohne die Animation verständlich sein, denn nicht jeder Besucher sieht sie.

Anker-Links

Ein Anker-Link führt nicht auf eine andere Seite, sondern an eine bestimmte Stelle derselben Seite.

Das Inhaltsverzeichnis oben in diesem Beitrag besteht aus solchen Links, und der bekannteste Fall ist der Verweis „Zum Seitenanfang“.

Er besteht aus zwei Teilen.

Der Anker ist die Zielstelle und bekommt eine Kennung über das Attribut id.

<h2 id="anker">Dies ist ein Anker</h2>

Der Link verweist mit einem Rautezeichen auf diese Kennung.

<a href="#anker">Gehe zu Anker</a>

In WordPress brauchen Sie dafür kein HTML: jeder Überschriften-Block hat in den Einstellungen ein Feld für ein HTML-Anker.

Wo sich das lohnt: bei langen Beiträgen, bei Seiten mit vielen Fragen und Antworten und bei Ein-Seiten-Websites.

Zum Zusammenhang mit der Auffindbarkeit noch eine Richtigstellung, weil hier häufig zu viel versprochen wird.

Anker-Links verbessern Ihre Platzierung nicht.

Auch die Verweildauer ist kein bestätigter Bewertungsfaktor, entgegen dem, was man oft liest.

Was tatsächlich passiert, ist etwas anderes und durchaus nützlich: Google zeigt bei langen Seiten manchmal Sprungmarken direkt im Suchergebnis an, sodass der Nutzer gleich im richtigen Abschnitt landet.

Dafür brauchen Sie aussagekräftige Zwischenüberschriften, und genau die nützen Ihrem Leser ohnehin.

Fazit

Eine gute Website ist schnell, verständlich, auf dem Handy lesbar und hat auf jeder Seite einen klaren nächsten Schritt.

Alles Weitere in diesem Beitrag, Minimalismus, Typografie, Farben, kleine Animationen, wirkt erst, wenn diese vier Punkte sitzen.

Von den gestalterischen Mitteln haben zwei den größten Ertrag für den geringsten Aufwand: ausreichender Kontrast und genügend Weißraum.

Beides kostet nichts und verbessert jede Seite sofort.

Sollten Sie nicht wissen, ob Ihre Website gut ist, machen Sie einen einfachen Test.

Geben Sie Ihr Handy jemandem, der Ihren Betrieb nicht kennt, und bitten Sie ihn, in fünf Sekunden zu sagen, was Sie anbieten und wie man Sie erreicht.

Schafft er das nicht, wissen Sie, woran Sie arbeiten müssen, und zwar bevor Sie über Farben nachdenken!