Wireframe ist ein schematischer, meist schwarzweißer Entwurf der Struktur und des Layouts einer Website, App oder digitalen Oberfläche, der Inhaltsbereiche, Navigation und Funktionselemente grob darstellt – ohne finales Design, Farben oder Bilder – und als Planungsgrundlage für UX-Entscheidungen dient.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Seitenschema, Layout-Skizze, Blueprint, Lo-Fi Prototype, Screen Schematic, Page Layout Sketch
Was ist ein Wireframe?
Ein Wireframe zeigt das Skelett einer digitalen Oberfläche: Wo befindet sich die Navigation? Wie lang ist der Inhalt? Welche Elemente gibt es auf einer Seite und in welcher Reihenfolge? Bewusst auf Grautöne und einfache Boxen reduziert, lenkt der Wireframe die Aufmerksamkeit auf Struktur und Funktion – nicht auf Ästhetik. Es ist das erste greifbare Artefakt im UX-Designprozess.
Erklärung
Detaillierungsgrade von Wireframes:
Low-Fidelity (Lo-Fi): Grobe Skizzen, Handzeichnungen oder einfache Boxen. Schnell erstellt, leicht zu ändern. Ideal für frühe Konzeptphasen und interne Abstimmungen. Keine Verwirrung mit finalem Design.
Mid-Fidelity: Digitale Wireframes mit genaueren Proportionen, realistischerem Text (Platzhaltertext), grundlegenden UI-Elementen. Genutzt in Tools wie Figma oder Balsamiq.
High-Fidelity (Hi-Fi): Detailreiche, pixelgenaue Wireframes, die dem finalen Design nahe kommen, aber noch keine finalen Farben oder Bilder enthalten. Oft direkt in Figma oder Sketch als Basis für das visuelle Design.
Elemente eines Wireframes:
- Headerbereich: Logo, Navigation, Suche
- Hero / Hauptbereich: Primäre Inhalte, Call-to-Action
- Content-Bereiche: Text-Boxen, Bildplatzhalter (Kreuz oder X in Rechteck)
- Sidebar: Sekundäre Navigation, Filter, verwandte Inhalte
- Footer: Links, Rechtliches, Kontakt
- Interaktive Elemente: Buttons (als beschriftete Rechtecke), Formulare, Dropdowns
Annotationen: Wichtige Wireframes enthalten Erklärungstexte (Annotations), die Funktionen und Verhalten beschreiben – z. B. „Button öffnet Modal", „Carousel scrollt automatisch".
Wireframe vs. Prototype: Ein Wireframe ist statisch, ein Prototyp ist interaktiv – klickbar und navigierbar. In Figma lassen sich aus Wireframes durch „Connections" (Pfeile zwischen Frames) direkt klickbare Prototypen erstellen.
Beispiele
- Website-Relaunch: Vor dem Design-Brief wird die neue Seitenstruktur als Wireframe in Figma geplant – alle Seitentypen (Startseite, Kategoriepage, Detailseite, Kontakt) werden als Wireframe-Screens angelegt.
- App-Onboarding: Der Onboarding-Flow einer App (5 Schritte) wird als Wireframe-Sequenz mit Annotations für jeden Schritt entwickelt und mit dem Entwicklungsteam abgestimmt.
- E-Commerce Produktseite: Wireframe zeigt Bildbereich (oben), Produktname (H1), Preis, Varianten-Selector, Add-to-Cart-Button, Tabs für Beschreibung/Reviews – Grundlage für den UI-Designer.
- Responsive Wireframe: Für jede Breakpoint-Größe (Desktop, Tablet, Mobile) wird ein separates Wireframe erstellt, das zeigt, wie sich das Layout anpasst.
- Nutzertest mit Lo-Fi Wireframe: Papier-Wireframes werden mit Testnutzern in einer moderaten Nutzbarkeits-Session eingesetzt – Reaktionen auf Struktur werden notiert, bevor teure Design-Arbeit beginnt.
In der Praxis
Figma ist das führende Tool für digitale Wireframes – kostenlos verfügbar, kollaborativ, direkt in Prototypen umwandelbar. Balsamiq bietet ein bewusst „skizzenhaftes" Erscheinungsbild, das deutlich signalisiert: Dies ist kein finales Design. Adobe XD (End of Life 2024), Sketch (Mac only) und Axure (für komplexe Prototypen) sind weitere Optionen.
Auf Papier sind Wireframe-Templates (ausdruckbare Gerätekonturen) nützlich für schnelle Workshop-Sketches. Für Nutzerforschung-Workshops sind Papierprototypen oft besser als digitale Werkzeuge.
Vergleich & Abgrenzung
Wireframe → Mockup → Prototyp ist die typische Designprozesskette. Das Wireframe zeigt Struktur, das Mockup zeigt visuelles Design (Farben, Bilder, Typografie), der Prototyp ist interaktiv. Ein Moodboard zeigt visuellen Stil und Inspiration – kein strukturelles Planungstool. Ein Sitemap zeigt die Informationsarchitektur der gesamten Website als Diagramm – Vorstufe zum Wireframe.
Häufige Fragen (FAQ)
Muss ich als Designer jeden Wireframe selbst erstellen? In professionellen Teams erstellen UX-Designer Wireframes in Zusammenarbeit mit Projektmanagern, Entwicklern und manchmal direkt mit Kunden. In kleineren Agenturen oder als Freelancer übernimmt oft der UI-Designer beide Rollen.
Wie detailliert soll ein Wireframe sein? Das hängt vom Projektstand ab: In frühen Konzeptphasen sind grobe Lo-Fi-Wireframes schneller und effizienter. Je näher das Projekt an die Entwicklungsphase rückt, desto detaillierter sollten Wireframes sein, um Missverständnisse im Handoff zu vermeiden.
Verwandte Einträge
Weiterführend
- Garrett, J. J. (2011): The Elements of User Experience. 2. Aufl. New Riders.
- Brown, D. M. (2010): Communicating Design. New Riders.
- Online-Tool: Figma (kostenlos) – figma.com
