Wie ein Webdesign entsteht: Benchmarking, Wireframe, UI

Zwischen „ja, machen wir" und der fertigen Seite liegen sechs Arbeitsschritte: die Konkurrenz ansehen, die Struktur festlegen, ein Wireframe bauen, die Richtung klären, das UI ausarbeiten und prüfen, ob es trägt. Im Lehrbuch stehen sieben Schritte, dazu Nutzerforschung, Personas, Usability-Tests und eine Übergabe an die Entwicklung.

Dieser Lehrbuch-Prozess ist für Produktteams gebaut, die eine Software über Jahre betreuen. Für eine Firmenseite mit sechs Unterseiten ist die Hälfte davon Zeremonie. Drei Schritte sind es nicht, und wer sie überspringt, merkt es später. Welche das sind, steht unten. Wie das Projekt drumherum abläuft, wer wann was liefert und wie Feedbackschleifen begrenzt werden, habe ich im Beitrag zum Webdesign-Ablauf beschrieben; hier geht es nur um das Handwerk in der Entwurfsphase.

Benchmarking: die Konkurrenz systematisch ansehen

Benchmarking klingt nach Beratersprache und ist eine halbe Stunde Arbeit mit offenem Notizblock. Ich sehe mir fünf bis acht Seiten aus dem Umfeld an, bei jeder dieselben fünf Punkte:

• Was steht in der ersten Bildschirmseite, bevor man scrollt?
• Wie viele Klicks bis zum Kontakt?
• Welche Leistungen haben eine eigene Seite?
• Wie klingt die Ansprache?
• Wie schnell lädt die Seite auf dem Handy?

Der letzte Punkt ist der einzige, bei dem eine Zahl herauskommt: PageSpeed Insights läuft auch auf fremden Seiten. Der Rest ist Beobachtung, und die ist trotzdem verwertbar, weil sich Muster zeigen. Wenn sieben von acht Betrieben mit einem Stockfoto und dem Wort „Qualität" anfangen, dann ist das erste, was deine Seite tun muss, nicht schöner sein, sondern anders anfangen.

Wozu das gut ist: nicht zum Abkupfern, sondern um zu wissen, wogegen deine Seite antritt und wo du dich bewusst anpasst. Menü oben, Logo links, Kontakt oben rechts kopiert man dankbar, weil Besucher es gelernt haben. Unterscheiden musst du dich beim Inhalt und beim Ton, nicht bei der Bedienung.

Struktur vor Gestaltung

Bevor irgendetwas gezeichnet wird, steht fest, welche Seiten es gibt und was auf jeder davon passieren soll. Eine Seite pro Leistung, wenn die Leistungen einzeln gesucht werden. Eine Seite, wenn nicht. Diese Entscheidung fällt hier und nicht später, weil sie alles andere bestimmt: Navigation, Umfang, Aufwand, Preis.

Dafür reicht ein Blatt Papier und eine halbe Stunde; den Weg dahin habe ich im Guide zur Website-Struktur aufgeschrieben. Ergebnis ist eine Liste, keine Grafik: Seiten, Reihenfolge, je ein Satz zum Ziel.

Das Wireframe

Ein Wireframe ist der Bauplan einer Seite ohne Gestaltung: Kästen, Platzhalter, Beschriftungen. Keine Farben, keine Schriftauswahl, keine Bilder. Genau das ist der Sinn. Solange nichts hübsch ist, redet man über die richtige Frage, nämlich was zuerst kommt, was darunter, was ganz weg kann.

Unterschieden wird nach Detailgrad: Ein grobes Wireframe sind zehn Minuten Kästen, ein detailliertes enthält schon echte Überschriften und die tatsächliche Textmenge. Für eine Firmenseite reicht je eines für die Startseite und für jeden Seitentyp, der sich unterscheidet. Alle Unterseiten einzeln zu zeichnen ist verlorene Zeit, wenn drei davon gleich aufgebaut sind.

An dieser Stelle streitet die Branche seit Jahren über Blindtext. Die eine Seite sagt, Lorem Ipsum halte die Diskussion beim Layout statt bei Formulierungen. Die andere sagt, wer ohne echten Inhalt entwirft, kennt die Last nicht, die das Layout tragen muss. Meine Regel liegt dazwischen: kein Lorem Ipsum, aber auch kein Warten auf fertige Texte. Ich schreibe glaubwürdige Platzhalter in der Länge, die der echte Text haben wird. Eine Überschrift mit neun Wörtern bricht anders um als eine mit drei, und dieser Unterschied entscheidet über das Layout.

Die Richtung, bevor das UI entsteht

Jetzt erst kommt die Frage, wie es aussehen soll. Und zwar als Auswahl, nicht als Vorschlag. Ich lege zwei bis drei Richtungen vor, jede in einem Satz beschrieben, mit einer Schrift- und einer Farbidee. Ruhig und sachlich. Warm und handgemacht. Dunkel und technisch. Der Kunde entscheidet, bevor eine Seite gebaut wird.

Das klingt nach einer Formalie und ist die Stelle, an der ich am meisten Zeit verloren habe, bevor ich es zur Regel gemacht habe. Im Juli habe ich ein Projekt in eine Richtung gebaut, die ich für die naheliegende hielt. Sie war es nicht. Die Nacharbeit hat ein Vielfaches der Zeit gekostet, die eine Rückfrage gekostet hätte. Seitdem steht die Frage vor der ersten Zeile Code.

Das Werkzeug dafür ist das Moodboard: eine Sammlung aus Bildern, Farben und Schriften, die eine Stimmung zeigt statt sie zu beschreiben. Was darauf gehört und was nicht, steht im Beitrag Was ist ein Moodboard.

UI-Design: aus Kästen wird eine Seite

Das UI ist die sichtbare Oberfläche, und sie entsteht nicht Seite für Seite, sondern als Satz von Bausteinen. Zuerst die Grundlagen: eine Schriftgrößen-Skala mit vier oder fünf Stufen statt beliebiger Werte, ein Farbsatz mit geprüftem Kontrast, ein Abstandsraster. Danach Knopf, Karte, Formularfeld, Navigation, Fußzeile. Erst dann werden daraus Seiten. Wer umgekehrt anfängt, hat auf Seite vier drei Knopf-Varianten und weiß nicht mehr, welche die richtige war. Wie weit man das treiben kann, steht beim Design-System; für eine Firmenseite reicht die kleine Variante.

Die Schriftwahl gehört in diesen Schritt und ist schneller entschieden, als viele denken: eine Textschrift, höchstens eine zweite für Überschriften. Worauf es dabei ankommt, steht bei der Schriftwahl.

Und dann kommt der Punkt, an dem sich Seiten unterscheiden, die technisch gleich sauber sind. Eine Startseite aus acht Sektionen, die alle gleich gebaut sind, Überschrift mittig, Text darunter, Bild daneben, ist korrekt und vollkommen austauschbar. Ich gebe deshalb jeder Seite ein gestalterisches Leitmotiv, das zwei- bis dreimal auftaucht: ein aus dem Raster ausbrechendes Bild, ein versetztes Doppel, ein mitlaufender Bereich beim Scrollen. Eines, nicht fünf. Symmetrie überall fühlt sich sicher an und ist der schnellste Weg zur Seite, die man nach dem Schließen vergessen hat.

Prototyp oder gleich bauen?

Im Lehrbuch folgt jetzt der klickbare Prototyp: Das Design wird verlinkt, damit man den Ablauf durchspielen kann, bevor entwickelt wird. Danach die Übergabe an die Entwicklung, mit Abständen, Farbwerten und Zuständen. Beides ist sinnvoll, wenn Entwurf und Umsetzung in verschiedenen Händen liegen, denn genau dort entstehen sonst die Abweichungen, die hinterher teuer nachgebessert werden.

Bei mir entfallen beide Schritte, weil ich entwerfe und baue. Statt eines Klickdummys bekommst du eine Vorschau-Adresse mit der echten Seite: echte Schriften, echtes Ladeverhalten, auf deinem eigenen Handy. Ein Prototyp simuliert, wie es sich anfühlen wird. Die Vorschau ist es schon. Der Nachteil ist ehrlicherweise, dass es länger dauert, bis du das erste Mal etwas siehst.

Was du dir sparen kannst

Nutzerbefragungen, Personas, moderierte Usability-Tests, Wettbewerbsanalysen über zwanzig Seiten: gute Arbeit, aber für eine Firmenseite mit ein paar hundert Besuchern im Monat steht der Aufwand in keinem Verhältnis. Die Erkenntnisse kennst du meistens schon, weil du täglich mit deinen Kunden sprichst.

Es kippt an drei Stellen. Wenn auf der Seite etwas verkauft oder gebucht wird, lohnt sich echtes Testen, weil jeder Abbruch messbar Geld kostet. Wenn mehrere Zielgruppen gegensätzliche Dinge wollen, lohnt sich die Recherche, weil sonst der Kompromiss für alle nichts wird. Und wenn ein Team von mehreren Leuten daran arbeitet, lohnt sich das saubere Design-System, weil sonst jeder seine eigene Variante baut.

Nicht sparen kannst du dagegen an dreien der Entscheidungen oben: Struktur, Richtung und das Leitmotiv im UI. Struktur, weil sie den Umfang bestimmt und ein nachträglicher Umbau alles kostet. Richtung, weil eine falsche Annahme das ganze Projekt trägt. Leitmotiv, weil ohne es zwar eine Seite entsteht, aber keine, an die man sich erinnert.

Wie es bei mir läuft

In der Praxis sieht das so aus: Du beantwortest ein paar Fragen zu deinem Betrieb, ich sehe mir das Umfeld an, lege die Struktur fest und schicke dir die Richtungen zur Auswahl. Dann baue ich, und du bekommst eine Vorschau-Adresse statt einer PDF-Präsentation. Was dabei herauskommt und wie der Ablauf im Ganzen aussieht, steht auf der Seite zum Webdesign.

Wenn du selbst baust, ist die Reihenfolge oben trotzdem die richtige. Der häufigste Fehler beim Selbermachen ist nicht schlechter Geschmack, sondern zu früh anzufangen: Farben aussuchen, bevor feststeht, welche Seiten es gibt.