Was ist ein Mockup?
Ein Mockup ist eine statische, visuelle Darstellung eines Produkts. Im Falle eines Mockups im Webdesign handelt es sich um eine Website, ein Portal oder eine Anwendung. Der englische Begriff bedeutet auf Deutsch „Attrappe“, „Simulation“ oder „Nachbildung“.
Was versteht man unter Mockup?
Mockup ist ein Begriff, der im Zusammenhang mit der Erstellung von Websites verwendet wird und normalerweise einen Prototyp einer Anwendung oder eines Layouts bezeichnet. Mockups veranschaulichen das endgültige Aussehen eines Produkts in der Phase seiner Entstehung. Bereits zu Beginn können Sie viele Aspekte des Projekts planen, die sich auf die endgültige Qualität des Produkts während der Programmierung auswirken werden. Ein gut vorbereitetes Mockup erleichtert den Entwicklern, die die Front-End-Schicht erstellen, die Arbeit erheblich.
Unterschied zwischen einem Mock Up und Wireframe
Während ein Wireframe in erster Linie die Struktur des Produkts darstellt, zeigt ein Mockup, wie das Produkt aussehen wird, zum Beispiel welchen Stil, welche Farbkombinationen und welche Schriftarten wir verwenden werden. Wie Wireframes sind Mockups jedoch statisch, d. h. sie haben keine klickbaren Elemente, sondern werden nur durch das grafische Medium (beispielsweise den CTA-Button) signalisiert.
Das Wireframe hilft bei der endgültigen Entscheidung über das Farbschema, den visuellen Stil oder die Typografie des Produkts. Die Genehmigung des visuellen Entwurfs erfolgt in der Regel auf der Grundlage von Mustern. Iterationen des Designs auf der Ebene des visuellen Mock-ups ermöglichen deutlich niedrigere Projektkosten als Änderungen an der Benutzeroberfläche nach der Markteinführung des Produkts. Aufgrund des Materialaufwands und der Zeitersparnis ist es eine gute Praxis, mit der Umsetzung des Produkts erst nach der endgültigen Abnahme des visuellen Erscheinungsbilds in der Mockup-Phase zu beginnen. Im Gegensatz zu Wireframes können Mockups nicht skizziert werden, sondern werden mit Mockup Tools erstellt.
Vorteile von Mockups
Mit Mockups können Unternehmen ihr Design auf vielen Ebenen präsentieren. Wenn ich ein Logo entwerfe, kann ich sehen, wie es auf einem Briefkopf aussieht, in einer relativ kleinen Größe. Ich weiß auch, wie es in einem Schaufenster aussieht. Dank dieser Lösung bin ich in der Lage, Korrekturen vorzunehmen. Wer ein Grafikdesigner ist und das Adobe-Paket verwendet, findet Tausende von Dateien, die man bearbeiten kann. In der Regel muss man nur eine Ebene ändern und diese durch das eigene Logo ersetzen. Der Rest wird durch Ebenen Effekte erledigt. Wer mit dem Thema Computergrafik nicht vertraut ist, kann Tools aus dem Internet verwenden.
Funktion eines Mockups
Aus der Sicht des Marketings ist ein Logo eines der Elemente, die den Verkauf beeinflussen. Dies geschieht durch Assoziationen oder durch das Hervorrufen von positiven Emotionen bei den Empfängern und dem Wunsch, sich mit einer Marke zu identifizieren. Bevor ein Logo jedoch eine Wirkung entfalten kann, muss es erstellt werden. Ein Grafikstudio entwirft verschiedene Varianten dieses unverwechselbaren grafischen Zeichens, und die besten Vorschläge werden dem Kunden vorgelegt. Ein Mockup hilft dabei, sich besser vorstellen zu können, wie es in der Realität aussehen wird.
Anwendungsgebiete
Die Verwendung von Mockups ist heutzutage weit verbreitet. Sie wird in vielen Situationen eingesetzt, wodurch sie die Wahrnehmung des Projekts durch den Kunden positiv beeinflusst.
Welche Mockup Tools gibt es?
Die derzeit beliebtesten Anwendungen zur Erstellung interaktiver Mockups sind wie Figma, Sketch oder Adobe XD erstellt. Im Internet gibt es jedoch auch viele kostenfreie sowie mit Kosten verbundene Services, welche Mockup Vorlagen anbieten.
Weitere Mockup Tools sind unter anderem:
Axure RP
Balsamiq Mockups
frame box
Magic Mockups
Mockdrop
Was ist ein Mockup im Webdesign?
Das Webdesign unterscheidet zwei Formen von Mockups: Lo-Fi Mockup und Hi-Fi Mockup. Der erste ist ein vorläufiger Entwurf mit sehr wenigen Details. Sie soll einen allgemeinen Überblick über die Website geben. Das HiFi-Mockup hingegen stellt die endgültige Version dar. Dort finden wir alle Elemente, die innerhalb der Website platziert werden sollen, das passende Farbschema, sowie die Visualisierung der einzelnen Unterseiten.
Das Webdesign beginnt oft mit der Erstellung eines Low-Fi-Mockups, das die Anordnung der einzelnen Elemente und die Übergänge zwischen den Ansichten veranschaulicht. Dank der Erstellung einer Entwurfsversion ist es möglich, auch sehr schwerwiegende Änderungen an den Ansichten und am Konzept laufend vorzunehmen. Im Falle der endgültigen Version des Mockups würden solche Aktionen viel mehr Zeit in Anspruch nehmen.
Bedeutung fürs Online-Marketing
Durch die Verwendung von Mockups können die Kunden sehen, wie das in Auftrag gegebene Material in Wirklichkeit aussehen wird. Die Erstellung eines Mockups und einer detaillierten Auftragsspezifikation sind oft die ersten Schritte, mit denen ein IT-Projekt beginnt. Ohne dies kann die Umsetzung weniger reibungslos verlaufen und höhere Kosten verursachen. Natürlich ist ein Mockup für Entwickler notwendig, um die Front-End-Schicht zu programmieren.
Hinterlasse einen Kommentar