Mockup

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 getestet werden 
  • Fehler können rechtzeitig erkannt werden – noch vor der Programmierung 

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. 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, 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! 

Empfohlene Beiträge