Website-Mockup-Generator mit Mobil- und Desktopansichten
Website-Mockup-Generator
Kostenloser Website-Mockup-Generator: Wireframe und Geräteansichten | We.Inc
Planen Sie eine Seite als Wireframe für Desktop und Mobilgeräte oder setzen Sie einen Screenshot in einen Browser-, Laptop- oder Smartphone-Rahmen. Exportieren Sie PNG oder drucken Sie als PDF – kostenlos im Browser.
Zwei Tools auf einer Seite. Im Wireframe-Modus planen Sie eine Seite: Wählen Sie Abschnitte aus, ordnen Sie sie und vergleichen Sie Desktop- und Mobilansichten. Im Gerätemodus präsentieren Sie ein fertiges Design: Laden Sie einen Screenshot hoch und setzen Sie ihn für ein Angebot oder einen Social-Media-Beitrag in einen Browser- oder Smartphone-Rahmen. Beide Modi exportieren PNG und laufen im Browser. Ihr Screenshot wird nicht hochgeladen.
Wireframe-Modus: Wählen Sie die benötigten Seitenabschnitte aus, verschieben Sie sie nach oben oder unten und wechseln Sie zwischen Desktop und Mobilgerät. Auf Mobilgeräten werden Spalten wie bei den meisten responsiven Websites untereinander angeordnet.
Exportieren Sie das Wireframe als PNG oder drucken Sie es aus und wählen Sie „Als PDF speichern“.
Gerätemodus: Laden Sie einen Screenshot als PNG, JPG oder WebP hoch (bis zu 15 MB und 8.000 Pixel pro Seite). Wählen Sie einen Browser- oder Smartphone-Rahmen, eine Hintergrundfarbe und optional eine Beschriftung für die Adressleiste.
Das Bild wird in Ihrem Browser auf einer Canvas gerendert und mit doppelter Bildschirmauflösung als PNG exportiert.
Wenn die Struktur passt, senden Sie den Abschnittsplan als Ausgangsbriefing an den We.Inc-Baukasten.
Beginnen Sie mit dem Hero-Bereich: Erklären Sie in einem Satz, was Sie tun und für wen es gedacht ist.
Platzieren Sie Belege wie Bewertungen, Logos und Beispiele nahe beim ersten Button – dort entscheiden Besucherinnen und Besucher, ob sie Ihnen vertrauen.
Prüfen Sie zuerst das mobile Wireframe. Die meisten Besucher kleiner Unternehmenswebsites kommen über ein Smartphone.
Erstellen Sie Screenshots für Gerätemodelle in der passenden Breite: etwa 1440 Pixel für einen Browser und 390 für ein Smartphone.
Kennzeichnen Sie geteilte Entwürfe als Mockups, damit niemand einen Plan mit einer aktiven Website verwechselt.
Häufige Fragen
Was ist der Unterschied zwischen Wireframe und Mockup?
Ein Wireframe ist ein Entwurf aus grauen Flächen, der zeigt, wo Inhalte stehen. Ein Mockup zeigt das fertige Design, oft in einem Geräterahmen. Dieses Tool kann beides in getrennten Modi erstellen und kennzeichnet jeden Export.
Wird mein Screenshot hochgeladen?
Nein. Der Screenshot wird in Ihrem Browser gelesen und gerendert. Nichts wird an We.Inc oder andere gesendet.
Kann ich hier einen Screenshot einer Live-Website erstellen?
Nein. Dafür müsste ein Server einen Browser ausführen, was dieses kostenlose Tool nicht bietet. Erstellen Sie den Screenshot selbst – die Entwicklertools Ihres Browsers können eine ganze Seite erfassen – und laden Sie ihn anschließend hoch.
Kann ich eine PDF-Datei exportieren?
Ja. Wählen Sie „Drucken“ und dann „Als PDF speichern“ als Drucker. Beim PNG-Export erhalten Sie eine Bilddatei.
Ist der Website-Mockup-Generator kostenlos?
Ja. Es gibt keine Registrierung, kein Wasserzeichen und keine Begrenzung.
Mobil planen, auf dem Desktop präsentieren
Layouts, die auf einem breiten Bildschirm ausgewogen wirken, werden auf dem Smartphone oft zu langen Seiten: Drei Funktionsspalten werden untereinander angeordnet und die Preistabelle schiebt das Kontaktformular weit nach unten. In der mobilen Wireframe-Ansicht erkennen Sie das früh, solange sich Abschnitte noch mit einem Klick verschieben lassen.
Geräterahmen helfen am anderen Ende des Projekts: Sie zeigen Kundinnen und Kunden oder einem Social-Media-Publikum, wie eine fertige Seite aussieht. Ein einfacher Screenshot in einem sauberen Rahmen reicht oft aus.