Was ist ein Wireframe?
Ein Wireframe – wörtlich „Drahtgittermodell“ – ist eine vereinfachte Skizze einer Webseite. Es zeigt in Grautönen, wo Überschrift, Text, Bilder, Buttons und Navigation hingehören, verzichtet aber bewusst auf Farben, echte Inhalte und Gestaltung. Der Fokus liegt allein auf Struktur und Anordnung.
Der Vorteil dieser Reduktion: Alle Beteiligten diskutieren über den Aufbau, statt sich an der Farbe eines Buttons festzubeißen. Ein Wireframe ist das Bindeglied zwischen Konzept und Gestaltung und ein zentraler Schritt im UX-Design.
Low-Fidelity und High-Fidelity
Wireframes gibt es in verschiedenen Detailstufen. Ein „Low-Fidelity“-Wireframe ist eine grobe Skizze, oft mit Platzhaltern und Kästchen – ideal für erste Ideen. Ein „High-Fidelity“-Wireframe ist deutlich genauer, mit realistischen Abständen und Beschriftungen, und nähert sich bereits einem Mockup an.
Welche Stufe sinnvoll ist, hängt vom Projekt ab. Für ein schnelles Brainstorming reicht die grobe Variante; für die Abstimmung mit Kunden lohnt sich die genauere. Aus einem Wireframe entsteht später ein klickbarer Prototyp.
Warum Wireframes Zeit und Geld sparen
Änderungen an einem Wireframe sind in Minuten erledigt, weil noch nichts gestaltet oder programmiert wurde. Fällt erst im fertigen Design auf, dass die Struktur nicht trägt, wird die Korrektur teuer. Wireframes verlagern diese Entscheidungen an den Anfang, wo sie günstig sind.
Außerdem schaffen sie Klarheit: Der Kunde sieht früh, wie seine Landingpage aufgebaut sein wird, und kann gezielt Feedback geben. Missverständnisse werden vermieden, bevor sie sich durch das ganze Projekt ziehen.