Mockup

Ein Mockup ist weit mehr als nur ein hübsches Bild – es ist deine Versicherung gegen Missverständnisse im Designprozess. Bevor auch nur eine Zeile Code geschrieben wird, zeigt das Mockup genau, wie das Endprodukt aussehen wird: Farben, Typografie, Layout und Atmosphäre. Für Agenturen und Kreativteams ist das der entscheidende Moment, um Stakeholder abzuholen, Feedback zu konkretisieren und teure Korrekturschleifen in der Entwicklungsphase zu verhindern.

Ob Website-Relaunch, App-Entwicklung oder Print-Kampagne: Mockups machen abstrakte Konzepte greifbar. Sie schließen die Lücke zwischen der Strukturplanung (Wireframe) und der funktionierenden Anwendung (Prototyp). In diesem Artikel erfährst du, warum Mockups in keinem professionellen Workflow fehlen dürfen und wie du sie effizient in dein Projektmanagement integrierst.

Definition: Was ist ein Mockup?

Ein Mockup (von engl. to mock up = ein Modell erstellen) ist eine detaillierte, statische Visualisierung eines Designs. Es zeigt das Look & Feel des zukünftigen Produkts. Im Gegensatz zu einer einfachen Skizze beinhaltet ein Mockup bereits die finalen Design-Elemente wie:

• Farbschema und Branding
• Typografie und Schriftgrößen
• Bilder, Icons und Grafiken
• Genaue Abstände und Layout-Raster

Das Ziel ist eine fotorealistische Darstellung. Der Betrachter soll das Gefühl haben, das fertige Produkt vor sich zu sehen, auch wenn die Knöpfe noch nicht klickbar sind und keine Daten im Hintergrund geladen werden.

Wireframe vs. Mockup vs. Prototyp: Der Unterschied

Im Agenturalltag werden diese Begriffe oft synonym verwendet, obwohl sie völlig unterschiedliche Phasen im Designprozess beschreiben. Hier ist die klare Abgrenzung:

• Wireframe (Das Skelett): Strukturiert den Inhalt. Schwarz-Weiß, Boxen, Linien. Fokus auf Informationsarchitektur und User Flow. "Was gehört auf die Seite?"
• Mockup (Die Haut): Bringt Design ins Spiel. Farben, Bilder, Style. Fokus auf Ästhetik und visuelle Wirkung. "Wie sieht es aus?"
• Prototyp (Das Verhalten): Simuliert die Interaktion. Klickbare Menüs, Übergänge. Fokus auf Usability und Functionality. "Wie fühlt es sich an?"

Agenturen setzen auf Mockups

Für Kreativteams ist das Mockup oft der wichtigste Meilenstein vor der technischen Umsetzung. Es bietet konkrete Vorteile für das Projektmanagement und die Kundenbeziehung:

1. Missverständnisse vermeiden

Ein Lastenheft kann man missverstehen, ein Bild nicht. Wenn du dem Kunden ein High-Fidelity Mockup zeigst, sieht er sofort, ob seine Vorstellungen getroffen wurden. Diskussionen über "zu wenig Pop" oder "zu viel Weißraum" finden hier statt – und nicht erst, wenn das Frontend schon steht.

2. Pitch-Gewinner

In der Akquise-Phase kann ein starkes Mockup den Unterschied machen. Es verkauft eine Vision emotionaler als jede Powerpoint-Folie. Kunden kaufen oft das, was sie sehen können.

3. Effizientere Entwicklung

Entwickler*innen lieben gute Mockups. Sie müssen nicht raten, wie groß der Abstand zwischen Headline und Text sein soll oder welcher Hex-Code für den Button gilt. Das Mockup dient als visuelle Referenz (Styleguide) und beschleunigt die Umsetzung massiv.

Mockup-Workflow im Team

Wie integrierst du Mockups am besten in euren Agenturprozess? Hier ist ein typischer Ablauf:

1. Briefing & Skizze: Anforderungen klären und erste Ideen auf Papier oder Whiteboard festhalten.
2. Design-Phase: Erstellung des Mockups in Tools wie Figma, Sketch oder Adobe XD.
3. Interne Review: Das Design-Team prüft Konsistenz und UX-Regeln.
4. Präsentation & Feedback: Das Mockup wird den Stakeholdern gezeigt. Hier ist zentrales Feedback entscheidend. Statt E-Mail-Pingpong lohnt es sich, Aufgaben und Feedback direkt an einem Ort zu bündeln.
5. Handoff: Nach der Freigabe geht das Design an die Entwicklung.

Tipp für awork User: Verknüpfe deine Design-Tools direkt mit deiner Aufgabenverwaltung. Wenn du z.B. einen Link zum Figma-Mockup in die awork Aufgabe packst, hat das gesamte Team immer Zugriff auf die aktuellste Version. Feedback aus Meetings kann direkt als Unteraufgabe oder Kommentar erfasst werden, sodass nichts verloren geht.

Tools zur Mockup-Erstellung

Der Markt für Design-Tools hat sich rasant entwickelt. Zu den Industriestandards gehören:

• Figma: Der aktuelle Favorit vieler Agenturen. Webbasiert, kollaborativ (mehrere Designer*innen arbeiten gleichzeitig) und deckt alles von Wireframe bis Prototyp ab.
• Sketch: Der Klassiker für macOS-User. Stark im UI-Design mit riesigem Plugin-Ökosystem.
• Adobe XD: Gut integriert in die Creative Cloud, ideal wenn man viel mit Photoshop und Illustrator arbeitet.
• Smartmockups / Placeit: Perfekt für Marketing-Zwecke. Hier lädst du dein Design einfach hoch und das Tool platziert es automatisch photorealistisch auf einem iPhone, Laptop oder T-Shirt.

FAQ

Wann sollte ich ein Mockup erstellen?

Sobald die Struktur (Wireframe) steht und bevor die Programmierung beginnt. Mockups sind ideal, um Design-Entscheidungen final absegnen zu lassen. Bei sehr kleinen Projekten oder reinen Textänderungen kann man diesen Schritt manchmal überspringen, aber bei neuen Interfaces ist er Pflicht.

Ist ein Mockup immer digital?

Meistens ja, besonders im Web- und App-Design. Im Produktdesign oder Packaging kann ein Mockup aber auch ein physisches Modell aus Pappe oder 3D-Druck sein, um Haptik und Dimensionen zu prüfen.

Wie detailliert muss ein Mockup sein?

Ein "High-Fidelity" Mockup sollte so nah wie möglich am Endprodukt sein. Das bedeutet: finale Texte (kein Lorem Ipsum, wenn möglich), korrekte Bilder und pixelgenaue Abstände. Je genauer das Mockup, desto weniger Fragen kommen in der Entwicklung auf.

Kann ich Mockups für Usability-Tests nutzen?

Nur bedingt. Da Mockups statisch sind, kannst du damit testen, ob das Design gefällt und verstanden wird (Preference Test). Um zu testen, ob Nutzer*innen den Weg durch den Warenkorb finden, brauchst du einen klickbaren Prototypen.

[.no-toc]Fazit[.no-toc]

Mockups sind das visuelle Herzstück erfolgreicher Projekte. Sie verwandeln abstrakte Anforderungen in greifbares Design und sorgen dafür, dass Designer*innen, Kunden und Developer*innen die gleiche Sprache sprechen. Wer in der Mockup-Phase Zeit für Details und Feedback investiert, spart sie später bei der Umsetzung doppelt ein.