Schermafbeeldingen presenteren in browser- en apparaatmock-ups

Bereid de schermafbeelding voor

Begin met de schoonste opname die je hebt. Verwijder tijdelijke meldingen, persoonlijke gegevens en toevallige statusdetails voordat je de afbeelding plaatst. Houd de belangrijkste interface ongeveer in het midden, want een frame of perspectiefeffect kan de leesbare ruimte verkleinen. Laat je een workflow zien, kies dan één beslissend scherm of maak een kleine reeks met dezelfde uitsnijlogica.

Gebruik een browserstijl voor een webpagina of een desktopachtige weergave. Kies een telefoon- of tabletstijl wanneer bediening via aanraking en verticaal lezen centraal staan. Het zijn decoratieve frames: ze openen geen browser, laden geen URL en veranderen de schermafbeelding zelf niet. Zo blijven de verwachtingen over het uiteindelijke beeld eerlijk.

1. Kies één schermafbeelding met een duidelijk onderwerp en verwijder gevoelige inhoud.
2. Bepaal of een browser-, iPhone- of iPadframe de context het beste uitlegt.
3. Controleer of belangrijke tekst en bedieningselementen binnen het frame zichtbaar blijven.

Plaats het frame en kies de scène

Kies een achtergrond die de schermafbeelding ondersteunt. Een rustige effen kleur werkt goed voor documentatie; een zachte foto of natuurscène maakt een productpresentatie warmer. Geef de mock-up rondom genoeg ruimte zodat de rand van het frame zichtbaar blijft. Bij een browservenster mag de browserbalk herkenbaar zijn, zonder dat decoratieve knoppen met de pagina concurreren.

Houd het perspectief geloofwaardig. Een lichte kanteling geeft energie, maar door een sterke draai wordt kleine tekst moeilijk leesbaar. Laat de mock-up aansluiten bij de kijkrichting van de achtergrond. Een frame dat naar lege ruimte helt voelt bewust geplaatst; een frame dat naar een druk object wijst oogt krap.

Lees ook: een iPhone-frame aan een schermafbeelding toevoegen

1. Kies een effen achtergrond of een eigen afbeelding met voldoende contrast.
2. Plaats het decoratieve frame en laat rondom de buitenrand wat marge.
3. Probeer eerst de rechte versie en vergelijk daarna een kanteling op de uiteindelijke deelgrootte.

Controleer leesbaarheid en betrouwbaarheid

Zoom uit en kijk wat de kijker als eerste opvalt. De schermafbeelding moet het onderwerp blijven; het frame vertelt alleen om welk soort scherm het gaat. Trekt de achtergrond de aandacht, maak hem dan eenvoudiger of verlaag het contrast. Verdwijnt de schermafbeelding, vergroot de mock-up dan of kies een rustigere scène.

Controleer hoeken, tekst en randen. Een frame dat te krap is afgesneden kan per ongeluk lijken; een smalle, ongelijke strook achtergrond leidt soms nog meer af dan een bewuste uitsnede. Behoud zo veel mogelijk de oorspronkelijke verhouding en rek een rond pictogram of een persoon op een foto niet uit.

Framestijlen en Pro-voorwaarden kunnen per appversie veranderen. Controleer daarom het huidige paneel Mock-ups in de app voordat je een reeks plant.

1. Bekijk eerst de hiërarchie en controleer daarna tekst en frame-randen.
2. Vergelijk het resultaat op ware grootte en op de grootte van het bericht of artikel.
3. Voeg buiten de schermafbeelding een korte toelichting toe als de kijker context nodig heeft.

Los veelvoorkomende problemen met mock-ups op

Lijkt de schermafbeelding uitgerekt, gebruik dan opnieuw het origineel met de juiste beeldverhouding. Is de tekst te klein, snijd dan bij tot het betekenisvolle deel of gebruik een groter frame. Bij vergelijkbare kleuren van frame en achtergrond kun je scheiding aanbrengen met een andere achtergrond of een soberder frame. Voelt het beeld zonder reden gekanteld, zet het dan weer recht.

Is een achtergrond van een eigen afbeelding druk, verberg de schermafbeelding dan niet onder zware versiering. Verplaats de mock-up naar een rustiger gebied, verminder de visuele concurrentie of kies een eenvoudigere kleur. Exporteer een test en controleer het daadwerkelijk opgeslagen resultaat voordat je het naar een klant stuurt of plaatst.

1. Corrigeer de beeldverhouding voordat je de schaal verandert.
2. Verbeter de leesbaarheid met uitsnede en hiërarchie voordat je versiering toevoegt.
3. Bekijk de opgeslagen afbeelding één keer op de echte doelgrootte.