Was ist Wireframe-Tool?

Skizzieren Sie Seitenlayouts und UI-Mockups in Sekunden. Ziehen Sie gängige UI-Elemente — Schaltflächen, Textblöcke, Bilder, Eingabefelder — per Drag-and-Drop auf eine Zeichenfläche und exportieren Sie als PNG oder speichern Sie als JSON zum Weiterbearbeiten.

Die Leinwand basiert auf fabric.js und bringt ein vollständiges Element-Set mit: Rechtecke, Textblöcke, Buttons, Bildplatzhalter, Eingabefelder, Navbars, Cards, Checkboxen, Dropdowns, Radio-Gruppen, Fortschrittsbalken, Slider und Notizzettel für Anmerkungen. Zoom und Anpassen an den Bildschirm halten volle Layouts lesbar, und du kannst die Leinwand auf Mobil-, Tablet- oder Desktop-Breite rahmen. Rückgängig, Wiederherstellen, Gruppieren, Aufheben und Reihenfolge-Wechsel funktionieren alle per Tastatur. Exportiere als PNG oder SVG zum Teilen oder als JSON, das beim Wiederöffnen denselben Stand zeigt.

Anleitung

1. Wähle ein UI-Element aus der Werkzeugleiste – zum Beispiel ein Rechteck, einen Textblock, eine Schaltfläche, einen Bild-Platzhalter oder ein Eingabefeld – und klicke auf die Zeichenfläche, um es zu platzieren.
2. Verschiebe Elemente durch Ziehen, ändere die Größe durch Ziehen an den Anfassern und bearbeite Text per Doppelklick. Gruppiere Elemente für einfacheres Verschieben.
3. Exportiere dein Wireframe als PNG-Bild zum Teilen oder speichere es als JSON, um es später neu zu laden und weiterzubearbeiten.

Wann verwenden

• Drei Bildschirmvarianten in 15 Minuten skizzieren, kurz vor einem Stakeholder-Termin.
• Eine Idee in Slack als Skizze posten, statt das Layout mit Worten zu beschreiben.
• Junior-Designerinnen den Unterschied zwischen Low- und High-Fidelity zeigen.

Ergebnis

Ein Produktmanager skizziert einen mobilen App-Login-Bildschirm mit Logo-Platzhalter, E-Mail- und Passwort-Eingabefeldern, einer Anmelde-Schaltfläche und einem Passwort-vergessen-Link – und exportiert das PNG, um es in einem Slack-Kanal zu teilen.

Häufige Fragen

Was unterscheidet das hier von Figma?

Figma ist High-Fidelity-Werkzeug mit Komponenten, Prototypen und Teamarbeit. Dieses Tool bleibt absichtlich Low-Fidelity: ein kleines Set primitiver Formen, keine Style-Detail-Falle. Ein Screen-Entwurf entsteht in Minuten statt in einem Nachmittag. Das Ergebnis dient zum Denken, nicht zum Handoff.

Wie verschiebe ich Elemente pixelgenau?

Element auswählen und Pfeiltasten drücken, jeweils 1 Pixel. Mit Shift plus Pfeil springst du in 10-Pixel-Schritten. Zum Skalieren die Eckpunkte ziehen, mit gehaltenem Shift bleiben die Proportionen erhalten.

Kann ich Elemente von einem Wireframe in ein anderes kopieren?

Beide Wireframes als JSON exportieren, in einem Texteditor die gewünschten Einträge aus dem ersten in das zweite kopieren und neu importieren. Die meisten dupliziert eher Ctrl+D innerhalb derselben Datei, statt JSON-Hand-Editieren zu betreiben.

Warum ist die JSON-Datei manchmal größer als das PNG?

JSON speichert jede Eigenschaft jeder Form (Position, Füllung, Kontur, Schriftart, Textinhalt) als lesbaren Text. PNG ist ein flaches Rasterbild. Bei textlastigen Wireframes kann JSON das PNG übertreffen, aber nur mit JSON kannst du später weiterarbeiten.

Kann ich eigene Formen hinzufügen?

Direkt im Tool nicht, aber du kannst vorhandene Primitive (Ctrl+G) zu einem wiederverwendbaren Cluster gruppieren, etwa Suchleiste oder Tab-Reihe. Im JSON speichern, die Gruppe rauskopieren und in neue Dateien einfügen, schon hast du eine kleine eigene Bibliothek.

Ähnliche Tools