Mockup

Ein Mockup (dt. Attrappe) dient Präsentationszwecken, aber auch der Visualisierung von Ideen beim Erstellen einer Website. Er wird digital gestaltet und vereinfacht die Absprache mit dem Kunden.

Abgrenzung zu Wireframe und Prototyp

Oft werden diese Begriffe als Synonyme verwendet, dabei beschreiben sie drei verschiedene Phasen im Prozess der Visualisierung einer Website.

Wireframe

Ein Wireframe (dt. Gitterrahmen) ist eine der ersten Visualisierungen der Website. Sie gibt das Design grob vereinfacht wieder und dient in erster Linie dazu, das Layout zu veranschaulichen. Dabei wird versucht die Fragen was?, wo? und wie? zu beantworten. Durch die mangelnde Detailtreue gilt ein Wireframe als low-fidelity Entwurf.

Quelle: https://www.webschmoeker.de/wp-content/uploads/2014/06/wireframe.jpg

Mockup

Mockups bauen zum Teil auf Wireframes auf, sind jedoch weitaus aufwendiger und vor allem detailgetreuer. Sie stellen durch Farben, Schriftarten und Grafiken einen exakten Entwurf der späteren Website dar. Dadurch kommt er dem finalen Design der Website sehr nahe. Mittlerweile sind Mockups nicht mehr zwingend statisch, daher verfließen manchmal die Grenzen zum Prototyp. Sie werden als middle- bis high-fidelity Entwurf beschrieben. Sie weisen also eine mittlere bis hohe Detailtreue auf.

Prototyp

Ein Prototyp simuliert die fertige Website in vollem Umfang. Er ist interaktiv und enthält dabei die gesamten Funktionen. Es ist der detailgetreueste Entwurf und damit die letzte Station vor der Veröffentlichung der Website. Daher wird er auch als high-fidelity Entwurf bezeichnet.

Beispiel eines Mockups

Dieser Mockup visualisiert das Design der Website auf Desktop, Laptop, Tablet und Smartphone. Nun kann der Kunde Feedback geben, ob das Layout und das Design seinen Wünschen entspricht.

Sechs kostenlose Tools zur Erstellung von Mockups

Auf diversen Webseiten gibt es kostenlose Templates, um Mockups zu erstellen. Beispielsweise auf www.mockupworld.co . Meist sind es .psd Dateien, die man mit Adobe Photoshop nach Belieben anpassen kann. Photoshop ist allerdings nicht kostenlos erhältlich, daher sind hier Tools aufgelistet, mit denen man kostenfrei Mockups erstellen kann:

1. Mockplus (auch als App für Andorid/IOS)
2. Moqups
3. Balsamiq Mockups
4. Mockingbird
5. Pencil
6. Lumzy

Weitere Tools

End-to-end Tools

End-to-end Tools erleichtern den Workflow, da sowohl Designs, als auch Animationen erstellt werden können. Somit muss man nicht auf verschiedene Programme zurückgreifen. Von Dokumentation über Mockups bis hin zum Prototypen – all das kann mit einem einzigen Programm erstellt werden.

Beispiele: UXPin, Adobe XD, Studio by InVision

Mockup Tools

Bei den Tools, die speziell für Mockups entwickelt wurden, steht im Vordergrund, Mockups besonders einfach zu erstellen. Manche fokussieren dabei mehr auf Funktion, anstatt auf Design, was dazu führt, dass nur qualitativ minderwertige Designs zur Verfügung stehen.

Beispiele: Principle, Framer, Balsamiq, Moqups

Grafik Software

Mit Grafiksoftwares, wie Adobe Photoshop, ist es möglich, durch eine große Auswahl an Farboptionen und visuellen Tools, eine besondere Detailtreue herzustellen. Außerdem kann man mit nur wenigen Klicks die verschiedenen Ebenen aus Photoshop in UXPin einfügen, wenn man Prototypen erstellen möchte.

Schwierig wird es jedoch, wenn es dazu kommt, das Design zu programmieren. Manche Dinge, die in Photoshop beispielsweise funktioniert haben, könnten Probleme bei der Programmierung bereiten.

Beispiele: Photoshop CC, Sketch, Illustrator CC

Programmierte Mockup

Das Programmieren kann meist bis zur Prototypphase aufgeschoben werden. Man kann jedoch auch ein Mockup programmieren. Dabei wird einem von Anfang an bewusst, was möglich ist und was nicht. Wenn man mit Programmieren vertraut ist, kann es sein, dass man dadurch Zeit spart, denn letzten endes muss der Mockup zwangsweise in HTML beziehungsweise CSS geschrieben werden. Jedoch kann es sein, dass es die Kreativität einschränkt, da man sich auf das Programmieren konzentriert und das Design außer Acht lässt.

Vorteile und Bedeutung

Ein Mockup ist essentiell, um sich ein Webdesign vorstellen zu können. Mit dem Mockup kann aussagekräftiges Feedback zur Visualisierung der Webseite eingeholt werden. Ein Mockup ist also ein unfertiger Webseiten Entwurf. Außerdem kann bereits vor der Programmierung ein Funktions- und Usability-Test vorgenommen werden, der zur Qualitätssicherung beiträgt. Daher sollte der Mockup auch recht detailliert sein.

Bedeutung für die Suchmaschinenoptimierung

Wenn man einen neuen Internetauftritt plant, sollte die Suchmaschinenoptimierung nicht außer Acht gelassen werden. Bei der Erstellung eines Mockups müssen SEO-Komponenten miteinbezogen werden. Wichtig sind Dinge wie die Dokumentgliederung und die Platzierung von Hx-Überschriften, sowie Bilder und Felder und Möglichkeiten der internen Verlinkung. All das muss mit einbezogen werden, um letzten Endes eine professionelle und gut funktionierende Seite zu führen.

Häufige Fragen

Was ist ein Mockup?

Ein Mockup ist ein Entwurf einer Website, der erstellt wird, um Ideen zu visualisieren.

Was ist der Unterschied zwischen einem Mockup und einem Wireframe?

Ein Wireframe kommt vorm Mockup zum Einsatz und stellt das Design der Website grob vereinfacht dar. Im zweiten Schritt wird das Website-Design durch ein Mockup deutlich genauer visualisiert.

Was ist der Unterschied zwischen einem Mockup und einem Prototyp?

Während es sich beim Mockup um einen Entwurf handelt, der die Website noch nicht im vollem Umfang simuliert, ist der Prototyp deutlich detaillierter und verfügt über alle Eigenschaften der späteren Website.

Quellen

• https://www.webschmoeker.de/webdesign/unterschied-wireframe-und-mockup/
• https://de.ryte.com/wiki/Mockup
• https://www.iqual.ch/de/internet-glossar/mockups
• https://www.creativebloq.com/ux/3-way-create-website-mockups-11513936