Ratgeber für Mockups und Store-Grafiken
30 praktische Ratgeber zu Geräte-Mockups, Screenshot-Größen für App Store und Google Play, Promo-Videos, Kamerafahrten und Exporteinstellungen — vom Team hinter Mockuptop.
- App-Store-Screenshot-Größen ohne TabellenkalkulationDie iPhone- und iPad-Screenshot-Größen, die App Store Connect akzeptiert, wie viele Bilder erlaubt sind und warum ein Satz meist reicht.
- Screenshot-Größen und Store-Grafiken bei Google PlayMaße für Smartphone, Tablet, Feature-Grafik und Icon im Play-Store-Eintrag, dazu die Seitenverhältnisse, an denen Uploads scheitern.
- App Previews: Vorgaben und ein tragfähiger AufbauLänge, Auflösung, Bildrate und Inhaltsregeln für App Previews, dazu ein 20-Sekunden-Schnitt, der auch stumm funktioniert.
- Das Play-Promo-Video und wie es seinen Platz verdientWie das Play-Promo-Video funktioniert, warum es ein YouTube-Link statt eines Uploads ist und wie die ersten fünf Sekunden aufgebaut sein sollten.
- Eine Feature-Grafik, die auch verkleinert lesbar bleibtGestaltungsregeln für die Google-Play-Feature-Grafik: Schutzzonen, Schriftgröße und warum die Mitte frei bleiben muss.
- Den Screenshot ins iPhone-Mockup setzenSchritt für Schritt vom nackten Screenshot zum Geräte-Mockup: Seitenverhältnis, Ecken und die Wahl des Hintergrunds.
- Android-Mockups für den Play-EintragWorin sich Android-Mockups von iPhone-Mockups unterscheiden, für welches Seitenverhältnis du gestaltest und wie der Eintrag einheitlich bleibt.
- Laptop-Mockups, die ein Webprodukt echt wirken lassenEin Webprodukt im Laptop-Mockup zeigen: Aufnahmebreite, Deckelwinkel, Schatten und wann ein flacher Browserrahmen besser ist.
- Tablet-Mockups und warum die Stores danach fragenTablet-Screenshot-Größen, Quer- oder Hochformat und warum beide Stores Tablet-Material als Qualitätssignal werten.
- Smartwatch-Mockups: kleiner Bildschirm, großes Problem mit dem AusschnittEinen winzigen Bildschirm überzeugend zeigen: Ausschnitt, Größe, Armband und warum Uhren einen anderen Bildausschnitt brauchen.
- 3D-Geräte-Mockups bewusst einsetzenDer Unterschied zwischen flacher Mockup-Vorlage und echtem 3D-Render und wie du Perspektive nutzt, ohne die Lesbarkeit zu opfern.
- Gerätrahmen oder nackter Screenshot: pro Platzierung entscheidenWann ein Gerätrahmen die Conversion stützt, wann er Pixel verschwendet und wie du pro Platzierung entscheidest statt aus Gewohnheit.
- Texte für Store-Screenshots schreibenWie du Text auf Store-Screenshots schreibst und platzierst, damit er in Vorschaugröße lesbar ist und mehr sagt als das Bild.
- Den größten Teil der Arbeit leistet dein erster ScreenshotWarum das erste Bild der Store-Galerie unverhältnismäßig viel Gewicht trägt und wie du es auswählst und gestaltest.
- Preflight-Checkliste für Store-GrafikenEine kurze Preflight-Liste: Größen, Reihenfolge, Texte, Lokalisierung, Einheitlichkeit und die Fehler, die zu Ablehnungen führen.
- Lokalisieren, ohne elfmal neu zu gestaltenWie du einen Screenshot-Satz baust, der sich sauber übersetzen lässt, welche Sprachen sich lohnen und welche Layoutentscheidungen Lokalisierung billig machen.
- Hell oder dunkel: welches Thema in deinen Eintrag gehörtOb du deine App hell oder dunkel zeigst, wie der Store-Hintergrund die Wahl beeinflusst und wie du beide Varianten günstig zeigst.
- Einen Hintergrund wählen, der den Bildschirm zum Motiv machtWie du einen Hintergrund wählst, der die Oberfläche im Fokus lässt: Verlaufsrichtung, Kontrast und Umgang mit der Markenfarbe.
- Ein Geräte-Mockup so ausleuchten, dass es wie ein Objekt wirktEin praktisches Drei-Licht-Setup für Geräte-Renderings, warum Metall und Glas schwarz werden und wie ein Kontaktschatten erdet.
- Kamerawinkel: fünf Einstellungen, die fast alles abdeckenWie Neigung, Drehung, Bildwinkel und Zoom in einem 3D-Mockup zusammenwirken und welche Einstellungen den Bildschirm lesbar halten.
- Keyframes: das kleinstmögliche funktionierende ModellWie Keyframe-Animation in einem Mockup-Editor funktioniert, welche Eigenschaften sich lohnen und wie viele Keyframes eine gute Einstellung braucht.
- Easing ist der Unterschied zwischen Bewegung und BewegtheitWas Easing-Kurven tun, welche zu Produktbewegung passen und welche Fehler ein Mockup-Video amateurhaft wirken lassen.
- Wie ein 20-Sekunden-Promo tatsächlich gebaut wirdEin Aufbau Einstellung für Einstellung, mit Zeiten, der Aufgabe jedes Beats und den Stellen, an denen die meisten Versuche scheitern.
- Ein Exportformat für Mockups wählenWelches Bildformat für Stores, Websites und Social Media passt und wie Transparenz und Verläufe die Antwort verändern.
- Ein Mockup-Video exportieren, das nicht komprimiert aussiehtAuflösung, Bildrate, Bitrate und Codec beim Export einer Mockup-Animation und warum Bild-für-Bild-Export die Bildschirmaufnahme schlägt.
- Transparente Mockups: überall nützlich außer in App-StoresEin Geräte-Mockup mit Alpha exportieren, wo Transparenz hilft und wo sie deinen Upload scheitern lässt.
- Ein Mockup im Hero einer Landingpage einsetzenEin Mockup auf der Landingpage nutzen: Größe, Beschnitt, Standbild oder Video und wie die Seite schnell bleibt.
- Produkt-Mockups für Social-Media-Plattformen dimensionierenPraktische Seitenverhältnisse für X, LinkedIn, Instagram und Product Hunt sowie Schutzzonen, die Beschnitt-Katastrophen verhindern.
- Geräte-Mockups und die Fragen, die gern übersprungen werdenPraktische Regeln zur Nutzung von Gerätedarstellungen im Marketing: Marken, Fotolizenzen und warum ein neutrales Rendering risikoarm ist.
- Eine Bildschirmaufnahme in eine store-fertige Preview verwandelnDer komplette Ablauf: sauber auf Gerät oder Simulator aufnehmen, kürzen, ins Mockup legen und store-fertig exportieren.
Direkt im Browser bauen. Screenshot auf ein 3D-Gerät legen, Kamera bewegen, Standbild oder Video exportieren. Keine Installation, kein Konto.
3D-Editor öffnen Foto-Editor öffnen