Wie man ein Website-Mockup erstellt: Darauf ist zu achten
Letzte Aktualisierung am 21 Januar 2026 um 09:16 a.m.
5,00/5Um 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:
- 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.
- 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:
- Das „Zoning„, bei dem es sich um ein Schema handelt, das die verschiedenen Bereiche Ihrer Website auflistet, um die Informationsstruktur zu optimieren.
- 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.
Brauchen Sie
|
Von 32.000 Agenturen zeigen wir Ihnen nur die, die Sie lieben werden.
Keine Bindung, komplett kostenlos.
Agenturen zeigen
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.
