Kontakt aufnehmen
Henriette Bader

Henriette Bader

Graphic Designer

    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: 04.07.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, Landingpage oder App gestellt werden, optisch präsentiert. Dadurch ergibt sich ein Überblick über alle Bestandteile, die das fertige Produkt aufweisen soll.

    Der Projektleiter achtet darauf, dass die Designer 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.

    So erstellen wir ein Mockup für Sie:

    Vorbereitung

    1. Als erstes werden alle Elemente und Styles der bestehenden Website ermittelt. Das sind zum Beispiel Farben, Schriften, Spaltenbreiten und Abstände.
    2. Feste Bestandteile, wie zum Beispiel die Navigation und der Footer-Bereich, werden 1:1 von der Seite übernommen.

      Durchführung

    3. Auf Grundlage dieser Elemente und des Grid-Layouts werden Platzhalter für Texte und Grafiken plaziert.

      Tipp: Im Idealfall gibt es shon fertige Texte – dann muss im Nachgang weniger angepasst werden und man spart Zeit.

      Manchmal wird dieses Zwischenergebnis dem Kunden präsentiert und mit ihm besprochen. Nach Freigabe folgen dann finale Texte, Bildvorschläge und ggf. Icons, Infografiken und Videos. In anderen Fällen arbeiten wir direkt mit fertigen Texten und können konkretere Vorschläge für Bilder, Grafiken und Videos machen.

    4. Spätestens dann folgt ein Gespräch mit dem Kunden. Inhalte und Darstellungen werden diskutiert und ggf. als Korrekturschleife angepasst.
      Info: Eine Korrekturschleife ist bei uns immer inklusive.

      Finalisierung

    5. Hat man sich endgültig geeinigt, werden Stockbilder lizenziert oder Fotos von unserer Fotografie-Abteilung erstellt. Die Datei wird nochmals auf Herz und Nieren geprüft, bevor sie zum Entwickler geht, welcher sie dann umsetzt.
    Info: Stockbilder werden von der Löwenstark gestellt. Es entstehen keine Extrakosten.

    MockupDesign Umsetzung

    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.

    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.

    Das benötigen wir von Ihnen

    Um ein individuelles und optimales Mockup für Ihre Website zu erstellen sind für uns folgende Punkte relevant:

    • Grund/ Ziel der Erstellung des Mockups
    • Zielgruppe ihrer Kunden / Besucher
    • Styleguide Ihres Unternehmens
    • Desktop oder Mobile First
    • falls vorhanden: Texte

    Tipp: Unser großes Team an Redakteuren kann Ihre Texte natürlich schreiben und / oder überarbeiten.

    Interaktive Mockups > Der Prototyp

    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 der interaktive Prototyp 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.

    Mockup-Tools

    Für das Entwerfen eines Mockups reicht ein einfaches Bildbearbeitungsprogramm wie Adobe Photoshop 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, welches nicht interaktiv und flexibel genutzt 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:

     

      

    Aus dem Hause Adobe

    • Kompatibel mit anderen Adobe-Programmen
    • Möglichkeiten, interaktive Elemente zu erstellen
    • CSS-Daten und Bilder können durch einen Link generiert werden
    • Noch in der Enwicklungsphase

    Aus dem Hause Adobe

    • Für frühere Entwicklungsphasen
    • Kaum Möglichkeiten für interaktive Elemente
    • Als Desktop-Anwendung und Web-Applikation verfügbar
    • Viele Basiselemente einfach per Drag & Drop nutzbar

    Eine reine Webanwendung

    • Für einfache Mockups und Klick-Dummys
    • Auch für Brainstorming und Whiteboarding nutzbar
    • Viele Möglichkeiten für interaktive Elemente
    • CSS-Daten können ausgelesen werden

    Info

    • Weitere Infos

    Info

    • Weitere Infos

    Info

    • Weitere Infos

    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
    Henriette Bader
    Henriette ist Expertin im Bereich Grafikdesign und gestaltet mit viel Liebe zum Detail die Websites unserer Kunden.

     

    Was versteht man unter einem Mockup?

    Text folgt

    Welchen Mehrwert hat es für mich, ein Mockup erstellen zu lassen?

    Text folgt.

    Wie kann ich mir die Mockuperstellung bei Löwenstark vorstellen?

    Text folgt

    Was umfasst der Begriff „Wireframe“

    Text folgt

     

    Auch interessant:

     

    Ihr Kontakt zu uns
    Löwenstark Digital Group GmbH
    Petzvalstraße 38,
    38104 Braunschweig

      Jetzt kostenlose Analyse anfordern

      * Pflichtfeld