Multiplatform App Store-screenshots: Een template, elk apparaat

Het multiplatform screenshot-probleem

Als je een app publiceert op zowel iOS als Android, ken je de brutale screenshot-wiskunde al. Apple vereist screenshots voor iPhone 6,7 inch, iPhone 6,5 inch, iPad 12,9 inch. Google Play wil telefoonscreenshots van 1080x1920 en tabletscreenshots van 1600x2560. Elke storevermelding heeft 4 tot 10 screenshots per apparaattype nodig.

Laten we de berekening maken met een realistisch scenario. Stel dat je 10 talen ondersteunt en 5 screenshots per apparaattype nodig hebt in 4 categorieen (iPhone, iPad, Android-telefoon, Android-tablet):

4 apparaattypen x 5 screenshots x 10 talen = 200 individuele assets.

Dat zijn 200 afbeeldingen om te ontwerpen, exporteren, controleren en uploaden. Elke keer dat je de UI van je app bijwerkt, een rebranding doet of een seizoenspromotie lanceert, herhaal je het hele proces.

Waarom aparte screenshotsets niet werken

Handmatig ontwerp in Figma of Sketch. Een designer maakt elke screenshot individueel. Dit is de meest voorkomende en langzaamste aanpak.

Templatetools met een template per apparaat. Sommige tools staan templates toe, maar vereisen een apart template voor elke grootte.

Generieke schaling. Een iPhone-screenshot nemen en schalen naar Android-afmetingen levert wazige afbeeldingen op.

Hoe Template Porting werkt in Screenshots.live

Screenshots.live lost dit op met een functie genaamd template porting. Het concept is simpel: ontwerp je screenshot eenmaal voor een apparaattype, en het systeem converteert het automatisch naar elk ander apparaattype door coordinaten, lettergroottes en elementposities proportioneel te herberekenen.

Stap 1: Ontwerp je basistemplate. Open de visuele editor en maak een template voor iPhone 6,7 inch (1290x2796 pixels). Plaats je apparaatframe, app-screenshot, kop, ondertitel en achtergrondelementen.

Stap 2: Port naar andere apparaten. Klik op de portknop en selecteer je doelapparaten: iPad 12,9 inch, Android-telefoon, Android-tablet. Screenshots.live analyseert elk element en herberekent positie, grootte en verhoudingen.

Stap 3: Controleer en verfijn. De geporte templates verschijnen in je dashboard. In de meeste gevallen zien ze er meteen perfect uit.

Stap 4: Render alle variaties via API. Met je templates klaar, genereert een enkele API-aanroep elke variatie. Een templateset, een API-aanroep, alle 200 assets geleverd als ZIP-bestand.

Technische details van proportionele conversie

Positiemapping. X- en Y-coordinaten worden herberekend als proportionele posities.

Grootteschaling. Elementafmetingen worden proportioneel geschaald.

Lettergrootte-aanpassing. Lettergroottes worden herberekend voor relatieve grootte.

Beeldverhouding. Bij verschillende beeldverhoudingen past het systeem verticale afstand intelligent aan.

Voor en na: De werkelijke impact

Voor Screenshots.live:

• 200 individuele Figma-frames
• 40 uur initieel ontwerpwerk
• 200 handmatige exports
• 8-12 uur per updatecyclus

Na Screenshots.live:

• 5 basistemplates
• 4 uur initieel ontwerpwerk
• Eenkliksporting naar alle apparaattypen
• Een API-aanroep om alle 200 assets te renderen
• 30 minuten per updatecyclus

Aan de slag met multiplatform screenshots

1. Meld je aan bij Screenshots.live en maak je eerste template.
2. Perfectioneer je ontwerp in de visuele editor.
3. Port het template naar andere apparaattypen met een klik.
4. Koppel de API aan je buildpipeline.
5. Upload naar beide stores met Fastlane of handmatig.