2014 gründete ich gemeinsam mit Rembrant Van der Mijnsbrugge die Agentur MOTE. Ich bin auf E-Commerce spezialisiert und begleite meine Kund:innen in jeder Phase ihrer Markenentwicklung – von der ersten Marktstrategie und Markenidentität über Design und Entwicklung bis zum Marketing – immer mit Fokus auf nachhaltiges Wachstum. In meinen 15 Jahren Erfahrung im E-Commerce-Webdesign habe ich die Strategien von Kund:innen geprägt, die von unabhängigen Marken bis zu Fortune-500-Unternehmen reichen.
Ein vorgefertigtes Website-Theme zu bearbeiten ist einfach – wenn du sehen möchtest, wie deine Website mit vier Produkten pro Zeile im Vergleich zu zwei Produkten pro Zeile aussieht, kannst du das in Sekundenschnelle in der Vorschau betrachten. Bei einer vollständig individuellen Website können Änderungen im Code jedoch zeitaufwendig und kostspielig sein. Deshalb erstellen Designer:innen Website-Mockups, bevor sie zur Entwicklungsphase übergehen.
In diesem Artikel erfährst du mehr über Website-Mockups sowie über die Tools und bewährten Praktiken für die Erstellung deines eigenen Website-Mockups.
Was ist ein Website-Mockup?
Ein Website-Mockup ist eine statische visuelle Vorschau darauf, wie eine Website aussehen wird. Es vermittelt einen Eindruck vom finalen Design und Layout einer Seite, ist aber noch nicht funktionsfähig mit dem Backend-Code, der die Seite interaktiv und veröffentlichungsbereit machen würde. Webdesigner:innen nutzen Website-Mockups, um verschiedene Designoptionen zu erkunden, bevor sie ein Webdesign zur Programmierung an die Entwicklung übergeben. Sobald eine Website in Code erstellt wurde, ist sie schwerer anzupassen. Daher kann ein hochauflösendes Website-Mockup (eines, das dem Endprodukt so nahe wie möglich kommt) Zeit und Geld sparen.
Website-Mockups vs. Wireframes vs. Prototypen
Wireframes, Mockups und Prototypen sind verschiedene Methoden zur Visualisierung einer Designidee. Hier erfährst du, wann du welche verwenden solltest:
Wireframes
Wireframes sind Diagramme, die das Layout und die Struktur einer Website ohne Designelemente zeigen. Du kannst dir ein Wireframe als Bauplan für dein Website-Design vorstellen.
Ein Wireframe kann eine einfache Stift-und-Papier-Skizze sein, daher ist es ein nützliches Tool für Nicht-Designer:innen, die ihre Vision kommunizieren möchten. Wireframes können auch Designer:innen helfen, die an Websites mit neuen oder stark interaktiven Elementen arbeiten. Das liegt daran, dass Wireframes es dir ermöglichen, die grundlegende Struktur und Funktionalität der Seite zu bestimmen, bevor du dich in Design und Code vertiefst.
Selbst wenn du eine einfachere E-Commerce-Seite erstellst, kann ein Wireframe dir dabei helfen, den gesamten Sales Funnel und die Customer Experience zu konkretisieren, die du schaffen möchtest. Da Wireframes so einfach sind, sind sie eine großartige Möglichkeit, alle Beteiligten auf denselben Stand zu bringen, bevor das Design beginnt.
Mockups
Mockups sind detailreiche, statische Darstellungen, die das geplante Website-Layout mit angewandten Branding-Entscheidungen veranschaulichen. Im Gegensatz zu Wireframes enthalten Mockups Art Direction, Typografie und den Einsatz von Farben.
Mockups geben eine realistische Vorschau darauf, wie die finale Website für Nutzer:innen aussehen wird, sind aber noch nicht interaktiv. Mockups sind beim Erstellen einer individuellen Website unerlässlich, da sie es dir ermöglichen, Änderungen an deinem Design vorzunehmen, bevor die Programmierung beginnt.
Prototypen
Prototypen sind die hochauflösendste Option für die Vorschau einer Website. Das sind interaktive Modelle, die Vorschau-Links verwenden, um die Customer Experience zu simulieren und das Website-Design zum Leben zu erwecken.
Für Projekte, die das Testen verschiedener interaktiver Elemente vor der Entwicklung erfordern, kann ein Prototyp wirklich vorteilhaft sein. Bei einfacheren Projekten gehst du möglicherweise direkt vom Mockup zur Entwicklung über.
So erstellst du ein Website-Mockup
- Entscheide, wie du die Marke präsentieren möchtest
- Erstelle eine lineare Erzählung
- Sammle Markenelemente
- Entwirf Vorlagen für jeden Seitentyp
- Füge aussagekräftige Platzhalter hinzu
- Hole dir Feedback
Egal, ob du selbst etwas entwirfst oder mit eine:r Designer:in arbeitest, die grundlegenden Elemente, die du beim Durchlaufen des Designprozesses berücksichtigen solltest, sind dieselben.
1. Entscheide, wie du die Marke präsentieren möchtest
Der erste Schritt beim Entwerfen einer Website ist, einen Schritt zurückzutreten und darüber nachzudenken, wie du die Marke präsentieren möchtest. Wenn du mit eine:r Designer:in arbeitest, beginnst du den Prozess möglicherweise mit einem Creative Brief. Das hilft ihr dabei, mehr über deine Marke, Zielgruppe und Inspiration zu erfahren.
Es ist natürlich, sich auf spezifische Features konzentrieren zu wollen, aber bevor du dich in technische Details vertiefst, versuche zunächst herauszuzoomen: Denke über die Gesamtgeschichte nach, die du mit dem Layout deiner Website erzählen möchtest.
Du könntest beispielsweise mit dem Ziel beginnen, Nutzer:innen dazu zu ermutigen, mehr Zeit auf deiner Homepage zu verbringen. Die Homepage ist oft der erste Berührungspunkt mit einer Marke. Sie hat auch tendenziell die höchsten Absprungraten. Aber anstatt aus einer Features- oder Conversion-Optimierungsperspektive zu beginnen, frage dich: „Wie schaffen wir eine tiefere Verbindung zu Homepage-Besucher:innen?“
Die Lösung könnte so einfach sein wie das Schreiben einer einzeiligen Einführung zu deiner Marke above the fold. Wenn deine Markenwerte das Herzstück deines Unternehmens sind, ist dies eine großartige Gelegenheit, diese Werte direkt auf der Homepage zu präsentieren. Zum Beispiel könnte die Demonstration von Werten wie Nachhaltigkeit oder Inklusivität bei deiner Zielgruppe Anklang finden und sie länger auf deiner Seite halten.
2. Erstelle eine lineare Erzählung
Deine Website sollte einer linearen Erzählung folgen. Das bedeutet, jeder Abschnitt und jede Seite fließen logisch und bauen auf dem nächsten auf. Eine erfolgreiche Erzählung stellt sicher, dass jemand, der auf deiner Homepage landet, ein klares Verständnis deiner Marke und deiner Produktangebote hat. Während sie durch die Seite navigieren, solltest du mehr Details und Features anbieten, die ihnen helfen, die richtigen Produkte für sie zu finden.
Bei einer traditionellen E-Commerce-Website ist deine lineare Erzählung der Sales Funnel: Ein:e Nutzer:in landet auf der Homepage, die deine Marke vorstellt. Von dort aus finden sie deine Produktkategorieseiten, die detaillierter sind als deine Homepage – sie zeigen die wichtigsten Informationen zuerst, mit sekundären und tertiären Informationen in greifbarer Nähe. In einem erfolgreichen Erzählfluss wählt die:der Nutzer:in dann Produkte aus, geht zur Warenkorbseite und schließt letztlich den Checkout-Prozess ab.
3. Sammle Markenelemente
Sobald du darüber nachgedacht hast, wie du die Erzählung für die Website gestalten möchtest, sammle die Markenelemente, die im Design verwendet werden sollen.
Wenn du Brand Guidelines hast, kannst du diese mit deine:r Designer:in teilen (oder selbst darauf verweisen). Falls nicht, musst du Markenelemente wie Typografie, Grafiken und Farben festlegen, bevor du ein Mockup erstellst. Das Grid-Layout der Website basiert auf den Zeilenhöhen und Buchstabenabständen deiner Marken-Schriftarten. Daher ist es wichtig, diese Markenelemente zu bestimmen, bevor du dein Website-Mockup erstellst. Sobald du ein Grid-Layout hast, kannst du Mockups mit deinen Design-Assets und dem Creative Brief erstellen.
4. Entwirf Vorlagen für jeden Seitentyp
Wenn du ein Website-Mockup entwirfst, erstellst du nicht für jede einzelne Webseite ein Mockup. Stattdessen erstellst du Mockup-Vorlagen für verschiedene Seitentypen, wie eine Kategorieseiten-Vorlage und eine Produktseiten-Vorlage.
Während du jede dieser Vorlagen entwirfst, tritt einen Schritt zurück und frage: „Was wird die Erfahrung am erfolgreichsten machen?“ Wenn du ein kuratiertes Sortiment von sechs oder weniger Produkten hast, sollte deine Kategorieseite jedes dieser Produkte präsentieren und etwas Kontext hinzufügen, bevor du zu den detaillierten Produktseiten übergehst.
Wenn du hingegen ein Inventar von Dutzenden, Hunderten oder sogar Tausenden Produkten hast, solltest du eine Website mit erweiterten Produktfiltern entwerfen. Das hilft sicherzustellen, dass jemand, der auf einer Kategorieseite landet, die Ergebnisse auf die für ihn relevantesten Produkte eingrenzen kann.
5. Füge aussagekräftige Platzhalter hinzu
Da ein Mockup eine Vorschau darauf ist, wie deine Website letztlich aussehen wird, ist es möglich, dass du noch Inhalte für die Seite erstellst, während das Mockup in Arbeit ist. In diesem Fall kannst du einen aussagekräftigen Platzhalter verwenden.
Auch wenn die im Mockup verwendeten Bilder und Texte temporär sind, sollten sie dem Endziel so nahe wie möglich kommen. Auf diese Weise bekommst du bei der Vorschau der Mockups wirklich ein Gefühl für die beabsichtigte Richtung der Seite. Anstatt beispielsweise „Lorem Ipsum“-Platzhaltertext zu verwenden, kannst du Beispieltexte entwerfen, die zur Marke passen.
6. Hole dir Feedback
Sobald dein Mockup fertig ist, ist es Zeit, es den Stakeholder:innen zu präsentieren und Feedback zu erhalten. Der Hauptvorteil der Erstellung eines Website-Mockups ist, dass du Überarbeitungen vornehmen kannst, ohne Code zu ändern. Nutze also diese Gelegenheit, um sicherzustellen, dass alle Stakeholder:innen Vertrauen in das Mockup haben, bevor es in die Produktion geht.
Website-Mockup-Tools
Es gibt viele Design-Tools, die du zur Erstellung eines Website-Mockups verwenden kannst, aber zu den beliebtesten gehören:
Sketch
Sketch ist eine Webdesign-App, die schnelle Iterationen ermöglicht. Speziell für UI-Design entwickelt, kann Sketch sowohl Mockups als auch interaktive Prototypen erstellen. Ein Standard-Abonnement beginnt bei 11 € pro Monat.
Figma
Figma ist ein Design-Tool, das Echtzeit-Zusammenarbeit ermöglicht. Wenn mehrere Personen gleichzeitig an einem Mockup arbeiten, könnte Figma eine gute Option sein. Du kannst dich kostenlos bei Figma anmelden, aber wenn du alle Features nutzen möchtest, beginnen die Pläne bei 3 € pro Monat.
Adobe XD
Designer:innen, die mit der gesamten Adobe Design Suite (Apps wie Photoshop, Illustrator, InDesign und Lightroom) arbeiten, lieben Adobe XD für seine nahtlose Integration mit anderen Adobe-Anwendungen. Adobe verkauft XD nicht mehr als eigenständiges Produkt, aber du kannst über ein Abonnement der Adobe Creative Cloud für 77,99 € pro Monat darauf zugreifen.
Website-Mockup FAQ
Wie erstellst du kostenlos ein Website-Mockup?
Um ein Website-Mockup zu erstellen, benötigst du ein Design-Tool, das Geld kostet. Glücklicherweise bieten viele Design-Tools wie Figma eine kostenlose Testphase oder eine kostenlose Version mit weniger Features an, die du als Ausgangspunkt nutzen kannst. Canva ist ein weiteres kostenloses Tool, mit dem du ein kostenloses Website-Mockup erstellen kannst.
Wann solltest du ein Website-Mockup erstellen?
Ein Website-Mockup ist nützlich beim Erstellen einer vollständig individuellen Website, da es dir ermöglicht, ein Gefühl dafür zu bekommen, wie eine Seite aussehen und sich anfühlen wird, bevor du zur Entwicklung übergehst. Es gibt dir etwas, das du teilen, referenzieren und iterieren kannst, während du eine Seite entwirfst. Je nach Projekt erstellst du möglicherweise ein Website-Mockup nach dem Skizzieren eines Wireframes, oder du überspringst das Wireframe und gehst direkt zum Mockup über, nachdem du die Projektanforderungen bestimmt hast.
Sind Website-Mockups notwendig?
Je nach spezifischem Projekt musst du möglicherweise keine Website-Mockups erstellen. Wenn du deine Seite mit einem Shopify Theme erstellst, kannst du das Mockup überspringen und die Vorlage als interaktiven Prototyp verwenden. Dennoch gelten viele der Prinzipien für die Erstellung eines guten Mockups auch für diesen Ansatz.
