Sie haben eine großartige Designidee für Ihre neue Website oder einen Website Relaunch? Dann nichts wie ran an die ersten Entwürfe: Wireframes und Mockups helfen Ihnen dabei, wichtige Designentscheidungen zu treffen, bevor der Vorschlag in die Umsetzung geht. Dadurch sparen Sie Zeit, Kosten und Mühen, denn es ist sofort ersichtlich, ob ein neues Design überzeugt oder nicht.
Doch wie gehen Sie vor, um einen Designvorschlag für eine Website zu erstellen? Wir klären die Begrifflichkeiten und zeigen Ihnen, wie Sie Schritt für Schritt zum Website Mockup kommen.
Inhalt
In 4 Schritten zum perfekten Website Mockup
Ein Designprozess, beginnend bei der Idee bis hin zur fertigen Umsetzung, muss immer ausführlich geplant und kontinuierlich geprüft werden. Die folgenden 4 Schritte zeigen Ihnen, wie Sie zum perfekten Website Mockup für Ihre Seite gelangen.
1. Schritt: Skizze
Beginnen Sie immer mit einer Skizze, im einfachsten Fall mit Papier und Stift. Zeichnen Sie erste Ideen auf und schaffen Sie damit die Grundlage für Ihre Website.
2. Schritt: Wireframe
Nach den ersten Entwürfen können Sie die Wireframes zeichnen. Dabei wird definiert, welche Elemente es auf der zukünftigen Website gibt und wo diese angeordnet werden sollen. Führen Sie erste Usability Tests durch und klären Sie das Ergebnis mit allen Beteiligten ab.
3. Schritt: Mockup
Auf Basis der Wireframes werden im nächsten Schritt die Mockups erstellt. Bestimmen Sie darin, welche Farben, Typographie, inhaltlichen Elemente etc. die Seite haben soll und wie die Nutzer und Nutzerinnen im Detail navigieren. Mockups können entweder Grafiken oder klickbare Versionen (sogenannte Klickdummys) sein.
4. Schritt: Designiterationen
In der Regel müssen Entwürfe mehrere Iterationen durchlaufen. Holen Sie sich regelmäßig Feedback vom Team und den Endnutzenden in allen Designphasen (besonders bei Schritt 2 bis 3) ein. Diese Rückmeldungen werden Ihnen dabei helfen, die Designs kontinuierlich zu verbessern und keine unnötigen Aufwände zu produzieren.
Was ist ein Website Mockup?
Ein Website Mockup ist eine Grafik oder klickbare Version (Dummy) im Webdesign, welches die spätere Website so detailliert wie möglich abbilden soll. Unter anderem legt es die genaue Typographie, die Inhaltselemente und die Navigation der Seite fest. Ein Website Mockup dient somit als grafische Basis für die Designumsetzung einer Website.
Was sind Wireframes?
Wireframes sind sehr vereinfachte, erste Versionen einer Website, mit denen das Design, zum Beispiel die Positionierung und die Größe der einzelnen Elemente der Seite, schematisch dargestellt wird. Das Ziel ist es, den Inhalt und die Anordnung der einzelnen Elemente der Website zu bestimmen.
Im Wireframe werden folgende Punkte definiert:
- Was beinhaltet die Website?
- Wo sind die Informationen angeordnet?
- Wie findet der Benutzer / die Benutzerin die gewünschten Informationen (Nutzerführung)?
Wireframes verfügen meist über Kästchen mit Platzhaltern für die späteren Elemente. Diese werden schließlich statisch dargestellt. Hilfreich sind diesbezüglich begleitende Texte, die die Inhalte genauer beschreiben.
In der Praxis werden Wireframes entweder mit speziellen Tools oder auch per Hand beziehungsweise mit einfachster technologischer Unterstützung angefertigt. Nutzen Sie diese Prototypen auf jeden Fall für erste Usability Tests, bevor es an die Verfeinerung geht – der Änderungsaufwand ist an dieser Stelle nämlich noch überschaubar.
Was sind Mockups?
Sind die Wireframes erstellt, folgen sogenannte Mockups. Diese Designentwürfe sind viel detaillierter und bilden das spätere Design der Website möglichst genau ab, zum Beispiel die verwendete Typografie, die Farben und das finale Erscheinungsbild der Seite.
Mockups dienen dazu, dem Team und allen involvierten Stakeholdern exakte Entwürfe der späteren Seite zu präsentieren. Alle Beteiligten können sich nun einen guten Eindruck über den Designentwurf verschaffen und entscheiden, ob die Website so umgesetzt werden soll.
Was ist der Unterschied zwischen einem Website Mockup und Wireframe?
Ein Wireframe ist ein grober, statischer Entwurf einer Website und definiert den Inhalt, die Funktionen und die Anordnung der einzelnen Elemente. Dabei geht es vor allem darum, zu überprüfen, ob das Konzept verständlich ist und überhaupt umgesetzt werden kann. In einem Mockup wird die zukünftige Website so detailliert wie möglich visualisiert. Farben, Schriftart und -größe, Bilder, Grafiken sowie alle Details zu den Inhaltselementen sind im Mockup bereits definiert.
Beide sind Visualisierungsformen für neue Websites, haben jedoch andere Zielsetzungen. Das Wireframe wird in einer sehr frühen Konzeptionsphase eingesetzt, um das spätere Design in sehr vereinfachter Form darzustellen und Entscheidungen über inhaltliche Elemente und deren Positionierung treffen zu können. Ein Mockup wird aufbauend auf das Wireframe erstellt und zeigt das detaillierte Design der zukünftigen Seite. Das „Look & Feel“ der Seite kann somit besser beurteilt werden.
Die besten Wireframe und Mockup Tools
Adobe Photoshop
Da ein Mockup so detailliert und realitätsgetreu wie möglich aussehen soll, wird meist auf die bekannte Software Adobe Photoshop zurückgegriffen. Photoshop bietet viele Designmöglichkeiten, jedoch ist die Bedienung dieses Programms komplex und zeitaufwändig. Falls Sie noch keine Kenntnisse mit Photoshop haben, müssen Sie sich erst einarbeiten. Die Erstellung eines Mockups kann für Neulinge dementsprechend relativ arbeitsintensiv werden.
Balsamiq
Dieses Tool ist als Webversion verfügbar und kann auch als Desktopversion heruntergeladen werden. Die Bedienung von Balsamiq ist einfach und intuitiv, jedoch ist das Erstellen von komplexeren Mockups nicht möglich. Das Tool ist definitiv für Beginner geeignet.
Axure
Mit Axure können komplexe Mockups und sogar Klickdummys erstellt werden. Dieses Tool bietet viele Vorlagen, vorgefertigte Elemente und zahlreiche andere Funktionen an. Als Einsteiger sollte man etwas Einarbeitungszeit mitbringen, bis man sich einen guten Überblick über alle Funktionen verschafft hat.
Pencil
Diese Open-Source-Software ist eine kostenlose Desktopversion und kann lizenzfrei genutzt werden. Dank seines handlichen Drag-and-Drop-Editors und zahlloser Vorlagen ist Pencil hervorragend für Anfänger und Anfängerinnen geeignet und garantiert überzeugende Ergebnisse in kurzer Zeit.
Moqups
Dieses Mockup Tool ist als reine Webanwendung verfügbar. Moqups bietet einen Drag-and-Drop-Editor, Schablonen und viele Funktionen, um einfache Mockups und Klickdummys erstellen zu können. Erhältlich ist dieses Tool als kostenlose Version mit der Möglichkeit zum kostenpflichtigen Upgrade.
Mockingbird
Mockingbird ist eine kostenlose, webbasierte Anwendung, die nicht heruntergeladen werden muss. Dieses Tool ist übersichtlich und bietet verschiedene Module und Vorlagen. Geeignet ist dieses Tool sowohl für Beginner als auch für Fortgeschrittene.
Website Mockup PSD zum Personalisieren
Für einfachere Fälle bietet sich oftmals auch ein sogenanntes PSD Mockup an. Gemeint sind damit kostenlose oder kostenpflichtige Mockup-Templates im PSD-Format, die Sie mit Photoshop, Gimp und ähnlichen Bearbeitungsprogrammen personalisieren können.
Solche Website-Mockup-Vorlagen haben den Vorteil, dass sie die Arbeit des Designers oder der Designerin deutlich erleichtern und beschleunigen können, da viele Elemente, die sonst erst mühevoll erstellt werden müssen, bereits vorhanden sind. Das PSD-Format liefert die nötige Editierbarkeit und vor allem hochauflösende Grafiken, um die Inhalte des Website-Mockups angemessen zu präsentieren.
Fazit: Von der ersten Idee bis zum Website Mockup
Der grafische Entwurf einer neuen Website schafft eine optimale Grundlage für alle weiteren Designentscheidungen. Die Umsetzung solcher Wireframes und Mockups ist einfacher als gedacht. Mittlerweile gibt es einige Tools auf dem Markt, mit denen Sie kinderleicht Designprototypen erstellen können.
Von der ersten Idee bis hin zur fertigen Website ist es ein langer Weg zum fertigen Webdesign. Scheuen Sie sich also nicht vor Design-Iterationen und nehmen Sie jedes Feedback an, um das perfekte Mockup für Ihre Website zu erstellen.
Titelbild: Chinga_11 / iStock / Getty Images Plus
