Wireframes skizzieren

Bevor eine Seite gestaltet wird, lohnt sich ein Zwischenschritt, der viel Zeit und Geld spart: das Wireframe. Es zeigt, welche Inhalte auf einer Seite stehen, in welcher Reihenfolge und mit welchem Gewicht – ohne Farben, Bilder oder Schriften, die vom Wesentlichen ablenken. Wireframes machen Entscheidungen sichtbar, solange sie noch billig zu ändern sind. Ein Kasten lässt sich in Sekunden verschieben, eine fertig gestaltete und programmierte Seite nicht. Diese Lektion zeigt, wie Sie Wireframes skizzieren, worauf es bei der Anordnung ankommt und wie Sie sie für Abstimmungen im Team und mit Kunden einsetzen.

1. Detailstufen

Zwischen der ersten Idee und der fertigen Seite liegen mehrere Stufen, die sich im Detailgrad und im Aufwand unterscheiden:

Abb. 4.1Von der Skizze zum Prototyp

Für die meisten Projekte genügt es, mit Skizzen auf Papier zu beginnen, die wichtigsten Seiten als Wireframes auszuarbeiten und erst dann zu gestalten. Werkzeuge wie Figma, Balsamiq oder schlicht Stift und Papier reichen völlig aus. Entscheidend ist nicht das Werkzeug, sondern dass die Struktur geklärt ist, bevor über Farben gesprochen wird.

2. Die Reihenfolge einer Seite

Die wichtigste Entscheidung im Wireframe ist die Reihenfolge der Inhalte. Besucher lesen eine Seite nicht vollständig, sondern überfliegen sie von oben nach unten und entscheiden fortlaufend, ob sie weiterlesen. Deshalb steht oben, was die meisten Besucher zuerst wissen wollen, und die Seite beantwortet Fragen in der Reihenfolge, in der sie typischerweise entstehen. Ordnen Sie selbst eine Startseite an:

Eine bewährte Reihenfolge für viele Startseiten und Leistungsseiten lautet: Nutzenversprechen mit Handlungsknopf, ein früher Vertrauensbeleg, das Angebot im Überblick, Antworten auf typische Einwände wie Preis und Ablauf, und am Ende noch einmal eine klare Handlung. Neuigkeiten, Teamfotos und die Firmengeschichte sind wichtig, gehören aber selten nach ganz oben.

3. Zuerst das Handy

Wireframes sollten zuerst für das Handy entworfen werden. Der kleine Bildschirm zwingt zu klaren Entscheidungen: Es passt nur eine Spalte nebeneinander, und oben ist wenig Platz. Was dort nicht an erster Stelle steht, rutscht weit nach unten. Wer mit dem Handy beginnt, erkennt schnell, was wirklich wichtig ist, und kann die Seite für größere Bildschirme anschließend erweitern. Umgekehrt entstehen oft Seiten, die auf dem Rechner gut aussehen, auf dem Handy aber in eine endlos lange Liste zerfallen, bei der das Wichtigste unten versteckt ist.

4. Echte Inhalte statt Platzhalter

Ein häufiger Fehler ist, Wireframes mit Platzhaltertexten zu füllen. Dann bleibt verborgen, ob die Überschrift in zwei Zeilen passt, ob der Preis eine Erklärung braucht oder ob die drei Leistungskästen überhaupt gleich viel Inhalt haben. Schon im Wireframe sollten deshalb echte Überschriften, echte Preise und die wichtigsten Sätze stehen – nicht perfekt formuliert, aber realistisch. Die nächste Lektion vertieft diesen Gedanken. Beurteilen Sie typische Entscheidungen:

5. Wireframes besprechen

Wireframes entfalten ihren Wert im Gespräch. Klicken Sie sich durch einen bewährten Ablauf:

Gerade in Abstimmungen mit mehreren Beteiligten verhindern Wireframes lange Diskussionen über Geschmacksfragen. Weil keine Farben und Bilder zu sehen sind, konzentriert sich das Gespräch auf Inhalte und Abläufe. Und weil Änderungen schnell umgesetzt sind, fällt es leichter, Ideen auszuprobieren und wieder zu verwerfen.

6. Ein Beispiel

Ein Hotel an der Algarve plante eine neue Startseite. Im ersten Entwurf der Agentur stand oben ein großes Bild mit dem Schriftzug „Willkommen“, darunter die Geschichte des Hauses. Im Wireframe-Gespräch fragte die Rezeptionsleiterin, woher sie wissen solle, ob für ihre Reisedaten Zimmer frei sind. Die überarbeitete Reihenfolge: oben Nutzenversprechen mit Verfügbarkeitsabfrage, darunter aktuelle Gästebewertungen, dann Zimmertypen mit Preisen ab, Lage und Anreise, häufige Fragen und am Ende die Buchung. Die Geschichte des Hauses wanderte auf eine eigene Seite. Dieselben Inhalte, nur anders angeordnet – und nach dem Start stieg der Anteil der Besucher, die die Verfügbarkeit prüften, deutlich. Die Änderung hatte im Wireframe zehn Minuten gedauert.

7. Wireframes für Formulare und Abläufe

Wireframes sind nicht nur für einzelne Seiten nützlich, sondern besonders für Abläufe mit mehreren Schritten: eine Terminbuchung, eine Bestellung, eine Bewerbung. Hier lohnt es sich, jeden Schritt als eigenes Wireframe zu skizzieren und nebeneinanderzulegen. So wird sichtbar, wie viele Schritte es wirklich sind, welche Angaben an welcher Stelle abgefragt werden und wo sich Schritte zusammenlegen lassen. Häufig zeigt sich, dass ein Ablauf mit vier Seiten auf zwei schrumpfen kann, weil einige Angaben gar nicht nötig sind oder später erfragt werden können.

Für Formulare gelten einige bewährte Regeln, die schon im Wireframe berücksichtigt werden sollten: Beschriftungen stehen über den Feldern, nicht als verschwindender Platzhalter im Feld. Pflichtfelder sind klar gekennzeichnet, und es gibt so wenige wie möglich. Zusammengehörende Angaben stehen beieinander. Fehlermeldungen erscheinen direkt am betroffenen Feld und sagen, wie der Fehler behoben wird. Und der Absendeknopf beschreibt die Handlung – „Termin verbindlich buchen“ statt „Absenden“. Wer diese Punkte im Wireframe klärt, erspart sich spätere Korrekturen in Gestaltung und Programmierung.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.