Kontakt aufnehmen

Arne Chananewitz

Head of Search Engine
Optimization (SEO) Braunschweig
+49 531 213605527

    Ich habe die Datenschutzerklärung gelesen und erkläre mich damit einverstanden, dass die von mir im Kontaktformular eingegebenen Daten elektronisch erhoben und gespeichert werden.

    Mockup

    Stand: 17.05.2022

    Sobald Webseitenbetreiber eine neue Idee für ein Projekt haben, gehen sie nicht gleich aufs Ganze und entwickeln drauflos. Zur Durchführung gehört neben der Vorstellung, wie das digitale Projekt am Schluss aussehen soll, auch eine sorgfältige Planung der Arbeitsschritte. Damit die Betreiber diese festlegen und ihren Mitarbeitern sowie Kunden ihren Vorschlag präsentieren können, fertigen sie im Vorfeld einen Entwurf an. Hierbei arbeiten sie mit sogenannten Mockups.

     

    Definition Mockup

    Ein Mockup ist ein digitales Modell einer App oder einer Website. Durch die Skizze lassen sich Ideen und Pläne hinsichtlich des Webdesigns im Verlauf der Konzipierung vorstellen und sie gemeinsam mit dem Team evaluieren. Mockups zeichnen sich vor allem durch ihren Detailreichtum aus, was sie von anderen Visualisierungsmöglichkeiten unterscheidet.

     

    Funktion eines Mockups

    Mithilfe eines Mockups werden alle Ideen und Anforderungen, die an eine neue Website oder App gestellt werden, optisch präsentiert. Dadurch ergibt sich ein Überblick über alle Bestandteile, die das fertige Produkt aufweisen soll. Gleichzeitig lassen sich Gewichtungen vornehmen und Größen gegebenenfalls anpassen.

    Der Projektleiter achtet darauf, dass die Entwickler die Wünsche des Kunden berücksichtigen und erkennen, an welchen Punkten etwas verändert werden muss. Umgekehrt vermitteln die Mitarbeiter dem Kunden durch das Mockup ihre Vorstellungen verständlich. Der Entwurf ist ein wichtiger Bestandteil des Qualitätsmanagements, noch bevor das Team die eigentliche Programmierung vornimmt.

    Mockups helfen nicht nur dabei, Ideen zu präsentieren, sondern ebenfalls, welche zu finden. Sie ermöglichen Designern, durch ein flexibles Anordnen der Elemente Anregungen für die Umsetzung zu bekommen.

     

    Abgrenzung zu anderen Visualisierungsmöglichkeiten

    Neben Mockups gibt es weitere Optionen, um Entwürfe und Zwischenstände abbilden zu können. Zwei davon sind beispielsweise Wireframes und Prototypen. Im Unternehmensalltag werden diese drei Begriffe oft synonym verwendet, allerdings unterscheiden sie sich deutlich in ihrer Ausarbeitung. Zudem werden sie in unterschiedlichen Abschnitten der Konzeption benötigt.

    Vergleich von Wireframe, Mockup und Prototyp

    Vergleich von Wireframe, Mockup und Prototyp

    Ein Wireframe steht in den frühen Planungsphasen an, um grob darzustellen, wo welche Seitenelemente positioniert werden sollen und wie die Nutzer dorthin navigieren. In diesem Schritt fehlen Grafiken, Farben oder textuelle Elemente, da ein Wireframe eher einer einfachen Skizze gleicht. Es ist nicht unüblich, Wireframes sogar von Hand zu skizzieren.

    Mockups bauen häufig auf den vorangegangenen Wireframes auf. Auf dieser Stufe integrieren die Mitarbeiter alle Inhalte, die für das fertige Projekt gewünscht sind. Daher werden Mockups dafür verwendet, einen Zwischenstand widerzuspiegeln. Je komplexer sie sind, desto geeigneter sind sie wiederrum als Grundlage für spätere Prototypen.

     

    Bestandteile eines Mockups

    Ein Mockup soll sich dem fertigen Produkt so weit wie möglich annähern. Der digitale Entwurf bildet sowohl die Navigationsstruktur als auch andere Seiten- und Designelemente ab, sodass Webmaster und Kunden einen realistischen Eindruck von der finalen App oder Website bekommen. Oft visualisieren sie außerdem schon die späteren Funktionalitäten wie Verlinkungen oder Menüs.

    Die Inhalte entsprechen allerdings noch nicht dem endgültigen Content. Da bei einem Mockup Design und Struktur im Vordergrund stehen, sind konkrete Grafiken oder Texte zweitrangig. Diese spielen erst im weiteren Projektverlauf eine Rolle. Daher greifen Entwickler in einem Mockup vorerst zu Platzhaltern sowie groben Textangaben.

     

    Anwendungsgebiete von Mockups

    Dadurch, dass Mockups das Aussehen und Konzept einer neuen App oder einer Website abbilden, sind sie flexibel über alle Branchen hinweg in der Webentwicklung nutzbar. Im Verlauf der Erstellung und Konzipierung eines Webprojekts verwenden Mitarbeiter sie häufig, um Kunden die Ausarbeitung zu präsentieren oder um die Qualität zu überprüfen.

    Bei der Bewertung werden die Vorstellungen und Anforderungen seitens des Kunden sowie des Projektleiters an die finale Architektur der Inhalte, die Grundfunktionen, das Design und die Navigation in Bezug auf die Benutzeroberfläche miteinander in Beziehung gesetzt. Durch die Visualisierung lassen sich schon in einem relativ frühen Planungsstadium fundierte Aussagen über die Gestaltung und Programmierung treffen.

    Beispiele von Mockups

    Beispiele von Mockups

    Nicht zuletzt sind Mockups ein entscheidendes Hilfsmittel für das Usability Testing. Durch sie lässt sich mit wenig Aufwand erkennen, an welchen Punkten noch mögliche Fehlerquellen vorhanden sind, bevor in der nächsten Phase ein Prototyp entwickelt wird. Der Projektleiter greift bei möglichen Hindernissen oder Problemen ein, bevor das Projekt in die konkrete Entwicklung übergeht. Mit einem ausführlich besprochenen Mockup lassen sich daher Zeit und Kosten einsparen.

    Gleichzeitig werden damit die Benutzerfreundlichkeit und die User Experience geprüft. Wird das Mockup Personen zum Testen freigegeben, lassen sich durch das Feedback eventuell noch weitere Schwachstellen entdecken und für eine vereinfachte Nutzung ausbessern. Durch das Austesten wird beispielsweise geprüft, ob die mobiloptimierte Version einer Website leserlich dargestellt wird und alle Elemente ohne Überlappung sichtbar sind.

    Zudem ergeben sich Rückmeldungen über das Design. Da User eine App oder eine Website möglichst intuitiv nutzen sollten, also ohne eine Anleitung oder Ähnliches, wird sichtbar, ob die Struktur in dem Projekt nachvollziehbar ist. So erhält der Kunde am Ende ein Produkt, das gut performt.

     

    Interesse an einer kostenfreien Analyse?
    Anfrage stellen
    Wir beraten Sie gerne und bereiten Ihnen eine kostenfreie Analyse vor, wir freuen uns auf Sie!

     

    Mockup-Tools

    Für das Entwerfen eines Mockups reicht ein einfaches Bildbearbeitungsprogramm wie Adobe Illustrator aus. Darin lässt sich der visuelle Eindruck der angedachten App oder Website modellieren, der bereits konkrete Details beinhaltet. Das Ergebnis bleibt aber ein starres Bild oder ein Video, an dem noch nichts geprüft werden kann.

    Darüber hinaus lässt sich ein Mockup ebenfalls mithilfe von Tools kreieren. Diese haben den Vorteil, finale Funktionalitäten einbetten zu können. Viele der Programme erleichtern den Entwurf durch im Vorfeld erstellte Elemente und ein Bausteinprinzip. So müssen sich die Entwickler nicht lange in das jeweilige Tool einarbeiten und können direkt mit dem Modellieren anfangen.

    Auf diese Weise erhalten die Auftraggeber und Mitarbeiter einen umfassenden Eindruck über die spätere Gestaltung und Beschaffenheit des Webprojekts und können im Rahmen des Mockups sogar erste Funktionen testen und bewerten.  

    Für Websites bieten sich unter anderem folgende Mockup-Tools an:

    • Axure
    • Balsamiq
    • Pencil
    • Moqups

    Apps lassen sich beispielsweise mit folgenden Tools visuell darstellen:

    • Picapp
    • Pop
    • Cleanmock
    • Mockplus

     

    Bedeutung fürs Online Marketing

    Im Bereich des Online Marketings sind Mockups vor allem im Rahmen der Konzipierung von Webprojekten und hinsichtlich des Usability Testings von Bedeutung. Mithilfe dieser Visualisierung lassen sich schon in einem relativ frühen Konzipierungsstadium fundierte Aussagen über die Benutzerfreundlichkeit und die jeweilige User Experience (UX) treffen, die sich wiederum auch auf die SEO auswirkt. Ausgehend vom Mockup lassen sich dann Optimierungs- und Verbesserungsmaßnahmen einleiten, die im Rahmen eines weiteren Mockups oder eines Prototypen umgesetzt werden.

    Als Full-Service Digital-Marketing-Agentur stehen wir Ihnen strategisch und operativ mit unserer Expertise aus mehr als 2.500 Projekten zur Seite!

    Über den Autor
    Arne Chananewitz
    Arne Chananewitz ist Head of SEO der Löwenstark Online-Marketing GmbH. Als gelernter Fachinformatiker für Anwendungsentwicklung schlägt sein Herz für Blogs, SEO, Games und Hardware.

     

    Auch interessant:
    Ihr Kontakt zu uns
    Löwenstark Digital Group GmbH
    Petzvalstraße 38,
    38104 Braunschweig
    Jetzt kostenlose Analyse anfordern

      * Pflichtfeld