Was ist ein Wireframe? Beispiele, Tools und Unterschied zu Mockups

Was ist ein Wireframe?

Ein Wireframe ist das Bindeglied zwischen einer Idee und einem funktionierenden Produkt. Wörtlich übersetzt handelt es sich um ein „Drahtgittermodell“, also eine einfache Skizze der Oberfläche einer Software, App oder Website. Ziel ist es, die Nutzerführung und Struktur eines digitalen Produkts festzulegen. Ein Wireframe ist vergleichbar mit dem Grundriss eines Hauses. Er gibt die Struktur vor, Details wie Dekoration und die Inneneinrichtung erfolgen später. 

‍

Statt über Geschmack oder Design zu diskutieren, lenkt ein Wireframe den Fokus auf die User Experience, Logik und Verständlichkeit. Elemente wie Bilder, Texte, Formulare und Menüs werden durch standardisierte Platzhalter abgebildet. Damit lässt sich eine niedrigschwellige Diskussionsgrundlage für Abstimmungen mit Stakeholdern schaffen. So lassen sich Änderungen am Wireframe innerhalb von Minuten vornehmen, während sie am fertigen Produkt meist Tage bis Wochen dauern. 

Verschiedene Arten von Low- bis High-Fidelity

Je nach Detailgrad lassen sich verschiedene Arten von Wireframes unterscheiden. Product Designer sprechen dabei von Fidelity, was auf Deutsch so viel wie Detailtreue bedeutet: 

• Low-Fidelity-Wireframes (Lo-Fi): Dabei handelt es sich um eine sehr grobe Skizze der Seitenstruktur, oft auch handgezeichnet. Sie dient der frühen Ideensammlung bei Brainstormings. 
• Mid-Fidelity-Wireframes (Mid-Fi): Diese umfassen eine klare Struktur mit realistischen Platzhaltern für Bilder und Texte. Meist besitzen sie bereits klare Abstände und klickbare Navigationen. Sie kommen für die Abstimmung mit Stakeholdern oder für das Briefing von Entwicklern zum Einsatz. ‍
• High-Fidelity-Wireframes (Hi-Fi): Hier ist die visuelle Oberfläche bereits sehr nahe am finalen User Interface. Dabei sind bereits finale Bilder und Texte enthalten. Auch die Typografie, Abstände und Farben entsprechen denen des fertigen Produkts. High-Fi-Wireframes eignen sich zur finalen Abstimmung, für Usability Tests oder zur Übergabe an das Entwicklerteam.

Unterschied: Wireframe vs. Mockup

Wireframes bilden die Struktur eines digitalen Produkts ab, Mockups hingegen konzentrieren sich auf das Design. Zu einem professionellen Designprozess gehört dabei beides. Mockups setzen dort an, wo Wireframes enden. So übersetzen sie die zuvor definierte Struktur in ein konkretes visuelles Design und machen sichtbar, wie sich das Produkt später anfühlen soll. 

‍

Wireframes geben also die Struktur, Aufbau und Navigation vor. Mockups füllen diese Struktur mit Typografie, Farbwelt, Icons und Branding-Elementen. Entscheidend ist hier weniger das Medium der Umsetzung, sondern der Zweck: Wireframes dienen dazu, die Struktur, Navigation und den Nutzerfluss eines Produkts zu diskutieren. Mockups hingegen legen den Fokus auf das Look-and-Feel, Emotionen und User Interface Design. 

‍

Wireframing-Tools

Das Erstellen von Wireframes gehört zu den zentralen Aufgaben im Product Design. Über die letzten Jahre hat sich dabei eine ganze Reihe an Tools etabliert:

• Figma: Was die Entwicklung von Wireframes, Mockups und Prototypen angeht, hat sich Figma als Branchenstandard durchgesetzt. Es handelt sich um ein cloud-basiertes Tool, mit dem Nutzer kollaborativ in Echtzeit an Designs arbeiten können. 
• Adobe XD: Es ist Teil der Adobe-Suite und ermöglicht das Erstellen von Wireframes, Mockups und interaktive Prototypen für Websites, Apps und Software. 
• Balsamiq: Anders als Figma und Adobe XD ist Balsamiq ein Tool, das sich auf Low-Fidelity-Wireframes spezialisiert hat. Es eignet sich vor allem für Brainstorming und frühe Konzepte. 
• Miro: Es handelt sich um ein Whiteboard-Tool für Teams. Es umfasst dabei viele UI-Element-Templates, womit es sich vor allem für UX-Workshops und erste Skizzen eignet. ‍
• FigJam: FigJam ist ein Tool von Figma, das sich speziell auf Brainstorming, kollaborative Workshops und frühe UX-Ideen konzentriert. Damit eignet es sich vor allem für Brainstormings, Workshops und frühe Konzepte.