Mock-up und Wireframe: So visualisieren Sie Ihr Website-Konzept
Da die neue Website oder App zu Beginn nicht viel mehr als ein Gedankenkonstrukt ist, sind visualisierte Gestaltungskonzepte als Basis für die spätere technische Umsetzung unverzichtbar. Nur so können Sie einen Kunden von der geplanten Homepage bzw. Anwendung überzeugen oder Programmierern vermitteln, wie das Webprojekt später funktionieren und aussehen soll. Außerdem entdecken Sie unter Umständen bereits im Vorhinein Unstimmigkeiten, die Sie in der Folge beseitigen können. Zwei Begriffe, die in diesem Zusammenhang immer wieder fallen, sind „Mock-up“ und „Wireframe“. Was steckt genau hinter diesen beiden verschiedenen Entwurfstypen?
Wireframe: Das funktionale Grundgerüst
Der Begriff Wireframe stammt aus dem Englischen und bedeutet so viel wie „Drahtgerüst“. Ein Webanwendungs- oder Website-Wireframe bietet die Möglichkeit, das zugrundeliegende Konzept grafisch darzustellen, noch bevor der eigentliche Quellcode programmiert wird. Es geht einzig darum, die Beziehungen der verschiedenen Elemente und somit die Struktur des Webprojekts greifbar zu machen. Wireframes sind also im Prinzip Skizzen, die die Funktionalität und das Layout beschreiben. Sie stellen Entwürfe
- der eingesetzten Navigationselemente,
- klassischer Webelemente wie Header, Body, Formularen oder Links,
- des Layouts der einzelnen Elemente
- und der zum Einsatz kommenden Inhaltstypen
des geplanten Webprojekts dar und sollen dazu beitragen, die Nutzererfahrung des Endprodukts bereits zu diesem frühen Entwicklungsstadium zu optimieren. Die grafische Darstellung und der geplante Content spielen in Wireframes hingegen keinerlei Rolle, denn dieser Entwurfstyp setzt ausschließlich den Rahmen für die spätere Ausarbeitung des Designs und enthält nur Platzhalter für Texte und Bilder. Je nach Umfang und Einsatzzweck werden Wireframes klassisch per Hand gezeichnet oder digital mithilfe von Präsentations- oder Bildbearbeitungsprogrammen erstellt.
Mock-up: Die vorläufige Designvorlage
Der Terminus Mock-up entspringt ebenfalls der englischen Sprache und bedeutet so viel wie „Attrappe“ oder „Lehrmodell“. Auch dieser Entwurfsansatz dient der Visualisierung des geplanten Webprojekt-Konzepts und ergänzt Wireframes durch Designelemente, weshalb sie häufig auch auf diesen aufbauen. Mit einem App- oder Website-Mock-up wird also nicht einfach nur das grundlegende Layout inklusive Beschreibung der Funktionen und Platzhalter für Inhalte präsentiert, sondern auch bereits die erste Fassung des späteren Designs. Zu diesem Zweck wird bei der Erstellung eines Mock-ups mit
- Farben,
- Typographie,
- Bildern
- und Grafikelementen
gearbeitet, die dem Layout Leben einhauchen und einen guten Einblick verschaffen, wie das Webprojekt am Ende im Browser bzw. auf den verschiedenen Displays aussehen könnte. Zur Erstellung von Mock-ups dienen gewöhnliche Grafikprogramme wie Photoshop. Darüber hinaus gibt es auch spezifische Mock-up-Tools wie Balsamiq, mit deren Hilfe Sie nicht nur unkompliziert verschiedene Seiten erzeugen, sondern auch mit Verlinkungen versehen können. Solche komplexen Mock-ups ähneln stark den interaktiven Prototypen (Click-Dummies), die allerdings bereits erste Codierungen auf Basis von HTML, CSS und Co. enthalten.
Wireframe oder Mock-up?
Indem Sie bereits zu einem frühen Stadium der Webprojekt-Konzeptionierung zu Visualisierungsmitteln greifen, steigern Sie Ihre Erfolgsaussichten enorm. Arbeiten Sie im Team, kommen Sie so wesentlich schneller auf einen gemeinsamen Nenner. Haben Sie einen externen Webentwickler mit der Programmierung beauftragt, können Sie Ihre Vorstellungen kaum besser präsentieren. Ferner wird er Ihnen schneller sagen können, welche Funktionen realisierbar sind oder Probleme aufwerfen und wo es in Sachen Usability der geplanten Webpräsenz hakt. Zuletzt sind die zu Papier gebrachten Entwürfe auch die beste Möglichkeit, Ihre App oder Website Kunden und Investoren vorzustellen.
Im Übrigen muss der Weg von der Idee über die Visualisierung bis hin zur Programmierung nicht immer über beide Entwurfstypen führen. Es gibt einige Szenarien, in denen ein Wireframe bereits ausreicht: Planen Sie beispielsweise nur eine neue interaktive Unterseite eines bestehenden Webprojekts, ist die Anfertigung eines Mock-ups überflüssig, da das Design ja zum Großteil bereits vorgegeben ist. Ähnlich verhält es sich bei der Erweiterung von Webapplikationen. Ein Wireframe ist außerdem die beste Visualisierungsform, wenn Sie einen Grafiker damit beauftragt haben, das Design zu erstellen und ihm dabei maximalen Freiraum gewähren möchten.
Spätestens wenn es darauf ankommt, die eigenen Vorstellungen der grafischen Elemente zu präsentieren, kommen Sie an einem Mock-up allerdings nicht vorbei. Je tiefer Sie zuvor bei Ihrem Wireframe-Entwurf ins Detail gegangen sind, desto einfacher haben Sie es bei der Erstellung dieser vorläufigen Designvorlage. Ein wesentlich größerer Aufwand und höhere Kosten sind logischerweise mit den mehrteiligen, interaktiven Mock-ups samt Seiten- und Linkstruktur verbunden. In bestimmten Fällen können diese allerdings die Notwendigkeit codebasierten Prototypen erübrigen.
Welche Rolle Responsive Webdesign bei der Entwurfserstellung spielt
Mit dem immer stärker in den Fokus tretenden Responsive Webdesign hat sich auch die Komplexität von Wireframes und Mock-ups grundsätzlich erhöht. War früher eine einzige Skizze absolut ausreichend, gehört heute die Anfertigung mehrerer Versionen für die unterschiedlichen Displaygrößen quasi zum Pflichtprogramm. Hinzu kommen funktionale Unterschiede wie Eingabemittel (Maus, Tastatur, Touchscreen) und verschiedene technische Voraussetzungen (Datenübertragung etc.), die ebenfalls bei der Konzept-Visualisierung berücksichtigt werden müssen.
Die veränderten Rahmenbedingungen haben dazu geführt, dass heute wesentlich häufiger auf ein Mock-up verzichtet und lieber sofort ein responsiver Prototyp erstellt wird, der automatisch die Eigenheiten mehrerer Geräte abdeckt. Allerdings haben auch die Software-Entwickler von Wireframe- und Mock-up-Tools auf die Veränderungen des Marktes reagiert und die Erstellung verschiedener Versionen eines Entwurfs vereinfacht. Wer sein Wireframe per Hand zeichnen möchte, dem bleibt allerdings nichts anderes übrig, als Entwurf um Entwurf einzeln zu erstellen. In unserem Ratgeber haben wir die besten Mock-up- und Wireframe-Tools aufgelistet.
Ihnen fehlt noch ein Favicon für Ihre Website? Mit dem kostenlosen Favicon-Generator von IONOS können Sie sich im Handumdrehen ein eigenes Homepage-Logo generieren!