Ein Mockup im Hero einer Landingpage einsetzen

Im Hero entscheiden die meisten Besucher, ob sie weiterlesen. Ein Geräte-Mockup hat dort eine Aufgabe: in der ersten Sekunde und vor jedem gelesenen Wort zu belegen, dass das Produkt existiert, und zu zeigen, um welche Art Produkt es geht. Alles am Export und an der Platzierung folgt aus dieser Frist.

Ins Gerät hineinschneiden statt verkleinern

Ein ganzes Telefon, das im Hero schwebt, wirkt auf breiten Bildschirmen klein, und die Oberfläche darin wird unlesbar. Schneide so, dass das Gerät unten oder seitlich aus dem Abschnitt läuft — die erkennbare obere Rundung genügt, um Telefon zu sagen — und lass den Bildschirm echte Fläche einnehmen. Angeschnittene Mockups skalieren außerdem besser über Breakpoints, weil du den Ausschnitt verschieben statt das ganze Bild verkleinern kannst.

Erst Standbild, Video nur wenn es sein Gewicht verdient

Ein automatisch startendes Mockup-Video im Hero ist wirksam und teuer: Es verzögert den ersten Bildaufbau, kostet mobil Bandbreite und Akku. Nutzt du eines, halte es kurz und stumm, lass es loopen, hinterlege ein Startbild und schalte es auf kleinen Bildschirmen ab. Häufig konvertiert ein statischer Hero plus ein kurzes Video weiter unten genauso gut und lädt in einem Bruchteil der Zeit.

Das Licht des Mockups zur Seite passend wählen

Ein auf dunklem Grund gerendertes Gerät wirkt auf einer weißen Seite immer aufgeklebt, selbst bei transparentem Hintergrund, weil das Licht auf dem Körper eine dunkle Umgebung impliziert. Rendere das Mockup gegen den Wert, den deine Seite tatsächlich verwendet. Das ist das praktische Argument dafür, das Mockup-Projekt aufzuheben und nicht nur das exportierte Bild: Bei einem Redesign renderst du neu, statt zu retuschieren.