Præsenter skærmbilleder i browser- og enheds-mockups

Forbered skærmbilledet

Start med den reneste optagelse, du har. Fjern midlertidige beskeder, personlige data og tilfældige statusdetaljer, før du placerer den. Hold den vigtige brugerflade tæt på midten, fordi en frame eller en perspektiveffekt kan gøre det læsbare område mindre. Hvis du viser en arbejdsgang, så vælg én afgørende skærm eller lav en lille serie med samme beskæringslogik.

Brug en browserstil, når indholdet er en webside eller en desktoplignende visning. Brug en telefon- eller tabletstil, når touchlayout og lodret læsning er centrale. Det er dekorative frames; de åbner ikke en browser, indlæser ikke en URL og ændrer ikke selve skærmbilledet. Forskellen hjælper dig med at sætte ærlige forventninger til det færdige billede.

1. Vælg ét skærmbillede med et tydeligt motiv, og fjern følsomt indhold.
2. Afgør, om en browser-, iPhone- eller iPadframe forklarer konteksten bedst.
3. Kontroller, at vigtig tekst og vigtige kontroller forbliver synlige i framen.

Placér framen, og vælg scenen

Vælg en baggrund, der understøtter skærmbilledet. En rolig, ensfarvet baggrund fungerer til dokumentation; et blødt foto eller en naturscene kan gøre en produktpræsentation varmere. Placér mockuppen med nok luft omkring sig til, at frame-kanten kan ses. I et browser-vindue må browserlinjen gerne være genkendelig, uden at dekorative kontroller konkurrerer med siden.

Hold perspektivet troværdigt. En let hældning kan give energi, men en kraftig rotation gør lille tekst svær at læse. Lad mockuppen følge baggrundens visuelle retning. En frame, der hælder mod åben plads, føles bevidst; en, der peger ind i et rodet objekt, virker klemt.

Læs også: sådan tilføjer du en iPhone-frame til et skærmbillede

1. Vælg en enkel baggrund eller et eget billede med tilstrækkelig kontrast.
2. Placér den dekorative frame, og lad der være margen omkring yderkanten.
3. Prøv først en lige version, og sammenlign derefter en hældning i den endelige delingsstørrelse.

Kontroller læsbarhed og troværdighed

Zoom ud, og spørg dig selv, hvad seeren lægger mærke til først. Skærmbilledet skal forblive motivet, mens framen fortæller, hvilken type skærm det er. Hvis baggrunden vinder, så gør den enklere eller dæmp kontrasten. Hvis skærmbilledet forsvinder, så gør mockuppen større eller vælg en roligere scene.

Kontroller hjørner, tekst og kanter. En frame, der er beskåret for tæt, kan se tilfældig ud; en smal, ujævn stribe baggrund kan være mere forstyrrende end en bevidst beskæring. Bevar skærmbilledernes oprindelige proportioner, hvor det er muligt, og stræk ikke et rundt ikon eller en person på et foto.

Framestile og Pro-vilkår kan ændre sig mellem appversioner, så kontroller det aktuelle Mockups-panel i appen, før du planlægger en serie.

1. Gennemgå hierarkiet, og kontroller derefter tekst og frame-kanter.
2. Sammenlign resultatet i fuld størrelse og i den størrelse, der bruges i et opslag eller en artikel.
3. Tilføj en kort billedtekst uden for skærmbilledet, hvis seeren har brug for kontekst.

Løs almindelige mockup-problemer

Hvis skærmbilledet ser strakt ud, så brug originalens proportioner igen, og tilpas det på ny. Hvis teksten er for lille, så beskær til det meningsfulde område eller brug en større frame. Hvis frame og baggrund har samme farver, så skab afstand med en anden baggrund eller en mere afdæmpet frame. Hvis billedet føles hældet uden grund, så vend tilbage til en lige placering.

Hvis en baggrund fra dit eget billede er rodet, skal du ikke skjule skærmbilledet med tung dekoration. Flyt mockuppen til et roligere område, dæmp den visuelle konkurrence, eller vælg en enklere farve. Eksportér en test, og kontroller det faktiske gemte resultat, før du sender det til en kunde eller slår det op.

1. Korriger proportionerne, før du ændrer størrelsen.
2. Løs læsbarheden med beskæring og hierarki, før du tilføjer dekoration.
3. Forhåndsvis det gemte billede én gang i den faktiske destinationsstørrelse.