Plaats een afbeelding of eigen inhoud in een iPhone-achtig telefoonframe — ideaal om een app of de mobiele weergave van je site te laten zien.
Toepassingen per site-type
Bij een webshop die ook een eigen app aanbiedt, toont PhoneMockup de app-interface naast een uitleg van de voordelen, bijvoorbeeld sneller bestellen of een spaarprogramma. Een portfolio-site van een app-ontwikkelaar of UX-designer gebruikt dit block om losse schermontwerpen te presenteren in een herkenbaar frame, wat professioneler oogt dan een platte screenshot. Bij een zakelijke dienstverlener met een klantportaal, zoals een bank of verzekeraar, laat dit block zien hoe de mobiele omgeving van dat portaal eruitziet, wat vertrouwen wekt bij bezoekers die twijfelen of de dienst ook onderweg te gebruiken is.
Een veelgemaakte fout is een screenshot gebruiken die niet is aangepast aan de afmetingen van het frame: een gerekte of uitgesneden afbeelding valt meteen op binnen het scherpe telefoonkader. Lever een screenshot in de juiste beeldverhouding aan via de mediabibliotheek. Een tweede valkuil is meerdere PhoneMockups op rij plaatsen zonder duidelijke context erbij: zonder onderschrift of begeleidende tekst is niet duidelijk welk scherm bij welke functie hoort.
Combineer dit block met Each als je meerdere functies wilt tonen, elk met een eigen telefoonschermpje ernaast, of met GsapReveal om het frame rustig te laten instromen zodra de bezoeker bij die sectie scrollt.
Omdat het frame een vaste beeldverhouding gebruikt, werkt een scherpe afbeelding met voldoende resolutie het beste — een te kleine afbeelding oogt wazig zodra hij wordt uitgerekt naar de framegrootte. Houd de bestandsgrootte desondanks beperkt door de afbeelding te comprimeren, zodat de sectie snel laadt.
Gebruik dit block op een app-landingspagina of een sectie die de mobiele ervaring van een product laat zien: een screenshot in een herkenbaar telefoonframe oogt professioneler dan een losse afbeelding op de pagina.
Een veelgebruikte opzet is een screenshot naast een korte featurelijst, bijvoorbeeld bij de lancering van een app: het frame trekt de aandacht naar het scherm terwijl de tekst ernaast uitlegt wat de bezoeker ziet.
<PhoneMockup image='/media/app.png' />