Form und Funktion – Ein Leitfaden zu den besten Wireframe-Tools

Im Jahr 1487 zeichnete Leonardo da Vinci ein Schema namens „Kampffahrzeug“, das entworfen wurde, während er unter der Schirmherrschaft von Ludovico Sforza, dem Herzog von Mailand, stand. Obwohl die Maschine absichtlich so konstruiert wurde, dass sie nicht richtig funktioniert, hat eine Gruppe von Ingenieuren sie 2010 neu erstellt. Da Vincis Schaltplan ist eines der frühesten Beispiele für ein einfaches Drahtmodell.

Der Begriff Wireframe wird seit Jahrzehnten verwendet, lange bevor er von der Webdesign-Welt übernommen wurde. Wireframes wurden ursprünglich in CAD-Software (Computer Aided Design) verwendet, um das Design eines Objekts ohne die Notwendigkeit von Details zu veranschaulichen. Das Ergebnis war eine Blaupause , die aussah, als wäre sie aus Drähten gemacht, ergo, wir landeten bei Wireframes.

Aber was ist ein Wireframe im Design und wozu dient es?

Ein Wireframe im digitalen Design ist eine visuelle Anleitung oder ein Seitenschema, das von typografischem Stil, Farben, Grafiken und interaktiven Elementen befreit ist und einen bestimmten Punkt im Designprozess darstellt. Sein Zweck ist es, Layoutideen auf Seitenebene zu zeigen, die Funktionalität, Verhalten und Priorität von Inhalten darstellen.

Designer verwenden Wireframes, um zugrunde liegende konzeptionelle Strukturen mit dem visuellen Design einer Website oder eines App-Bildschirms zu verbinden. Es gibt drei verschiedene Arten von Wireframes:

• Low-Fidelity - eine frühe Zeichnung ohne viele Details. Low-Fidelity-Drahtmodelle sind oft handgezeichnete Skizzen oder Linien und Formen, die eine Idee darstellen.
• Mid-Fidelity – Wireframes, die mehr Komponentendetails zeigen und sich auf das Inhaltslayout und die allgemeine Seitenstruktur konzentrieren.
• High-Fidelity – Spätere (post iterative) Zeichnungen, die mehr Details und Renderings der Komponenten auf höherer Ebene darstellen, mit Verhaltensmerkmalen und einem Schwerpunkt auf dem Inhaltslayout.

Eine Weiterentwicklung von Wireframes im digitalen Design ist ein weiteres UX-Artefakt und Ergebnis: der Wireflow. Wireflows sind eine Kombination aus Wireframes und Flussdiagrammen, zwei Artefakte, die UX-Designer langsam zu einem anderen Zweck zusammengeführt haben: um Interaktionen zu veranschaulichen und zu verfolgen, die Aufgabenabläufe in einem Produkt wie einer Web-App darstellen.

Ein Problem, auf das Designer mit Wireframes stoßen, ist die Kommunikation der User Journey. Während es komplexere Möglichkeiten gibt, User Journeys darzustellen, gibt es einen Trend, sie in die Einfachheit eines Wireframes einzubeziehen. Ein hilfreiches Werkzeug dafür ist eine Wireframe-Karte.

Eine Wireframe-Map kombiniert Wireframes mit User Journeys (oder User Flows), um die Reise des Benutzers durch ein Produkt mithilfe von Wireframes zu demonstrieren.

Die besten Wireframing-Tools

Designer haben viele Möglichkeiten, wenn sie entscheiden, welches Wireframing-Tool sie verwenden möchten. Es kommen ständig neue Tools auf den Markt, sodass es schwierig sein kann, Schritt zu halten. Hier sind einige Merkmale großartiger Wireframing-Tools, auf die Sie achten sollten:

• Die Fähigkeit, eine Vielzahl von Wiedergabetreuen (niedrig bis hoch) zu erzeugen
• Stabile Software, die einfach zu bedienen ist und häufig aktualisiert wird
• Integrierte Vorlagen, Symbole und standardmäßige UI-Komponenten mit Add-On-Funktionen

Einige der Tools in diesem Handbuch konzentrieren sich stärker auf Wireframing, während andere versuchen, ein Gleichgewicht zwischen Wireframing und Prototyping sowie Mockup-Funktionalität zu finden. Die Entscheidung, ein Tool gegenüber dem anderen (oder mehrere zusammen) zu verwenden, hängt von den Vorlieben des Designers ab.

Balsamico

Balsamiq ist ein einfach zu bedienendes Wireframing-Tool mit geringer Wiedergabetreue, das wegen seiner Benutzerfreundlichkeit und seines ikonischen „handgezeichneten“ Aussehens beliebt ist. Es wird mit einer Reihe vorgefertigter Vorlagen geliefert, die schnell und einfach mit einem Drag-and-Drop-Editor verwendet werden können. Designer können ihre eigenen Assets hinzufügen und das Layout anpassen.

Einfaches Prototyping kann erreicht werden, indem Mockups verknüpft werden, um einfache Click-Through-Erfahrungen für Usability-Tests zu erstellen, wenn das Projekt im Vollbild-Präsentationsmodus oder als exportiertes PDF angezeigt wird.

Balsamiq wird als Desktop-Version (Windows und Mac), Cloud-Service oder als Plug-in für Google Drive, Confluence und JIRA angeboten.

Moqups

Moqups ist ein weiteres kreatives Kollaborationstool, das sich auf Wireframing konzentriert, aber auch für das Prototyping verwendet werden kann. Im Gegensatz zu Balsamiq ist es rein webbasiert und soll Wireframes für Web- und mobile Anwendungen erstellen.

Der Hauptunterschied zwischen Moqups und Balsamiq ist die Wiedergabetreue der Wireframes. Während Balsamiq einen „handgezeichneten“ Look erzeugt, bietet Moqups vollfarbige Schablonen und Kits für mobile App- und Webdesign, einschließlich iOS, Android und Bootstrap.

Moqups unterscheidet sich in einigen anderen Punkten von Balsamiq. Die Software ermöglicht die endliche Objektbearbeitung und Seitenverwaltung und gibt Designern die Möglichkeit, „Master“-Objekte zu definieren, was viel Zeit sparen kann, wenn sie während des Iterationsprozesses Änderungen an den Drahtmodellen vornehmen.

Beispielsweise erstellt ein Designer ein Master- Schaltflächenobjekt mit einer bestimmten Größe, Form und Farbe. Diese Schaltfläche wird im gesamten Wireframe mehrmals verwendet. Wenn der Designer später im Iterationsprozess die Farbe der Schaltfläche ändern muss, kann er es einmal ändern, anstatt jedes einzelne Schaltflächenobjekt zu ändern, und alle untergeordneten Schaltflächenobjekte sind sofort betroffen.

Pidoco

Pidoco ist ein erstklassiges Wireframing-Tool, das sich auf Low-Fidelity-Ergebnisse mit einiger grundlegender Interaktivität konzentriert. Es ist ebenfalls Cloud-basiert, nutzt wiederverwendbare Komponenten und unterscheidet sich von Balsamiq und Moqups durch ein robusteres Click-Through-Drahtmodell-Erlebnis.

Pidoco ist hilfreich für das mobile App- und Webdesign, da es über integrierte mobile Ansichten verfügt, sodass Designer sehen können, wie ihre App-Seiten auf verschiedenen Bildschirmgrößen aussehen werden. Ein weiteres eingebautes Feature ist die Export- und Spezifikationsfunktion . Dies hilft Designern, vom Wireframe zum Prototyp/Mockup zu wechseln, ohne dass ein Plug-in oder eine Erweiterung erforderlich ist.

Picoco sieht und fühlt sich Low-Fidelity an, enthält aber mehrere Funktionen, die typischerweise in komplexeren Design-Tools zu finden sind. Es funktioniert gut für Designer, die Lean UX machen und schnell mit kürzeren Feedback-Zyklen iterieren müssen.

Gliffy

Gliffy ist ein Mid-Fidelity-Wireframing-Tool mit einigen einzigartigen Funktionen, die es von Balsamiq und Mockups unterscheiden. Eine einzigartige Funktion ist die Möglichkeit, Wireflows zu erstellen. Gliffy verfügt über integrierte Flussdiagramm- und Diagrammfunktionen mit enthaltenen Schablonen, Mindmaps und Geschäftsprozessmodellierung.

Wie die anderen Wireframing-Tools bietet Gliffy eine Bibliothek mit Formen, Symbolen und die Möglichkeit, Wireframes nativ für Atlassian Confluence, Slack, Basecamp, Trello und WordPress zu teilen.

Dies ist ein relativ neues UX-Wireframe-Designtool, das sich jedoch einer großen Abonnentenbasis professioneller Designer rühmen kann, die nach einfachen Integrationen und Funktionen suchen, die über ein statisches Wireframe hinausgehen.

Wireframe.cc

Wireframe.cc ist ein einfaches Wireframing-Tool, ähnlich wie Balsamiq. Es hat eine saubere Benutzeroberfläche ohne viele ablenkende Symbolleisten und Symbole. Im Gegensatz zu vielen anderen Tools können Sie damit Drahtgitter mit der Maus „skizzieren“.

Wireframe.cc bietet eine Bibliothek von Schablonen und eine saubere, unkomplizierte Handhabung von Objekten. Ein hilfreiches Element, das Wireframe.cc beim Arbeiten mit Lean UX bietet, ist eine URL für jede Wireframe-Seite, damit sie schnell und einfach für Feedback geteilt werden kann.

Es ist kein Prototyping oder keine Interaktivität eingebaut, da es sich ausschließlich auf Low-Fidelity-Wireframing konzentriert.

Wunderlich

Genannt „Google Docs“ für Wireframes, skurrile Mimics-Diagramm-Tools wie OmniGraffle und Visio. Es konzentriert sich nicht auf Prototyping/Mockups, da sein Hauptaugenmerk auf Wireframing und Flussdiagrammen liegt, was es zu einem großartigen Kandidaten für die Herstellung von Wireflows macht.

Wie Gliffy ist auch Whimsical ein Mid-Fidelity-Wireframing-Tool und enthält eine große Bibliothek konfigurierbarer Elemente (Schaltflächen, Eingaben, Kontrollkästchen usw.).

Die unbegrenzte Zusammenarbeit an demselben Wireframe-Dokument zur gleichen Zeit ist eine großartige integrierte Funktion für Remote-Designteams.

Adobe XD

Adobe XD hat in letzter Zeit die Aufmerksamkeit von Designern auf sich gezogen, da es eine einfache Benutzeroberfläche, enge Verbindungen zu anderen Adobe-Produkten, eine einfache Bedienung und integrierte Funktionen aufweist, die die Abhängigkeit von Plugins und Erweiterungen reduzieren.

Es gibt zwei Möglichkeiten, Wireframes in Adobe XD zu erstellen. Sie können mit Linien und Formen erstellt werden, um Objekte und Elemente zu erstellen, oder sie können mit vorgefertigten UI-Kits aus Quellen wie behance.net und XD-Ressourcen erstellt werden.

Eine zeitsparende Funktion von Adobe XD ist die Möglichkeit, „Master“-Komponenten (so genannte Symbole in Sketch) zu erstellen, die beim Vornehmen von Änderungen nützlich sind, da alle vom Master instanziierten Komponenten alle Änderungen erben.

Ein weiterer Vorteil von XD als Wireframing-Tool ist die Möglichkeit, per Mausklick in den Prototyping-Modus zu wechseln. Der Prototyping-Modus ist in XD integriert und arbeitet im Hintergrund, sodass Designer keine Zeit verschwenden, wenn sie von Wireframes zu Prototypen wechseln.

Skizzieren

Sketch, ein beliebtes Designtool für UX/UI-Designer, bietet eine Plattform für Vektorbearbeitung, Prototyping und Zusammenarbeit und verfügt über eine wachsende Bibliothek mit Hunderten von Plugins, die seine Funktionalität erweitern.

Wireframing in Sketch ähnelt Adobe XD mit der Verwendung von Kits/Vorlagen und Zeichenwerkzeugen. Sketch verwendet in großem Umfang Symbole , bei denen es sich um wiederverwendbare Komponenten handelt, die einmal definiert und mehrfach verwendet werden können (Schaltflächen usw.). Instanziierte Symbole übernehmen auch alle Änderungen, die am „Master“-Symbol vorgenommen werden. Dies ist für Designer von Vorteil, da während des Wireframing-Prozesses oft viele Änderungen vorgenommen werden müssen.

Mit Sketch können Designer High-Fidelity-Drahtmodelle, Prototypen und Mockups erstellen. Es ist keine Cloud-basierte App und einer der möglichen Nachteile ist, dass es nur mit macOS funktioniert.

UXPin

UXPin ist ein erstklassiges Wireframe-Tool, das interaktive Zustände, Logik und programmatische Komponenten unterstützt und Designern die Möglichkeit gibt, bedingte Interaktionen, Variablen und Ausdrücke zu codieren .

UXPin geht weit über Wireframing hinaus und konzentriert sich hauptsächlich auf das Prototyping mit UI-Komponentenbibliotheken, Symbolen, Vektorzeichenwerkzeugen und Co-Editing.

Es gibt eine Windows-, macOS- und Cloud-/Browser-Version. Für High-Fidelity-Wireframing funktioniert UXPin ähnlich wie Sketch und Adobe XD. Es ist nicht Drag-and-Drop wie Balsamiq, aber es bringt Prototyping und Mockups auf die nächste Stufe für Designer, die in einem einzigen Ökosystem bleiben möchten.

Wunder

Marvel, ein weiteres beliebtes Designtool, das Wireframing und Prototyping erleichtert, bietet Designern eine vertraute Drag-and-Drop-Oberfläche zum Erstellen von Low- bis High-Fidelity-Drahtmodellen.

Marvel benötigt keine Add-Ons oder Erweiterungen, da alle Assets enthalten sind. Die Plattform ist vollständig Cloud-basiert, was das Teilen von Wireframes mit anderen Mitgliedern des Designteams oder Kunden schnell und einfach macht.

Einer der Gründe, warum sich Designer für Marvel für Wireframing entscheiden, ist die Integration mit anderen Plattformen wie Jira, Sketch, Confluence, Dropbox, Slack und vielen anderen. Bei der Zusammenarbeit mit Entwicklern, Remote-Designteams und Kunden spart diese Funktion Designern viel Zeit.

Marvel hat auch ein Produkt namens Pop, das dabei hilft, Wireframing-Skizzen mit Stift und Papier in interaktive iPhone- und Android-Prototypen umzuwandeln. Pop ermöglicht es Designern, ein Foto ihrer Skizzen zu machen und diese in interaktive Wireframes umzuwandeln.

Axure RP

Axure RP gibt es schon seit langem und es ist ein großartiges Tool zum Erstellen statischer Wireframes (sowie hochgradig interaktiver Prototypen). Es ist nicht Cloud-basiert, funktioniert aber sowohl unter Windows als auch unter macOS.

Wireframing kann mit seiner riesigen Bibliothek von Drag-and-Drop-Komponenten durchgeführt werden, aber Axure RP ist ein komplexes Tool, das weit über Wireframing hinausgeht. Mit den programmatischen Funktionen von Axure RP können Designer fortschrittliche Prototypen mit Funktionen erstellen, die eine voll funktionsfähige Anwendung widerspiegeln.

Angesichts der hohen Lernkurve von Axure wäre es nicht sinnvoll, es nur für statische Wireframes zu verwenden. Wenn es jedoch darum geht, hochglanzpolierte und funktionale Prototypen herzustellen, dann wäre es das perfekte Werkzeug für Produktdesigner.

Die beliebtesten Wireframe-Tools von Toptal-Designern

Wir haben uns an einige Toptal-Designer gewandt, um herauszufinden, welche Wireframing-Tools professionelle Designer verwenden und warum. Hier ist, was sie zu sagen hatten.

„Meine Favoriten sind Adobe XD und UXPin. Ich fange an, XD als Favorit zu wählen, weil es einfach ist, schnell Wireframes zu erstellen und Ideen zu testen, und von dort aus kann ich mit dem Design und sogar mit dem Prototypen auf derselben Plattform beginnen.“ -Michael Craig

„Mein Favorit ist Pop, weil es einfach so schnell ist. Ich zeichne meine Wireframes sowieso immer auf Papier, also funktioniert es super und ich muss nichts doppelt handhaben. Ich finde es auch gut für die ganze 'Verliebe dich nicht in die Lösung'-Sache, weil es so eindeutig Lo-Fi ist.“ - Nicola Rushton

„Ich verwende Axure fast immer für meine Designarbeit. Es ist ein stark unterschätztes Werkzeug für umfassende Designarbeiten mit sehr hoher Komplexität“ – Andi Omtvedt

„Drahtgitter an sich mache ich eigentlich nicht mehr – da ich denke, dass die Werkzeuge stark genug sind, um Low-Fidelity-Prototypen zu produzieren, also fast das anfängliche Drahtgitter mit einer besseren Optik kombinieren. Ich habe Framer X seit Januar dieses Jahres übernommen und ich liebe es.“ - Charlie Williams

Zusammenfassung

Ist Wireframing angesichts der Möglichkeit, anspruchsvolle Prototypen herzustellen, noch relevant? Einige professionelle Designer werden argumentieren, dass Wireframes ein Relikt der Vergangenheit sind, während andere entschieden ihre anhaltende Bedeutung für den Designprozess verteidigen.

Heutzutage gibt es eine Fülle von Wireframe-Tools, die den Designprozess erleichtern. Einige konzentrieren sich nach wie vor ausschließlich auf Wireframing, auch wenn der Trend zu hybriden Produkten geht, die mit Wireframing beginnen, aber auch die Möglichkeit zur Erstellung von Prototypen beinhalten und in vielen Fällen voll funktionsfähige Mockups produzieren.

Obwohl es sich von einer Low-Fidelity-Lieferung zu einer Mid- oder High-Fidelity-Lieferung entwickelt hat, wird Wireframing mit Sicherheit nicht verschwinden.

Weiterführende Literatur im Toptal Design Blog:

• Wireframe-Mapping: So vermeiden Sie Scope Creep
• Tod dem Wireframe. Direkt zu High-Fidelity!
• Designtool-Showdown – Adobe XD vs. Sketch (2019)
• Meistern Sie Ihr Handwerk mit diesen Top-UX-Tools
• Die 10 UX-Ergebnisse, die Top-Designer verwenden