Das Mockup als Basis eines Webdesign-Prozesses

Was ist ein Mockup?

Mockup ist ein Begriff aus der englischen Sprache, welcher übersetzt so viel wie Nachbildung oder Atrappe bedeutet. Dabei handelt es sich um den digitalen Entwurf einer Webseite oder einer App. Das Mockup kommt in der frühen Konzeptionsphase im Rahmen des Webdesigns zum Einsatz, um Konzepte und Ideen zu visualisieren. Damit werden die Navigationsstruktur, sowie Site- und Designelemente detailliert veranschaulicht.

Mockups können sowohl Vorlagen ohne Funktion sein, welche mit einem Bildbearbeitungsprogramm erstellt wurden, sie können aber auch als Entwurf vorgestellt werden, der mit speziellen Tools erstellt wurde und bereits einfache Bedienelemente enthält, welche mit simplen Funktionen verknüpft sind.

Mockups im Webdesign

Im Webdesign gelten Mockups als nützliches Mittel, um Ideen umzusetzen, indem daraus ein passendes Design entwickelt wird. Sie bauen in der Regel auf vorher erstellten händischen oder digitalen Skizzen, sogenannten Wireframes auf. Sie dienen dazu, das Look and Feel des fertigen Webdesigns sichtbar zu machen.

Unterschiede zwischen Mockup, Wireframe und Prototyp

Jede dieser Methoden kommt zum Einsatz, wenn die Entwurfsphase ansteht, und noch keine einzige Zeile Code vom finalen Produkt geschrieben wurde. Hier zeichnet sich bereits ein grober Unterschied ab, denn Mockup und Wireframe sind statisch. Die Prototypen ermöglichen hingegen eine interaktive Bedienung.

Wann wird welches Format im Designprozess genutzt?

Wireframe

Dabei handelt es sich um nichts anderes, als eine Skizze. Sie kann per Hand oder digital erstellt werden. Ein Wireframe beinhaltet noch keine Farben oder Designelemente. Es setzt sich in der Regel aus grauen / schwarzen Linien, Kästen und Überschriften zusammen. Visuelle Elemente wie zum Beispiel Textblöcke oder Bilder werden bewusst weggelassen, damit der Fokus auf der Inhaltsgruppierung und der Struktur bleibt.

Mockup

Ein Mockup stellt, wie auch das Wireframe, die Funktionalität und den Inhalt dar. Dabei werden visuelle Elemente ausgearbeitet, damit das Mockup der späteren Website möglichst nahe kommt. Mockups sind häufig statisch. Doch immer häufiger werden auch bereits Funktionalitäten, wie Verlinkungen oder ein Menü eingebaut.

Prototyp

Der Prototyp ist nicht statisch, sondern immer interaktiv. Der Prototyp beinhaltet bereits die meisten Funktionalitäten. Sinn und Zweck ist es, mit den Nutzern Tests durchzuführen, damit das daraus resultierende Feedback schnell umgesetzt und die Website erstellt werden kann.

Wofür werden Mockups im Webdesign eingesetzt?

Sie sind Bestandteil der frühen Entwicklungsphase, wenn es um die Erstellung von Websites und Apps geht. Sie werden nicht nur zur Präsentation, sondern auch zur Qualitätskontrolle eingesetzt. Ziel ist es, Vorstellungen und Anforderungen an das User Interface gemeinsam mit dem Kunden abzustimmen. Diese Abstimmung erfolgt hinsichtlich…

• der Grundfunktionen
• der Navigation
• der Inhaltsarchitektur
• des Designs

Mockups werden häufig genutzt um dem Kunden die ersten Webdesign-Ideen zu präsentieren. Daher beeinflussen sie nicht selten die endgültige Auftragsvergabe.

Darüber hinaus werden sie auch für Usability Tests genutzt, um sich den großen Programmieraufwand im Vorfeld zu sparen. Im Zuge dieser Tests lassen sich potenzielle Probleme frühzeitig erkennen. Noch bevor der Prototyp erstellt wird. Auf diese Weise wird das Risiko minimiert, dass es mitten in der Entwicklungsphase erforderlich ist, das Konzept komplett zu überarbeiten. Mockups können also dazu beitragen, die Kosten und den Zeitaufwand während eines Website-Projektes so gering wie möglich zu halten.

Wie erstellt man ein Mockup?

Eine beliebte Variante ist die Nutzung eines entsprechenden Generators. Dabei handelt es sich um einen Onlinedienst, bei dem Künstliche Intelligenz (KI) Software und Stockfotos verwendet werden, um das Mockup mittels Vorlage automatisch zu erstellen. Der Nutzer lädt dazu sein Design hoch und die Software kümmert sich um alles Weitere.

Diese Technik ist deshalb so beliebt, weil sie einfach und günstig ist. Ganz ohne Nachteile kommt sie allerdings nicht aus: Sie ist wenig originell und wird von vielen Designern verwendet. Das führt dazu, dass man auf Portfolio-Seiten stets die gleichen Mockups zu sehen bekommt. Trotzdem handelt es sich um eine gute Technik, welche im Notfall sehr hilfreich sein kann. Und solange der Kunde kein ambitionierter Fan von Design-Mockups ist, dürfte er wohl auch kein Problem damit haben. Viele dieser Dienste sind zwar kostenlos, ermöglichen jedoch nur eine begrenzte Anzahl an Varianten oder setzen Wasserzeichen. Wer sich für einen kostenpflichtigen Generator entscheidet, muss mit einem Abo und monatlichen Kosten zwischen 10 und 20 Euro rechnen.

Individuelles Mockup erstellen

Bei einem individuellen Mockup handelt es sich um eines, das speziell auf das jeweilige Design zugeschnitten wurde. Damit sich das Designkonzept letztendlich verkauft, ist es ratsam auf diese Methode zurückzugreifen. Auch, wenn die Kosten dafür deutlich höher liegen, als wenn ein kostenpflichtiger Generator zum Einsatz kommt. Allerdings macht es auch nur dann Sinn eine individuelle Version zu erstellen, wenn sich das Ergebnis deutlich von einer Vorlage unterscheidet. Schließlich ist die Erstellung mit Aufwand verbunden und wird letztendlich nur ein einziges Mal verwendet.

Damit das Mockup auch wirklich individuell ist, wird auf die Nutzung von Stockfotos verzichtet. Stattdessen kommen eigene Bilder zum Einsatz. Ist das nötige Equipment und das Know-how vorhanden, können die Fotos selbst aufgenommen werden. Alternativ bietet sich ein Fotograf an, der jedoch seinen Preis hat. Am besten eignen sich Fotos, welche dem Kunden gehören. Dabei ist es völlig irrelevant, ob diese Fotos eine minderwertige Qualität als Stockfotos aufweisen. Dem Kunden vermitteln sie in jedem Fall ein authentischeres Bild vom Endergebnis.

Eines der besten Tools ist Axure. Es kostet ab 25 US-Dollar pro Monat und ist somit nicht gerade günstig. Dafür bietet es viele Möglichkeiten und ein maximum an Flexibilität.

Eine andere Möglichkeit Mockups zu erstellen, sind Design-Programme, wie Affinity Designer oder Adobe Illustrator. Dabei ist Affinity Designer eine gute Alternative zum Illustrator, da es nicht auf einem Abo-Modell beruht, sondern einmalig bezahlt wird.

Wiederverwendbare Vorlage nutzen

Dabei handelt es sich zwar um individuelle Vorlagen, jedoch werden diese von den Designern so allgemein gestaltet, dass sie in mehreren Projekten Anwendung finden können. Da es sehr aufwendig und unpraktisch sein kann, ein individuelles Mockup für jedes einzelne Projekt zu erstellen, bietet sich diese Alternative an, um selbstgemachte und zugleich wiederverwendbare Mockups in günstiger Ausführung zu nutzen. Designer haben mit dieser Variante die Möglichkeit, ihren für sie typischen Stil, beziehungsweise die eigene persönliche Marke mit in die Präsentation einfließen zu lassen.

Plugins einsetzen

Mit Plugins sind Integrationen von Drittanbietern gemeint, welche sich mit dem persönlichen Design-Programm verbinden und anschließend die Erstellung von Mockups übernehmen. Mit Plugins genießen Designer die Möglichkeit, Mockups mit ein und demselben Programm zu kreieren, mit dem sie auch ihre anderen Designs entwerfen. Nach der Erstellung des Mockups, kann der Designer noch Änderungen vornehmen. Dies geschieht mithilfe der Tools, welche das Programm zur Verfügung stellt.

Die Plugins stellen das Beste aus beiden Welten zur Verfügung: Eine einfache und günstige Vorlage mit Personalisierungsmöglichkeit. Diese Technik ist jedoch primär für digitale Designs geeignet. Dies hat den einfachen Hintergrund, dass die meisten Plugins für Programme verwendet werden, mit denen sich Prototypen erstellen lassen. Die Plugins werden von einigen beliebten Diensten zum Download angeboten. Diese Programme müssen heruntergeladen werden, weshalb man dafür nur einmalig zahlt. Sie stellen also die günstige Alternative zu Generatoren mit Abo-Modell dar.

Fazit

Mockups stellen eine gute Möglichkeit der Visualisierung dar, um dem Kunden ein authentisches Bild vom Endergebnis zu vermitteln. Die unterschiedlichen Methoden haben ihre Vor- und Nachteile. Es gilt deshalb abzuwägen, welche Variante für den jeweiligen Designer und das jeweilige Design in Frage kommen. Ihr Nutzen ist unumstritten, denn sie können nicht nur den Zeit- und Kostenaufwand senken, sie können letztendlich auch über die Auftragsvergabe entscheiden.