Ein Prototyp ist eine klickbare Vorabversion einer Website oder Anwendung, mit der sich Abläufe und Interaktionen testen lassen, bevor die eigentliche Entwicklung beginnt. Anders als das statische Mockup simuliert der Prototyp echtes Verhalten: Menüs öffnen sich, Buttons führen zur nächsten Seite, Formularstrecken lassen sich durchspielen. So werden Bedienkonzepte früh überprüfbar — mit Testpersonen oder im Kundengespräch.
Was ist ein Prototyp?
Ein Prototyp ist eine klickbare Vorabversion einer Website oder Anwendung, mit der sich Abläufe und Interaktionen testen lassen, bevor die eigentliche Entwicklung beginnt. Anders als ein statisches Mockup simuliert der Prototyp echtes Verhalten: Menüs öffnen sich, Buttons führen zur nächsten Seite, ganze Formularstrecken lassen sich durchspielen. So werden Bedienkonzepte früh überprüfbar — mit Testpersonen oder im Kundengespräch.
In der Entwurfskette steht der Prototyp zwischen dem groben Wireframe, das nur Struktur und Anordnung zeigt, und der fertigen Umsetzung. Der Wikipedia-Artikel zum Prototyping in der Softwareentwicklung beschreibt ihn als vorläufiges, aber funktionsnahes Modell, an dem Anforderungen konkretisiert und Missverständnisse ausgeräumt werden.
Der Begriff umfasst dabei ein breites Spektrum: vom schnellen Papierentwurf über den einfachen Klick-Dummy bis zum detaillierten, fast fertig wirkenden interaktiven Modell. Allen gemeinsam ist der Zweck — eine Idee erlebbar zu machen, bevor sie teuer in Code gegossen wird.
Wie funktioniert Prototyping?
Prototypen entstehen meist in Design-Werkzeugen wie Figma: Die statischen Entwürfe der einzelnen Seiten werden mit Verknüpfungen versehen — ein Klick auf den Menüpunkt springt zum entsprechenden Seitenentwurf, ein Klick auf den Button zur Dankeseite. Das Ergebnis fühlt sich beim Durchklicken an wie eine echte Website, ohne dass eine Zeile Code geschrieben wurde. Der Figma-Leitfaden zum Prototyping zeigt, wie solche Verknüpfungen und Übergänge angelegt werden.
Der Detailgrad variiert. Ein einfacher Klick-Dummy verbindet wenige Screens, ein High-Fidelity-Prototyp simuliert auch Animationen, Eingabefelder und Zustandswechsel. Der Beitrag der Nielsen Norman Group zu Prototyp-Fidelity erklärt, dass niedrige Fidelity schneller und günstiger ist, während hohe Fidelity realistischeres Nutzerfeedback liefert. Welcher Grad sinnvoll ist, hängt von der Frage ab, die der Prototyp beantworten soll.
Faustregel: Grobe Navigationslogik braucht weniger Ausarbeitung als eine mehrstufige Formularstrecke. Für frühe Konzeptentscheidungen genügt oft ein Low-Fidelity-Prototyp, der bewusst unfertig aussieht, damit Tester über Struktur statt über Farben reden. Erst wenn es um Feinheiten der Bedienung geht, lohnt der Aufwand hoher Fidelity.
Warum sind Prototypen wichtig?
Bedienprobleme zeigen sich erst in der Interaktion: Ob eine Navigation verständlich ist, ob Nutzer den Weg zur Kontaktaufnahme finden, ob eine Formularstrecke abbricht — das lässt sich an statischen Bildern nur vermuten, am Prototyp aber beobachten. Tests mit wenigen Personen decken die gravierendsten Probleme der Usability meist schnell auf und verbessern die User Experience, bevor sie teuer im Code landen.
Wirtschaftlich ist der Prototyp eine Versicherung: Änderungen am klickbaren Entwurf kosten Stunden, Änderungen an der programmierten Website Tage bis Wochen. Bei komplexeren Projekten — etwa einem Mandanten-Onboarding, einem Rechner oder einer Buchungsstrecke — gehört ein Prototyp deshalb zum professionellen Vorgehen, bevor Entwicklungsbudget gebunden wird. Er ist eng verwandt mit der Idee des Minimum Viable Products, das ebenfalls früh Lernen ermöglicht.
Nicht zuletzt schafft der Prototyp eine gemeinsame Sprache zwischen Auftraggeber, Design und Entwicklung. Statt über abstrakte Beschreibungen zu diskutieren, klicken alle Beteiligten durch dieselbe Simulation und erkennen Missverständnisse sofort — ein Effekt, der spätere teure Korrekturschleifen vermeidet.
Prototypen in der Praxis
Für eine klassische Unternehmens- oder Kanzlei-Website genügt oft ein schlanker Prototyp der Kernstrecken: Startseite über Leistungsseite bis Kontakt. Er dient vor allem der Abstimmung mit dem Kunden, der die künftige Seite realistisch erleben kann, statt sich Abläufe vorstellen zu müssen. Bei einer Landingpage lässt sich so auch der Weg von der Anzeige bis zur Conversion im Conversion-Funnel durchspielen. Im Webdesign für Anwälte ist das besonders nützlich, weil Vertrauens- und Kontaktwege früh geprüft werden.
Wichtig ist die Erwartungssteuerung: Ein Prototyp ist eine Simulation — Formulare versenden nichts, Inhalte sind teils Platzhalter, Ladezeiten sagen nichts über die spätere Seite aus. Er beantwortet Fragen zu Struktur und Bedienung, nicht zu Technik und Performance. Für Letzteres dient eine Staging-Umgebung mit der echten Umsetzung.
In der Zusammenarbeit hat sich bewährt, Testszenarien vorzugeben: Statt „Klicken Sie mal herum“ bittet man Tester um konkrete Aufgaben wie „Finden Sie heraus, wie Sie einen Termin vereinbaren“. So werden echte Bedienpfade sichtbar, und die Rückmeldungen betreffen tatsächliche Nutzungssituationen statt reiner Geschmacksfragen.
Prototyp im Kontext von Design und Entwicklung
Der Prototyp ist ein Kernwerkzeug im Design Thinking, wo früh und iterativ getestet wird. Er verbindet die gestalterische Arbeit an User Interface und Informationsarchitektur mit dem, was Nutzer tatsächlich tun. Auch bei einem Redesign hilft er, neue Konzepte gegen das bestehende Verhalten zu testen, bevor die alte Seite abgelöst wird.
Abzugrenzen ist der Prototyp von benachbarten Begriffen: Ein Wireframe klärt Struktur, ein Mockup zeigt das visuelle Design, und erst der Prototyp macht beides erlebbar. Das Ryte-Wiki zum Prototyp fasst diese Abstufung zusammen. In agilen Prozessen ersetzt der Prototyp keine Umsetzung, verkürzt aber die Feedbackschleifen erheblich und sorgt dafür, dass das Responsive Design und die Bedienlogik vor der Programmierung stimmen.
Typische Fehler beim Prototyping
Ein verbreiteter Fehler ist, zu viel Aufwand in einen zu detaillierten Prototyp zu stecken, bevor die grundlegende Struktur steht. Wer früh an Farben und Feinheiten feilt, verliert Zeit, wenn sich das Konzept noch ändert. Umgekehrt schadet es, den Prototyp so unfertig zu lassen, dass Tester die Aufgabe nicht ernst nehmen.
Ein zweiter Fehler ist die fehlende Erwartungssteuerung gegenüber Kunden: Ein hochauflösender Prototyp wirkt wie eine fertige Website, ist es aber nicht. Ohne klare Kommunikation entstehen falsche Vorstellungen über den Projektstand. Schließlich wird das Testen selbst oft ausgelassen — dann bleibt der Prototyp ein hübsches Abstimmungsobjekt, ohne sein eigentliches Ziel zu erfüllen: echte Bedienprobleme aufzudecken.