Was ist Wireframe?
Wireframes sind grundlegende visuelle Darstellungen einer Webseite oder App, die die Struktur, das Layout und die Hierarchie der Inhalte zeigen - ohne Farben, Bilder oder finales Design. Sie sind wie ein Grundriss für ein Haus. Wireframes helfen, die Informationsarchitektur und Benutzerführung früh im Designprozess zu planen und abzustimmen. Es gibt verschiedene Detailstufen: Low-Fidelity Wireframes (einfache Skizzen), Mid-Fidelity (detaillierter mit Platzhaltern) und High-Fidelity (nah am finalen Design). Tools wie Figma, Balsamiq oder sogar Papier werden verwendet. Wireframes sparen Zeit und Kosten, da Änderungen in dieser Phase einfach sind.
Wichtige Punkte
- Fokus auf Struktur, nicht auf visuelles Design
- Low/Mid/High-Fidelity je nach Projektphase
- Frühe Abstimmung mit Stakeholdern möglich
- Änderungen in Wireframe-Phase sind kostengünstig
- Wireframe → Mockup → Prototyp → Entwicklung
- Tools: Figma, Balsamiq, Sketch, oder Papier
Praxisbeispiel
“Durch Wireframes konnten wir 3 verschiedene Layout-Varianten schnell mit dem Kunden testen, bevor wir ins Design gingen.”