Bevor mit der Umsetzung einer neuen Internetpräsenz begonnen werden kann, fertigt man häufig verschiedene grafische Entwürfe der zu erstellenden Website an. Diese Visualisierungsformen sollen den Webdesigner bei der Gestaltung der Internetseite und der Planung einer optimalen Benutzerführung unterstützen. In Kundengesprächen werden sie ebenfalls verwendet, um den Kunden schnell erste Entwürfe des Designs präsentieren zu können und damit wichtiges Feedback einzuholen.
Ich spreche hier von Wireframes und Mockups.
Beide Begriffe habe ich bereits im Internetlexikon erklärt. Da sie aber sehr häufig falsch verwendet werden, möchte ich dir den Unterschied hier genau erläutern.
Was ist ein Wireframe und wann wird er eingesetzt?
Ein Wireframe ist eine sehr vereinfachte Repräsentation des Designs einer Website. Er wird verwendet um die Positionierung und Größe der Elemente einer Internetseite darzustellen. Das Ziel eines Wireframes ist es, die einzelnen Elemente der späteren Seite, innerhalb des Layouts anzuordnen und nicht eine Aussage über das spätere finale Design treffen zu können.
Ein Wirframe sollte die folgende Punkte abbilden:
- Die Hauptelemente der Inhalte (Was?)
- Die Struktur der Informationen (Wo?)
- Eine Beschreibung und grundlegende Visualisierung der Benutzerschnittstelle (Wie?)
Behalte einfach im Hinterkopf, dass ein Wireframe eine der ersten visualisierten Versionen deines Designs ist und dies in einer vereinfachten Art und Weise.
Beispiel für einen Wireframe
Wireframes werden typischerweise zur Dokumentation eines Projekts eingesetzt. Da es sich hier um eine statische Darstellungsform handelt, werden Sie oft von Textpassagen begleitet.
Ein Wireframe ist aber auch bei der Kommunikation innerhalb des Entwicklerteams sehr hilfreich. Wenn es z.B. Unstimmigkeiten während der Planung oder Umsetzung des Designs gibt, kann ein schnell erstellter Wireframe zur besseren Veranschaulichung herangezogen werden.
Außerdem können mit der Hilfe eines Wireframes, erste Test bezüglich der Benutzerführung durchgeführt werden.
Was ist ein Mockup und wann wird es eingesetzt?
Mockups werden auf der Grundlage eines Wireframes erstellt und sind viel detaillierter. Du kannst dir ein Mockup wie einen Screenshot deiner späteren Website vorstellen. In ihm werden bereits die verwendete Typografie und das Farbschema abgebildet. Das Ziel ist es, so genau wie möglich das spätere Erscheinungsbild der zu erstellenden Website abzubilden.
Ein Mockup wird meist mit einem Grafikprogramm wie Adobe Photoshop erstellt und der Erstellungsprozess dauert viel länger als beim Wireframe.
Mockup einer zukünftigen Unterseite des Webschmökers
Diese Art der Visialisierung wird eingesetzt, um dem Kunden einen exakten Entwurf der späteren Seite zu präsentieren. Dank seiner detaillierten Darstellungsweise, kann sich der Kunde ein gutes Bild vom Endprodukt machen und entscheiden, ob der Entwurf in die richtige Richtung geht. Mockups sind also unverzichtbar, wenn es um ein aussagekräftiges Feedback vom Kunden geht.
Wann werden diese Visualisierungsformen in der Konzeptionsphase eingesetzt?
Normalerweise beginnt die Planung einer neuen Website mit einer handgezeichneten Skizze. Diese handgezeichnete Skizze wird auch Sketch genannt und auf ihr folgt dann der pixelgenaue Wireframe. Dieser ist zwar immer noch eine sehr vereinfachte Version des späteren Designs, lässt aber schon sehr genaue Rückschlüsse auf die Positionierung der Inhaltselemente zu. Außerdem kannst du über den Wireframe bereits die Benutzerführung testen und gegebenenfalls optimieren.
An den Wireframe schließt sich das Mockup an. Hier werden die Inhaltselemente mit den später verwendeten Farben versehen und die Schriftart und –größe festgelegt. Ein Mockup ist statisch und sein Zweck ist die genaue Visualisierung des späteren Designs.
Das Mockup wird in einen Prototypen überführt. Dieser wird häufig in HTML und CSS erstellt. In einem Prototyp kannst du bereits Interaktionen durchführen. Das heißt, du kannst die Navigation testen und dir ein sehr genaues Bild des Zusammenspiels zwischen Design und Inhalt im Browser machen.
Die Reihenfolge als Grafik:
Ein Wireframe wird innerhalb der Konzeption vor dem Mockup erstellt
Fazit
Wireframes und Mockups sind grundsätzlich verschieden. Ein Wireframe ist nur ein sehr grober Entwurf der zukünftigen Internetpräsenz, wohingegen das Mockup eine detaillierte Ausarbeitung darstellt.
Oft werden die beiden Begriff falsch verwendet. Suchst du z.B. bei Google nach Tools zum Erstellen eines Mockups, wirst du in den Ergebnissen eigentlich nur Applikationen finden, mit denen man Wireframes erstellen kann. Warum dies so ist weiß ich nicht, aber wenn selbst erfahrene Webdesigner dir einen Wireframe als Mockup verkaufen wollen, dann wird es kritisch.
Auch ich habe den Unterschied der beiden Visualisierungsformen zuerst nicht richtig verstanden und auch falsch verwendet. Deshalb muss ich meine bereits veröffentlichten Artikel zu diesem Themenbereich überarbeiten. Jetzt passt es soweit aber und ich hoffe, dass du den Unterschied ebenfalls verinnerlicht hast und beide Formen klar voneinander abgrenzen kannst.
Wenn nicht oder falls ich doch wieder was durcheinander gebracht haben sollte, lass es mich doch über die Kommentare wissen.
Unser Tipp: Wenn du nicht nur ein Wireframe, sondern auch eine dazu passende Website erstellen möchtest, dann kann ich dir den Homepage Baukasten “Wix” absolut empfehlen! Auch wenn du einen Blog erstellen oder einen Online-Shop aufbauen willst, ist Wix die beste Wahl. Hier findest du eine Auflistung der besten Homepage Baukästen im Vergleich. Sogar kostenlos kann man Wix nutzen (wenn auch mit eingeschränkten Funktionen). Zum Testen reicht das aber allemal aus:)
Sehr interessant und faszinierend. Ich habe mir gar keine Gedanken darüber gemacht. Aber jetzt habe ich ganz klare Kenntnisse. Danke für informativen Artikel!
Gut und klar erklärt, vielen Dank!
Vielen Dank für deinen Beitrag! Ich hätte aber doch eine Frage. Was ist der Unterschied zwischen Sketch und wireframes/mockups? Ich meine was wird damit (Sketch – wie bei der oberen Abbildung) gemeint?
Hallo Bil,
einen Sketch kann man auch Scribbel nennen. Damit meint man eine handgezeichnete Darstellung einer Website. Stell dir einfach mal vor, dass du eine Idee für eine neue Website hast. Um deine Idee einfach und schnell zu visualisieren, nimmst du dir am besten einen Stift und ein Blatt Papier und fängst einfach an zu zeichnen. Du positionierst z.B. die Navigation und die weiteren Elemente. Diese Zeichnung ist natürlich nicht besonders genau, reicht aber aus, um deine Idee gut zu veranschaulichen. So eine Zeichnung nennt man Sketch und stellt meist den Anfang im Screendesign-Prozess dar.
Viele Grüße
Enrico
Sehr informative! Vielen Dank für den Beitrag. Der Beitrag über Wireframe hat mich sehr interessiert.
Das widerspricht sich aber mit diesem Artikel:
https://www.webschmoeker.de/webdesign/mockups-erstellen/
Man kann sagen, dass es sich bei einem Mockup um ein Grundgerüst der Bedienelemente handelt. Dieses Grundgerüst besitzt keine weiteren Funktionalitäten. Das Mockup ist also nur eine grobe Skizze der zu entwickelnden Seite.
Hallo,
da hast du natürlich völlig Recht und diese Inkonsistenzen sind mir auch schon innerhalb der Text zu den Mockups und Wireframes aufgefallen. Bei Gelegenheit werde ich die Artikel mal überarbeiten.
Vielen Dank für den Hinweis und viele Grüße
Enrico
“Mockup” aus dem Englischen übersetzt: Modell in Originalgröße, Attrape, Nachbildung… Wireframe: Drahtgitter.
Das ist eben die Schwierigkeit, wenn man für solche Dinge gar keine deutschen Begrifflichkeiten mehr hat und die Fremdsprache, egal wie gut die Kenntnisse sind, nicht so intuitiv erfassbar. Das gleiche passiert ja zum Beispiel, wenn man sich unter “Usability” Benutzerfreundlichkeit vorstellt, was die Übersetzung auch nicht hergibt. Wenn dann aus dem Fachterminus, der von wenigen gebraucht wird, plötzlich ein allgegenwärtiges Buzzword wird, gehen die Nuancen verloren.
Bei Wireframes gehts um technische Machbarkeit in systemischer Sicht usecase (5W’s), bei Mockups gehts um das weiterentwickelte UX-Design nach CI/CD Sicht userstories.