Prototyping im Webdesign
Wer eine neue Website in Auftrag gibt, kennt das Problem: Man bespricht das Konzept, nickt beim Meeting und ist dann überrascht, wenn das erste fertige Design nicht das ist, was man sich vorgestellt hat. Prototyping ist der Schritt im Webdesign-Prozess, der genau das verhindert.
Ein Prototyp ist ein interaktives Modell einer Website oder App, das zeigt, wie Navigation, Struktur und Funktionen zusammenwirken, bevor auch nur eine Zeile Code geschrieben wird. Er sieht aus wie eine echte Website, ist aber kein fertiges Produkt. Der Prototyp existiert, um Entscheidungen zu treffen, Feedback einzuholen und Probleme zu lösen, solange Änderungen noch einfach und günstig sind.
Was ein Prototyp ist und was nicht
Der Begriff wird in der Praxis manchmal unscharf verwendet, deshalb lohnt es sich, ihn klar abzugrenzen.
Ein ist das, was dem Prototypen vorausgeht: eine grobe Skizze der Seitenstruktur ohne Farben, Schriften oder Designelemente. Er zeigt, wo welche Inhalte stehen und wie die Seite aufgebaut ist. Ein Prototyp geht einen Schritt weiter: Er ist klickbar, navigierbar und vermittelt bereits ein Gefühl dafür, wie sich die Website in der Nutzung anfühlt.
Eine fertige Website ist kein Prototyp. Eine Figma-Datei mit statischen Screens auch nicht. Ein Prototyp entsteht, wenn diese Screens miteinander verknüpft werden und ein Nutzer durch sie hindurchklicken kann.
Low-Fidelity und High-Fidelity: Die zwei Stufen des Prototypings
In der Webdesign-Praxis unterscheidet man zwei Arten von Prototypen, die in unterschiedlichen Phasen des Projekts eingesetzt werden.
Low-Fidelity-Prototypen
Low-Fidelity bedeutet grobe Darstellung. Diese Prototypen zeigen die grundlegende Struktur und den Navigationsfluss, ohne visuelles Design. Farben, Typografie und Bilder spielen keine Rolle. Was zählt, ist: Welche Seiten gibt es? Wie kommt man von A nach B? Wo befindet sich der Hauptaufruf zur Aktion?
Low-Fidelity-Prototypen entstehen schnell und lassen sich schnell ändern. Sie eignen sich ideal für den frühen Dialog zwischen Agentur und Auftraggeber, weil beide Seiten noch nicht in ein konkretes Design investiert haben. Änderungen an diesem Punkt kosten kaum Zeit.
High-Fidelity-Prototypen
High-Fidelity-Prototypen sind dem fertigen Produkt sehr nahe. Sie enthalten das ausgearbeitete visuelle Design, echte Texte, Bilder und alle interaktiven Elemente. Wer damit interagiert, kann sich kaum noch vorstellen, dass dahinter keine echte Website steckt.
Diese Prototypen werden kurz vor der eigentlichen Entwicklung eingesetzt. Sie dienen als verbindliche Vorlage für die Programmierung und als Grundlage für Usability-Tests mit echten Nutzern.
Der Prototyping-Prozess im Webdesign
Prototyping ist kein einzelner Schritt, sondern ein Kreislauf aus Entwerfen, Testen und Verbessern. In der Praxis läuft er meist so ab:
Anforderungen klären: Bevor irgendetwas gezeichnet wird, werden Ziele, Zielgruppen und Inhalte der Website definiert. Was soll die Website leisten? Welche Nutzer kommen, und was suchen sie?
Wireframes erstellen: Die Agentur skizziert die Grundstruktur der wichtigsten Seiten: Startseite, Leistungsseiten, Kontakt, gegebenenfalls Shop. Diese Skizzen bilden die Basis für den ersten Prototyp.
Low-Fidelity-Prototyp bauen und abstimmen: Die Wireframes werden verknüpft und dem Auftraggeber zur Prüfung vorgelegt. Hier werden strukturelle Entscheidungen getroffen: Seitenanzahl, Navigation, Informationshierarchie.
High-Fidelity-Prototyp entwickeln: Das visuelle Design wird eingebaut. Farben, Schriften, Bilder und alle kommen hinzu. Der Prototyp sieht jetzt aus wie die fertige Website.
Usability-Tests durchführen: Echte Nutzer oder Testpersonen navigieren durch den Prototypen. Dabei wird beobachtet, wo sie zögern, was sie nicht finden und was intuitiv funktioniert. Die Erkenntnisse fließen direkt in Verbesserungen ein.
Übergabe an die Entwicklung: Erst wenn der Prototyp freigegeben ist, beginnt die technische Umsetzung. Die Entwickler haben damit eine klare, abgestimmte Vorlage.
Warum Prototyping für Auftraggeber so wichtig ist
Für viele, die eine Website beauftragen, ist Prototyping der wertvollste Teil des gesamten Prozesses. Nicht weil er technisch komplex wäre, sondern weil er Missverständnisse sichtbar macht, bevor sie teuer werden.
Ein Prototyp macht abstrakte Konzepte greifbar. Wer sich im Meeting schwer vorstellen kann, was „eine übersichtliche Navigation mit fünf Punkten“ bedeutet, versteht es sofort, wenn er selbst durch einen klickbaren Prototypen navigiert.
Änderungen an einem Prototypen kosten einen Bruchteil dessen, was Änderungen am fertigen Code kosten. Eine Seite umstrukturieren, einen Button an eine andere Stelle setzen, eine Unterseite hinzufügen: Im Prototypen sind das Minuten. In der fertigen Website können es Stunden oder Tage sein.
Und: Ein getesteter Prototyp reduziert das Risiko des Projekts erheblich. Man weiß, dass die Navigation funktioniert. Man hat gesehen, dass Nutzer die wichtigsten Aktionen finden. Man geht nicht mit einem Bauchgefühl in die Entwicklung, sondern mit einer validierten Grundlage.
Häufige Fehler beim Prototyping
Zu früh ins Detail gehen: Wer beim ersten Prototypen schon über Schriftschnitte und Farbabstufungen diskutiert, verliert den Blick für das Wesentliche. Low-Fidelity bedeutet bewusst grob.
Zu wenig testen: Ein Prototyp, der nur intern freigegeben wird, ohne echte Nutzer damit interagieren zu lassen, schöpft sein Potenzial nicht aus. Selbst ein kurzer Test mit drei bis fünf Personen aus der tatsächlichen Zielgruppe liefert wertvolle Hinweise.
Den Prototypen mit dem Endprodukt verwechseln: Ein Prototyp ist eine Arbeitshypothese, kein fertiges Design. Wenn man ihn als solches behandelt, fehlt die Bereitschaft, ihn grundlegend zu verändern, wenn Tests zeigen, dass etwas nicht funktioniert.
Kein Prototyping bei kleinen Projekten: Auch für eine Landingpage oder eine überschaubare Unternehmenswebsite lohnt sich ein einfacher Prototyp. Je klarer die Struktur vor der Entwicklung ist, desto reibungsloser verläuft die Umsetzung.
Prototyping und UX: Was beides verbindet
Prototyping ist ein zentrales Werkzeug der . Es geht immer um die Frage: Wie erlebt ein echter Mensch diese Website? Nicht wie sieht sie aus, sondern wie fühlt sie sich an, wie verständlich ist sie, wie leicht fällt es dem Nutzer, sein Ziel zu erreichen.
Gutes Prototyping denkt von Beginn an aus der Nutzerperspektive. Es fragt nicht, was die Agentur für elegant hält oder was der Auftraggeber schön findet, sondern was für denjenigen funktioniert, der die Website am Ende tatsächlich benutzt.
Wenn du für dein nächstes Webprojekt wissen möchtest, wie ein strukturierter Prozess mit Wireframes, Prototyp und Usability-Testing in der Praxis aussieht, erfährst du das bei unserer .
