Ein Wireframe ist eine vereinfachte Layoutskizze, die die Struktur ohne visuelle Gestaltung aufzeigt. Keine Farben, keine Fotos, keine ausgearbeitete Typografie. Nur Kästchen, Linien und Platzhaltertext. Es geht darum, die Anordnung der Elemente festzulegen, bevor man sich für das Aussehen entscheidet. Wireframes beantworten Fragen zu Hierarchie, Navigation und Inhaltsfluss. Sie sind kostengünstig zu erstellen und leicht anzupassen.

Designer erstellen Wireframes per Hand, in Tools wie Figma oder Sketch oder mit speziellen Apps. Low-Fidelity-Wireframes bestehen aus groben Kästchen und skizzierten Beschriftungen. High-Fidelity-Wireframes enthalten echte Inhalte und präzisere Abstände, verzichten aber weiterhin auf Farben und Bilder. Teams nutzen Wireframes, um die Beteiligten frühzeitig einzubinden. Wenn ein Kunde sich weigert, einen Button in einem Wireframe zu verschieben, erspart das allen Beteiligten die Mühe, einen fertigen Bildschirm später neu zu erstellen.

Was zeigen Wireframes?

• Anordnung der wichtigsten Seitenabschnitte.
• Navigationsstruktur und Menüpunkte.
• Inhaltshierarchie und Gruppierung.
• Interaktive Elemente wie Schaltflächen und Formulare.

Wireframes sind keine Baupläne. Sie dienen als Kommunikationsinstrumente. Ziel ist es, sich auf die Struktur zu einigen, bevor sich jemand mit der Oberfläche befasst.