Geräte-Mockup

Bei einem Geräte-Mockup wird ein Screenshot in einen realistischen Smartphone-, Laptop- oder Tablet-Rahmen gesetzt. So lässt er sich für Marketing, Präsentationen oder Dokumentationen im passenden Kontext zeigen.

Related workflow terms: Screenshot-Workflow, Responsive Screenshot.

Warum Geräte-Mockups nützlich sind

Ein unbearbeiteter Screenshot ist zunächst nur ein flaches Rechteck. Ohne weiteren Kontext ist nicht sofort klar, ob die Pixel zu einer mobilen App, einem Desktop-Dashboard oder einer Tablet-Anwendung gehören. Ein Geräte-Mockup beantwortet diese Frage unmittelbar, weil ein vertrauter Rahmen den Screenshot einordnet.

Dieser Kontext erfüllt einen konkreten Zweck. Im Marketing macht ein Mockup die unterstützte Plattform ohne zusätzliche Erklärung sichtbar. In Präsentationen lenkt es den Blick auf das Produkt statt auf den Folienhintergrund. In einer Anleitung zeigt es, für welche Plattform die beschriebenen Schritte gelten.

Geräte-Mockups sorgen außerdem für ein einheitliches Erscheinungsbild. Wenn jeder Screenshot in einer Präsentation im selben Laptop-Rahmen und Winkel sitzt, wirkt das Ergebnis geplant und sauber – auch wenn die zugrunde liegenden Aufnahmen zu verschiedenen Zeiten entstanden sind.

Häufig verwendete Geräterahmen

• Smartphone-Rahmen: Die häufigste Wahl für App-Marketing, App-Store-Einträge und Anzeigen in sozialen Netzwerken. Es gibt zahlreiche Konturen für iPhones und Android-Geräte.
• Laptop-Rahmen: Geeignet für SaaS-Produkte, Web-Dashboards und Desktop-Software. MacBook-Rahmen sind verbreitet; neutrale Laptops vermeiden eine Bindung an eine bestimmte Plattform.
• Tablet-Rahmen: Sinnvoll für Tablet-Apps oder responsive Layouts an einem mittleren Breakpoint.
• Browserfenster: Eine schlichte Browserleiste mit Adressfeld und Navigation, aber ohne komplettes Gerät. Das passt zu Web-Apps, wenn der Browserkontext wichtig ist, das konkrete Gerät aber nicht.
• Kombinationen mehrerer Geräte: Smartphone, Tablet und Laptop in einem Bild zeigen, wie sich ein Layout über mehrere Breakpoints hinweg verhält.

Geräte-Mockups erstellen

Am einfachsten funktioniert ein Vorlagen-Workflow. Ausgangspunkt ist ein Gerätebild als PNG oder SVG mit transparentem Bildschirmbereich. Dort wird der Screenshot eingesetzt. Viele Designprogramme bieten diese Funktion direkt an; spezielle Mockup-Generatoren übernehmen Ausrichtung und Skalierung automatisch.

Bei regelmäßig wiederkehrenden Mockups spart Automatisierung den manuellen Schritt. Unterstützt ein Aufnahme-Tool Geräterahmen, kann es jeden Screenshot schon beim Erfassen in den gewählten Rahmen setzen. Der Umweg über ein Designprogramm entfällt. Das lohnt sich besonders für größere Mengen, etwa Dutzende Launch-Screenshots oder App-Store-Motive in mehreren Gerätegrößen.

Technisch kommt es vor allem auf passende Auflösungen an. Die Pixelabmessungen des Screenshots müssen zum Bildschirmbereich des Rahmens passen. Eine niedrig aufgelöste Aufnahme wirkt in einem hoch aufgelösten Rahmen unscharf. Wird ein zu großer Screenshot verkleinert, können feine Details verloren gehen. Wer direkt in der richtigen Auflösung aufnimmt, vermeidet beides.

Praktisch sollten nur die Bilder einen Geräterahmen erhalten, die diesen Präsentationskontext brauchen. In Dokumentation und QA ist der rohe Screenshot meist klarer. Für Launch-Material und Store-Grafiken kann sich der Rahmen dagegen lohnen.

Häufige Fehler

• Veraltete Geräterahmen verwenden. Die Kontur eines mehrere Generationen alten Smartphones lässt Produkt oder Marketing schnell ungepflegt wirken. Aktuelle Rahmen halten die Motive zeitgemäß.
• Auflösung von Screenshot und Rahmen nicht abstimmen. Ein 750 Pixel breiter Screenshot wird in einem für 1170 Pixel ausgelegten Bildschirmbereich sichtbar unscharf. Richte die Aufnahme immer an der Fläche im Rahmen aus.
• 3D-Winkel überstrapazieren. Starke Perspektiven funktionieren in Hero-Motiven, erschweren aber das Lesen der eigentlichen Oberfläche. Verwende sie für Übersichten und flache Frontalansichten für lesbare Inhalte.
• Sicherheitsbereiche ignorieren. Notches, abgerundete Ecken oder Statusleisten können einen Teil des Bildschirms überdecken. Wichtige Inhalte dürfen nicht dahinter verschwinden.