Presenter skjermbilder i nettleser- og enhetsmockuper

Forbered skjermbildet

Start med det reneste opptaket du har. Fjern midlertidige varsler, personopplysninger og tilfeldige statusdetaljer før du plasserer det. Hold det viktige grensesnittet nær midten, fordi en ramme eller perspektiveffekt kan redusere det lesbare området. Hvis du viser en arbeidsflyt, velger du én avgjørende skjerm eller lager en liten serie med samme beskjæringslogikk.

Bruk nettleserstil når innholdet er en nettside eller en visning som ligner et skrivebord. Bruk telefon- eller nettbrettstil når berøringslayout og vertikal lesing er sentralt. Dette er dekorative rammer; de åpner ikke en nettleser, laster ikke en URL og endrer ikke skjermbildet. Forskjellen hjelper deg å sette ærlige forventninger til det ferdige bildet.

1. Velg ett skjermbilde med et tydelig motiv og fjern sensitivt innhold.
2. Bestem om nettleser-, iPhone- eller iPad-ramme forklarer konteksten best.
3. Kontroller at viktig tekst og kontroller fortsatt er synlige i rammen.

Plasser rammen og velg scenen

Velg en bakgrunn som støtter skjermbildet. En rolig, ensfarget bakgrunn fungerer for dokumentasjon; et mykt bilde eller en naturscene kan gjøre en produktpresentasjon varmere. Plasser mockupen med nok luft rundt til at kanten av rammen synes. For et nettleservindu bør elementene være gjenkjennelige uten at dekorative kontroller konkurrerer med siden.

Hold perspektivet troverdig. En svak helning kan gi energi, men kraftig rotasjon gjør liten tekst vanskelig å lese. Juster mockupen etter bakgrunnens visuelle retning. En ramme som heller mot åpent rom virker bevisst; en som peker inn i et travelt objekt virker trang.

Les også: slik legger du en iPhone-ramme på et skjermbilde

1. Velg en enkel bakgrunn eller et eget bilde med god kontrast.
2. Plasser den dekorative rammen og la det være margin rundt ytterkanten.
3. Prøv først en rett versjon, og sammenlign deretter eventuell helning i endelig delingsstørrelse.

Kontroller lesbarhet og troverdighet

Zoom ut og spør hva seeren legger merke til først. Skjermbildet skal fortsatt være hovedmotivet, mens rammen forteller hvilken type skjerm det er. Hvis bakgrunnen vinner, forenkler du den eller reduserer kontrasten. Hvis skjermbildet forsvinner, gjør du mockupen større eller bruker en roligere scene.

Se på hjørner, tekst og kanter. En ramme som er beskåret for tett kan se tilfeldig ut; en smal, ujevn bakgrunnsstripe kan distrahere mer enn en bevisst beskjæring. Behold skjermbildets opprinnelige proporsjon når det er mulig, og unngå å strekke et rundt ikon eller en person i et bilde.

Rammestiler og Pro-vilkår kan endres mellom appversjoner, så sjekk det aktuelle Mockups-panelet i appen før du planlegger en serie.

1. Se over hierarkiet, og inspiser deretter tekst og kanter på rammen.
2. Sammenlign resultatet i full størrelse og størrelsen det skal brukes i et innlegg eller en artikkel.
3. Legg til en kort tekst utenfor skjermbildet hvis seeren trenger kontekst.

Løs vanlige mockup-problemer

Hvis skjermbildet ser strukket ut, bruker du originalproporsjonen på nytt og tilpasser det igjen. Hvis teksten er for liten, beskjærer du til det meningsfulle området eller bruker en større ramme. Hvis ramme og bakgrunn har lignende farger, skaper du avstand med en annen bakgrunn eller en mer behersket ramme. Hvis bildet virker skjevt uten grunn, går du tilbake til rett justering.

Hvis ditt eget bakgrunnsbilde er travelt, må du ikke skjule skjermbildet med tung dekorasjon. Flytt mockupen til et roligere område, reduser konkurrerende elementer eller velg en enklere farge. Eksporter en test og se på det faktiske lagrede resultatet før du sender det til en kunde eller publiserer det.

1. Korriger sideforholdet før du endrer skala.
2. Løs lesbarheten med beskjæring og hierarki før du legger til dekorasjon.
3. Forhåndsvis det lagrede bildet én gang i den virkelige målestørrelsen.