Geräte-Mockup

Ein Geräte-Mockup ist ein Bild, das einen Screenshot in einem gezeichneten oder fotografierten Geräterahmen zeigt, etwa einem Smartphone, einem Tablet, einem Laptop oder einem Browserfenster. Der Rahmen zeigt dem Betrachter, auf welchem Gerät die Oberfläche läuft.

Jede Mockup-Vorlage hat einen Bildschirmbereich mit fester Größe und festem Seitenverhältnis. Der Screenshot muss zu diesem Bereich passen, sonst wird er gestreckt, beschnitten oder von leerem Raum umgeben. Vorlagen auf Fotobasis wenden zusätzlich eine Perspektive an, sodass der Screenshot verzerrt wird, um auf den schräg stehenden Bildschirm zu passen.

Ein Mockup ist ein Präsentationsbild. Es unterscheidet sich von der Geräteemulation, die verändert, wie die Seite selbst gerendert wird.

Warum Geräte-Mockups wichtig sind

Ein nackter Smartphone-Screenshot auf einer Webseite kann wie ein beliebiges hohes Rechteck wirken. Der Rahmen vermittelt dem Betrachter sofort Bildschirmgröße und Kontext. Außerdem gibt er unterschiedlichen Screenshots auf einer Landingpage oder in einer Präsentation ein einheitliches Erscheinungsbild.

Gängige Geräterahmen

• Smartphones im Hochformat, mit oder ohne Notch bzw. Dynamic Island.
• Tablets im Hoch- oder Querformat.
• Laptops mit schräg stehendem Bildschirm.
• Browserfenster mit einfacher Adressleiste für Screenshots von Web-Apps.

So erstellen Sie Geräte-Mockups

1. Nehmen Sie den Bildschirm im Seitenverhältnis des Rahmen-Bildschirms auf.
2. Öffnen Sie eine Mockup-Vorlage in einem Design-Tool oder einem Mockup-Generator.
3. Setzen Sie den Screenshot in den Bildschirmbereich ein und prüfen Sie Ecken und Notch.
4. Exportieren Sie in der Größe, die das Ziel benötigt.

In Temposhot bietet die Auswahl Custom Area Smartphone-Presets wie iPhone 17 Pro (402×874), iPhone 17 Pro Max (440×956), Galaxy S25 (360×780) und Pixel 9 (360×808). Für Webseiten bietet Website Capture die Mobile-Gerätegröße 390×844.

Häufige Fehler

• Einen Screenshot mit abweichendem Seitenverhältnis verwenden, sodass der Rahmen Inhalte abschneidet.
• Eine kleine Aufnahme hochskalieren, um einen großen Rahmen zu füllen, wodurch Text unscharf wird.
• Ein Mockup verwenden, wo ein Store einen reinen Screenshot erwartet. Prüfen Sie die aktuellen Anforderungen des Stores.
• Veraltete Geräterahmen verwenden, die nicht mehr zur aktuellen Hardware passen.

Immer wieder dieselben Screenshots?

Nehmen Sie alle Bildschirme in Smartphone-Größe in einem Lauf mit der Screenshot-Automatisierung auf dem Mac auf.

Häufige Fragen

Akzeptieren App Stores Mockups?

Die Regeln unterscheiden sich je nach Store und ändern sich mit der Zeit. Lesen Sie vor dem Einreichen die aktuellen Screenshot-Richtlinien des Stores.

Welche Auflösung sollte der Screenshot haben?

Mindestens die Pixelgröße des Bildschirmbereichs im Rahmen. Eine Retina-Aufnahme liefert in der Regel genügend Pixel.

Quellen

• Mockup (Wikipedia)

Weiterführende Ressourcen

• Aufnahmequellen: Custom-Area-Presets.
• Social Image Composer: einen Screenshot mit Innenabstand auf einem Hintergrund platzieren.
• Aspect Ratio Calculator: das Seitenverhältnis des Rahmen-Bildschirms treffen.