Safari-Erweiterung

Wenn Sie den Safari-Browser verwenden, um auf unsere App zuzugreifen, bietet die offizielle Moqups-Erweiterung für Safari die folgenden Funktionen und Features:

• Webseiten in bearbeitbare Layouts umwandeln
• Screenshots in die Bibliothek aufnehmen
• Eyedropper für die Farbauswahl aktivieren
• Projekte erstellen und zu Moqups wechseln

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

Die Moqups-Erweiterung installieren

1. Besuchen Sie den Apple App Store und suchen Sie nach Moqups
2. Nach der Installation der Erweiterung erscheint die blaue Moqups-Schaltfläche rechts neben der Adressleiste des Browsers.
3. Um den Eyedropper zu aktivieren, müssen Sie alle Tabs neu laden, in denen die Moqups-App aktuell geöffnet ist.

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 den Moqups-Erweiterungen 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 in der Symbolleiste auf das Moqups-Erweiterungssymbol

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.

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 Moqups-Team-Bildbibliothek speichern – oder abbrechen, wenn Sie es erneut versuchen möchten!

Eyedropper aktivieren

Unsere Safari-Erweiterung aktiviert 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

Warum funktioniert der Eyedropper nur mit einer Browser-Erweiterung?

Um all diese Funktionen – einschließlich des Eyedroppers – bereitzustellen, haben wir uns aus technischen und sicherheitstechnischen Gründen für Browser-Erweiterungen entschieden. Eine vollständige Erläuterung dieser Entscheidung und der Gründe dafür finden Sie in unserem Blog-Beitrag.

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

Derzeit ist unsere Erweiterung für Safari, Firefox und Chrome verfügbar – und Brave-Nutzer können die Chrome-Version installieren.