Voor de cases op deze site wilde ik de websites laten zien zoals ze gebruikt worden: op een laptop, op een telefoon, in een browservenster. Geen losse schermafbeeldingen, maar mockups met licht en schaduw. Ik heb ze niet in Photoshop gemaakt, maar in de browser.
Een scène in HTML
Elke mockup is een kleine webpagina. De toestellen zijn opgebouwd in CSS: een titanium rand, glas met een lichte reflectie, een laptop met een voet en een uitsparing voor de camera. De achtergrond is beton of een egale studiokleur, met korrel voor textuur. Daaroverheen valt raamlicht, als de schaduw van een jaloezie die naar de randen toe uitloopt. Playwright maakt er vervolgens een scherpe afbeelding van.
Wat het realistisch maakt
- Contactschaduwen: zonder schaduw onder een toestel lijkt het te zweven.
- Een statusbalk op de telefoon, met tijd en batterij. Anders valt de camera-uitsparing over de inhoud van de site.
- Licht dat niet overal even sterk is. Gelijkmatige strepen lezen als patroon, niet als zon.
- Contrast met de omgeving: een donkere site in een donker venster op een donkere achtergrond verdwijnt.
Waarom zo
Het grootste voordeel is dat het herhaalbaar is. Verandert een site, dan maak ik een nieuwe schermafbeelding en draai ik het script opnieuw. Alle mockups zijn in één keer bijgewerkt, in dezelfde stijl.
