Die 10 besten Drahtgitterwerkzeuge

Beste Drahtgitterwerkzeuge: Drahtgitter auf dem Tablet neben einer Kaffeetasse und einer Pflanze
(Bildnachweis: Visual Design on Unsplash)

Mit den besten Wireframe-Tools können Sie das Design Ihrer Website oder App von Anfang an genau festlegen. Indem Sie alle Stakeholder dazu bringen, sich auf die Funktionsweise Ihrer Benutzeroberfläche zu einigen, wird das Buy-In frühzeitig eingebunden. Dies ist wichtig, um Ihren Prozess zu rationalisieren und falsche Abbiegungen und Umkehrungen auf dem Weg zu verhindern.

Einige der besten Drahtgitterwerkzeuge, die speziell für Drahtgitter entwickelt wurden. Welche davon Sie wählen, hängt weitgehend davon ab, ob Sie etwas schnelles und raues oder etwas näher an einem voll funktionsfähigen Prototyp erstellen möchten.

Auf der anderen Seite der Medaille möchten einige Leute nicht die Aufregung haben, ihre Designs von einer dedizierten Wireframing-App in eine vollständige Design-App zu exportieren. Stattdessen ziehen sie es vor, ihre Wireframes in einer universellen Design-Software zu erstellen, damit sie von Anfang bis Ende alles auf einer Plattform entwickeln können.



Wir haben Empfehlungen in beiden Lagern. Wir haben es auf 10 der besten Wireframing-Tools eingegrenzt. Weitere nützliche Tools finden Sie in unserem Webdesign-Tools Zusammenfassung oder unsere beste Laptops zum Programmieren .

Die besten Drahtgitterwerkzeuge

UXPin-Schnittstelle

(Bildnachweis: UXPin)

01. UXPin

Das beste Drahtgitter-Werkzeug insgesamt

wie man Pinsel in Photoshop organisiert

Plattform: Webbrowser | Kostenlose Testphase: Ja | Preis: Ab 19 US-Dollar pro Editor und Monat

Besucherseite Intuitive Benutzeroberfläche Liest Sketch- und PS-Dateien Top-Präsentationstools Keine kostenlose Version

UXPin ist ein spezielles Wireframing-Tool mit einer sehr intuitiven Benutzeroberfläche, klaren Symbolen und einer soliden Bibliothek von UI-Elementen, die Sie per Drag & Drop in Ihre Wireframes ziehen können, sowie Komponenten für Bootstrap, Foundation, iOS und Android. Sie können Dateien in Sketch und Photoshop importieren und exportieren, wodurch Sie die Möglichkeit haben, Ihre Drahtmodelle später zu vollständigen Prototypen zu entwickeln.

Es gibt auch einige großartige Funktionen für die Zusammenarbeit bei der Arbeit an Ihren Drahtgittern mit anderen und erstklassige Live-Präsentationstools, mit denen Sie Ihre Entwürfe den Stakeholdern präsentieren können. UXPin ist für Anfänger einfach zu erlernen und mit fortschrittlichen Werkzeugen für Fortgeschrittene ausgestattet. Es ist unser bestes Drahtgitter-Werkzeug insgesamt.

Adobe XD-Screenshots

(Bildnachweis: Adobe)

02. Adobe XD

Das beste vollständige Design-Tool für Wireframing

Plattform: MacOS, Windows, Android, ioS ​​| Kostenlose Testphase: Nein, aber eingeschränkte kostenlose Version | Preis: Ab 9,98 £ pro Monat (einzelne App) oder 49,94 £ pro Monat als Teil von Creative Cloud

Empfohlener Händler Creative Cloud Alle Apps £ 49.94 / mth Kreative Wolkenfotografie £ 9,98 / mth Creative Cloud Single App £ 19.97 / mth Besucherseite bei Adobe Plattformübergreifende Creative Cloud-Integration Erweiterte Funktionen Für die Vollversion ist ein Abonnement erforderlich

Als direkter Konkurrent von Sketch gestartet,Adobe XDist ein vektorbasiertes Designtool, das sowohl für Mac als auch für Windows verfügbar ist. Es ist vollständig interoperabel mit anderen Adobe-Tools wie Photoshop und Illustrator sowie mit Diensten wie Adobe Fonts und Adobe Stock. Das Hauptaugenmerk liegt darauf, Designern das Skizzieren von Drahtgittern zu erleichtern. Von der Erstellung von Sitemaps, Flussdiagrammen und Storyboards bis zur Erstellung funktionaler Prototypen.

Zu den bemerkenswerten Funktionen gehört ein „Wiederholungsraster“ für schnelles Entwerfen, automatische Animation, Sprachauslöser und leistungsstarke Tools für die Zusammenarbeit. Sie können Adobe XD kostenlos ausprobieren, benötigen jedoch ein Creative Cloud-Abonnement, um auf alle Funktionen zugreifen zu können.

Axure-Schnittstelle

(Bildnachweis: Axure)

03. Axure RP

Das beste dedizierte Drahtgitter-Tool für UX-Profis

Plattform: MacOS, Windows | Kostenlose Testphase : Ja | Preis: Ab 25 USD (pro) pro Benutzer und Monat

Besucherseite Erstellen funktionierender Prototypen Erweiterte Funktionen Lernkurve Kann übertrieben sein

Axure Mit dieser Funktion können Sie nicht nur Low-Fi-Wireframes erstellen, sondern auch zusätzliche Funktionen hinzufügen und High-Fidelity-Wireframes erstellen. Sie können damit interaktive HTML-Modelle für Websites und Apps erstellen und Ihr App-Design auf Ihrem Telefon mit einer integrierten Freigabefunktion anzeigen.

Diese Software wird von Organisationen wie Microsoft, Amazon und der BBC verwendet und umfasst Funktionen zum Überschreiben von Symbolen, einen Entwicklerinspektionsmodus, Animationseffekte, Cloud-Speicherung und -Freigabe, CSS-Export und Dokumentation. Eine gute Wahl für erfahrene UX-Profis, die ihre Designs an Entwickler weitergeben möchten.

Einfaches Drahtmodell

(Bildnachweis: Balsamico)

04. Balsamiq-Modelle

Das beste Drahtgitter-Tool für Low-Fi-Designs

Plattform: Mac, Windows, Linux, Webbrowser | Kostenlose Testphase: Ja | Preis: Ab 89 US-Dollar für einen Benutzer für den Desktop; ab 9 USD / Monat für die Webversion

Besucherseite Schnell zu bedienen Hält die Dinge einfach Kleine Lernkurve Nur Low-Fi-Drahtgitter

Balsamiq-Modelle macht es sehr einfach, Drahtmodelle aufzunehmen und zu erstellen, selbst wenn Sie noch keine Erfahrung haben. Wir empfehlen es jedem, der ein schnelles und Low-Fi-Drahtmodell zusammenstellen möchte, im Gegensatz zu einem polierten Prototyp.

Die Software verfügt über mehrere Drag-and-Drop-Elemente, von Schaltflächen bis zu Listen, die jeweils als Handzeichnung gestaltet sind. Sie können sehen, wie Ihr Drahtmodell auf verschiedenen Bildschirmgrößen aussehen wird. Mit gut integrierten Tools für die Zusammenarbeit und Benutzertests ist dies eine gute Wahl sowohl für Nicht-Techniker als auch für schlanke UX-Teams.

wie man animierte Pixelkunst macht

Skizzenschnittstelle

(Bildnachweis: Skizze)

05. Skizze

Vollständiges Designtool mit starkem Fokus auf die Benutzeroberfläche

Plattform: Mac | Kostenlose Testphase: Ja | Preis: 99 $

Überprüfen Sie Amazon Besucherseite Starker UI-Fokus Leichte intuitive Benutzeroberfläche Nur für Mac

Während Skizzieren ist für Windows nicht verfügbar. Wenn Sie ein Mac-Benutzer sind, ist dies auf jeden Fall eine Überlegung wert. Seit seiner Einführung im Jahr 2010 hat es den gesamten Markt für Wireframing- und Prototyping-Tools revolutioniert und konzentriert sich bis heute auf das Design von Benutzeroberflächen und Symbolvektoren. Die Benutzeroberfläche ist leicht und benutzerfreundlich und sehr einfach und intuitiv.

Sketch ist ein großartiges Werkzeug zum Erstellen einfacher Drahtgitter. Mit der Symbolfunktion können Sie Elemente automatisch in Ihrem Layout wiederholen. Es gibt unzählige UI-Kits von Drittanbietern zum Herunterladen, wenn Sie einen vollständigen Prototyp erstellen möchten. Und im Gegensatz zu Adobe-Apps ist es gegen eine einmalige Gebühr ohne Abonnement erhältlich.

Photoshop-Oberfläche

(Bildnachweis: Adobe)

06. Photoshop

Der Industriestandard für digitales Design

Plattform: Windows, Mac | Kostenlose Testphase: Ja | Preis: Ab 19,99 USD pro Monat im Rahmen der Adobe Creative Cloud

Empfohlener Händler Creative Cloud Alle Apps £ 49.94 / mth Kreative Wolkenfotografie £ 9,98 / mth Creative Cloud Single App £ 19.97 / mth Besucherseite bei Adobe Industriestandard Kreative Cloud-Integration Funktionsreiche Fehlende Elementbibliotheken

Photoshopist der Industriestandard, wenn es um Design-Software im Allgemeinen geht. Es gibt keine spezifischen Wireframing-Funktionen. Beispielsweise werden keine Bibliotheken mit Schnittstellenelementen angeboten. Es gibt jedoch keinen Grund, warum Sie es nicht für Wireframing verwenden können. In der Tat ist Photoshop möglicherweise das beste Drahtgitter-Tool für Sie, da es so gut in andere Adobe-Tools und -Dienste wie Adobe Fonts und Adobe Stock integriert ist. Insbesondere, wenn Sie bereits mit der Software vertraut sind. Und es ist mit so vielen Funktionen ausgestattet, dass Sie alles tun können, vom Skizzieren schneller Ideen bis zum Gruppieren verschiedener Elemente und Ebenen, um ein robustes Drahtmodell zu erstellen.

Justinmind-Schnittstelle

(Bildnachweis: Justinmind)

07. Justinmind

Das beste Drahtmodell und Prototyp-Tool für Nicht-Techniker

Plattform: Mac OS, Windows | Kostenlose Testphase: Nein, aber eingeschränkte kostenlose Version | Preis: Ab 19 USD / Monat

Besucherseite Erstellen Sie funktionierende Prototypen Geeignet für Anfänger Kostenlose Version Lernkurve

Justinmind ist ein weiteres Tool, mit dem Sie alles von groben Drahtgittern bis hin zu funktionierenden Prototypen erstellen können. Es eignet sich jedoch besser für Nicht-Techniker als Axure RP. Es enthält eine Bibliothek mit UI-Elementen, von Schaltflächen und Formularen bis hin zu allgemeinen Formen und einer Reihe von Widgets für iOS, SAP und Android.

Benutzerdefiniertes Styling ist enthalten, sodass Sie abgerundete Ecken, zugeschnittene Bilder oder Farbverläufe hinzufügen oder Grafiken importieren können, indem Sie sie in den Browser ziehen. Prototypen können als HTML exportiert werden. Es gibt sogar eine limitierte Version, die für immer kostenlos ist.

Wireframe.cc-Schnittstelle

(Bildnachweis: Wireframe.cc)

08. Wireframe.cc

Das beste Wireframe-Tool im Browser

Plattform: Webbrowser | Kostenlose Testphase: Ja | Preis: Ab 16 US-Dollar pro Monat

Besucherseite Hält die Dinge einfach Entfernt Ablenkungen Nichts zum Herunterladen Fehlen Funktionen (wenn auch absichtlich)

In der Wirtschaft gibt es ein beliebtes Sprichwort, das als KISS-Prinzip bekannt ist: 'Halten Sie es einfach, dumm'. Und wenn Sie diesen Ansatz für Wireframing verfolgen, Wireframe.cc kann die beste Wahl für Sie sein.

Dieses browserbasierte Tool bietet eine einfache Oberfläche zum Skizzieren Ihrer Drahtgitter und verzichtet auf Symbolleisten und Symbole einer typischen App, sodass Sie nichts verlangsamen können. Es gibt eine begrenzte Farbpalette, mit der Sie diesen bestimmten Aufschub vermeiden können. UI-Elemente sind kontextsensitiv und werden nur angezeigt, wenn Sie sie benötigen.

Zwei mobile App-Schnittstellen

(Bildnachweis: Invision)

09. Invision Studio

Design-Software mit starker Zusammenarbeit und reaktionsschnellen Funktionen

Plattform: Windows, Mac | Kostenlose Testphase: Nein, aber begrenzter kostenloser Plan Preis: Ab 13 US-Dollar pro Monat

Besucherseite Einfach zu bedienen Integriert in Invision Freihand Kostenlose Version Kann nicht in viele Tools integriert werden

Invision Studio ist möglicherweise nicht so funktionsreich wie Adobe XD, bietet jedoch zum Erstellen von Drahtmodellen alles, was Sie benötigen. Es ist besonders stark in Bezug auf reaktionsschnelle Designfunktionen und lässt sich gut in Invision Freehand integrieren, um in Echtzeit mit anderen zusammenzuarbeiten.

Die Benutzeroberfläche ist ziemlich einfach zu erlernen und die vorinstallierten Symbole sind sehr elegant und schön gestaltet. Mit praktischen Funktionen wie Kommentaren, Übergängen und Desktop-Synchronisierung ist dies ein sehr leistungsfähiges Tool, mit dem Sie alles von Low-Fi-Wireframes bis hin zu Prototypen mit vollem Funktionsumfang erstellen können.

InDesign-Oberfläche

(Bildnachweis: Adobe)

10. InDesign

Desktop-Publishing-Tool, das sich hervorragend zum Erstellen von Wireframes eignet

Plattform: Windows, Mac | Kostenlose Testphase: Ja | Preis: Ab 19,99 USD pro Monat im Rahmen der Adobe Creative Cloud

wie man Wasser mit Ölfarbe malt
Adobe InDesign CC £ 19.97 / mth Besucherseite bei Adobe Entwerfen interaktiver PDFs Erstellen Sie Ihre eigenen Bibliotheken. Creative Cloud-Integration Es fehlen Elementbibliotheken

Adobe InDesignist seit langem die beliebteste Desktop-Publishing-Software. Heutzutage konzentriert es sich jedoch nicht mehr nur auf das Druckdesign. Die neueste Version kann auch verwendet werden, um einige ziemlich flotte interaktive PDFs zu erstellen, einschließlich Animationen, Video- und Objektzuständen. Während die digitalen Funktionen von InDesign hauptsächlich zum Erstellen von E-Books, E-Broschüren und E-Magazinen verwendet werden, können sie ebenso Drahtgitter und Modelle erstellen. Die Software bietet auch die Möglichkeit, Bibliotheken mit Seitenelementen zu erstellen, sodass Sie auch Sammlungen wiederverwendbarer UI-Grafiken erstellen können.

Weiterlesen:

Zusammenfassung der besten Angebote von heute Adobe Creative Cloud Alle Apps £ 49.94 / mth Aussicht Empfohlener Händler Adobe Adobe InDesign CC £ 19.97 / mth Aussicht Wir prüfen täglich über 130 Millionen Produkte auf die besten Preise unterstützt von