Wireframe

UX

Eine bewusst schlichte Skizze einer Seite, die Aufbau, Inhalte und Rangfolge zeigt – ohne Farben, Bilder oder Schriften. Sie lenkt die Diskussion dorthin, wo sie am Anfang hingehört: auf Struktur und Zweck.

Ein Wireframe besteht aus Kästen, Linien und Platzhaltern. Es beantwortet, was auf einer Seite steht, in welcher Reihenfolge und mit welchem Gewicht. Wo ist die Hauptaussage, wo die Handlungsaufforderung, was sieht man ohne Scrollen? Wie es aussieht, ist hier noch ausdrücklich kein Thema.

Die Schlichtheit ist Absicht. Zeigt man einem Auftraggeber einen fertigen Entwurf, spricht er über Farben. Zeigt man ihm ein Wireframe, spricht er über Inhalte – und genau diese Rückmeldung wird früh gebraucht. Änderungen kosten in dieser Phase Minuten.

Der größte Hebel liegt bei echten Inhalten. Ein Wireframe mit Blindtext prüft nur, ob Kästen nebeneinander passen. Eines mit den tatsächlichen Überschriften und Texten zeigt sofort, dass die Leistungsbeschreibung dreimal so lang ist wie gedacht – oder dass es zu einer geplanten Seite schlicht nichts zu sagen gibt.

Für mich sind Wireframes ein Werkzeug der Anforderungsklärung, nicht nur des Designs. Ich nutze sie im Workshop, zeichne vor den Augen der Beteiligten und lasse korrigieren. Nach einer Stunde liegt ein gemeinsames Bild auf dem Tisch, über das vorher wochenlang aneinander vorbeigeredet wurde.

Braucht man Wireframes für jede Seite?

Nein, für jeden Seitentyp: Startseite, Übersicht, Detailseite, Formular. Die wichtigsten Typen zusätzlich in der mobilen Fassung, weil sich dort die Rangfolge am deutlichsten zeigt.

Welches Werkzeug eignet sich für Wireframes?

Jedes, das schnell ist: Papier, Whiteboard oder ein Design-Werkzeug wie Figma. Entscheidend ist, dass niemand Hemmungen hat, das Ergebnis wieder zu verwerfen.

  • Wireframe
  • Struktur
  • Konzeption
  • Layout