Google Chrome-Erweiterung

Mit unserer Google Chrome-Erweiterung können Sie Live-Webseiten, Teile einer Seite oder ausgewählte Elemente in vollständig bearbeitbare Mockups umwandeln. Außerdem können Sie KI-Designs als bearbeitbare Layouts übernehmen, um sie zu verfeinern und zu überarbeiten. Über die Erweiterung können Sie zudem Design-Briefings aus Webseiten erstellen, Screenshots aufnehmen, neue Moqups-Projekte erstellen oder unsere App öffnen.

In diesem Artikel erfahren Sie, wie Sie die Erweiterung in Chrome installieren und wie Sie die Funktionen der Erweiterung nutzen.

Die Moqups-Erweiterung installieren

1. Besuchen Sie den Chrome Web Store.
2. Nach der Installation der Erweiterung erscheint die blaue Moqups-Schaltfläche rechts neben der Adressleiste des Browsers.

Live-Webseiten in bearbeitbare Layouts umwandeln

Aus verschiedenen Gründen kann es sinnvoll sein, mit Mockups von Live-Webseiten zu arbeiten – um bestehende Seiten zu aktualisieren und zu pflegen, neue Seiten passend zum Design bereits veröffentlichter Seiten zu erstellen oder wiederkehrende Elemente in großen internen Hubs und Back-Office-Seiten anzupassen.

Mit der Moqups-Erweiterung können Sie ganze Webseiten oder Auswahlen in Moqups übernehmen. Die Designs kommen als vollständig bearbeitbare Layouts an – jedes Element ist separat, damit Sie es leicht auswählen und anpassen können.

Mit den Optionen können Sie das Hi-Fi-Design der Seite verwenden oder das Layout in einen Lo-Fi-Wireframe umwandeln. Sie können außerdem das aktuelle Fenster importieren oder das Layout an Desktop-, Laptop- oder Smartphone-Ansichten anpassen.

So wandeln Sie eine Live-Webseite in ein bearbeitbares Mockup um:

1. Klicken Sie auf das Moqups-Erweiterungssymbol rechts neben der Adressleiste des Browsers

2. Wählen Sie Hi-Fi Design

3. Wählen Sie unter…

   • Bereich auswählen (Select area), um einen Teil einer Seite oder einzelne Elemente umzuwandeln
   • Aktuelles Fenster (Current window), um die gesamte Seite umzuwandeln
   • Desktop-, Laptop- oder Smartphone-Ansicht (Desktop / Laptop / Phone View), um das Layout an diese Ansichten anzupassen

4. Im Popup Auswahl bereit (Selection ready)…

   • Klicken Sie auf die Schaltfläche In Zwischenablage kopieren (Copy to clipboard), um das Layout in ein geöffnetes Moqups-Projekt einzufügen
   • Klicken Sie auf die Schaltfläche In Moqups öffnen (Open in Moqups), um aus dem Layout ein neues Projekt zu erstellen

Hi-Fi-Webseiten in Lo-Fi-Wireframes umwandeln

Neben dem Import von Webseiten in voller Detailtreue können Sie sie auch in Lo-Fi-Wireframes in Graustufen umwandeln. Ohne Farben und Styling rücken Layout, Struktur und Inhalt der Seite in den Vordergrund. Das ist nützlich, wenn Sie die zugrunde liegende Struktur verschiedener Seiten vergleichen, alternative Designlösungen ausprobieren oder bei einem Rebranding mit einer visuell leeren Fläche beginnen möchten.

So wandeln Sie eine Hi-Fi-Webseite in einen Lo-Fi-Wireframe um:

1. Klicken Sie auf das Moqups-Erweiterungssymbol rechts neben der Adressleiste des Browsers.

2. Wählen Sie Wireframe

3. Wählen Sie unter…

   • Bereich auswählen (Select area), um einen Teil einer Seite oder einzelne Elemente umzuwandeln
   • Aktuelles Fenster (Current window), um die gesamte Seite umzuwandeln
   • Desktop-, Laptop- oder Smartphone-Ansicht (Desktop / Laptop / Phone View), um das Layout an diese Ansichten anzupassen

4. Im Popup Auswahl bereit (Selection ready)…

   • Klicken Sie auf die Schaltfläche In Zwischenablage kopieren (Copy to clipboard), um das Layout in ein geöffnetes Moqups-Projekt einzufügen.
   • Klicken Sie auf die Schaltfläche In Moqups öffnen (Open in Moqups), um aus dem Layout ein neues Projekt zu erstellen.

KI-Designs in Moqups übernehmen

Sie können die Moqups-Erweiterung auch nutzen, um KI-generierte Artefakte in vollständig bearbeitbare Designs umzuwandeln. So können Sie KI als Vorlagengenerator einsetzen – sie liefert den Großteil des Layouts und Platzhaltertexte –, bevor Sie die Details in Moqups anpassen und verfeinern. Ihr Team kann außerdem zwischen Moqups und Ihrem eigenen KI-Tool hin- und herwechseln, Abschnitte zur erneuten Generierung exportieren und das Ergebnis Schritt für Schritt verbessern.

So übernehmen Sie ein KI-Design in Ihr Moqups-Projekt:

1. Klicken Sie auf das Moqups-Erweiterungssymbol rechts neben der Adressleiste des Browsers.

2. Wählen Sie Hi-Fi Design oder Wireframe.

3. Wählen Sie KI-Artefakt oder iframe umwandeln (Convert AI artifact or iframe)

4. Klicken Sie auf das iframe oder wählen Sie mit der Leertaste ein Element aus

5. Im Popup Auswahl bereit (Selection ready)…

   • Klicken Sie auf die Schaltfläche In Zwischenablage kopieren (Copy to clipboard), um das Layout in ein geöffnetes Moqups-Projekt einzufügen.
   • Klicken Sie auf die Schaltfläche In Moqups öffnen (Open in Moqups), um aus dem Layout ein neues Projekt zu erstellen.

Ein Design-Briefing für KI erstellen

Dieses Tool ist ideal, wenn Sie mit KI arbeiten und ihr Ihre Branding-Richtlinien mitgeben möchten. Es extrahiert den Stil aus einem beliebigen Browserfenster und erstellt daraus ein Design-Briefing. Sie können das Briefing dann in Ihren KI-Prompt einfügen, damit die KI weiß, welche Branding-Richtlinien – Farben, Typografie, Button- und Eingabefeldstil – sie bei neuen Designs als Referenz verwenden soll.

Screenshots aufnehmen

Mit der Erweiterung können Sie den sichtbaren Bereich einer Website, eine bestimmte Auswahl oder eine gesamte Seite erfassen – und diese Screenshots sofort zu Ihrer Team-Bildbibliothek hinzufügen. Das spart Zeit, wenn Sie ein Moodboard zusammenstellen, nach Inspiration suchen, Wettbewerbsrecherche betreiben oder schnelle Mockups erstellen.

So nehmen Sie Screenshots auf:

1. Klicken Sie auf das Moqups-Erweiterungssymbol rechts neben der Adressleiste des Browsers.

2. Wählen Sie eine der Optionen unter Screenshot aufnehmen (Take Screenshot):

   • Sichtbarer Bereich (Visible Area) erfasst nur das, was aktuell in Ihrem Browserfenster sichtbar ist
   • Bereich aufnehmen (Capture Region) ermöglicht es Ihnen, durch Klicken und Ziehen einen bestimmten Teil des Fensters auszuwählen
   • Gesamte Seite (Full Page) erfasst die gesamte Webseite

3. Ihr Screenshot wird in einem neuen Browser-Tab geöffnet; hier können Sie ihn benennen, direkt in Ihrer Team-Bildbibliothek in Moqups speichern – oder abbrechen, wenn Sie es erneut versuchen möchten!

4. Nachdem Sie auf die Schaltfläche In Moqups speichern (Save to Moqups) geklickt haben und das Bild hochgeladen wurde, klicken Sie einfach auf die Schaltfläche Fertig! Zu Moqups gehen (Done! Go to Moqups), um zu Ihrem Projekt zu wechseln.

Eyedropper aktivieren

Für Chrome-Versionen vor Version 95 aktiviert unsere Erweiterung außerdem den Eyedropper unserer App – damit können Sie jede Farbe auf der Seite auswählen und sie sofort auf Ihre Designelemente anwenden.

Das Installieren der Erweiterung – und das Neuladen aller geöffneten Moqups-Tabs – aktiviert den Eyedropper automatisch. Das Eyedropper-Symbol finden Sie in der Farbauswahl des Format-Panels.

So verwenden Sie den Eyedropper zur Farbauswahl:

1. Klicken Sie auf das Eyedropper-Symbol, um ein Inspektorfenster in der oberen rechten Ecke des Bildschirms zu öffnen.
2. Wenn Sie den Fadenkreuz-Cursor über die Seite bewegen, zeigt das Fenster eine Nahaufnahme der darunterliegenden Pixel sowie deren RGB- und Hex-Werte an.
3. Klicken Sie, um die Farbe unter dem Cursor auszuwählen.

Projekte erstellen und zu Moqups wechseln

Sie können sofort ein neues Projekt erstellen oder direkt zum Dashboard Ihres Kontos wechseln, indem Sie auf die Moqups-Schaltfläche in der oberen rechten Ecke Ihres Browsers klicken.

Dies ist besonders nützlich, wenn Sie zwischen mehreren Tabs im Browser wechseln – oder Screenshots aufnehmen, um Moodboards, Mockups und Storyboards zu erstellen.

Fragen und Antworten

Ist diese Erweiterung für andere Browser verfügbar?

Derzeit ist unsere Erweiterung für Chrome und Firefox verfügbar – und Brave-Nutzer können die Chrome-Version installieren. Wir arbeiten an einer Safari-Erweiterung, aber deren Implementierung könnte etwas länger dauern.