Mockup

Mockup

Copyright © Shutterstock/The fox workshop

Was ist ein Mockup?

Unter einem Mockup wird allgemein ein Vorf√ľhrmodell verstanden, mit dessen Hilfe eine Produktentwicklung pr√§sentiert wird. In den Bereichen Softwareentwicklung und Webdesign beschreibt der Fachbegriff ein digitales Modell eines Programms, einer Internetseite oder einer App f√ľr Smartphones oder Tablets. Das englische Wort Mockup bedeutet in der deutschen √úbersetzung Attrappe, Modell oder Nachbildung. Der in einer fr√ľhen Phase eines Webentwicklungsprojekts vorliegende Entwurf dient einer bereits recht detaillierten Visualisierung der sp√§teren Website bzw. der neuen App. Das Aussehen entspricht bereits weitgehend dem fertigen Produkt. Unter Umst√§nden sind jedoch noch nicht alle Funktionen lauff√§hig.

Tipp

Wenn Sie noch Fragen bez√ľglich Tablets haben, dann k√∂nnen Sie gerne den jeweiligen Glossar dazu besuchen und sich √ľber das Thema informieren.

Abgrenzung eines Mockups zu einem Prototyp und Wireframe

Ein in Aussehen und Funktionsumfang nahezu in der Endversion vorliegendes Modell wird als Prototyp bezeichnet. W√§hrend ein Prototyp immer ein funktionst√ľchtiger Entwurf der Website oder der App ist, steht bei einem Mockup der Pr√§sentationszweck im Vordergrund. Eine echte Funktionalit√§t muss nicht zwingend vorhanden sein. Ein Prototyp erlaubt die Simulation einer Interaktion mit einem User.

Der Auftraggeber des Entwicklungsprojekts erhält die Möglichkeit, sich auf der entstehenden Internetseite oder in der neu programmierten App wie ein späterer Benutzer zu bewegen und die User Experience zu testen. Bei einem Wireframe handelt es sich um ein sehr einfach gehaltenes Abbild des Aufbaus eines Webprojekts. Ein Wireframe zeigt die Themenblöcke einer Internetseite, die Informationsstruktur und eine grobe Beschreibung der Nutzerinteraktionen. Er ist weitgehend in den Farben Schwarz, Weiß und Grau gehalten und beinhaltet keine Farbgrafiken oder Bilder. Mit einem Wireframe wird der logische Aufbau einer Website verdeutlicht. Über eingetragene Notizen kann das Projektvorhaben dokumentiert werden.

Welche Vorteile bietet ein Mockup?

Mockups helfen prim√§r dabei, Missverst√§ndnisse √ľber die genauen Projektdetails zwischen Auftraggeber und Auftragnehmer zu vermeiden. Bereits w√§hrend der Auftragserteilung helfen die Modelle, verschiedene Ans√§tze und Ideen zu veranschaulichen. Sie helfen allen Projektbeteiligten, das Pflichtenheft pr√§zise und vollst√§ndig zu erarbeiten.

W√§hrend der Umsetzungsphase unterst√ľtzt ein Mockup die Qualit√§tskontrolle eines Webdesign- oder App-Entwicklungsauftrags. Das Modell erm√∂glicht eine fundierte Abstimmung zwischen dem Auftraggeber und dem Umsetzungsteam. Der Auftraggeber erkennt, ob die Entwicklungsarbeit seinen Vorstellungen und Anforderungen entspricht. Webentwickler, Programmierer und Grafikdesigner erhalten klaren Input, an welchen Stellen noch √Ąnderungen in der Gestaltung der Website oder der App n√∂tig sind. Die Modelle decken daher Schwierigkeiten in der Umsetzung und Abweichungen von den Anforderungen fr√ľhzeitig auf. Dadurch werden umfangreiche √Ąnderungen in einer sp√§ten Projektphase verhindert, wodurch Entwicklungszeit und -kosten optimiert werden.

Wie wird ein Mockup erstellt?

Die genauen Spezifikationen eines Mockups werden zwischen Auftraggeber und Auftragnehmer abgesprochen. Es gibt keine standardisierte Norm, in welcher Form das Modell aufgebaut wird. H√§ufig werden Mockups ohne Programmcode und ohne Funktionalit√§t erzeugt. Daf√ľr werden sie rein √ľber Bildbearbeitungs-Tools dargestellt.

Tipp

F√ľr Pr√§sentationszwecke eigenen sich beispielsweise .ppt-Slideshows oder auch bearbeitbare Grafiken als .png-Datei. Entw√ľrfe k√∂nnen gezippt per E-Mail verschickt werden. Mithilfe spezieller Softwarel√∂sungen (z.B. Moqups) k√∂nnen Mockups bereitgestellt werden, in die bereits bestimmte Funktionen des Endprodukts integriert sind.

Welche Merkmale lassen sich in einem Mockup beurteilen?

Ein digitales Modell in Form eines Mockups zeigt:

  • das grundlegende Layout und Design eines Webauftritts oder einer App
  • die Gestaltung der Benutzeroberfl√§che (Frontend)
  • einen ersten √úberblick √ľber den Funktionsumfang der Entwicklung
  • den Aufbau und die Navigation sowie die Benutzerf√ľhrung

Dar√ľber hinaus liefert ein Mockup Hinweise auf die Benutzerfreundlichkeit¬†des Endprodukts.

Tipp

Wenn Sie noch Fragen bez√ľglich eines Online Marketing Themas haben, dann k√∂nnen Sie gerne unseren Glossar besuchen und sich √ľber das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte