◐Gestaltung in der Praxis

Drei — alles andere ist Feinschliff:

1. Lesbarkeit. Ausreichender Kontrast, genug Schriftgröße, genug Abstand. Das entscheidet, ob jemand liest.
2. Bilder. Sie prägen den Eindruck stärker als jede Farbe.
3. Struktur. Ob man auf den ersten Blick erkennt, worum es geht.

Was weniger zählt, als in Besprechungen behauptet wird:

• Der genaue Blauton.
• Die Schriftart, solange sie lesbar ist.
• Ob ein Element rund oder eckig ist.

Kein Auftrag ist je an einem Farbton gescheitert. An einem Text, der nicht sagt, was der Betrieb macht, schon.

Die praktische Empfehlung: Eine Gestaltung wählen, Farben aus dem Logo übernehmen, fertig. Die gesparte Zeit in Texte und Fotos stecken.

Vergrößern

Aus dem Logo, wenn Sie eines haben. Sonst eine der vorgeschlagenen Gestaltungen, ohne lange zu grübeln.

Damit Sie es kennen:

• Eine Hauptfarbe reicht. Sie wird für Buttons und Hervorhebungen genutzt, der Rest bleibt neutral.
• Zwei kräftige Farben nebeneinander wirken selten gut und fast immer laut.
• Kontrast schlägt Geschmack. Hellgrauer Text auf Weiß sieht in der Vorschau elegant aus und ist am Handy in der Sonne unlesbar.

Was Sie beachten sollten, wenn Sie eine Farbe aus dem Logo nehmen: Sie muss als Fläche funktionieren, nicht nur als Linie. Ein kräftiges Gelb, das im Logo gut aussieht, ist als Buttonfarbe mit weißer Schrift unlesbar.

Und der Hexwert steht in Ihrem Logo — jedes Grafikprogramm zeigt ihn an.

Auf vier Dinge, und alle vier lassen sich in fünf Minuten prüfen:

1. Kontrast. Text und Hintergrund müssen sich deutlich unterscheiden. Der Test: Bildschirm auf halbe Helligkeit stellen und lesen.
2. Schriftgröße. Fließtext nicht unter etwa 16 Pixel. Was am großen Bildschirm gerade noch geht, ist am Handy zu klein.
3. Zeilenlänge. Über etwa 80 Zeichen wird es anstrengend; die Gestaltungen begrenzen das von selbst.
4. Abstände. Genug Luft zwischen Absätzen. Eine Textwand wird nicht gelesen, egal was drinsteht.

Der beste Test kostet nichts: Ihre Seite draußen am Handy ansehen, bei Tageslicht. Was dort lesbar ist, ist überall lesbar.

Und: Wenn Sie selbst kneifen müssen, um zu lesen, ist es zu klein — auch wenn es „gut aussieht“.

Eine, die man gut liest — und davon gibt es viele. Die Auswahl ist deshalb weniger wichtig, als sie sich anfühlt.

Was zählt:

• Zwei Schnitte reichen: einer für Überschriften, einer für Text. Jeder weitere kostet Ladezeit, ohne dass es jemand bemerkt.
• Keine Zierschriften im Fließtext. Sie sind bei Überschriften manchmal reizvoll und im Text immer anstrengend.
• Genug Unterschied zwischen Überschrift und Text — durch Größe und Gewicht, nicht durch eine dritte Schrift.

Zur Technik: Schriften werden von Ihrem eigenen Server ausgeliefert, nicht von einem fremden Anbieter. Das ist schneller und erspart Ihnen ein Datenschutzproblem, für das Websites abgemahnt wurden.

Wenn Sie eine eigene Schrift einbringen wollen: Prüfen Sie die Lizenz. Für Websites braucht es meist eine eigene.

Ja, jederzeit, und ohne dass Ihre Inhalte darunter leiden. Gestaltung und Inhalt sind getrennt.

Was sich beim Wechsel ändern kann:

• Zeilenumbrüche. Eine andere Schrift ist breiter oder schmaler; eine Überschrift, die vorher in eine Zeile passte, tut es danach vielleicht nicht.
• Bildwirkung. Manche Gestaltungen zeigen Bilder größer oder anders beschnitten.
• Freigaben in AURA, wenn dabei Abschnitte ersetzt werden.

Was Sie danach tun sollten: alle Seiten einmal durchsehen, auch am Handy. Das dauert fünf Minuten und findet die zwei Stellen, an denen es klemmt.

Und wechseln Sie nicht ständig. Eine Website, die vierteljährlich anders aussieht, wirkt unruhig, und Ihre Kundschaft merkt es weniger, als Sie glauben.

Texte, Bilder und die Gestaltungswerte — direkt auf der Seite, mit sofortiger Ansicht.

Der Vorteil gegenüber dem Formular: Sie sehen, was Sie tun. Eine Farbänderung, die im Formular abstrakt ist, wirkt hier sofort auf der ganzen Seite.

Was Sie beachten müssen:

• Speichern heißt nicht veröffentlichen. Auch im Live-Editor bleibt die Änderung ein Entwurf, bis Sie veröffentlichen.
• Beim Verlassen ohne Speichern ist die Änderung weg.
• Gestaltungswerte wirken auf den ganzen Auftritt, nicht nur auf die Seite, die Sie sehen.

Der letzte Punkt überrascht regelmäßig: Wer die Akzentfarbe ändert, während er auf der Kontaktseite steht, ändert sie überall.

Dann in dieser Reihenfolge:

1. Prüfen, ob es sich aus vorhandenen Bausteinen bauen lässt. In den meisten Fällen ja — eine Preisübersicht aus einem Kartenraster, ein Ablauf aus einem Zeitstrahl.
2. Prüfen, ob es wirklich gebraucht wird oder eine Gewohnheit aus dem alten Auftritt ist. Sehr oft ist es Letzteres.
3. Anders lösen. Ein Buchungswerkzeug gehört verlinkt, nicht eingebettet.
4. HTML-Abschnitt als letzter Ausweg — mit allen Nachteilen: bricht die Gestaltung, kann am Handy zerfallen, lädt möglicherweise fremde Inhalte.

Was Sie nicht tun sollten: eigenes CSS einschleusen, um etwas zu verschieben. Nach dem nächsten Wechsel der Gestaltung bricht es an drei Stellen, und niemand weiß mehr, warum.

Und melden Sie den Wunsch. Was mehreren fehlt, ist ein Kandidat für die nächste Fassung.

Nein — die Gestaltung passt sich an. Aber prüfen müssen Sie es.

Was am Handy anders ist:

• Überschriften brechen um. Eine Zeile am Rechner können vier am Handy sein.
• Bilder werden stärker beschnitten, meist auf die Mitte.
• Das Menü klappt zusammen. Eine Liste mit zwölf Punkten füllt dort den Bildschirm.
• Nebeneinander wird untereinander. Drei Karten stehen dort in einer Spalte.

Sehen Sie nach, nach jedem größeren Umbau:

• Ist die Überschrift noch lesbar?
• Sind Buttons mit dem Daumen treffbar?
• Ist die Telefonnummer anklickbar?
• Sieht man ohne Scrollen, worum es geht?

Am echten Gerät, nicht im schmalen Browserfenster. Mehr als die Hälfte Ihrer Besucher kommt von dort.

Meistens: weniger. Der Reflex ist, Abstände zu vergrößern; die Ursache ist fast immer zu viel Inhalt.

Kontrollieren Sie:

• Wie viele Abschnitte hat die Seite? Über acht wird jede Seite unruhig.
• Sagt jeder Abschnitt etwas Eigenes? Zwei Abschnitte, die dasselbe sagen, werden zu einem.
• Sind die Texte zu lang? Ein Drittel kürzen macht fast jeden Text besser.
• Zu viele Bilder?

Was die Gestaltung selbst regelt: Abstände zwischen Abschnitten, Zeilenabstand, Ränder. Daran müssen Sie nicht drehen — und sollten es auch nicht, weil es überall wirkt.

Der wirksamste Griff gegen eine überladene Seite: einen Abschnitt auf eine eigene Unterseite verschieben. Dann ist beides besser.

Sie bringt Struktur mit, und die ist wertvoller als das Aussehen.

Was Sie bekommen:

• Eine Seitenaufteilung, die für diese Art von Betrieb üblich ist.
• Abschnitte in einer sinnvollen Reihenfolge.
• Beispieltexte, die zeigen, was an welcher Stelle hingehört.
• Farbvorschläge, die zur Branche passen.

Was Sie nicht bekommen: Ihre Inhalte. Die Beispieltexte müssen alle ersetzt werden — jeder einzelne.

Die Branche zu wechseln ist später möglich, aber es lohnt sich, sie am Anfang richtig zu wählen: Die Struktur ist der Teil, an dem man sonst am längsten sitzt.

Und wenn keine Branche passt: Nehmen Sie die ähnlichste. Die Struktur ist wichtiger als das Etikett.

So weit, wie es sinnvoll ist, und das ist meist weniger als eins zu eins.

Was Sie übernehmen sollten:

• Die Hauptfarbe, als Hexwert.
• Das Logo.
• Den Tonfall der Texte.

Was Sie nicht erzwingen sollten:

• Die exakte Schrift, wenn sie im Web schlecht lesbar ist oder eine teure Lizenz braucht. Eine ähnliche, gut lesbare ist besser.
• Druckvorgaben. Was auf einem Briefbogen funktioniert, funktioniert auf einem Handybildschirm oft nicht.
• Layouts aus dem Handbuch. Eine Website ist kein Prospekt.

Und wenn Ihr Handbuch Vorgaben für Web enthält: Prüfen Sie, wann sie geschrieben wurden. Vorgaben von 2015 sind für heutige Bildschirme oft nicht mehr passend.

Wichtiger als jede Vorgabe: dass die Seite lesbar ist.

Dann entscheidet die falsche Frage. „Welche gefällt uns besser?“ hat keine Antwort — jeder hat einen anderen Geschmack.

Fragen Sie stattdessen:

• Welche ist lesbarer? Am Handy, bei Tageslicht.
• Welche zeigt schneller, was wir machen?
• Welche passt zu unseren Bildern? Wenn Sie keine guten Fotos haben, ist eine bildlastige Gestaltung die falsche.
• Welche können wir pflegen?

Und wenn es dabei bleibt: Einer entscheidet. Eine Gestaltung, über die drei Wochen diskutiert wird, kostet mehr als jede Fehlentscheidung — zumal sie sich in fünf Minuten wechseln lässt.

Der ehrliche Satz für die Runde: Kein Kunde hat je wegen der Farbe nicht angerufen.