Mockups sind nicht neu. Es gab sie schon lange, bevor jemand an Computer oder gar Webseiten dachte. Der Begriff Mockup bezeichnet ein grobes Anschauungsmodell, das vorab einen Eindruck eines geplanten Produkts vermittelt. Er ist abgeleitet vom englischen Wort “mock” (Nachahmung). Die Kleiderskizze eines Modeschöpfers fällt darunter ebenso wie das Miniaturmodell eines Architekten. Mockups sind also ein wichtiger Zwischenschritt auf dem Weg von der Idee zum fertigen Design.
Ein Mockup einer Webseite oder einer App stellt einen Entwurf des Designs dar, der bereits einen realistischen Eindruck des finalen Webdesigns vermittelt. Am besten gelingt die Definition durch eine Abgrenzung des Mockups zur vor- und nachgelagerten Entwicklungsstufe des Webdesigns.
Vor dem Mockup wird gewöhnlich eine Wireframe erstellt. Dieser stellt lediglich ein grobes Konzept der Webseite dar. Hier wird nur die Anordnung der Elemente auf der Webseite geplant. Ein Wireframe beinhaltet keine Farben, keine Texte und keine Bilder. Er enthält nur Platzhalter für diese Elemente.
Nach dem Mockup wird ein Prototyp der Seite erstellt. Er ist voll funktionsfähig, insbesondere ist er also interaktiv. Test-User können anhand dieses Prototyps alle Funktionen der Seite testen. Ein Mockup stellt den Entwicklungsschritt zwischen dem Wireframe und dem Prototyp dar. Texte müssen noch nicht fertiggestellt sein, aber Aufteilung und Typographie sind schon erkennbar. Oft werden dazu die bekannten “Lorem ipsum”-Platzhalter genutzt, also Phantasiewörter ohne jede Bedeutung. Auch die vorgesehene Auswahl der Farben ist bereits ersichtlich.
Allerdings ist ein Mockup nicht unbedingt funktionsfähig. Ein Button mit “Hier klicken” ist also beispielsweise schon in seiner geplanten Größe und seinem geplanten Design enthalten, aber die entsprechenden Funktionen sind noch nicht zwingend implementiert. In der Praxis können die Grenzen zwischen Mockups und Prototypen unscharf sein, weil es durchaus möglich ist, auch Funktionalitäten bereits in Mockups zu testen.
Mockups dienen zunächst dazu, mögliche Fehler oder Probleme frühzeitig zu erkennen. Bis zur Erstellung der Mockups ist der Programmieraufwand noch gering. Deshalb können Änderungen des Konzepts in dieser Phase des Projekts noch einfach umgesetzt werden. Daneben spielen Mockups auch im Austausch zwischen den Webentwicklern und dem Kunden eine wichtige Rolle. Der Kunde kann Änderungswünsche am Design frühzeitig äußern.
Weitere Vorteile von Mockups hängen von ihrer Detailtiefe ab. Mockups können die komplette interne Verlinkung einer Webseite enthalten. In diesem Fall können sie zu Usability-Tests genutzt werden. Probleme bei der Navigation gehören zu den häufigsten Gründen, warum User eine Webseite frühzeitig verlassen. Usability-Tests sind daher unverzichtbar, und insbesondere komplexe Projekte können deutlich beschleunigt werden, wenn diese Tests frühzeitig beginnen.
Im Web sind zahlreiche kostenlose und kostenpflichtige Tools verfügbar, die das Erstellen von Mockups erheblich vereinfachen. Viele dieser Tools sind – ähnlich wie die unzähligen Tools zur Erstellung von Webseiten anhand von Vorlagen – eher für die Nutzung durch einzelne User geeignet. Sie sind also primär für den Privatgebrauch konzipiert. Enger wird die Auswahl, wenn das Tool die Zusammenarbeit in Teams unterstützen soll. Die webbasierte App Moqups ist ein Beispiel für Tools, die auch die Zusammenarbeit in Teams unterstützen.
Liefern Moqups und ähnliche Tools professionelle Designs?
Ob die von Drag-and-Drop-Tools generierten Designs den Anforderungen genügen, hängt selbstverständlich von den individuellen Ansprüchen ab. Festzuhalten ist in jedem Fall, dass sie nicht primär für den Gebrauch durch spezialisierte Webdesigner konzipiert sind. Der unschätzbare Vorteil des Einsatzes solcher intuitiv bedienbaren Tools besteht darin, dass auch Nicht-Designer ihre Ideen schnell in Entwürfe umsetzen können. Entwicklerteams bestehen aus Spezialisten unterschiedlicher Fachgebiete. Experten für die Entwicklung von Apps sind beispielsweise meist keine Spezialisten für hochwertige Designs. Aber sie müssen den Designern selbstverständlich mitteilen, welche Bedien- und Anzeigeelemente ihre App benötigt. Mit Tools wie Moqups können sie für die Designer schnell und intuitiv ein Mockup erstellen, dessen Design ihren Anforderungen an die Funktionalität ihrer App genügt.
Am Anfang steht die Funktionalität
Vor allen Gedanken über das Design und die Anordnung von Elementen auf der Webseite steht die genaue Auflistung der Elemente, die überhaupt benötigt werden. Bevor ein Tool zur Generierung von Mockups gestartet wird, sollte eine vollständige Liste der benötigten Elemente der Webseite erstellt werden. Dazu gehören:
Zwingend festzulegen ist auch im Voraus, welche dieser Elemente “above the fold” platziert werden sollen. Damit ist der Bereich der Seite gemeint, der sofort sichtbar ist, ohne dass der User nach unten scrollen muss. Insbesondere für mobile Endgeräte ist dies ein entscheidender Punkt.
Mockup Bilder dienen im Kontext des Webdesigns dem Zweck, das Aussehen der Webseite auf unterschiedlichen Endgeräten zu illustrieren. Mockup Bilder sind also das, was man erhält, wenn eine Webseite auf verschiedenen Endgeräten aufgerufen wird und Fotos davon gemacht werden. In der Praxis werden solche Bilder allerdings computergeneriert erstellt.
„*“ zeigt erforderliche Felder an
Ich bin dein erster Ansprechpartner:
Inhaber & Geschäftsführer
Marco Janck
Telefon:
030 | 9599987-20
E-Mail:
support@sumago.de
Adresse:
Motzener Str. 12-14
12277 Berlin
Schwerpunkte
