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?

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.

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.

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.