Ein Wireframe ist die schematische Darstellung einer einzelnen Ansicht, die Aufbau und Rangfolge der Inhalte zeigt und die Gestaltung offen lässt. Kästen stehen für Bilder, Linien für Textblöcke, gearbeitet wird in Graustufen. Zu klären ist damit eine Frage: Was steht wo, und was wiegt schwerer als was? Sobald mehrere solcher Ansichten verlinkt sind und sich durchklicken lassen, spricht man vom Clickdummy.
- Wireframe
Schematische Darstellung einer einzelnen Ansicht, die Aufbau und Rangfolge der Inhalte zeigt und die Gestaltung offen lässt.
Beispiel: „Im Wireframe liegt das Kontaktformular unter den Referenzen, das sollten wir tauschen.“Auch: Drahtgittermodell oder Layoutgerüst. Im Projektalltag ist der deutsche Begriff unüblich. Der Begriff stammt aus der 3D-Darstellung, wo ein Wireframe ein Objekt allein über seine Kanten zeigt, ohne Oberfläche.
Abgrenzung zum Clickdummy: Der Wireframe zeigt eine Ansicht im Stillstand, der Clickdummy verbindet mehrere Ansichten zu einem klickbaren Ablauf. Die Mischform aus Wireframe und Ablaufdiagramm heißt Wireflow: Sie stellt jeden Schritt einer Aufgabe als eigenes Gerüst dar, mit Pfeilen dazwischen.
Graustufen sind eine Methode
Farbe, Fotos und ausgearbeitete Schrift ziehen die Aufmerksamkeit auf sich. Wer einen gestalteten Entwurf vorlegt, bekommt Rückmeldungen zum Bild und zur Farbe des Buttons. Wer ein Gerüst vorlegt, bekommt Rückmeldungen zur Reihenfolge. In der Abstimmung mit Auftraggebern erleben wir diesen Unterschied bei fast jedem Projekt, und er ist der Grund, warum die Stufe nicht übersprungen wird.
Das Weglassen hat eine Grenze. Ein Wireframe, der nur aus grauen Rechtecken besteht, lässt sich nicht beurteilen, weil niemand weiß, was darin stehen soll. Deshalb gehören echte Überschriften hinein, echte Textlängen und die tatsächliche Anzahl der Einträge in einer Liste.
Wie detailliert ein Wireframe sein muss
Blindtext ist der häufigste Fehler. „Lorem ipsum“ verdeckt, dass die Überschrift im Deutschen dreizeilig wird und der Produktname nicht in die Kachel passt. Wir arbeiten deshalb mit Inhalten aus dem Content-Konzept, auch wenn sie noch nicht endgültig formuliert sind, und schreiben die Beschriftungen der Bedienelemente schon hier aus.
Was auf dieser Stufe offen bleiben darf, sind Zustände und Bewegung. Ein Wireframe zeigt einen Moment. Sobald der Fehlerfall und der Ladezustand zur Diskussion stehen, ist das Werkzeug ausgereizt und der Prototyp übernimmt.
Was Auftraggeber an Wireframes irritiert
Ein Wireframe sieht unfertig aus, und das erzeugt Unruhe, wenn er ohne Einordnung im Postfach landet. Hilfreich ist ein Satz dazu, was gerade entschieden wird und was ausdrücklich noch nicht. Ohne diesen Satz kommt die Rückfrage nach dem Logo, und die Struktur bleibt unbesprochen.
Der Wireframe ist außerdem die Stelle, an der die Informationsarchitektur auf die Seite trifft. Was in der Sitemap eine Ebene tiefer liegt, muss hier einen Platz bekommen, an dem es gefunden wird. Wo das nicht gelingt, stimmt die Struktur darüber noch nicht.
Detailgrade und ihre Namen
In der Praxis unterscheidet man drei Stufen. Low Fidelity ist die Skizze auf Papier oder im Whiteboard-Werkzeug, die in Minuten entsteht und nach der Besprechung weggeworfen wird. Mid Fidelity ist der Wireframe im engeren Sinn: maßhaltig, mit echten Texten, in Graustufen. High Fidelity trägt Schrift, Farbe und Bilder und gehört damit schon zum Screen Design.
Die Stufen sind kein Weg, den jedes Projekt vollständig geht. Bei einer überschaubaren Unternehmensseite reicht oft die Skizze, weil die Muster bekannt sind. Bei einem Konfigurator oder einem mehrstufigen Antrag lohnt die mittlere Stufe für jeden Schritt.
Ein Wireframe gilt für eine Breite
Ein Gerüst zeigt eine Anordnung, und die Anordnung hängt von der verfügbaren Breite ab. Wer nur die Desktopfassung zeichnet, verschiebt die Frage, was auf dem Telefon zuerst kommt, in die Umsetzung. Dort entscheidet sie dann derjenige, der das Template baut. Wir zeichnen deshalb mindestens zwei Breiten, und wo Inhalte auf dem Telefon umsortiert werden müssen, gehört die Umsortierung in den Wireframe und nicht in eine Randbemerkung.
Anmerkungen gehören dazu
Ein Wireframe ohne Beschriftung ist eine Behauptung. Was passiert beim Klick auf die Kachel? Woher kommt die Liste, wie viele Einträge zeigt sie, und was steht da, wenn keiner vorhanden ist? Solche Fragen werden im Bild nicht sichtbar und entscheiden später über den Aufwand. Bewährt haben sich nummerierte Anmerkungen am Rand, die je Element den Zweck, die Datenquelle und den Sonderfall nennen. Der Leerzustand ist dabei der am häufigsten vergessene Punkt.
Woraufhin ein Wireframe abgenommen wird
Zur Abnahme gehören vier Fragen, und keine davon betrifft das Aussehen. Steht das Wichtigste oben? Findet jede Zielgruppe ihren Einstieg? Ist zu jedem Element klar, woher der Inhalt kommt und wer ihn pflegt? Und lässt sich die geplante Struktur aus dem Sitemap-Konzept hier überhaupt unterbringen? Wer stattdessen über Abstände und Schriftgrößen spricht, hat die Stufe verlassen, bevor sie ihren Zweck erfüllt hat.
Vom Wireframe in den Code
Ein Wireframe beschreibt schon fast die Dokumentstruktur, nur in Kästen. Der Weg dorthin ist deshalb kürzer, als er aussieht: Jeder Bereich des Entwurfs wird zu einem Abschnitt im Markup, die Reihenfolge bleibt, und die Überschriftenebenen ergeben sich aus der Gliederung des Entwurfs.
<header>…</header>
<main>
<section class="hero"> <!-- große Fläche oben -->
<h1>…</h1>
</section>
<section class="leistungen"> <!-- zwei Kacheln -->
<h2>…</h2>
<article>…</article>
<article>…</article>
</section>
</main>
<footer>…</footer>Diese Übersetzung lohnt sich schon während der Abstimmung. Wer den Entwurf in Abschnitte gliedert, merkt früh, wenn eine Seite drei gleichrangige Überschriften erster Ordnung hätte oder ein Bereich inhaltlich nirgends hingehört. Beides fällt im Bild nicht auf und im Markup sofort.
Womit Wireframes entstehen
Drei Wege, die sich nach Zweck unterscheiden. Papier und Stift für die erste halbe Stunde zu zweit: nichts ist schneller, und nichts macht es leichter, einen Entwurf wegzuwerfen. Ein Zeichenwerkzeug wie Figma für alles, was abgestimmt, kommentiert und versioniert werden soll. Und ein grober Prototyp in HTML für Fälle, in denen das Verhalten die Frage ist, etwa bei langen Formularen oder schwierigen Tabellen.
Der dritte Weg wird unterschätzt. Ein Entwurf im Browser zeigt von Anfang an, wie sich die Seite bei anderer Fensterbreite verhält, und beantwortet damit genau die Frage, an der statische Wireframes scheitern.
Wireframes im Relaunch
Hier beginnt die Arbeit bei dem, was es gibt, und nicht beim weißen Blatt. Ein Inhaltsinventar listet jede bestehende Seite mit Aufrufen, Anfragen und Zustand; daraus ergibt sich, was übernommen, zusammengelegt oder gestrichen wird. Erst danach entstehen Entwürfe, und zwar für die Seitentypen und nicht für einzelne Seiten.
Drei Typen decken die meisten Projekte ab: die Startseite, eine Leistungs- oder Produktseite und eine Inhaltsseite aus dem Journal. Wer jede Seite einzeln entwirft, baut ein System, das niemand pflegen kann; wer Typen entwirft, bekommt eines, das beim nächsten Inhalt noch trägt.