Wenn du für dein Start-up eine App oder Website entwickelst, wirst du früher oder später ein Mockup erstellen, einen Prototyp testen oder ein Wireframe skizzieren. Die drei Begriffe werden oft durcheinandergeworfen, beschreiben aber unterschiedliche Stufen im Designprozess. Wer sie sauber trennt, spart Zeit in Abstimmungen und vermeidet teure Fehlentwicklungen.
In diesem Artikel erfährst du, was Wireframes, Mockups und Prototypen sind, wie sie sich unterscheiden und in welcher Reihenfolge du sie sinnvoll einsetzt. Außerdem zeigen wir dir, wie du Schritt für Schritt ein Mockup erstellen kannst und welche Werkzeuge dafür infrage kommen.
Wireframe, Mockup, Prototyp: Der Überblick
Vereinfacht gesagt steigen Detailgrad und Aufwand von Stufe zu Stufe: Das Wireframe zeigt die Struktur, das Mockup das Aussehen und der Prototyp das Verhalten eines Produkts. In der Praxis sind die Grenzen fließend, und nicht jedes Projekt braucht alle drei Stufen.
| Merkmal | Wireframe | Mockup | Prototyp |
|---|---|---|---|
| Zweck | Struktur und Inhaltsanordnung | visuelles Erscheinungsbild | Interaktion und Abläufe testen |
| Detailgrad | niedrig, meist Graustufen | hoch, mit Farben, Schriften, Bildern | niedrig bis hoch |
| Interaktiv | nein | in der Regel nein | ja, klickbar oder simuliert |
| Typische Phase | frühe Konzeption | Gestaltung | Test vor der Entwicklung |
| Aufwand | gering | mittel | mittel bis hoch |
Was sind Wireframes?
Wireframes sind schematische Darstellungen einer Benutzeroberfläche. Sie zeigen, wo Navigation, Überschriften, Texte, Bilder und Schaltflächen platziert werden, verzichten aber bewusst auf Farben, Schriften und echte Grafiken. Oft reichen Rechtecke, Linien und Platzhaltertext.
Wireframes eignen sich für die frühe Konzeptphase. Sie helfen, die Informationsarchitektur zu klären: Welche Seiten gibt es, welche Inhalte stehen wo, wie bewegen sich Nutzer durch das Produkt? Weil sie schnell entstehen und leicht geändert werden können, lassen sich mehrere Varianten vergleichen, bevor Zeit in die Gestaltung fließt.
Was sind Mockups?
Ein Mockup ist eine statische, visuell ausgearbeitete Darstellung der Benutzeroberfläche. Es zeigt, wie das fertige Produkt aussehen soll, mit Farben, Typografie, Icons und Bildern. Interaktionen sind meist nicht hinterlegt. Eine Einführung, was ein Mockup ist, bietet zum Beispiel das Whiteboard-Tool Miro, das dafür auch Vorlagen bereitstellt.
Mockups sind besonders nützlich, um Designentscheidungen mit Gründungsteam, Investoren oder Kunden abzustimmen. Sie bilden außerdem eine klare Vorlage für die Entwicklung. Der Begriff wird auch außerhalb des UI-Designs genutzt, etwa für Produktdarstellungen, bei denen ein Logo auf eine Verpackung oder ein T-Shirt montiert wird.
Mockup erstellen: Schritt für Schritt
So kannst du ein Mockup erstellen, das in Abstimmungen wirklich weiterhilft:
- Ziel klären: Wofür brauchst du das Mockup, zum Beispiel für einen Investorenpitch, für Kundenfeedback oder als Vorlage für die Entwicklung?
- Wireframe als Basis nutzen: Übernimm die abgestimmte Struktur, statt bei null anzufangen.
- Gestaltungsregeln festlegen: Definiere Farben, Schriften, Abstände und Komponenten. Hast du bereits ein Corporate Design, greife darauf zurück.
- Echte Inhalte verwenden: Realistische Texte und Bilder zeigen früh, ob Layouts funktionieren.
- Zentrale Bildschirme gestalten: Konzentriere dich auf die wichtigsten Seiten, etwa Startseite, Produktansicht und Checkout.
- Feedback einholen: Zeige das Mockup Testpersonen und dem Team und überarbeite es gezielt.
Wer zum ersten Mal ein Mockup erstellen will, sollte mit wenigen Bildschirmen beginnen und erst nach dem Feedback weitere Ansichten ausarbeiten.
Werkzeuge im Überblick
Für UI-Mockups werden häufig Figma, Sketch, Adobe XD (das Adobe nicht mehr aktiv weiterentwickelt), Penpot als quelloffene Alternative oder Whiteboard-Tools wie Miro genutzt. Canva und Photoshop eignen sich eher für Produkt-Mockups, etwa wenn du ein Logo auf Geschäftsausstattung oder Verpackungen darstellen willst. Viele Anbieter haben kostenlose Einstiegstarife; die Konditionen ändern sich aber regelmäßig, daher lohnt sich ein aktueller Blick auf die Preisseiten.
Was sind Prototypen?
Ein Prototyp macht ein Design erlebbar. Nutzer können sich durch Bildschirme klicken, Formulare ausprobieren oder Abläufe durchspielen. Die Nielsen Norman Group beschreibt einen Prototyp als Hypothese für eine Designlösung, die du am besten testest, indem du Nutzern bei der Bedienung zusiehst.
Prototypen gibt es in unterschiedlicher Wiedergabetreue (Fidelity). Low-Fidelity-Prototypen bestehen etwa aus Papierskizzen oder verknüpften Wireframes. Sie sind schnell gebaut, leicht änderbar, und Testpersonen äußern eher Kritik. High-Fidelity-Prototypen sehen aus wie das fertige Produkt und eignen sich, um Abläufe und visuelle Details realistisch zu prüfen, brauchen aber mehr Vorbereitung.
Für Hardware-Start-ups sieht die Prototyping-Phase anders aus, weil zusätzlich Elektronik und Gehäuse getestet werden. Mehr dazu liest du im Beitrag Von der Idee zum IoT-Prototypen.
Prototypen richtig testen
Ein Prototyp entfaltet seinen Nutzen erst im Test. Formuliere vorab konkrete Aufgaben, etwa „Buche einen Termin für nächsten Dienstag“, und beobachte, wo Testpersonen zögern oder Fehler machen. Schon wenige Tests mit Personen aus deiner Zielgruppe zeigen häufig die größten Schwachstellen. Halte die Ergebnisse kurz schriftlich fest, priorisiere die Probleme nach Häufigkeit und Schwere und überarbeite den Prototyp, bevor du erneut testest.
Wichtig ist, während des Tests nicht zu erklären oder zu helfen. Bitte die Teilnehmenden stattdessen, laut zu denken. So erfährst du, wie sie die Oberfläche verstehen, und nicht, wie du sie gemeint hast. Pilotiere den Test außerdem einmal im Team, damit technische Fehler im Prototyp die eigentlichen Sitzungen nicht stören.
Wann du welches Werkzeug einsetzt
Ein typischer Ablauf in einem jungen Produktteam sieht so aus:
- Ideenphase: Skizzen und Wireframes klären Struktur und Nutzerfluss.
- Gestaltungsphase: Das Mockup legt das visuelle Erscheinungsbild fest und dient als Grundlage für die Abstimmung mit Stakeholdern.
- Testphase: Ein klickbarer Prototyp zeigt, ob Nutzer ihre Aufgaben lösen können.
- Entwicklung: Mockups und Prototyp dienen als Vorlage für das Entwicklerteam.
Je nach Budget und Zeitdruck kannst du Stufen zusammenlegen. Viele Teams arbeiten direkt in einem Tool, in dem aus dem Wireframe schrittweise ein Mockup und schließlich ein klickbarer Prototyp wird. Wichtig ist, Nutzerfeedback einzuholen, bevor die eigentliche Programmierung beginnt, denn Änderungen sind dann deutlich günstiger.
Praxisbeispiel: Eine Buchungs-App für Coaches
Ein zweiköpfiges Gründungsteam plant eine App, über die Coaches Termine verkaufen. Zuerst entstehen auf Papier und danach digital Wireframes für Startseite, Terminauswahl und Bezahlung. Nach einem kurzen Test mit drei Coaches wird die Terminauswahl vereinfacht.
Anschließend gestaltet eine Freelancerin die drei wichtigsten Bildschirme als Mockup in den Markenfarben und Schriften des Start-ups. Daraus entsteht ein klickbarer Prototyp, mit dem sie fünf potenzielle Kunden testen. Erst danach beauftragen sie die Entwicklung. Das Ergebnis: weniger Nacharbeit, weil die wichtigsten Probleme schon vor der ersten Codezeile sichtbar wurden. Ein klares Corporate Design hilft in dieser Phase, Entscheidungen schneller zu treffen.
Typische Fehler vermeiden
- Zu früh zu detailliert: Wer ein Mockup erstellen lässt, bevor die Struktur steht, diskutiert über Farben statt über Abläufe.
- Kein Nutzertest: Ohne Tests bleibt das Design eine Annahme.
- Unklare Begriffe im Team: Legt fest, was ihr unter Mockup und Prototyp versteht, damit Erwartungen übereinstimmen.
- Fehlende Verbindung zum Nutzenversprechen: Das Design sollte das zentrale Alleinstellungsmerkmal deines Produkts sichtbar machen.
Häufige Fragen
Wie erstelle ich ein Mockup?
Lege zuerst Ziel und Struktur fest, idealerweise mit einem Wireframe. Gestalte dann in einem Designtool die wichtigsten Bildschirme mit Farben, Schriften und echten Inhalten und hole Feedback ein.
Kann ich ein Mockup kostenlos erstellen?
Ja. Mehrere Designtools bieten kostenlose Tarife mit eingeschränktem Funktionsumfang, und Penpot ist quelloffen. Für größere Teams oder mehr Projekte fallen meist monatliche Gebühren an.
Was ist der Unterschied zwischen Wireframe und Prototyp?
Ein Wireframe zeigt die Struktur einer Oberfläche und ist statisch. Ein Prototyp ist interaktiv und dient dazu, Abläufe mit Nutzern zu testen. Ein Prototyp kann allerdings auf Wireframes aufbauen.
Braucht jedes Projekt alle drei Stufen?
Nein. Bei kleinen Projekten reicht oft ein Wireframe und ein klickbarer Prototyp. Bei Produkten mit hohem Designanspruch oder vielen Beteiligten lohnen sich alle drei Stufen.
Fazit
Wireframes, Mockups und Prototypen erfüllen unterschiedliche Aufgaben: Struktur klären, Aussehen festlegen und Verhalten testen. Wer ein Mockup erstellen will, sollte deshalb auf einem abgestimmten Wireframe aufbauen und das Ergebnis möglichst früh mit echten Nutzern prüfen. So investierst du dein Entwicklungsbudget in ein Produkt, das bereits gegen die wichtigsten Annahmen getestet ist.
