Laptop-Mockups, die ein Webprodukt echt wirken lassen

Das Laptop-Mockup ist die übliche Art zu sagen, dass etwas im Browser läuft. Es funktioniert, weil der Rahmen Kontext liefert, den ein nackter Screenshot nicht hat: Maßstab, Untergrund, Blickwinkel. Das Risiko: Ein Laptop-Display ist breit und flach, sodass die Oberfläche darin bei kleiner Darstellung verschwimmt, wenn du die Aufnahme nicht darauf abstimmst.

Ein sinnvolles Viewport aufnehmen, nicht den ganzen Monitor

Stelle den Browser vor der Aufnahme auf etwa 1440 × 900. Ein Screenshot von einem ultrabreiten Monitor, in einen Laptop-Rahmen gequetscht, zeigt Schrift in halber Größe und macht dein Layout zur Textur. Hat die Seite bei dieser Breite viel horizontalen Leerraum, zoome die Seite, statt den Rahmen zu verkleinern — das Mockup soll das Layout zeigen, das echte Besucher sehen, in lesbarer Größe.

Winkel und Deckel: weniger ist mehr

Eine leichte Neigung gibt Tiefe; ein starker Winkel macht den Bildschirm zum Parallelogramm und zerstört die Lesbarkeit. Kann das Mockup den Deckel animieren, ist das Aufklappen aus fast geschlossener Position ein wirksamer Zwei-Sekunden-Auftakt für ein Video. Für ein Standbild bleibt der Deckel nahezu senkrecht und die Kamera fast frontal. Jede Perspektive, die eine Bildschirmseite um mehr als etwa zehn Prozent verkürzt, kostet mehr Lesbarkeit als sie Atmosphäre bringt.

Mit einem Schatten erden, dann aufhören

Der weiche Kontaktschatten unter der Basis verhindert, dass der Laptop schwebt. Halte ihn kontrastarm und nah am Körper; der große weiche Fleck unter einem Gerät ist die optische Signatur einer Vorlage von 2013. Bei dunklem Hintergrund erdet ein feiner Lichtsaum an der Oberkante besser als ein Schatten. Eine einzige, konsequent angewandte Lichtentscheidung schlägt individuell abgestimmtes Licht pro Bild.