{"id":31589,"date":"2024-11-12T12:39:33","date_gmt":"2024-11-12T12:39:33","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31589"},"modified":"2025-03-18T13:52:19","modified_gmt":"2025-03-18T13:52:19","slug":"Mockup","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Mockup","title":{"rendered":"Mockup"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Bei einem Mockup handelt es sich um ein konzeptuelles Hilfsmittel, das insbesondere im Bereich der Webentwicklung zum Einsatz kommt. Im Grunde stellt ein Mockup einen fr\u00fchen Entwurf einer Seite oder Webapplikation dar. Mockups werden prim\u00e4r in der Konzipierungsphase eingesetzt, um Ideen und Konzepte in ein konkretes Design umzusetzen. Mockups setzen sich aus der fertigen Navigationsstruktur und detaillierten Design-Elementen zusammen, sodass sie h\u00e4ufig dem fertigen Design der Website entsprechen.\n<\/p>\n

Mockups reichen von simplen Vorlagen ohne Funktionalit\u00e4t bis hin zu interaktiven, prototyp\u00e4hnlichen Entw\u00fcrfen, die mit dedizierten Mockup-Programmen erstellt werden. Bei kleineren Projekten wird in vielen F\u00e4llen auf den Einsatz von Mockups verzichtet. Hier werden Templates direkt in HTML und CSS realisiert oder fertige Templates nach individuellen Anforderungen angepasst.\n<\/p>\n

Abgrenzung zu den Begriffen Wireframe und Prototyp<\/span><\/h2>\n

Obwohl in der Praxis die Begriffe Wireframe, Prototyp und Mockup oft synonym verwendet werden, handelt es sich bei diesen um eigenst\u00e4ndige konzeptuelle Hilfsmittel. Mit den Begriffen werden drei unterschiedliche Arten bzw. Stufen von Entwurfsdarstellungen im Rahmen des Web-Prototypings bezeichnet, die vor der eigentlichen Programmierung realisiert werden.\n<\/p>\n

Das Wireframe stellt im Rahmen der Webentwicklung die fr\u00fcheste Form der Vorlage dar und beinhaltet im Gegensatz zum Mockup keine Farben und keine textuellen (Typografie) und visuellen Inhalte (Fotos, Grafiken). Dieses erste skizzen\u00e4hnliche Konzept kann entweder auf einem Computer mit spezieller Wireframe Software erstellt oder von Hand gezeichnet sein. Da es sich bei einem Wireframe um den ersten Entwurf handelt, fehlt hier jegliche Funktionalit\u00e4t, weswegen das Wireframe zu den sogenannten Low Fidelity-Konzeptzeichnungen gez\u00e4hlt wird.\n<\/p>\n

Mockups bauen auf der Struktur eines vorhandenen Wireframe auf und stellen die n\u00e4chste Stufe der Entwurfsdarstellung dar. Durch den Einsatz von textuellen und visuellen Elementen kommt ein Mockup dem Design des endg\u00fcltigen Produkts sehr nahe. Aus diesem Grund werden Mockups bevorzugt bei Pr\u00e4sentationen eingesetzt. Ein Mockup ist in der Regel statisch. Durch den Einsatz moderner Mockup-Software ist es jedoch mittlerweile m\u00f6glich, Mockups interaktiv zu erstellen und mit einfachen Funktionen wie beispielsweise internen Verlinkungen<\/a> zu versehen. Je nach Komplexit\u00e4t und Umfang k\u00f6nnen Mockups eine flie\u00dfende Grenze zum Prototyp darstellen.\n<\/p>\n

Mehrschichtige, komplexe Mockups dienen als Basis f\u00fcr Prototypen, welche je nach Komplexit\u00e4t zu den Middle bis High Fidelity-Konzepten gez\u00e4hlt werden. Prototypen sind dem sp\u00e4teren Endprodukt schon sehr \u00e4hnlich. Im Gegensatz zu traditionellen, statischen Mockups zeichnen sich Prototypen durch ein hohes Ma\u00df an Interaktivit\u00e4t aus und beinhalten in der Regel bereits alle geplanten Funktionen der Website bzw. Webapplikation.\n<\/p>\n

Anwendungsgebiete<\/span><\/h2>\n

Im Bereich der modernen Webentwicklung werden Mockups im Verlauf der Entwicklung einer Seite bzw. einer Webapp eingesetzt, um diese im Rahmen von Qualit\u00e4tskontrollen und Vorf\u00fchrungen dem Auftraggeber oder einem Testpublikum zu pr\u00e4sentieren. Ein Mockup bildet in vielen F\u00e4llen bereits die finale Version der App oder der Seite in ihrem vollen Funktionsumfang ab, wodurch eine Beurteilung der bisherigen Entwicklungsarbeit erm\u00f6glicht wird. Im Rahmen dieser Evaluierung k\u00f6nnen Vorstellungen, Anforderungen und W\u00fcnsche des Auftraggebers und der Nutzer an das vorliegende Design, die Benutzeroberfl\u00e4che, die Struktur und den Funktionsumfang in Relation gesetzt und \u00fcberpr\u00fcft werden. Aufgrund der bereits sehr genauen Darstellung des fertigen Produkts k\u00f6nnen eventuelle Probleme und Ungenauigkeiten im Design, Funktionsumfang oder der Inhaltsstruktur der Website schnell und effizient beseitigt werden, um diese nicht in den Prototyp einflie\u00dfen zu lassen.\n<\/p>\n

Vorteile und Nutzen eines Mockups<\/span><\/h2>\n

Der Einsatz von Mockups bringt im Bereich der Webentwicklung zahlreiche Vorteile mit sich. Da sich Mockups mit einem vergleichsweise geringen Aufwand erstellen lassen und einen realistischen visuellen Eindruck von dem finalen Produkt bieten, kommt diesen insbesondere im Bereich des Usability<\/a> Testings eine \u00e4u\u00dferst wichtige Rolle zu. Mockups k\u00f6nnen f\u00fcr Usability Tests verwendet werden, um potenzielle Fehlerquellen und Fehler zu identifizieren, ohne dass vorher ein erheblicher Entwicklungsaufwand n\u00f6tig w\u00e4re. Dadurch werden noch vor dem Erstellen des Prototyps eventuelle Probleme erkannt und es wird zudem das Risiko minimiert, dass das Webprojekt w\u00e4hrend der Entwicklungsphase komplett neu konzipiert werden muss. Dementsprechend k\u00f6nnen durch den Einsatz von Mockups in der Entwicklungsphase wesentliche Kosten- und Zeitersparnisse erzielt werden.\n<\/p>\n

Mockup-Tools<\/span><\/h2>\n

F\u00fcr die Erstellung von einfachen Mockups k\u00f6nnen Pr\u00e4sentations- und Bildbearbeitungs-Programme wie Microsoft PowerPoint oder Adobe Illustrator verwendet werden. Im Vergleich zu spezialisierten Mockup-Programmen sind diese jedoch eher umst\u00e4ndlich zu bedienen und bieten einen viel geringeren Funktionsumfang. Dedizierte Mockup-Tools bieten neben zahlreichen vorgefertigten Elementen und der Erstellung von Mockup-Design nach Baukastenprinzip auch die M\u00f6glichkeit, einfache Interaktionsabl\u00e4ufe schnell und unkompliziert zu erstellen und zu testen.\n<\/p>\n

\"Mockup\n<\/p>\n

Screenshot eines Mockup-Tools von moqups.com<\/a>\n<\/p>\n

Die bekanntesten Mockup-Tools f\u00fcr Webseiten und Webapps sind:\n<\/p>\n