Wie man ein Website-Mockup erstellt: Darauf ist zu achten

Aktualisiert am 12. Oktober 2026 von Nicolas Finet, CEO von Sortlist.

Neu sind ein Workflow für responsive und barrierefreie Mockups, ein aktueller Toolvergleich, belastbare Prüfkriterien und ein Aufwandsschätzer.

Ob Sie die Website selbst entwickeln oder mit einer Webdesign-Agentur arbeiten: Überarbeiten Sie zuerst das funktionale Mockup gründlich, denn darauf bauen das visuelle Mockup und die spätere Umsetzung auf.

Was sich beim Erstellen von Website-Mockups geändert hat

Seit der ursprünglichen Veröffentlichung haben sich Mockup-Werkzeuge deutlich in Richtung Designsystem, Code und KI entwickelt. Figma führte 2025 unter anderem Figma Make und Figma Sites ein; 2026 kamen ein Agent für Änderungen auf der Zeichenfläche und detaillierter inspizierbare Animationen hinzu. Penpot verbindet responsive Layouts inzwischen mit CSS Grid, Flexbox, Design Tokens und einem MCP-Server. KI kann Varianten beschleunigen, ersetzt aber weder Anforderungsanalyse noch Nutzertests.

Zugleich gehört Barrierefreiheit früher in den Prozess. Die Bundesfachstelle Barrierefreiheit stellt klar, dass vom BFSG betroffene Online-Shops, Apps und Buchungssysteme seit dem 28. Juni 2025 barrierefrei sein müssen. Prüfen Sie die konkrete rechtliche Anwendbarkeit für Ihr Unternehmen; unabhängig davon lassen sich Kontrast, Fokusreihenfolge und verständliche Fehlerzustände bereits im Mockup festlegen.

Vom Konzept zum testbaren Mockup

Arbeitsstand	Was festgelegt wird	Was geprüft wird	Freigabekriterium
Anforderungen	Zielgruppen, Seitenarten, Inhalte und wichtigste Aufgaben	Branchenkonventionen und Pflichtinhalte	Jede Seite unterstützt ein benanntes Nutzer- oder Geschäftsziel
Wireframe	Informationshierarchie, Navigation und Position der Elemente	Ob ein Nutzer ohne visuelle Ausgestaltung ans Ziel gelangt	Die Kernwege sind vollständig und verständlich
Visuelles Mockup	Typografie, Farben, Bildsprache, Abstände und Komponenten	Markenkonsistenz, Kontrast und responsive Verhalten	Komponenten und Zustände sind eindeutig dokumentiert
Klickbarer Prototyp	Interaktionen, Übergänge, Formulare und Fehlersituationen	Aufgabenerfolg mit realistischen Inhalten	Testpersonen können die priorisierten Aufgaben abschließen
Handoff	Tokens, Maße, Assets, Regeln und offene Entscheidungen	Technische Machbarkeit mit der Entwicklung	Keine kritische Interaktion bleibt nur als statischer Screenshot erklärt

Die Abgrenzung ist wichtig: Ein Wireframe beschreibt vor allem Aufbau und Bedienelemente, ein Mockup ergänzt die visuelle Gestaltung und ein Prototyp macht Abläufe testbar. Das Webdesign Journal beschreibt diese aufeinander aufbauenden Stufen ebenfalls als Low- bis High-Fidelity-Entwürfe.

Website-Mockup in sieben Schritten erstellen

1. Ziel und Kernaufgabe definieren: Formulieren Sie für jede zentrale Seite, was Besucher dort verstehen oder erledigen sollen.
2. Branche untersuchen: Vergleichen Sie wiederkehrende Navigationsmuster, Inhalte und Vertrauenselemente relevanter Wettbewerber. Auch BOWWE empfiehlt, die wesentlichen Elemente der jeweiligen Branche zu identifizieren und bewusst in den Entwurf zu übernehmen.
3. Inhalte priorisieren: Arbeiten Sie mit realistischen Überschriften, Produktnamen und Fehlermeldungen statt mit Blindtext. So sehen Sie früh, ob Flächen und Hierarchie funktionieren.
4. Wireframe freigeben: Klären Sie Seitenstruktur und Nutzerwege, bevor Detaildiskussionen über Farben beginnen.
5. Komponenten und Tokens anlegen: Benennen Sie Farben, Abstände, Schriftgrößen sowie Zustände konsistent. Das erleichtert Änderungen und den Übergang zum Code.
6. Responsive Regeln dokumentieren: Legen Sie nicht nur einzelne Bildschirmbilder an, sondern beschreiben Sie, wann Spalten umbrechen, Navigationen wechseln oder Inhalte neu priorisiert werden. Vertiefende Kriterien finden Sie im Beitrag über Responsive Webdesign.
7. Mit Aufgaben testen: Lassen Sie Personen beispielsweise ein Produkt finden, ein Formular mit fehlerhafter Eingabe korrigieren oder eine Buchung abbrechen und fortsetzen. Beobachten Sie den Ablauf, statt nur nach Geschmack zu fragen.

Mockup-Tools 2026 im Vergleich

Die Bewertung ist eine redaktionelle Einordnung von Sortlist auf einer Skala von 1 bis 5. Sie gewichtet Zusammenarbeit, responsive Modellierung, Interaktivität, Übergabe an die Entwicklung und Datenkontrolle; Preise sind nicht enthalten, da Anbieter ihre Tarife ändern können.

Tool	Key Features	Am besten geeignet für	Zu beachten	Bewertung
Figma	Komponenten, Variablen, Dev Mode, Make, Sites und 2026 erweiterte KI- und Motion-Funktionen	Interdisziplinäre Produktteams und Designsysteme	Dev Mode erfordert laut Anbieter einen kostenpflichtigen Plan und einen Full- oder Dev-Seat	5,0/5
Penpot	Open Source, Self-Hosting, CSS Grid, Flexbox, interaktive Prototypen und W3C-kompatible Design Tokens	Teams mit offenen Standards oder hohen Anforderungen an Datenkontrolle	Vor dem Einsatz prüfen, ob benötigte Plugins und Integrationen verfügbar sind	4,5/5
Framer	Responsive Layouts, Breakpoints, Komponenten, CMS, Vorschau und direkte Veröffentlichung	Marketing-Websites und veröffentlichungsnahe Mockups	Für ein reines Design-to-Development-Handoff kann der Website-Builder-Fokus zu weit gehen	4,2/5
Axure RP	Variablen, adaptive Ansichten, dynamische Panels und bedingte IF/ELSE-Logik	Komplexe Formulare, Rollenmodelle und mehrstufige Anwendungen	Die größere funktionale Tiefe erhöht Einarbeitung und Pflegeaufwand	4,4/5

Die Angaben beruhen auf den aktuellen Produktinformationen von Figma, Penpot, Framer und der Axure-Dokumentation. Bewerten Sie ein Werkzeug anhand Ihres konkreten Ablaufs; eine hohe Funktionszahl macht einen Entwurf nicht automatisch verständlicher.

Vier Kennzahlen für die Qualitätskontrolle

• 28. Juni 2025: Seit diesem Datum gilt das BFSG für betroffene Dienstleistungen im elektronischen Geschäftsverkehr; die Bundesfachstelle nennt insbesondere Online-Shops, Apps und Online-Buchungssysteme.
• 9 zusätzliche Erfolgskriterien: Die am 5. Oktober 2023 veröffentlichte WCAG 2.2 ergänzt gegenüber WCAG 2.1 neun Kriterien, wie die W3C Web Accessibility Initiative dokumentiert.
• 24 × 24 CSS-Pixel: Dies ist bei WCAG 2.2 auf Konformitätsstufe AA die Mindestgröße für ein Bedienziel, sofern keine der definierten Ausnahmen greift. Zeichnen Sie Buttons und Icons im Mockup entsprechend oder dokumentieren Sie ausreichende Abstände.
• 4 neue Figma-Produkte im Mai 2025: Make, Sites, Draw und Buzz markierten den Ausbau vom Designwerkzeug zur breiteren Produktionsplattform. Für Mockups sind insbesondere Make und Sites relevant.

Stimme aus der Praxis

„Barrierefreiheit von Anfang an mitdenken.“

Ariane Rosing, Frontend Developer und Referentin der BFSG-Webinarreihe für den E-Commerce, Bundesfachstelle Barrierefreiheit, April 2025

Für die Freigabe bedeutet das konkret: Testen Sie im Prototyp nicht nur den Idealfall. Zeigen Sie Tastaturfokus, leere Pflichtfelder, Fehlermeldungen, vergrößerten Text und ausreichende Bedienflächen. Diese Details prägen die User Experience ebenso wie Farben und Bildwelten; weitere Grundlagen erläutert unser Beitrag zum UI Design.

Mini-Rechner: Umfang eines Mockups schätzen

Der Rechner multipliziert Seitentypen × Varianten × Ansichtsbreiten × Bearbeitungszeit. Das Ergebnis ist ein Planungswert für die Gestaltung der Ansichten; Recherche, Workshops, Nutzertests, Korrekturen und Entwicklung kommen hinzu.

Geschätzten Gestaltungsumfang berechnen

Seitentypen

Varianten je Seitentyp

Ansichtsbreiten

Minuten je Ansicht

Zu gestaltende Ansichten:

48

Reine Gestaltungszeit:

12.0

Stunden

Checkliste vor der Freigabe

• Sind Zielgruppe, wichtigste Aufgaben und Erfolgskriterien dokumentiert?
• Enthält das Mockup echte oder realistisch lange Inhalte?
• Sind Navigation, Suche, Formulare sowie Erfolgs-, Leer-, Lade- und Fehlerzustände dargestellt?
• Ist für jede Komponente festgelegt, wie sie auf schmalen und breiten Ansichten reagiert?
• Lassen sich Kernaufgaben mit Tastatur und sichtbarem Fokus nachvollziehen?
• Sind offene Annahmen, technische Risiken und nicht getestete Abläufe gekennzeichnet?
• Wurden Rückmeldungen nach Schweregrad priorisiert und in einer neuen Version überprüft?

Wenn Ihnen intern Design-, UX- oder Entwicklungsressourcen fehlen, können Sie Ihr Vorhaben beschreiben und passende Webdesign-Partner über Sortlist finden.

Häufige Fragen zu Website-Mockups

Was ist der Unterschied zwischen Wireframe, Mockup und Prototyp?

Ein Wireframe bildet Struktur und Inhaltshierarchie ab. Ein Mockup ergänzt die visuelle Gestaltung; ein Prototyp verbindet Ansichten zu einem testbaren Ablauf. In kleinen Projekten können diese Stufen ineinander übergehen, sollten in der Freigabe aber eindeutig benannt werden.

Wie detailliert sollte ein Website-Mockup sein?

Für eine Konzeptentscheidung genügt häufig mittlere Detailtiefe. Vor Entwicklung und Nutzertest sollten reale Inhalte, responsive Regeln, Komponentenvarianten sowie Lade-, Leer-, Erfolgs- und Fehlerzustände enthalten sein.

Wie viele Bildschirmgrößen sollte ich gestalten?

Entwerfen Sie so viele Ansichten, wie für die kritischen Layoutwechsel nötig sind. Drei Ausgangsansichten für schmal, mittel und breit sind ein praktikabler Planungswert, aber kein technischer Standard; testen Sie zusätzlich die Breiten dazwischen, damit das Layout nicht nur auf drei Screens funktioniert.

Kann KI ein vollständiges Mockup erstellen?

KI kann erste Varianten, Inhalte und funktionale Prototypen erzeugen. Ergebnisse müssen dennoch gegen Anforderungen, Markenregeln, Datenschutz, Barrierefreiheit und reale Nutzeraufgaben geprüft werden. Figma weist selbst darauf hin, dass KI-Ausgaben irreführend oder falsch sein können.

Wann ist ein Mockup bereit für die Entwicklung?

Wenn Kernabläufe getestet, Komponenten und Zustände dokumentiert, responsive Regeln geklärt und offene technische Fragen sichtbar sind. Eine reine Sammlung schöner Desktop-Screens reicht für einen verlässlichen Handoff nicht aus.

---

Um Ihre Website online zu stellen, ist der erste Schritt, den Sie tun müssen, ein Website-Mockup zu erstellen. Das wird Ihnen dabei helfen, die Struktur Ihrer Website zu entwerfen und zu wissen, wie sie aussehen wird, bevor Sie mit der Einrichtung beginnen.

Um es metaphorisch auszudrücken, ist das Erstellen eines Website-Mockups vergleichbar mit dem Befolgen eines Fahrplans: Er hilft Ihnen, klarer zu sehen und zu wissen, was Sie tun müssen, um Ihr Ziel zu erreichen.

Warum sollte man ein Mockup erstellen?

Ein Website-Mockup zu erstellen hat zwei Vorteile:

1. Mit einem Website-Mockup können Sie die Struktur und das grafische Aussehen Ihrer Website aufbauen, ohne dass Sie eine einzige Zeile Code verfassen müssen.
2. Wenn Sie während der Arbeit neue Ideen haben, kostet Sie das Ändern oder Verschieben eines Elements auf einem Mockup 0€. Das ist bei weitem nicht der Fall, wenn Sie eine solche Änderung an einer Website vornehmen möchten, die bereits online ist. Das Verschieben eines Fensters auf dem Grundriss eines Hauses ist mit einem Bleistiftstrich erledigt, während das Verschieben eines Fensters auf einem bereits gebauten Haus mehrere tausend Euro kostet.

Daher besteht der ganze Nutzen eines Website-Mockups darin, dass Sie den Grundriss Ihrer Website kennen, bevor Sie mit dem Bau beginnen. Mehrere Elemente müssen in Ihrem Modell berücksichtigt werden. Es gibt natürlich den grafischen Aspekt, der sich auf den Stil Ihrer Website bezieht, aber es gibt auch den funktionalen Aspekt, der sich auf die Navigation bezieht.

Die Herausforderung besteht darin, ein ansprechendes Layout zu erstellen, das den Besuchern Ihrer Website eine einfache Navigation ermöglicht.

Layout, Wireframe, Mockup: Wo liegen die Unterschiede?

Es gibt viele verschiedene Begriffe, um über das Layout einer Website zu sprechen. Wireframe ist ziemlich bekannt, aber man kann auch von Ergolayout und Mockup sprechen. In Wirklichkeit beziehen sich alle diese Begriffe auf dasselbe: ein Website-Mockup, das eine vereinfachte grafische Darstellung der Art und Weise ist, wie Sie Ihre Website gestalten möchten.

Das Ziel ist, dass Sie Ihrem Webdesigner ein Dokument an die Hand geben können, das zeigt, wie Ihre Website aussehen soll. Das Einzige, was Sie sich merken müssen, ist, dass es zwei Arten von Website-Mockups gibt, die Sie erstellen können.

Das funktionale Mockup

Ein funktionales Mockup dient dazu, die Struktur Ihrer Website aufzubauen und die Nutzererfahrung, die Sie schaffen werden, vorherzusagen. Ganz konkret ist es das funktionale Mockup, in dem Sie Ihre verschiedenen Elemente platzieren:

• Menüs,
• Schaltflächen,
• call to action,
• Bereiche zum Anmelden und Eingeben des Passworts,
• usw.

Es geht also darum, in Schwarz-Weiß das Layout Ihrer Website festzulegen, das die Organisation der verschiedenen Elemente und der Haupttexte umfasst.

Das funktionale Layout besteht aus zwei Teilen:

1. Das „Zoning„, bei dem es sich um ein Schema handelt, das die verschiedenen Bereiche Ihrer Website auflistet, um die Informationsstruktur zu optimieren.
2. Der „Wireframe„, der die Inhalte in die verschiedenen Bereiche integriert, die beim Zoning festgelegt wurden.

Das Ziel des funktionalen Website-Layouts ist es, die Grundlage für Conversions zu legen, die Ihre Website zu erzielen vermag. Daher sollten Sie bei der Erstellung des Funktionsmodells die Nutzererfahrung im Auge behalten.

Hier ein Beispiel für ein funktionales Mockup:

Das grafische Mockup

Ein grafisches Mockup vertieft das funktionale Mockup, indem es grafische Elemente auf das funktionale Layout anbringt. Das grafische Layout enthält alle Design-Elemente der visuellen Identität Ihrer Marke, sei es in Bezug auf Farben, Logo oder Typografie.

Das grafische Mockup ist also eine genaue Darstellung Ihrer Website, die dem erwarteten Endergebnis so nahe wie möglich kommen soll. Auf der Grundlage dieser grafischen Vorlage können Ihre Entwickler oder die Agentur, mit der Sie zusammenarbeiten, Ihre Website in HTML und CSS codieren.

Hier ein Beispiel für ein grafisches Mockup:

Um zu einem solchen grafischen Modell zu gelangen, müssen Sie sich die Zeit nehmen, Ihr funktionales Modell gut zu erstellen. Am besten ist es, dies iterativ zu tun, indem Sie ein erstes funktionales Modell bauen und dann um Feedback bitten, auf dessen Grundlage Sie dann ein effizientes Website-Modell erstellen können.

Unabhängig davon, ob Sie Ihre Website selbst codieren oder mit einer Webdesing-Agentur zusammenarbeiten wollen, sollten Sie nicht zögern, sich selbst in Frage zu stellen und Ihr funktionales Mockup gründlich zu überarbeiten, da es die Grundlage für Ihr grafisches Mockup bildet.

---

---

Welche Schritte müssen Sie unternehmen, um ein Website-Mockup zu erstellen?

Zusätzlich ist es wichtig, die Prinzipien des Webdesign zu berücksichtigen, um ein ansprechendes und funktionales Mockup zu erstellen.

Mit welchen Werkzeugen kann ich ein Website-Design erstellen?

Lassen Sie uns zum Abschluss dieses Artikels einen Blick auf die verschiedenen Mockup-Tools werfen, mit denen Sie Ihre Website erstellen können, falls Sie sich gegen den Service einer Agentur entscheiden.

Die traditionellen Lösungen

Um Ihre funktionalen Mockups zu erstellen, sind Papier und Microsoft Powerpoint die beiden einfachsten Lösungen. Sie bieten den Vorteil, dass sie teilweise kostenlos sind, haben aber den Nachteil, dass die Proportionen nicht einfach zu verwalten sind. Dies ist einschränkend, da man heutzutage an das Layout seiner Website für mehrere Formate denken muss: Laptop, Tablets, Smartphones.

• Papier: Die Verwendung von Papier ist nach wie vor eine der einfachsten Möglichkeiten, Ihre Ideen zu ordnen. Es ist schnell, zugänglich, flexibel und super einfach.
• Microsoft Powerpoint: Ja, diese Software kann zur Erstellung funktionaler Entwürfe für eine Website verwendet werden. Zumal es Bibliotheken mit zusätzlichen Komponenten gibt, die speziell für die Erstellung von Mockups entwickelt wurden, wie z. B. PowerMockup.
• Google Slides: Das Prinzip ist das gleiche wie bei Microsoft Powerpoint, hat aber den Vorteil, dass es von mehreren Personen gleichzeitig genutzt werden kann. Wenn Sie Ihre Mockups mit mehreren Personen erarbeiten, kann Google Slides diesen kollaborativen Aspekt bieten, den man bei Powerpoint nicht findet.
• Canva: Mit dieser Lösung können Sie dank der verschiedenen Vorlagen, die den Nutzern zur Verfügung stehen, sowohl qualitativ hochwertige funktionale als auch grafische Layouts erstellen.

Spezialisierte Software

Mit dieser Software können Sie funktionale Mockups von Webseiten erstellen.

Außerdem ermöglichen sie es Ihnen im Gegensatz zu Powerpoint, die Proportionen der verschiedenen Komponenten, die Sie verwenden werden, zu verwalten.

Es gibt unzählige solcher Softwareprogramme, hier sind einige davon:

• Cacoo: Cacoo, das auf Zusammenarbeit ausgerichtet ist, ist in einer kostenlosen Version erhältlich und sehr einfach zu verwenden, um ein Website-Modell zu erstellen.
• Balsamiq: Dies ist eine Referenz im Bereich der Website-Erstellung. Balsamiq ist einfach und leistungsstark und ermöglicht es jedem, funktionale Layouts zu erstellen, auch wenn diese komplex sind. Im Gegensatz zu Cacoo ist Balsamiq jedoch kostenpflichtig: entweder als Dektop-Version (79 $) oder als Web-Version (12 $/Monat).
• Axure RP: Zweifellos die umfassendste und leistungsfähigste Software für die Erstellung von Website-Vorlagen. Der Preis für die Standardversion liegt bei 249 $.

Und die Liste ließe sich noch weiter fortsetzen, z. B. mit Sketch, Adobe XD, MockFlow, Moqups, WireframeCC, Wirefy oder Pencil.

Software für Grafikdesign

Um Ihre grafischen Entwürfe auf der Grundlage Ihrer funktionalen Entwürfe zu erstellen, stehen Ihnen verschiedene Tools zur Verfügung. Bedenken Sie jedoch, dass eine grafische Umsetzung komplexer ist als eine einfache funktionale Umsetzung. Daher sind die Werkzeuge weniger leicht zu erlernen und erfordern unter Umständen eine gewisse Einarbeitungszeit. Deshalb ist es unter Umständen sinnvoller, eine Grafikdesign-Agentur zu beauftragen.

Gerade die Adobe Suite, insbesondere für Adobe Photoshop und Adobe Illustrator, sind hilfreiche, aber anspruchsvolle Tools. Dies sind die beiden Standardwerkzeuge für die Erstellung von grafischen Mockups.

Photoshop

Photoshop ist leistungsstark, flexibel und eignet sich für die Phase des Ausschneidens, die für die Integration in HTML/CSS erforderlich ist, und ist eine Referenz. Es gibt einige Alternativen, wie z. B. Gimp. Wenn Sie jedoch ein professionelles Niveau erreichen wollen, sollten Sie sich an Photoshop wenden.

Illustrator

Neben Photoshop kann man auch Illustrator verwenden, um Ihr grafisches Layout erfolgreich zu gestalten. Allerdings erfordert seine Verwendung, ähnlich wie bei Photoshop, eine Reihe von Kenntnissen. Wie bei Photoshop hat auch Illustrator seine Vorteile. Vor allem in der Phase, in der Sie Ihre Webseitenvorlagen aufteilen, um sie in HTML und CSS zu integrieren.

Fazit

Sie haben nun alle Informationen, die Sie für die Erstellung eines Webseitenentwurfs benötigen könnten. Denken Sie daran, dass dies ein entscheidender Schritt ist, um eine effektive, schöne und benutzerfreundliche Website zu erstellen.

Denken Sie außerdem daran, Ihr Website-Design so weit wie möglich mit Ihrer Zielgruppe zu vergleichen. So können Sie nicht nur einige Fehler vermeiden, sondern auch eine Website erstellen, die perfekt auf Ihre Zielgruppe zugeschnitten ist.

Wenn Sie mehr über dieses Thema erfahren möchten, sollten Sie sich unseren Artikel zum Thema UX-Design ansehen. Dort finden Sie viele zusätzliche Informationen, die Ihnen bei der Erstellung Ihres Layouts nützlich sein können.

Sie können auch unseren umfassenden Leitfaden zur Webentwicklung lesen, um noch mehr zu erfahren.

Wenn Sie mehr über Webdesign erfahren möchten, empfehlen wir Ihnen, unseren vollständigen Webdesign Leitfaden zu lesen.