Klarheit im Begriffsdschungel: Templates, Wireframes, Mockups und Prototypen

Templates sind statische Vorlagen, die du für die Produktion verwenden und anpassen kannst.

Mockups zeigen das Design visuell und detailliert. In Bezug auf Webseiten haben sie oft auch schon ein paar klickbare Elemente.

Wireframes sind grobe Entwürfe zur Planung der Struktur. Sie enthalten vor allem Platzhalter und noch keine Designelemente wie Logo oder Bilder.

Prototypen sind interaktiv und erlauben es, das Design realitätsnah zu testen. Die Funktionen entsprechen dem späteren Produkt.

Professionalität: Welche Bedeutung Mockups haben

Du möchtest, dass deine neue Webseite einfach zu bedienen und ansprechend ist. Außerdem soll sie der Information und Akquise neuer Kundschaft dienen und im besten Fall auch zum Konzept deines Omnichannel-Marketings passen. Wahrscheinlich hast du eine genaue Vorstellung davon, wie sie aussehen soll. Hier kommt das Mockup ins Spiel.

Ein Design-Profi erstellt das Mockup und präsentiert es, um sicherzustellen, dass das Layout in die richtige Richtung geht. Wenn du siehst, wie deine Website aussehen kann, wird auch ihre Funktionalität deutlich klarer.

Du kannst ein Mockup zudem nutzen, um zu evaluieren, ob die geplante Webseite den Bedürfnissen der Nutzenden entspricht. Gut geeignet sind dafür sogenannte User-Testings. So findest du heraus, ob sich deine Zielgruppe auf der Webseite zurechtfindet, bekommst Feedback zum Design und siehst, ob sie mit den richtigen Bereichen interagiert. Das ermöglicht es dir, die Usability, also die Nutzbarkeit deiner Webseite, zu verbessern.

Aber Vorsicht: Mockups sind kein Prototyp und ermöglichen oft nur einfache Interaktionen wie Klicks und das Ausfüllen von Formularen.

Mockup erstellen: So geht’s

Du möchtest selbst ein Mockup bauen? Wir erklären dir, wie es geht.

1.    Zieldefinition: Am Anfang steht das Ziel. Egal, ob du die ganze Webseite relaunchen möchtest oder nur eine einzelne Landingpage planst, solltest du wissen, was die Seite bezwecken soll. Dient sie der Information? Oder soll sie zum Kauf animieren?

2.    Passende Vorlage wählen: Du musst das Rad nicht neu erfinden. Es gibt zahlreiche Vorlagen für passende Seiten, die du nutzen kannst. Behalte dabei die Zielgruppe und den Verwendungszweck im Blick.

3.    Markenelemente: Du hast bereits ein Logo und ein Corporate Design mit Farben und Schriftarten? Diese sollten im Mockup auf jeden Fall auftauchen. Füge sie in die Vorlage ein.

4.    Text und Bild: Füge passende Bilder und Überschriften ein. Achte auch auf die Beschriftung von Navigation und klickbaren Elementen. Längere Texte musst du nicht zwingend schon formulieren. Möchtest du dein Design präsentieren, wirkt es allerdings professioneller.

5.    Feedback einholen: Jetzt kannst du dir von wichtigen Personen Feedback einholen. Das können Mitarbeitende sein, die am Projekt beteiligt sind oder die tatsächliche Zielgruppe. Frage nach Verbesserungen und dem Gesamteindruck.

Webseite richtig vorbereiten: Was du brauchst

Bevor du mit deinem Mockup beginnen kannst, gibt es einige technische Voraussetzungen, die geklärt sein sollten. Auch in puncto Design musst du wichtige Informationen einholen, um dein Mockup bauen zu können.

Technische Möglichkeiten: Du solltest wissen, welche Elemente du tatsächlich umsetzen kannst. Gerade wenn du eine selbst programmierte Webseite hast, musst du hier gegebenenfalls beim Entwicklungsteam nachfragen, ob bestimmte Funktionen möglich sind. Auch bei Webseiten, die mit WordPress oder anderen Tools gebaut sind, solltest du schauen, ob entsprechende Features nutzbar sind oder du unter Umständen noch Plugins installieren oder kaufen musst.

Design-Voraussetzungen: Halte dich schon beim Mockup an das Corporate Design. Sammle dazu alle Daten wie Schriftarten, Logo und Unternehmensfarben. Achte dabei auch auf fest definierte Bereiche wie den Header und Footer deiner Webseite. So stellst du sicher, dass die neue Seite in den Marketing-Funnel und zu deinem Design passt.

Stakeholder einbeziehen: Das Marketing-Team, aber auch die Verantwortlichen für Suchmaschinenoptimierung (SEO), solltest du möglichst früh einbeziehen. Hast du eine Person mit UX-Expertise, sollte auch sie mit am Tisch sitzen. UX ist die Abkürzung für User Experience, zu Deutsch Nutzererfahrung. Mitarbeitende aus diesem Bereich haben die Nutzenden im Blick und wissen genau, wie eine Webseite oder ein Produkt aussehen muss, um den Bedürfnissen der Zielgruppe zu entsprechen. Im besten Fall hast du die Verantwortlichen bei der Planung mit dabei und beteiligst sie am Mockup. Ist das nicht möglich, sollten sie zumindest Feedback geben.

Mockup gestalten: ganz ohne Design-Erfahrung?

Dank verschiedener Tools – kostenpflichtig und kostenlos – kannst du auch ohne ein Studium im Bereich Design gute Mockups erstellen. Natürlich ist es deutlich hochwertiger und professioneller, wenn ein Design-Profi die Erstellung übernimmt. Viele kleine und mittelständische Unternehmen haben jedoch wenig Ressourcen und scheuen sich vor den Kosten. Für einen Preis zwischen 10 und 20 Euro kannst du selbst mit der passenden Software ein Mockup erstellen.

Einige bieten ihre Funktionen auch in kostenlosen Free-Versionen an. Beliebte Tools sind unter anderem Canva, Figma, Moqups oder Miro. Alle vier gibt es in einer kostenlosen Basisversion, die sich aber kostenpflichtig upgraden lässt. Andere Tools wie InDesign oder Balsamiq Mockups sind zwar grundsätzlich kostenpflichtig, aber bieten einen kostenlosen Probezeitraum. Viele der Anwendungen arbeiten in der Premium-Version bereits mit künstlicher Intelligenz, die für dich bestimmte Inhalte erstellt. Alternativ kannst du auch versuchen mit KI-Tools wie ChatGPT oder Claude Mockups zu erstellen.

Bedenke, dass die Arbeit Zeit kostet: Ein Profi braucht bis zu fünf Stunden pro Mockup, ein Laie für ein ähnliches Ergebnis deutlich länger. Zusätzlich musst du bei selbst erstellen Mockups oft darauf verzichten, Funktionen einzubauen. So hast du am Ende nur eine Bilddatei, die keine Interaktion zulässt. Reicht dir das aus, kannst du ganz einfach eine psd-Datei mit Photoshop erstellen.