Wireframe
Ein Wireframe ist eine schematische Skizze oder Strukturzeichnung einer Benutzeroberfläche – oft der erste visuelle Entwurf einer Website, App oder Software. Wireframes zeigen Layout, Inhaltsbereiche, Navigation und grundlegende Funktionalität, jedoch ohne Design-Details wie Farben, Bilder oder Typografie.
Sie dienen als Planungs- und Kommunikationswerkzeug zwischen Designerinnen und Designern, Entwicklerinnen und Entwicklern, Kundinnen und Kunden und Projektbeteiligten. Wireframes helfen dabei, Inhalte sinnvoll anzuordnen und Usability-Fragen frühzeitig zu klären, bevor die Gestaltung beginnt.
Beispiel
Eine UX-Designerin erstellt für ein Online-Portal einen Wireframe der Startseite: Er zeigt, wo Logo, Menü, Suchfeld, Hauptinhalt und Footer platziert werden sollen. Statt Bildern verwendet sie Platzhalter („X“), statt realem Text „Lorem Ipsum“. Der Wireframe wird im Team besprochen und angepasst. Erst danach folgt das visuelle UI-Design.
Formen von Wireframes
- Low-Fidelity-Wireframe
grob, skizzenhaft, oft auf Papier oder Whiteboard
- Mid-Fidelity-Wireframe
digital, mit klarer Struktur, aber ohne Farben
- High-Fidelity-Wireframe
näher am finalen Design, jedoch noch ohne Interaktion
Tools zur Erstellung
Figma, Adobe XD, Balsamiq, Sketch, Axure, Whimsical
Vorteile
- Frühzeitige Abstimmung mit Kund:innen & Teams
- Fokus auf Funktion & Struktur, ohne sich in Designfragen zu verlieren
- Geringer Aufwand für Änderungen im Vergleich zu fertigen Layouts
- Grundlage für Prototyping und Usability-Tests
Ein Wireframe ist der Bauplan für digitale Oberflächen. Er ist unverzichtbar für nutzerzentriertes Design.
