Wireframes erklärt: Wozu Entwürfe ohne Farbe und Bild dienen

Was ein Wireframe sichtbar macht

Ein Wireframe ist ein schematischer Entwurf für eine Website, eine Webanwendung oder eine mobile Benutzeroberfläche. Er zeigt, welche Inhalte und Funktionen an welcher Stelle angeordnet werden, ohne bereits Farben, Bilder, Schriften oder ausgearbeitete Grafiken festzulegen. Statt eines fertigen Designs entsteht zunächst ein strukturelles Gerüst.

Typische Elemente eines Wireframes sind Platzhalter für eine Navigation, Überschriften, Textbereiche, Bilder, Formulare, Schaltflächen und Hinweise. Ein Bild kann als neutrales Rechteck erscheinen, ein Text als mehrere Linien und eine Schaltfläche als beschriftetes Feld. Diese Darstellung wirkt bewusst unfertig. Gerade dadurch konzentriert sich die Diskussion auf die Benutzerführung und nicht auf die Wirkung einzelner Gestaltungselemente.

Wireframes können auf Papier, in einem Zeichenprogramm oder in einer speziellen Prototyping-Anwendung entstehen. Entscheidend ist nicht das verwendete Werkzeug, sondern die Frage, die der Entwurf beantwortet: Wie gelangen Nutzer zu ihrem Ziel, welche Informationen benötigen sie dafür und welche Bedienelemente unterstützen diesen Weg?

Warum Farbe und Bild zunächst fehlen

Farben, Fotos, Illustrationen und ausgearbeitete Schriftstile beeinflussen die Wahrnehmung stark. Eine farbige Schaltfläche kann beispielsweise attraktiv wirken, obwohl ihre Beschriftung unklar ist. Ein hochwertiges Foto kann den Blick auf einen Bereich lenken, dessen Inhalt für die eigentliche Aufgabe keine Bedeutung besitzt. Ein Wireframe reduziert solche Ablenkungen.

Der reduzierte Entwurf lenkt die Aufmerksamkeit auf mehrere strukturelle Fragen:

• Ist die wichtigste Information an der erwartbaren Stelle zu finden?
• Erkennt man die Hierarchie zwischen Überschrift, Erklärung und Handlung?
• Passt der Umfang des Inhalts zur vorgesehenen Fläche?
• Kann eine Person den nächsten Schritt nachvollziehen?
• Fehlen Zustände für Fehlermeldungen, Ladezeiten oder leere Bereiche?

Das Weglassen von Gestaltung bedeutet nicht, dass visuelle Aspekte unwichtig wären. Farben, Kontraste, Abstände und Bildsprache werden später ausführlich berücksichtigt. Wireframes verschieben diese Entscheidungen in eine Phase, in der Änderungen an der Grundstruktur noch überschaubar bleiben.

Welche Aufgaben Wireframes in der Planung übernehmen

Wireframes dienen als gemeinsames Arbeitsmaterial für Redaktion, Konzeption, Gestaltung, Entwicklung und Auftraggebende. Alle Beteiligten können sich auf dieselbe Seitenstruktur beziehen, statt nur über abstrakte Wünsche zu sprechen. Eine Diskussion über ein konkretes Inhaltsfeld ist meist präziser als eine allgemeine Aussage wie „Die Seite sollte übersichtlicher werden“.

Besonders nützlich sind Wireframes bei folgenden Aufgaben:

• Informationsarchitektur: Inhalte werden Kategorien, Seiten und Navigationswegen zugeordnet.
• Priorisierung: Wichtige Informationen erhalten ausreichend Raum und eine passende Position.
• Interaktionsplanung: Formulare, Filter, Menüs und Suchfunktionen werden als Abläufe betrachtet.
• Abstimmung: Änderungswünsche können vor der visuellen Ausarbeitung gesammelt und bewertet werden.
• Technische Vorbereitung: Benötigte Komponenten, Zustände und Datenbereiche werden früh erkennbar.
• Inhaltsplanung: Redaktionelle Anforderungen werden an konkreten Platzhaltern geprüft.

Ein Wireframe ist dabei kein Ersatz für eine Anforderungsbeschreibung und kein fertiges Gestaltungskonzept. Er bildet eine Zwischenstufe, in der Struktur und Nutzung im Mittelpunkt stehen.

Low-Fidelity und High-Fidelity im Vergleich

Wireframes unterscheiden sich in ihrem Ausarbeitungsgrad. Bei einem Low-Fidelity-Wireframe wird mit groben Formen, kurzen Platzhaltertexten und wenigen Details gearbeitet. Ein solcher Entwurf lässt sich schnell erstellen und ohne großen Aufwand verändern. Er eignet sich für die frühe Konzeptphase, wenn Seitenaufbau und Nutzerwege noch offen sind.

Ein High-Fidelity-Wireframe enthält mehr konkrete Inhalte, präzisere Abstände und häufig bereits eine interaktive Verknüpfung zwischen Ansichten. Er kann dem späteren Produkt stärker ähneln, bleibt aber auf Struktur und Verhalten konzentriert. Je nach Arbeitsweise geht ein High-Fidelity-Wireframe bereits in einen klickbaren Prototyp oder in einen visuellen Designentwurf über.

Die Grenzen zwischen den Varianten sind nicht überall gleich definiert. Wichtig ist deshalb, im Projekt zu benennen, wie detailliert ein Entwurf ist und welche Fragen mit ihm beantwortet werden sollen.

Ein Wireframe Schritt für Schritt erstellen

Ein brauchbarer Entwurf beginnt nicht mit dem Zeichnen einzelner Kästen. Zuerst werden Ziel, Inhalt und Nutzungssituation geklärt. Die folgende Vorgehensweise hilft dabei, strukturiert vorzugehen.

1. Ziel der Ansicht festlegen: Notieren, welche Aufgabe die betreffende Seite unterstützt. Eine Produktdetailseite verfolgt andere Ziele als eine Kontaktseite oder ein Verwaltungsbereich.
2. Zielgruppen und Nutzungssituationen beschreiben: Berücksichtigen, welche Vorkenntnisse, Geräte und Erwartungen vorhanden sind. Auch Zeitdruck, mobile Nutzung oder eingeschränkte Aufmerksamkeit können die Struktur beeinflussen.
3. Inhalte sammeln und priorisieren: Relevante Informationen nach ihrer Bedeutung ordnen. Sekundäre Hinweise dürfen die Hauptaufgabe nicht verdecken.
4. Seitenrahmen und zentrale Bereiche skizzieren: Kopfbereich, Navigation, Hauptinhalt, unterstützende Informationen und Fußbereich als grobe Zonen anlegen.
5. Handlungen und Zustände ergänzen: Schaltflächen, Eingabefelder, Rückmeldungen, Fehler, Ladeanzeigen und leere Zustände einplanen.
6. Für mehrere Bildschirmgrößen prüfen: Überlegen, welche Bereiche auf kleinen Bildschirmen untereinander erscheinen, zusammengefasst werden oder entfallen können.
7. Nutzerweg nachvollziehen: Mehrere Ansichten verbinden und den Ablauf vom Einstieg bis zum Ziel durchspielen.
8. Rückmeldungen einholen: Den Entwurf mit Personen prüfen, die nicht an seiner Entstehung beteiligt waren. Unklare Stellen werden dabei sichtbar.
9. Änderungen dokumentieren: Offene Fragen, Entscheidungen und verworfene Varianten festhalten, damit spätere Anpassungen nachvollziehbar bleiben.

Inhalte richtig als Platzhalter darstellen

Platzhalter sollen nicht nur dekorative Blöcke sein. Sie müssen die spätere Inhaltsmenge und den Charakter des Inhalts annähernd abbilden. Ein kurzer Beispieltext kann verdeutlichen, ob eine Überschrift in eine Zeile passt. Ein längerer Textblock zeigt, ob die Seite bei umfangreichen Informationen unübersichtlich wird.

Für wichtige Bereiche empfiehlt sich deshalb eine realistische Inhaltsprobe. Bei einer Suchseite gehören dazu auch lange Suchbegriffe, keine Treffer, viele Treffer und möglicherweise Filter. Bei einem Formular sollten Pflichtfelder, optionale Angaben, Fehlermeldungen und erfolgreiche Rückmeldungen berücksichtigt werden. Bei einer Nachrichtenseite können unterschiedliche Überschriftenlängen und Bildformate relevant sein.

Zu allgemeine Platzhalter verdecken strukturelle Probleme. Wenn jeder Textblock gleich lang ist, lässt sich nicht beurteilen, ob die Hierarchie mit tatsächlichen Inhalten funktioniert. Gleichzeitig sollte der Wireframe nicht durch ausformulierte Texte zu einem vorgezogenen Redaktions- oder Designprojekt werden. Ein sinnvoller Mittelweg verwendet dort konkrete Inhalte, wo sie die Struktur beeinflussen.

Navigation, Interaktion und Zustände abbilden

Ein statisches Seitenbild beantwortet noch nicht, wie eine Oberfläche funktioniert. Daher sollten Wireframes auch Interaktionen beschreiben. Bei einem Menü kann sichtbar werden, welche Punkte zu Unterseiten führen und welche Bezeichnung verwendet wird. Bei einem Formular sollte erkennbar sein, wann eine Eingabe als fehlerhaft gilt und wo die Rückmeldung erscheint.

Zu jeder zentralen Funktion gehören mehrere mögliche Zustände:

• Ausgangszustand vor einer Eingabe oder Aktion
• Aktiver oder ausgewählter Zustand
• Ladezustand bei einer verzögerten Antwort
• Erfolgreicher Abschluss einer Handlung
• Fehlerzustand mit verständlicher Korrekturhilfe
• Leerer Zustand, wenn noch keine Daten vorhanden sind
• Gesperrter Zustand, wenn eine Handlung noch nicht möglich ist

Diese Zustände verhindern, dass der Entwurf nur den optimalen Ablauf zeigt. In der Praxis entstehen viele Verständnisschwierigkeiten an Stellen, an denen eine Anwendung nicht reagiert wie erwartet. Gute Wireframes machen solche Situationen früh sichtbar und geben ihnen einen festen Platz.

Responsive Wireframes für Smartphone und Desktop

Ein Wireframe sollte nicht ausschließlich für eine große Bildschirmfläche geplant werden. Responsive Gestaltung bedeutet mehr als das Verkleinern einer Desktopansicht. Bereiche können ihre Reihenfolge ändern, Spalten können untereinander angeordnet werden und komplexe Navigation kann eine andere Bedienform benötigen.

Bei der Planung helfen konkrete Fragen:

• Welche Information muss auf kleinen Bildschirmen zuerst erscheinen?
• Welche Bedienelemente benötigen ausreichend Fläche und Abstand für die Touchbedienung?
• Wie verhalten sich Tabellen, Karten, Bilder und lange Überschriften?
• Welche Inhalte dürfen zusammengefasst werden, ohne den Zusammenhang zu verlieren?
• Was geschieht mit einer Seitenleiste, wenn für sie kein Raum mehr vorhanden ist?

Statt für jede denkbare Bildschirmbreite einen eigenen Entwurf zu zeichnen, werden zuerst die inhaltlichen Prioritäten und die Umbruchregeln beschrieben. Ein Wireframe kann beispielsweise zeigen, dass eine zweispaltige Ansicht in eine lineare Reihenfolge übergeht. Die konkrete technische Umsetzung wird später mit Layoutregeln und Komponenten festgelegt.

Barrierearme Planung beginnt im Wireframe

Barrierearme Nutzung sollte nicht erst nach der visuellen Gestaltung geprüft werden. Bereits im Wireframe lassen sich viele Voraussetzungen schaffen. Eine klare Überschriftenhierarchie unterstützt die Orientierung. Eindeutige Beschriftungen helfen bei Formularen. Eine verständliche Reihenfolge von Inhalten und Aktionen erleichtert die Bedienung mit Tastatur, Vorleseprogrammen und kleinen Bildschirmen.

Farbabhängigkeiten lassen sich in dieser Phase vermeiden, indem Zustände nicht ausschließlich durch Farbe unterschieden werden. Ein Fehlerfeld benötigt zusätzlich eine verständliche Nachricht und eine erkennbare Zuordnung zum betroffenen Feld. Eine Schaltfläche sollte durch ihre Bezeichnung verständlich sein, auch wenn Farbe oder Symbol später hinzukommen.

Auch Medien benötigen eine planerische Berücksichtigung. Bei Bildern kann ein Hinweis auf alternative Beschreibungen vorgesehen werden. Bei Videos sind Untertitel und gegebenenfalls eine Textalternative einzuplanen. Solche Entscheidungen gehören zur Inhalts- und Funktionsstruktur und sind keine nachträgliche Dekoration.

Wireframes prüfen und konstruktiv besprechen

Eine Prüfung sollte sich auf beobachtbares Verhalten und konkrete Aufgaben beziehen. Statt zu fragen, ob jemand den Entwurf „schön“ findet, sind Fragen nach dem Verständnis hilfreicher: Wo würde die Person nach einer bestimmten Information suchen? Was erwartet sie nach der Auswahl eines Filters? Welche Handlung erscheint als nächster Schritt?

Eine strukturierte Prüfung kann so ablaufen:

1. Eine konkrete Aufgabe und den Ausgangspunkt nennen.
2. Die Person den vermuteten Weg beschreiben oder durch den Prototyp navigieren lassen.
3. Beobachten, wo sie zögert, zurückgeht oder eine andere Funktion erwartet.
4. Nur bei Bedarf nachfragen, ohne die gewünschte Lösung vorwegzunehmen.
5. Beobachtungen nach Ursache, Auswirkung und möglicher Änderung ordnen.

Rückmeldungen sollten nicht automatisch in neue Elemente übersetzt werden. Mehr Schaltflächen oder zusätzliche Hinweise lösen kein Problem, wenn die zugrunde liegende Struktur unklar ist. Zuerst sollte geprüft werden, ob Begriffe, Reihenfolge, Gruppierung oder Priorisierung angepasst werden müssen.

Typische Fehler beim Einsatz von Wireframes

Ein häufiger Fehler besteht darin, den Wireframe wie ein fertiges Design zu behandeln. Dadurch werden Diskussionen über Farben, Icons und Abstände geführt, obwohl zentrale Fragen zur Navigation noch offen sind. Ein anderer Fehler ist die umgekehrte Richtung: Der Entwurf bleibt so abstrakt, dass wichtige Inhalte und Zustände nicht beurteilt werden können.

Weitere problematische Muster sind:

• Zu frühe Detailarbeit: Viele kleine Gestaltungselemente binden Zeit, obwohl die Seitenlogik noch nicht geprüft ist.
• Nur der Idealfall: Fehler, leere Ergebnisse und lange Inhalte fehlen vollständig.
• Desktop als alleinige Grundlage: Mobile Nutzung und alternative Eingabemethoden werden erst spät berücksichtigt.
• Unklare Zielsetzung: Der Entwurf enthält viele Bereiche, beantwortet aber nicht, welche Aufgabe unterstützt werden soll.
• Keine Dokumentation: Entscheidungen und offene Fragen gehen zwischen verschiedenen Versionen verloren.
• Zu starke Bindung an ein Werkzeug: Die Darstellung wird wichtiger als die zu prüfende Nutzerführung.

Ein Wireframe ist dann wertvoll, wenn er Fragen aufwirft, die rechtzeitig beantwortet werden können. Seine Aufgabe besteht nicht darin, Unsicherheit zu verbergen.

Wann ein Wireframe nicht ausreicht

Für die grundlegende Struktur ist ein Wireframe gut geeignet. Bestimmte Fragen benötigen jedoch zusätzliche Darstellungen. Die Wirkung einer Farbpalette, die Lesbarkeit einer konkreten Schrift oder die Qualität einer Bildkomposition lassen sich mit einem neutralen Entwurf nicht abschließend bewerten. Dafür werden visuelle Designs oder Musterseiten benötigt.

Auch komplexe Interaktionen sollten in einem klickbaren Prototyp geprüft werden. Dazu zählen beispielsweise mehrstufige Vorgänge, dynamische Filter, Drag-and-drop-Aktionen oder Oberflächen mit vielen Zuständen. Ein Prototyp zeigt, wie sich eine Person durch die Ansichten bewegt, während ein Wireframe vor allem die Anordnung und Priorität sichtbar macht.

Technische Machbarkeit muss ebenfalls gesondert geprüft werden. Ein Wireframe kann einen Datenbereich vorsehen, beantwortet aber nicht automatisch, ob die benötigten Daten verfügbar sind, wie schnell sie geladen werden oder welche Sicherheitsanforderungen gelten. Für diese Fragen sind technische Anforderungen, Datenmodelle und Sicherheitskonzepte erforderlich.

Praktische Checkliste vor der Übergabe

Vor der Weitergabe an Gestaltung oder Entwicklung sollte der Entwurf anhand einer kurzen Prüfung bewertet werden:

• Ist das Ziel jeder dargestellten Ansicht eindeutig?
• Sind zentrale Inhalte nach ihrer Bedeutung geordnet?
• Ist die Navigation über mehrere Ansichten hinweg nachvollziehbar?
• Sind primäre und sekundäre Handlungen unterscheidbar?
• Existieren Hinweise für Fehler, Ladezeiten und leere Ergebnisse?
• Wurden realistische Textlängen und unterschiedliche Inhaltsmengen berücksichtigt?
• Ist die Anordnung für kleine und große Bildschirme beschrieben?
• Bleibt die Bedienung verständlich, wenn Farbe oder Bild wegfallen?
• Sind Tastaturbedienung, Beschriftungen und alternative Medieninhalte mitgedacht?
• Sind offene Fragen und getroffene Entscheidungen dokumentiert?

Die Checkliste ersetzt keine Prüfung mit Nutzenden. Sie hilft jedoch, offensichtliche Lücken vor einer ausführlicheren Ausarbeitung zu erkennen. Je klarer der Zweck des Wireframes dokumentiert ist, desto zielgerichteter können andere Beteiligte damit weiterarbeiten.

FAQ zu Wireframes

Sind Wireframes nur für große Websites sinnvoll?

Nein. Auch eine kleine Website profitiert von einer frühen Prüfung der Seitenstruktur. Der Umfang des Wireframes kann an das Projekt angepasst werden. Bei wenigen Ansichten genügt möglicherweise eine kompakte Skizze, während umfangreiche Anwendungen mehrere Nutzerwege und Zustände benötigen.

Wer erstellt einen Wireframe?

Die Erstellung kann bei Konzeptions-, Design-, Produkt- oder Entwicklungsteams liegen. Entscheidend ist, dass die fachlichen, redaktionellen und technischen Anforderungen einbezogen werden. Eine einzelne Person kann den ersten Entwurf anlegen, sollte wichtige Entscheidungen aber mit den beteiligten Rollen abstimmen.

Wann kommen Farben und Bilder hinzu?

Diese Ausarbeitung beginnt, wenn Seitenstruktur, Prioritäten und zentrale Abläufe ausreichend geklärt sind. Der genaue Zeitpunkt hängt vom Projekt ab. Werden visuelle Entscheidungen zu früh festgelegt, können sie eine notwendige Änderung der Grundstruktur erschweren.

Ist ein Wireframe dasselbe wie ein Prototyp?

Nein. Ein Wireframe beschreibt vor allem Aufbau, Inhalte und Hierarchie. Ein Prototyp verbindet Ansichten und macht Interaktionen erlebbar. Ein Wireframe kann die Grundlage für einen Prototyp bilden, beide Begriffe bezeichnen jedoch unterschiedliche Arbeitsergebnisse.