Wireframe

Ein Wireframe klärt die Struktur, bevor jemand über Farben diskutiert. Wer früh sieht, wo der Kontaktbutton sitzt oder ob die Preise oben oder unten stehen, trifft diese Entscheidung einmal und nicht im fertigen Design noch einmal. Das spart Abstimmungsrunden und Geld.

Außerdem zwingt ein Wireframe dazu, über Inhalte nachzudenken: Was soll ein Besucher auf dieser Seite tun? Was muss er dafür wissen? Fehlt ein Text, fällt das hier auf, lange vor dem Launch.

• Wireframe: Aufbau und Inhaltsreihenfolge, schwarz-weiß, ohne Gestaltung.
• Mockup: das gestaltete Bild der Seite mit Farben, Schriften und Bildern. Es sieht fertig aus, ist aber nicht anklickbar.
• Prototyp oder Klickdummy: eine anklickbare Vorschau. Man kann sich durch die Seiten bewegen, als wäre die Website schon da (Prototyping).

Die drei bauen aufeinander auf. Nicht jedes Projekt braucht alle drei Schritte. Bei einer kleinen Website reicht oft ein Wireframe für die Startseite, bevor es ins Design geht.

Früher auf Papier, heute meist in Programmen wie Figma. Man unterscheidet grob zwischen Low-Fidelity-Wireframes (schnelle Skizzen, nur Kästen) und High-Fidelity-Wireframes (genaue Abstände, echte Texte, aber noch ohne Gestaltung). Für Mobil und Desktop entstehen oft getrennte Wireframes, weil sich die Reihenfolge der Inhalte auf dem Smartphone ändert.

• Die Navigation: welche Menüpunkte es gibt und in welcher Reihenfolge.
• Die Reihenfolge der Inhalte von oben nach unten, also was ein Besucher zuerst sieht und was später kommt.
• Platzhalter für Bilder und Videos mit ungefährer Größe.
• Überschriften als echte Arbeitstitel, damit klar ist, worum es im Abschnitt geht.
• Buttons und Formulare mit ihrer Beschriftung, zum Beispiel „Termin anfragen“ statt „Button“.
• Hinweise, was beim Klick passiert, wenn das nicht offensichtlich ist.

Was nicht hineingehört: Farben, Schriftarten, Effekte. Die lenken in dieser Phase nur ab. Wer im Wireframe-Termin über das Blau des Buttons spricht, redet nicht mehr darüber, ob der Button an der richtigen Stelle sitzt.

Bei größeren Projekten planen wir die wichtigsten Seiten zuerst als Wireframe und gehen sie mit dir durch, bevor das Design entsteht (Screendesign).

Verwandte Begriffe: Mockup · Klickdummy · Responsive Webdesign