Erstelle Wireframes direkt auf dem Board mit der Miro Wireframes-Komponentenbibliothek. Sie enthält rund 60 UI-Designmuster, die sich ganz leicht kombinieren lassen, damit du ohne Aufwand einzigartige Low-Fidelity-Mockups erstellen kannst.
Wireframes in der Symbolleiste
Füge Wireframes einfach zur Creation-Toolbar hinzu.
Hinzufügen von Wireframes zur Symbolleiste
Bearbeiten von Wireframes-Komponenten
Wähle aus einer Vielzahl von Elementen, um ein detailliertes Layout für Webseiten, Produktseiten oder mobile Apps zu erstellen:
- Gerätetypen (Smartphone, Tablet, Browser)
- UI-Komponenten (interaktive Elemente deines Wireframes)
- Chips
- Listen
- Karten
- Komponenten des Fortschrittsbalkens
- Symbole
Gerätetypen sind Frames (Rahmen) mit den Proportionen der gängigsten Geräte. Klicke auf den Rand des Rahmens, um ihn auszuwählen und das Kontextmenü anzuzeigen. Hier kannst du den Gerätetyp ändern, den Geräte-Skin per Umschaltfunktion ein-/ausblenden, die Ausrichtung und die Füllfarbe ändern.
Gerätetypen – Menü
💡 Gerätetypen-Wireframes sind haftend und verhalten sich wie Seiten, die Objekte gruppieren – genauso wie unsere üblichen Rahmen. Wenn du dem Wireframe also Komponenten und Symbole hinzufügst, werden alle darin enthaltenen Inhalte verschoben und zusammen mit dem Rahmen kopiert.
Haftendes Geräte-Wireframe
💡 Wenn du das Board als PDF exportierst, werden die Geräte-Wireframes auch als separate PDF-Seiten exportiert.
Mit den vorgefertigten interaktiven UI-Komponenten kannst du in wenigen Minuten einfache Low-Fidelity-Prototypen von Webseiten und Produktseiten erstellen – auch mit wenig Designerfahrung.
Hinzufügen einer UI-Komponente
Ein Doppelklick startet die Bearbeitung. Du kannst je nach gewählter Komponente den Stil, den Status (markiert/nicht markiert, ausgewählt/deaktiviert, Text/Platzhalter usw.) und das Symbol ändern oder eine Zeile hinzufügen (zu den Optionsfeldern, Kontrollkästchen).
Bearbeiten einer Komponente
Für Chips kannst du die Farbe, das Symbol und den Zustand festlegen (aktiviert, deaktiviert) und den Vollchip oder Umrisschip auswählen.
Hinzufügen eines Chips aus der Wireframes-Bibliothek
Wenn du Listen verwendest, kannst du eine primäre oder sekundäre Liste auswählen und die Farbe festlegen. Doppelklicke auf die Liste, um ein Symbol festzulegen.
Wenn du die Karten-Komponenten verwendest, kannst du Karten ohne Bild auswählen, mit einem Bild links oder mit einem Bild oben und die Farbe und das Symbol für eine Karte festlegen.
Wenn du eine Fortschrittsleiste hinzufügst, zögere nicht, eine rechteckige, runde oder Meilenstein-Fortschrittsleiste auszuwählen, wähle die Farbe und den Status (Start, In Bearbeitung, Abgeschlossen).
Nutze unsere integrierte Symbol-Bibliothek. Du kannst sie in Verbindung mit UI-Komponenten oder einzeln nutzen, um Zeit zu sparen und detaillierte Wireframes zu erstellen.
Auf der Registerkarte Symbole in der Wireframes-Bibliothek siehst du die beliebtesten Symbole und Kategorien von Symbolen (Pfeile, Essen, Soziales, etc.).
Bearbeiten eines Symbols
Umfangreiche Funktionen zur Erstellung einfacher Wireframes in wenigen Minuten
- Feedback von jedem Gerät in Echtzeit
Arbeite in Echtzeit an Wireframes zusammen und erhalte über verschiedene Kommunikationsoptionen Feedback von deinem Team: Kommentare mit @Erwähnungen, integrierter Videochat und mehr.
- Integrationen für Unsplash, IconFinder und mehr
Nutze Miro-Integrationen für IconFinder und Unsplash, um übersichtliche und umfangreiche Wireframes zu erstellen.
- Rahmen, Verbindungslinien und Links
Verwende Rahmen, um mehrere Web- oder Produktseiten abzubilden, oder füge eine vorgefertigte Wireframes-Vorlage aus dem Picker hinzu. Verbinde sie mit Linien und nutze die Funktion Verbinden mit, um Nutzer-Flows zu visualisieren und von einer Seite zur anderen zu wechseln.
Alte Bibliothek
Derzeit kannst du frühere Wireframes auch in der Wireframes-Bibliothek finden. Scrolle in der Liste nach unten, um sie zu sehen.
Frühere Wireframes in der Bibliothek
⚠️ Bitte beachte, dass die vorherige Version der Wireframes-Bibliothek veraltet sein wird.
Häufige Fragen
- Kann ich die Dropdown-Komponente erweitern?
- Nein, das ist derzeit nicht möglich. - Kann ich eigene Elemente zur Bibliothek hinzufügen?
- Das ist derzeit nicht möglich, aber du kannst Symbole aus Symbolsätzen und Formen zu deinem Board hinzufügen.