Soll eine neue Webseite oder App entstehen oder eine alte überarbeitet werden, dann ist es sinnvoll, mit Mockups zu arbeiten. Digitalagenturen wie AdNord Media nutzen diese als professionellen Entwurf, um das mögliche Design inklusive Navigation und Inhaltsstruktur zu visualisieren, also anschaulich zu machen.
Was ist ein Mockup?
Ein Mockup, auch Mock-up, ist ein Vorführmodell, quasi eine Attrappe, um aus einem Kundenwunsch beziehungsweise einer Idee ganz individuelle Webdesigns zu erstellen. Es dient dabei als Vorlage für die Programmierung. „Neben dem Briefing – der Einführung in das Projekt anhand von Kundenvorstellungen und -anforderungen – ist es oft eine hilfreiche Grundlage für die weitere Zusammenarbeit mit dem Auftraggeber“, erläutert Grafikerin Maleen Mantwill von AdNord Media. „Der Kunde kann so anschaulich sehen, wie sein Produkt auf digitalen Geräten wirkt und funktionieren kann.“ Elemente eines Mockups sind vielfach Typografien, Grafiken, Bilder und Farben.
Die Vorteile von Mockups auf einen Blick:
- Guter erster Eindruck von einer entstehenden Seite
- Funktionalität kann frühzeitig durch einen Usability-Test getestet werden
- Fehler können rechtzeitig erkannt werden – noch vor der Programmierung
- Viele Bereiche der UX (User Experience) können bereits beurteilt werden
Wie entsteht ein Mockup?
„Ein entworfenes Design, etwa ein Plakat, wird mit Adobe Photoshop in eine passende virtuelle Umgebung gesetzt. Dadurch erreicht man einen möglichst realistischen Eindruck von dem zu entwickelnde Webdesign“, erläutert Maleen Mantwill. Im Internet gibt es – meistens kostenpflichtig – gute Photoshop-Mockups, die die Prozedur beschleunigen. Dort sind die Designs mithilfe von vorgefertigten Masken und Ebenen einfach einzusetzen.
Am besten eignet sich das Adobe-Programm Photoshop für eine Mockup-Erstellung. Doch auch Adobe Illustrator und Adobe Indesign helfen Grafikern bei der Konzeption von Mock-Ups. Durch die verschiedenen Ebenen und Masken ist es dort möglich, glatte Kanten eines Plakats nachzuempfinden und relativ unkompliziert Designs in andere Umgebungen einzusetzen. Auch eine Änderung des Blickwinkels für den Betrachter ist möglich, zum Beispiel wenn das Design für einen Magazintitel gedacht ist.
Dem Kunden wird das Mockup dann auf digitalen Devices präsentiert – dazu gehören zum Beispiel mobile Endgeräte wie Tablets oder Smartphones, Desktops und Screens. Weitere Möglichkeiten sind Magazine, Visitenkarten, beleuchtete Werbetafeln – sogenannte Citylights –, und Ähnliches. Das Mockup wird also in seiner späteren natürlichen Umgebung dargestellt.
Was ist bei der Erstellung zu beachten?
Wichtig ist es, möglichst realitätsnah zu bleiben, um so dem Kunden einen echten Eindruck von einer Umsetzung zu geben. Beispielsweise ist der Broadway in New York eine eindrucksvolle Kulisse für ein Plakat, vermittelt aber nicht die Realität für eine regionale Werbetafel. „Da würde sich ein Citylight-Plakat an einer Haltestelle wesentlich besser eignen“, betont Maleen Mantwill.
Unerlässlich für ein Mockup ist auch ein sauberes Arbeiten. Das bedeutet: Vermeiden von Blitzern, weißen Ecken sowie perspektivisch falscher Darstellung und Verzerrung. Sonst kann ein Mockup schnell unprofessionell aussehen und vermittelt genau das Gegenteil des gewünschten Eindrucks. Denn es soll gut auf den Betrachter wirken – und überzeugen!
Was ist ein Wireframe?
Ein Wireframe ist eine sehr rudimentäre Vorlage eines zukünftigen Designs. Meist enthält es noch keine Farben oder Fotografien und stellt lediglich einen groben Rahmen oder eben halt ein einfaches Drahtgerüst (englisch: wireframe) dar. Diese Scribbles werden meist einfach handschriftlich auf einem Blatt notiert oder auf einem Flipchart angezeichnet.
Was ist Prototyp?
Ein Prototyp ist ein bereits funktionsfähiges Design und lässt bereits sehr große Rückschlüsse auf das fertige Produkt (Webseite, Grafik) zu. Meist laufen auch schon alle Plug-Ins und Funktionen der Webseite oder der App. Dem Kunden wird somit ein sehr realer Blick auf die technische Umsetzung gegeben.
Von Steffi Urban
