Ohne Bauplan würdest du kein Haus bauen. Ebenso solltest du dich niemals in einen Designprozess begeben, ohne vorher einen Wireframe zu erstellen.
Ein Wireframe ist ein visuelles Modell, das die Grundstruktur deiner Website, App oder Landing Page beschreibt. Traditionell ist ein Wireframe ziemlich einfach. Grundlegende Formen und Elemente werden verwendet, um herauszufinden, wohin die einzelnen Inhalte und Oberflächenelemente führen. Elemente können schnell und einfach für die Iteration und Genehmigung neu angeordnet werden, bevor sie zu einem Prototyp mit höherer Genauigkeit übergehen.
Die Suche nach einem Wireframe-Tool, das den Anforderungen deines Teams entspricht, kann deinem Designprozess die solide Grundlage geben, die er braucht, um alle Beteiligten auf eine Wellenlänge zu bringen und den Designprozess von Anfang bis Ende zu optimieren.
Was macht ein gutes Wireframe-Tool aus?
Es gibt keine Einheitslösung für das Wireframing. Die von dir gewählten technischen Tools müssen zu deinem individuellen Setup- und Designprozess passen.
Für einige Unternehmen mit einem grossen Designteam kann eine Stunde vor dem Kundenmeeting ausreichen, um den grundlegenden Wireframe-Prozess durchzuarbeiten. Für dezentrale Teams muss das Wireframe digital sein und einfach virtuell mit mehreren Mitarbeitern geteilt werden können. Und dann ist da noch der Genehmigungsprozess zu berücksichtigen, da Iterationen und Überarbeitungen angefordert werden können, bevor du zur nächsten Stufe im Designprozess übergehen kannst.
Ich habe Dutzende von Wireframing-Tools getestet, und die meiner 11 besten Wireframe-Tools zusammengestellt. Dabei habe ich eine Vielzahl von Faktoren berücksichtigt, darunter die Einfachheit des Wireframings für ein reaktionsschnelles Design, einen nahtlosen Genehmigungsprozess und die Flexibilität für verschiedene Teamgrössen.
Die 11 besten Wireframe-Tools in der Übersicht:
- Sketch (macOS) zur Weitergabe von Wireframes an Drittanbieter-Applikationen
- InVision Studio (macOs) für das Wireframing für mehrere Bildschirmgrössen
- Adobe XD (macOS, Windows) für ein komplettes Wireframe > Prototyp-Tool
- Figma (Web, macOS, Windows, Linux) für die Zusammenarbeit in Echtzeit
- UXPin (Web, macOS, Windows) zur Weitergabe der Design-Dokumentation an Entwickler
- InVision Freehand (Web) für die Zusammenarbeit auf einer Whiteboard ähnlichen Leinwand
- Balsamiq (macOS, Windows, Web) für Einsteiger
- Proto.io (Web) für User Experience-Tests
- Moqups (Web) für Wireframing Interaktion Designflüsse
- Adobe Photoshop (macOS, Windows, iOS) für detaillierte pixelbasierte Wireframes.
- Marvel (Web) für vorgefertigte Wireframe-Vorlagen
1. Sketch (macOS)
Bestes Wireframe-Tool zur Weitergabe von Wireframes an Drittanbieter-Applikationen
Sketch ist an sich ist eine ziemlich einfache App, die für modernes UI- und Symbolvektor-Design Tool verwendet werden kann. Die Benutzeroberfläche ist viel einfacher und intuitiver als das schwergewichtige Adobe Illustrator und kann verwendet werden, um Wireframes schnell mit einer Kombination aus Zeichenflächen und Vektorformen zu erstellen.
Obwohl Sketch keine vorgefertigten UI-Komponenten wie Schaltflächen und Kontrollkästchen enthält, kannst du deine eigenen Designs in der App selbst erstellen und diese sogar mit der praktischen Symbolfunktion wiederverwenden. Oder, wenn du detailliertere Wireframes erstellen willst, kannst du jederzeit ein UI-Kit von einem Drittanbieter herunterladen, um schnell Grundelemente hinzuzufügen und deinen Wireframes etwas Leben einzuhauchen.
Wie die meisten Desktop-Anwendungen macht Sketch die Zusammenarbeit etwas schwierig, da es keine Möglichkeit gibt, mehrere Designer gleichzeitig in einer Designdatei arbeiten zu lassen. Aber mit Erweiterungen wie Abstract, die Designänderungen verfolgen und mehrere Versionen in einer einzigen Datei zusammenführen, können die Zusammenarbeit und Versionskontrolle erheblich erleichtern.
Wenn es Zeit für die Projektübergabe ist, kannst du die Option Export verwenden, um deine kompletten Designs und/oder einzelnen Elemente zu speichern. Oder du kannst Sketch nahtlos mit anderen Werkzeugen in deinem Designprozess integrieren (einschliesslich der Prototyping-Anwendungen Principle, Framer und Marvel, um nur einige zu nennen).
Sketch: 99 $/Jahr; wenn das Jahr vorbei ist, kannst du das Tool weiterhin verwenden, aber du wirst keine Software-Updates mehr erhalten.
2. InVision Studio macOS – (Windows kommt bald)
Bestes Wireframe-Tool zur Erstellung reaktionsschneller Designs für mehrere Bildschirmformate.
Vor dem Beta-Release Anfang 2018, war InVision Studio eine lang erwartete App in der Nische für Wireframe- und UI-Design. Studio wurde von demselben Team entwickelt, welches bereits das beliebte Prototyping-Tool InVision entwickelte (das von über sieben Millionen Anwendern genutzt wird), und hat viel Zugkraft gewonnen. Vor der Veröffentlichung haben viele UI-Designer mit Sketch eine Schnittstelle erstellt, bevor sie Dateien für das Prototyping an InVision hochgeladen haben. Studio bietet dir die Möglichkeit, vollständig in der InVision-Produktfamilie zu bleiben.
Wenn du das Wireframe selbst erstellst, kannst du Elemente erzeugen, indem du Grundformen aus der Symbolleiste hinzufügst, oder das Stiftwerkzeug verwendest, um eigene Vektorformen zu erstellen. Wenn du auf der Suche nach vorgefertigten UI-Komponenten bist, kannst du in der kostenlosen Designbibliothek von InVision stöbern.
Was bei der Anwendung von InVision am meisten beeindruckt, ist die Einfachheit ein ansprechendes Design zu gestalten. Mit Studio kannst du beispielsweise die Position und Grösse eines Objekts separat bestimmen, so dass du leichter entscheiden kannst, was genau mit einem Symbol oder einer Textbox passiert, wenn sich die Bildschirmgrösse von Desktop zu Mobile ändert.
Wenn du bereit bist, das Wireframe zu konkretisieren, wirst du begeistert sein, dass Studio mit Invision Freehand integriert ist, um die Zusammenarbeit mit deinem Team in Echtzeit zu ermöglichen. Und wenn es an der Zeit ist, deinen Entwurf an das Entwicklungsteam zu senden, kannst du das Inspect-Tool verwenden, um relevante Designspezifikationen zu erfassen und sie deiner Dokumentation hinzuzufügen.
InVision Studio Preis: Kostenlos für einen Prototyp; ab $15/Monat für den Starterplan, der drei Prototypen beinhaltet.
3. Adobe XD (macOS, Windows)
Bestes Wireframe-Tool für integrierte, interaktive Prototypenlösung
Adobe XD ist ein relativ neues Werkzeug in der Adobe-Produktfamilie. Das Tool ist der direkte Konkurrent zu Sketch und behauptet sich recht gut.
Alles, vom Wireframing bis zum einfachen Prototyping, kann innerhalb von XD durchgeführt werden. Und im Vergleich zu anderen funktionsreichen Adobe-Werkzeugen zeichnet sich die minimale Benutzeroberfläche von XD durch eine Reihe von interaktiven Onboard-Leuchtkästen aus, die dir eine schnelle Orientierung ermöglichen.
Die grundlegenden Wireframe-Vektor-Design-Tools findest du leicht in der linken Navigation. UI-Elemente sind nicht enthalten, aber du kannst eine Vielzahl von kostenlosen Optionen mit einer schnellen Google-Suche finden. XD ist voll von reaktionsschnellen Designhilfen, egal ob du mehrere Zeichenflächen erstellen möchtest, ein Bootstrap 12-Spalten-Raster überlagerst oder das reaktionsschnellen Skalierungswerkzeug verwendest, um Variationen für jedes Element zu erstellen.
Bei vielen Anwendungen müssen die Dateien des Oberflächendesigns in ein anderes Werkzeug exportiert werden, bevor du einen interaktiven Prototyp erstellen kannst. Adobe XD ermöglicht es, Wireframe, Mockup und Prototyp in derselben Designdatei zu erstellen, so dass du nicht mehrere Tools integrieren oder bei jeder Iteration dutzende Male wieder exportieren musst. Dann kannst du XD verwenden, um deinen Prototyp zu veröffentlichen - ob es sich nun um einen einfachen Wireframe oder einen voll interaktiven Prototyp handelt - und den Link mit anderen teilen, damit sie ihn ansehen und Kommentare abgeben können.
Als Bonus behält AdobeXD auch die grundlegenden CSS- und HTML-Funktionen für deine Entwürfe im Auge, so dass du den Code direkt in der Benutzeroberfläche erfassen und alles an dein Programmierteam weitergeben kannst.
Adobe XD Preis: Kostenlos für einen Prototyp und 2 GB Speicher; ab 9,99 $/Monat für den Single App-Plan, der unbegrenzte Prototypen und 100 GB Speicherplatz beinhaltet.
Sketch, InVision Studio und AdobeXD haben viel gemeinsam. Du kannst die Ähnlichkeit in ihren Oberflächen nicht übersehen: Designebenen auf der linken Seite, eine Toolbox auf der rechten Seite, mit den Zeichen- und Publikationswerkzeugen auf einer sehr minimalen oberen Leiste. Alle drei ermöglichen es dir auch, Vektorgrafiken zu erstellen und sie auf einer Leinwand zu verschieben, die in Pixeln gemessen wird. Die Vektorelemente können dann so an der Seite verankert werden, dass sie die Grösse ändern (oder auch nicht), während du dein Design auf und ab skalierst, um reaktionsschnelle Bildschirmgrössen nachzuahmen.
4. Figma (Web, macOS, Windows, Linux)
Bestes Wireframe-Tool für die Echtzeit-Zusammenarbeit
Figma zeichnet sich als leistungsstarke Cloud-basierte Alternative zu Tools wie Sketch, Studio und XD aus. Es ist nicht nur sehr preiswert im Vergleich zu einigen der anderen Apps, sondern verfügt auch über eine Reihe von Funktionen, die gut funktionieren, egal ob du ein eigenständiger Designer oder Teil eines grösseren Teams bist.
Wireframing mit Figma ist einfach und schnell. Du musst deine eigenen UI-Komponenten entwerfen (oder sie separat von einem Kit hochladen). Es ist einfach, deine Zeichenflächen zu erstellen, Formen und Text hinzuzufügen und alles mit dem Ebenenbereich auf der linken Seite zu organisieren. Für ein reaktionsschnelles Design kannst du ein Spaltenüberlagerung anwenden (wenn du das Bootstrap-Gridsystem bevorzugst), oder du kannst die Figma-Beschränkungen verwenden, die jedem Element sagen, wie es reagieren soll, wenn die Grösse des Designs geändert wird, um verschiedene Bildschirmformate nachzuahmen.
Figma zeichnet sich durch seine Möglichkeiten der Teamzusammenarbeit aus. Da es sich um eine webbasierte Anwendung handelt, können sich mehrere Teammitglieder gleichzeitig anmelden und auf die Designdatei zugreifen, unabhängig davon ob sie das Design optimieren oder Inhalte hinzufügen möchten. Das überzeugendste Merkmal ist die Fähigkeit, dass ein Team eine Konversation innerhalb der Designdatei führen kann, so dass notizartige Kommentare entstehen, auf die andere Teammitglieder dann antworten oder als vollständig markieren können.
Wenn es Zeit für die Übernahme durch Ihr Entwicklungsteam ist, können Entwickler CSS-Code aus der Designdatei holen und einzelne Elemente exportieren, um sie bei Bedarf zu verwenden.
Figma Preis: Kostenlos für bis zu drei Projekte; für mehr als 3 Projekte 12 $/Benutzer/Monat (jährliche Abrechnung) für den Professional-Plan, der unbegrenzte Projekte beinhaltet.
5. UXPin (Web, macOS, Windows)
Bestes Wireframe-Tool für die Weitergabe von Design-Dokumentation an Entwickler
UXPin ist sehr empfehlenswert für diejenigen die das Thema Wireframe neu erlernen. Die Benutzeroberfläche ist sehr intuitiv, mit einer Symbolleiste, die leicht identifizierbare Symbole für grundlegende Wireframe-Komponenten (wie Bilder und Text) enthält. Zweitens enthält es eine eingebaute Bibliothek von Oberflächenelementen, die du per Drag-and-Drop direkt auf deine Leinwand ziehen kannst, um ein detaillierteres Wireframe zu erstellen.
Da UXPin Sketch- und Photoshop-Dateien lesen kann, kannst du diese Tools jederzeit verwenden, um deine grundlegenden Wireframes in Prototypen umzuwandeln, bevor du das Design wieder in UXPin importierst, um die anderen Funktionen des Tools zu nutzen: Interaktionen hinzufügst, einem Team präsentierst und die Designspezifikationen an einen Entwickler weitergibst.
Aber es sind die Fähigkeiten der Live-Präsentation und Dokumentation, die UXPin auszeichnen. Während es dir viele Anwendungen ermöglichen, CSS, HTML oder sogar JSON von deinem Design zu übernehmen, macht es dir UXPin leicht, einen funktionierenden Prototyp deines Designs zu präsentieren, Feedback zu sammeln und Spezifikationen/Dokumentationen auf einmal über den Vorschaumodus einzubinden.
Um diese Funktion zu nutzen, klickst du auf die Schaltfläche Vorschau in der oberen Symbolleiste, entscheidest, welche Art von Zugriff du den Mitbetrachtern gewähren möchtest (z.B. die Möglichkeit, Kommentare, Spezifikationen, Dokumentation usw. anzuzeigen), und teilst dann den bereitgestellten Link. Diese All-in-One-Sharing-Option bedeutet, dass die abschliessende Überprüfung, Genehmigung und Übergabe der Entwurfsdokumentation an derselben Stelle erfolgen kann, so dass niemand im Dunkeln gelassen wird, wenn es zur Umsetzung kommt.
UXPin-Preis: $23/Benutzer/Monat (wird jährlich in Rechnung gestellt) für den Prototyping-Plan, der grundlegende Wireframing-Tools enthält; ab $39/Monat für den System-Plan, der erweiterte Kollaborationsfunktionen und Dokumentationsübergabe beinhaltet.
6. InVision Freehand (Web)
Bestes Wireframe-Tool für zur Teamzusammenarbeit auf einer Whiteboard ähnlichen Leinwand.
InVision Freehand ist die einfachste App auf dieser Liste, aber es lohnt sich, es auszuprobieren, besonders wenn du es vorziehst, deine Wireframes auf einem Whiteboard zu erstellen, wo jeder mitwirken und korrigieren kann.
Lade dein Team zu einer Wireframe-Kooperation ein, in der du Bilder und Grundformen hinzufügen oder das Wireframe mit dem Mauszeiger zeichnen kannst. Da es sich um eine Cloud-App handelt, können mehrere Designer und Beteiligte gleichzeitig am Wireframe arbeiten.
Freehand ist ein gutes, wenn auch vereinfachtes Wireframe-Tool, das wie jede andere Whiteboard-App aussieht. Da es jedoch eine Echtzeit-Synchronisierung mit Sketch und Photoshop bietet, kann sich Ihr Team dafür entscheiden, direkt an Prototypen zu arbeiten und zu kommentieren, was die Iterationsdesignphase erheblich vereinfacht. Und da es Teil der InVision-Suite ist, werden deine Kollaborationsskizzen neben funktionierenden Prototypen und Moodboards gespeichert, die dir beim Durchlaufen deines Designprojekts eine schnelle Orientierung ermöglichen.
Freehand eignet sich gut für Designer, die mit Teammitgliedern an einer ersten Wireframe-Skizze zusammenarbeiten und/oder verfeinerte Wireframes/Prototypen kommentieren möchten.
InVision Freihand-Preis: Kostenlos
7. Balsamiq (macOS, Windows, Web)
Bestes Wireframe-Tool für Einsteiger
Für alle, die nur einen schnelles Wireframe entwerfen wollen, ohne Zeit mit dem Erlernen der komplexeren Werkzeuge zu verschwenden, ist Balsamiq ein echtes Highlight.
Balsamiq ist ein vielseitiges Werkzeug mit einem einfach zu bedienenden Drag-and-Drop-Builder. Die Leinwand ist gross, aber du kannst die eingebaute UI-Komponentenbibliothek verwenden, um zu veranschaulichen, wie dein Wireframe auf verschiedenen Bildschirmgrössen aussehen soll (wie im Bild oben). Balsamiq ist eine gute Wahl, wenn du nicht auf der Suche nach Pixelgenauigkeit bist, aber trotzdem etwas professionelleres als Stift und Papier brauchst.
Während professionelle Designer dieses Tool als etwas primitiv empfinden, kann es für kleine Projekte, die schnell und günstig gemacht werden sollen, ein nützliches Tool sein.
Balsamiq Preis: 89 $ für die Desktop-App; Cloud-Abonnements beginnen bei 9 $/Monat für zwei Projekte.
Bestes Wireframe-Tool für User Experience-Tests
Obwohl ein Grossteil seines Erfolges auf die interaktiven Prototyp-Funktionen zurückzuführen ist, kann Proto.io als einfaches Wireframe-Tool allein verwendet werden. Als Cloud-basierte Anwendung ermöglicht Proto.io mehreren Designern den gleichzeitigen Zugriff auf ein Dokument. Aber wenn du Screensize-Variationen für ein reaktionsschnelles Design erstellen musst, ist es etwas unhandlich: Du musst ein neues Projekt erstellen und dann deine Elemente kopieren.
Wo Proto.io für Wireframing glänzt, liegt in seinen UX-Testfunktionen, so dass du Daten darüber sammeln kannst, wie einfach Benutzer mit deinem Design interagieren können, bevor du es an Entwickler zur Programmierung schickst. Dieser UX-Test kann auf verschiedene Weise durchgeführt werden. Zuerst kannst du einen funktionierenden Prototyp direkt in eine Website einbetten, wo Besucher dann mit deinem Design interagieren und ihr Feedback abgeben können. Wenn du einen Schritt weiter gehen möchtest, kannst du mit Proto.io dein Design auch mit Systemen wie Validately wie verknüpfen, die erweiterte Tests anbieten, wie z.B. das Verfolgen von Benutzerbewegungen.
Proto.io Preis: Kostenloses, begrenztes Konto für einen Benutzer ohne Exportoption; ab 24 $/Monat (jährliche Abrechnung) für den Freelancer-Plan, der einen Benutzer und fünf aktive Projekte beinhaltet.
Bestes Wireframe-Tool für Wireframing Interaction Design Flows
Wenn du "Wireframe-Tools" von Google verwendest, wirst du wahrscheinlich eine Vielzahl von Flowchart-Tools sehen. Kein Wunder: Die einfache Formzeichnung und die Raster-Leinwand sind perfekt für den Entwurf von Wireframes. Aber Moqups hebt sich von der Konkurrenz der Flussdiagramme als Wireframe ab.
Du kannst zum Beispiel dein Wireframe erstellen, indem du deine Leinwandgrösse einstellst, und dann realistische Oberflächenelemente hinzufügst, um ein schnelles visuelles Designerlebnis per Drag-and-Drop zu ermöglichen. Bisher nichts Ungewöhnliches in Bezug auf das Wireframe selbst. Moqups enthält aber auch ein einzigartiges Diagramm-Tool, mit dem du logische Markierungen auf deinem Wireframe vornehmen kannst, so dass du erkennen kannst, wo Links und Interaktionen stattfinden oder sogar wie die UX-Logik in deinem Design abläuft. Das bedeutet, dass du im Wesentlichen ein statisches Wireframe für deine Interaktionen (und UX-Flows) erstellen kannst, welches zu Beginn der Entwurfsphase genehmigt wird. Du kannst auch in die Flussdiagrammansicht wechseln, wenn du diese Methode bevorzugst.
Moqups Preis: Ab 13 $/Monat (jährliche Abrechnung) für den Personal Plan, der unbegrenzte Projekte für einen einzelnen Benutzer beinhaltet.
Bestes Wireframe-Tool für detaillierte pixelbasierte Wireframes
Photoshop ist das Schwergewicht der Branche, wenn du nach fortschrittlicher pixelbasierter Designsoftware suchst. Es kann fast alles verarbeiten, von der Bildbearbeitung bis zur digitalen Bildgestaltung, und wird von der Mehrheit der Grafikdesigner schon allein aus diesem Grund bevorzugt. Der Vorteil der Verwendung von Photoshop für deine Wireframes (insbesondere für webbasiertes Design, bei dem du mehr auf Pixelgrafiken angewiesen bist) besteht darin, dass du problemlos ein hochwertiges Mockup erstellen kannst, ohne das Designsystem zu wechseln.
Um einen Wireframe zu erstellen, kannst du beliebig viele Zeichenflächen hinzufügen, die deinen Bildschirmdimensionen entsprechen (und ein Rasterlayout hinzufügen, das deinen reagierenden Haltepunkten entspricht, wenn du willst). Du kannst entweder UI-Komponenten selbst mit Photoshop entwerfen oder ein Kit für Standardelemente wie iOS-Tastaturen online herunterladen. Und während die Vektor-Design-Tools (Sketch, Illustrator, Designer, etc.) für viel Designarbeit hervorragend sind, schlägt kein Tool Photoshop wegen seiner Rasterbildbearbeitungsfunktionen, was von unschätzbarem Wert ist, wenn du deine Wireframes letztendlich in Mockups verwandelst und anfängst, Fotos und andere Grafiken hinzuzufügen.
Der Nachteil der Verwendung von Photoshop ist die Übergabe der Designspezifikationen nach Abschluss der Designphase an das Entwicklungsteam. Glücklicherweise kannst du mit vielen Prototyping-Tools (wie z.B. Proto.io, InVision oder Adobe XD) Photoshop-Dateien direkt importieren, so dass du schnell zum Prototyping übergehen kannst.
Photoshop Preis: Ab 9,99 $/Monat für den Creative Cloud Photography Plan, der auch den Zugang zu Lightroom beinhaltet.
Bestes Wireframe-Tool für vorgefertigte Wireframe-Vorlagen
Wie andere Apps auf dieser Liste bietet Marvel interaktives Prototyping und Codeübergabe.
Während viele Apps es dir ermöglichen, einzelne UI-Komponenten wie Buttons und Eingabefelder hinzuzufügen, bietet Marvel eine neue Option: UI-Blöcke. Diese Blöcke sind vorgefertigte Abschnitte, die aus mehreren Elementen bestehen, wie z.B. ein Footer, der eine Hintergrundfarbe, Menutext, Platzhalter für Seitensymbole und Copyright-Text enthält. Die UI-Blöcke bringen den Wireframing-Prozess der Webseite schneller voran, so dass du in einem Bruchteil der Zeit einen ästhetisch ansprechenden Wireframe erstellen kannst.
Wenn du Teil eines mehrköpfigen Designteams bist, kannst du deine Mitarbeiter zur Zusammenarbeit und Kommentierung des Wireframes einladen, und du stellst sogar eine Teambibliothek zusammen, so dass Designelemente während des gesamten Prozesses problemlos festgehalten werden können.
Der grösste Nachteil ist, dass Marvel dir nicht viele Werkzeuge für hochauflösende Mockups zur Verfügung stellt, so dass du dich vielleicht auf Sketch (das integriert ist) verlassen musst, um ein ausgefeilteres UI-Design zu erstellen.
Marvel Preis: Kostenlos für einen Benutzer und zwei Projekte; ab 12 $/Monat für den Pro-Plan, der einen Benutzer und unbegrenzte Projekte beinhaltet.