Zum Inhalt springen
UI Kit
Accent

Mockups für Browser, Handy und Laptop

Browserfenster, Telefone, Laptops und Geräteszenen mit deinem Inhalt darin.

2 Components · 16 Variants
Kategorie wechseln

Deine Screens in einem eigenen Rahmen

Ein Mockup stellt einen Screenshot in Zusammenhang, Besucher sehen sofort, ob es um eine Website, eine App oder beides geht. Die zwei Components hier zeichnen Geräte in eigener Form in CSS, sie bleiben in jeder Größe scharf, folgen Light und Dark Mode und nehmen eine Live-Component oder ein Bild auf.

Mockups bietet einzelne Rahmen, Browserfenster mit oder ohne Tabs, ein helles und dunkles Fenster, Handy, Tablet, Laptop, Desktop-Monitor und eine runde Uhr. Eine Breite skaliert das ganze Gerät. Mockup-Szenen kombinieren sie, Desktop und Handy zusammen, drei Geräte, ruhige Perspektive, eine Seite, die im Gerät von selbst oder beim Hover scrollt, und eine schwebende Collage aus Cards.

Zeig einen echten Screen, je klarer der Screenshot, desto stärker das Mockup. Wähle das Gerät deiner Kunden, ein Handy für Apps, einen Browser für SaaS. Eine Szene mit drei Geräten passt in den Hero, in einem Feature-Grid liest sich ein einzelner Rahmen besser.

mockup

Mockups

Browserfenster und Geräte in eigener Form, gezeichnet in CSS. Eine Component oder ein Bild kommt hinein, eine Breite skaliert alles.

Props und Details · Mockups

Browserfenster

Drei Punkte und eine mittige Adresszeile. Die Seite darin rendert in 1200 px und passt sich ein.

Browser mit Tabs

Tabs über der Werkzeugleiste, der aktive verschmilzt mit ihr. Zurück, Vor und Neu laden stehen vor der Adresse.

Helles und dunkles Fenster

tone stellt ein Fenster fest hell oder dunkel, egal wie die Seite steht. Gut, um beide Modi eines Produkts zu zeigen.

Telefon

Eine eigene Telefonform mit weichen Ecken, Kamerakapsel oder einzelner Linse und Rahmen in Metall oder Tinte.

Tablet

Gleichmäßige Ränder und eine Kamera an der langen Kante. Hier eine App in 1024 px, quer eingepasst.

Laptop

Ein gleichmäßiger Rand ohne Aussparung, ein Scharnierband und ein schlankes Unterteil mit Füßen. Die Breite ist das Unterteil.

Monitor

Ein Display in 16:9 mit schmalem Rand, Statuslicht in der Kante und Standfuß.

Runde Uhr

Ein rundes Gehäuse mit Minutenstrichen und zwei Drückern. Der Ring auf dem Display füllt sich beim Erscheinen.

mockup-scene

Mockup-Szenen

Geräte, die sich überlagern, Fenster in ruhiger Perspektive, Seiten, die im Gerät scrollen, und schwebende Kartencollagen.

Props und Details · Mockup-Szenen

Desktop und Telefon

Eine Website auf zwei Bildschirmen. Das Telefon steht vorn und verschiebt sich beim Scrollen leicht gegen die Seite.

Tablet, Laptop und Telefon

Drei Geräte als ein Bild, der Laptop in der Mitte. Die vorderen Geräte bewegen sich beim Scrollen in eigenem Tempo.

Perspektive

Ein Fenster, um wenige Grad gedreht. Beim Hereinscrollen dreht es sich zu dir und folgt der Maus mit weichem Licht.

Zurückgelehnt

Das Bild liegt zurück wie ein Druck auf dem Tisch und richtet sich beim Hereinscrollen zu dir auf.

Scrollende Website

Die Seite scrollt im Fenster in ruhigen Etappen, hält an und gleitet zurück nach oben. Ein schmaler Balken läuft mit.

Scrollendes Telefon

Zwei Telefone nebeneinander. Das linke scrollt von selbst, das rechte folgt deinem Scrollen.

Scrollen beim Zeigen

Die Seite wartet oben und scrollt bis zum Ende, solange du darauf zeigst oder sie mit der Tastatur fokussierst.

Schwebende Collage

Karten aus einem Produkt in Ebenen. Sie schweben leicht, folgen der Maus und dem Scrollen, nahe Ebenen stärker.

Ähnliche Components

Mehr aus Visuals, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Mockups stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert