Wireframe

Definition: Ein Wireframe (englisch für „Drahtrahmen") ist eine schematische, meist schwarz-weisse visuelle Darstellung des Layouts und der Struktur einer Webseite, App-Ansicht oder eines digitalen Produkts — ohne ausgearbeitete visuelle Designelemente wie Farben, Bilder oder Schriftgestaltung. Wireframes zeigen die Anordnung von Inhaltsblöcken, Navigationselementen, Formularen und Funktionsbereichen und definieren die informationsarchitektonische Grundstruktur. Sie sind das zentrale Kommunikationsmittel zwischen UX-Designern, Produktmanagern, Stakeholdern und Entwicklern in der Konzeptionsphase eines digitalen Produkts und ermöglichen strukturelle Diskussionen und Iterationen, bevor Aufwand in visuelles Design oder Entwicklung investiert wird.

Erläuterung

Die Geschichte des Wireframings als Methode ist eng mit dem Aufstieg der nutzerzentrierten Softwareentwicklung in den 1990er Jahren verbunden. Bill Moggridge (1943–2012), Mitgründer der Designagentur IDEO (Palo Alto, Kalifornien, gegründet 1991) und Pionier des Interaction Designs, beschrieb in „Designing Interactions" (MIT Press, Cambridge, Massachusetts, 2007) die frühen Skizzen- und Schema-Techniken, die Designteams nutzten, um Bildschirmstrukturen zu planen, lange bevor Prototyping-Tools existierten. Jesse James Garrett, Informationsarchitekt und Mitgründer von Adaptive Path (San Francisco, 2001), systematisierte in „The Elements of User Experience" (New Riders, Berkeley, Kalifornien, 2002) das Konzept der Strukturebene — genau jener Designphase, in der Wireframes entstehen. Er unterschied explizit zwischen der konzeptuellen Ebene (was das Produkt tut), der Strukturebene (wie es organisiert ist) und der Oberflächenebene (wie es aussieht). Wireframes sind primär Artefakte der Strukturebene. Steve Krug, UX-Autor und Berater, beschrieb in „Don't Make Me Think" (New Riders, Berkeley, Kalifornien, 2000, 3. Auflage 2014) anschaulich, wie frühe strukturelle Skizzen Usability-Probleme aufdecken können, die im späteren visuellen Design kaum noch sichtbar sind. Forschungen des Nielsen Norman Group-Teams (Fremont, Kalifornien, gegründet 1998 von Jakob Nielsen und Don Norman) zeigen, dass Usability-Tests mit Low-Fidelity-Wireframes ähnlich viele kritische Usability-Probleme aufdecken wie Tests mit fertigen Prototypen — bei einem Bruchteil des Aufwands. Die Unterscheidung zwischen Low- und High-Fidelity-Wireframes wurde in der UX-Community insbesondere durch die Veröffentlichungen von Todd Zaki Warfel, Autor von „Prototyping: A Practitioner's Guide" (Rosenfeld Media, Brooklyn, New York, 2009), geprägt und standardisiert. Heute werden Wireframes hauptsächlich in spezialisierten Tools erstellt, wobei Figma (Figma Inc., San Francisco, gegründet 2012, Börsengang angekündigt 2024) zum dominanten Werkzeug für den gesamten UX-Prozess — von Wireframes bis zu fertigen Designs — geworden ist.

Fidelity-Stufen von Wireframes

Low-Fidelity (Lo-Fi) Wireframes: Grobe, skizzenhafte Darstellungen — oft per Hand oder mit einfachen Rechtecken und Platzhaltern in Tools wie Balsamiq (Balsamiq Studios, gegründet 2008 in Sacramento, Kalifornien) erstellt. Lo-Fi-Wireframes betonen Struktur und Informationshierarchie, nicht Details. Sie sind schnell zu erstellen (oft in Minuten bis wenigen Stunden), fördern offenes Feedback von Stakeholdern (da der „unfertiger" Look signalisiert, dass Änderungen willkommen sind) und eignen sich für frühe Explorationsphasen und Stakeholder-Workshops. Typische Elemente: graue Boxen für Bilder, Linien für Text, X-Markierungen für Bild-Platzhalter.
Mid-Fidelity (Mid-Fi) Wireframes: Detailliertere Darstellungen mit realistischeren Proportionen, konkreten Navigationselementen, Button-Labelling und echten (nicht Placeholder-)Texten für zentrale Bereiche. Mid-Fi-Wireframes werden typisch in Figma, Sketch (Sketch BV, gegründet 2010, Amsterdam) oder Adobe XD (Adobe Inc., erstmals 2016 veröffentlicht) erstellt. Sie erlauben konkretere Diskussionen über Interaktionspfade und Informationsarchitektur und sind Basis für erste Usability-Tests.
High-Fidelity (Hi-Fi) Wireframes: Detaillierte, pixelgenaue Darstellungen mit exakten Abständen, Typografie, Icons und manchmal bereits Farben — aber noch ohne endgültiges visuelles Branding. Hi-Fi-Wireframes nähern sich Mockups an und werden genutzt, wenn strukturelle Fragen geklärt sind und Entwickler eine präzise Vorlage für die Implementierung benötigen. Der Übergang zu Mockups und interaktiven Prototypen ist auf dieser Ebene fliessend.
Annotierte Wireframes: Wireframes ergänzt um schriftliche Erläuterungen (Annotationen) zu Interaktionen, Zustandsübergängen, Inhaltsregeln und technischen Anforderungen. Annotationen sind entscheidend, damit Entwickler die Designabsicht korrekt umsetzen — z.B. „Button ist deaktiviert, solange nicht alle Pflichtfelder ausgefüllt sind" oder „Dropdown lädt Optionen via API-Aufruf". Annotationen können als Sidebar in Figma oder als separates Spezifikationsdokument (in Confluence, Notion oder ähnlichen Tools) geführt werden.

Wireframe-Tools und Workflows

Figma: Das seit 2016 dominierende browserbasierte Designtool, das Wireframing, Mockups, Prototyping und Design-Handoff in einer Plattform vereint. Figma-Komponenten (Components) und Auto-Layout ermöglichen die schnelle Erstellung wiederverwendbarer Wireframe-Elemente. Plugins wie „Wireframe" oder UI-Kit-Bibliotheken (z.B. Material Design 3 Kit, Ant Design) beschleunigen den Prozess erheblich. Figma unterstützt kollaboratives Arbeiten in Echtzeit.
Balsamiq: Speziell für Lo-Fi-Wireframing konzipiertes Tool mit einem bewusst skizzenhaften, hand-drawn Look. Balsamiq ist einfacher zu erlernen als Figma und erzeugt durch seinen Stil automatisch ein „work-in-progress"-Signal, das inhibitorisches Feedback auf Details verhindert. Geeignet für frühe Explorations- und Stakeholder-Workshops.
Axure RP: Mächtiges Wireframing- und Prototyping-Tool (Axure Software Solutions, gegründet 2002, San Diego), das komplexe bedingte Logik, dynamische Inhalte und Datenvariablen unterstützt. Besonders geeignet für komplexe Enterprise-Applikationen, in denen interaktive High-Fidelity-Prototypen mit realitätsnahem Verhalten benötigt werden.
Papier und Whiteboard: Trotz digitaler Alternativen bleibt das Skizzieren per Hand für die allererste Explorationsphase wertvoll: keine Toolbarriere, extrem schnell, ideal für Ideation-Workshops und Design Sprints (Jake Knapp, Sprint: How to Solve Big Problems, Simon & Schuster, New York, 2016). Papier-Wireframes können fotografiert und in digitale Tools importiert werden.

Wireframes im UX-Prozess

Einbettung in den Design-Prozess: Wireframes entstehen typischerweise nach der Nutzerforschung (User Research, Personas, Journey Maps) und der Informationsarchitektur (Sitemap, Card Sorting) und vor dem visuellen Design (Mockups) und der Prototypenentwicklung. Sie bilden die Brücke zwischen konzeptuellen Anforderungen und konkreten Designentscheidungen. In agilen Teams werden Wireframes oft iterativ entwickelt: Lo-Fi-Wireframes in Sprints, gefolgt von Mid-Fi-Wireframes nach Feedback.
Usability-Tests mit Wireframes: Schon Lo-Fi-Wireframes können für qualitative Usability-Tests genutzt werden, bei denen Nutzer reale Aufgaben mit den Wireframes durchführen. Krug und die Nielsen Norman Group empfehlen, mindestens 5 Nutzer pro Testrunde zu testen, um die häufigsten Usability-Probleme zu identifizieren. Wireframe-Tests fokussieren auf strukturelle und navigatorische Probleme, nicht auf visuelle Präferenzen.
Stakeholder-Kommunikation: Wireframes sind wirksame Kommunikationsmittel gegenüber Stakeholdern, Kunden und Entwicklern, weil sie Struktur und Funktion ohne visuellen „Noise" zeigen. Wichtig ist es, den Lo-Fi-Charakter explizit zu kommunizieren, um Feedback auf strukturelle Fragen zu lenken und premature Designkritik zu vermeiden. Präsentationskontext und Framing bestimmen massgeblich, welche Art von Feedback man erhält.
Handoff an Entwicklung: Hi-Fi-Wireframes und Mockups werden als Design-Handoff an Entwicklungsteams übergeben, heute meist via Figma Dev Mode (seit 2023) oder Zeplin (Zeplin Inc., gegründet 2015, San Francisco, von Figma 2024 übernommen). Annotationen zu Interaktionen, Responsive-Verhalten und Edge Cases sind für einen reibungslosen Handoff essenziell.

Praxistipp: Beginnen Sie jedes neue Screen-Design mit einem 15-minütigen Lo-Fi-Wireframing-Sketch auf Papier oder in Balsamiq — bevor Sie Figma öffnen. Diese Phase zwingt zur Klärung der wirklich wichtigen Fragen: Was ist der primäre Nutzerfluss? Was ist das wichtigste Element auf dieser Seite? Welche Inhalte sind essenziell, welche optional? Nutzen Sie dann echte (keine Lorem-ipsum-)Texte bereits im Wireframe: Zu kurze Platzhalter verschleiern häufig kritische Layoutprobleme, die bei realen Texten auftreten. Annotieren Sie jedes Wireframe mit mindestens einem Satz zur Nutzerabsicht dieser Seite — das schärft den Fokus und macht Wireframes deutlich nützlicher für Stakeholder-Diskussionen.