Wenn Sie bereits mit dem Vokabular des UX-Designs vertraut sind, wissen Sie sicher, was ein Wireframe und wozu er dient. Wireframe-Tools ermöglichen es, das Designmodell Ihrer Website zu erstellen. Dieses Vorgehen ist äußerst nützlich, um das Grundgerüst Ihrer künftigen Seite zu bauen und wertvolle Hinweise an den zu geben Webdesigner der sich darum kümmern wird.
Um diese Modelle zu erstellen und jeden Bereich Ihrer Seiten klar abzugrenzen, gibt es verschiedene Wireframe-Tools mit unterschiedlichen Funktionen, die Ihnen helfen. Hier sind 17 davon, die Sie nach Belieben verwenden können, um Ihre Mockups zu erstellen und die Kommunikation mit Ihrem Dienstleister zu erleichtern.
Online-Tools zur Erstellung von Wireframes
Mockflow
Das Tool Mockflow hilft Ihnen, professionelle Wireframes für Ihre Website zu erstellen, aber auch für Ihre Profile in sozialen Netzwerken oder jede andere Gestaltung. Ihr Grafiker wird dann genau wissen, in welche Richtung er gehen soll.
UXpin
Von UX-Designern für UX-Designer entwickelt, UXpin lässt sich sehr leicht bedienen und ermöglicht es Ihnen, Ihr Mockup mit wenigen Klicks zu erstellen.
Framebox
Das Tool Framebox ermöglicht es Ihnen, Ihr Wireframe direkt beim Betreten der Seite zu erstellen. Die Oberfläche ist sehr reduziert und Sie müssen kein Konto anlegen. Praktisch!
Wireframe.cc
In einer vereinfachten Oberfläche, Wireframe.cc ermöglicht es Ihnen, sofort Ihr Layout zu zeichnen. Es bietet verschiedene Formate, um zu visualisieren, wie Ihre Seite auf Tablet und Smartphone wirkt.
iPlotz
Die kostenlose Version voniPlotz ermöglicht es Ihnen, bis zu 5 Wireframes zu erstellen. Sie können außerdem Mitglieder zu Ihren Projekten hinzufügen, um gemeinsam am selben Mockup zu arbeiten.
Gliffy
Gliffy ist ein Online-Tool, das Ihnen hilft, verschiedene Diagramme zu erstellen. Sie können es auch verwenden, um Mockups für Ihr Webprojekt zu zeichnen.
Pidoco
In 50 Ländern genutzt, Pidoco bietet Ihnen die Möglichkeit, Ihre Struktur übersichtlich darzustellen. Bei Bedarf können Sie ein Teamprojekt erstellen, damit jeder seinen Beitrag zum Wireframe leisten kann.
Moqups-Tool
Das Online-Tool Moqups-Tool beruht auf dem Prinzip des Drag & Drop. Außerdem verfügt es über ein Farbsystem, das Ihnen hilft, die Bereiche Ihrer Seite besser zu unterscheiden. Seine sehr einfache Oberfläche ist ebenfalls leicht zu bedienen.
Wirefy-Online
Um zu verwenden Wirefy-Online, ist es notwendig, die Sprachen HTML und CSS zu beherrschen. Dieses Werkzeug ermöglicht es tatsächlich, Ihre Website direkt zu codieren, sodass es eher ein Prototyp als ein Mockup ist.
Whimsical-Tool
Whimsical-Tool ist ein Zusammenarbeitstool eine Online-Lösung, die eine Funktion zur Erstellung von Wireframes integriert. Mit seiner modernen Oberfläche und zahlreichen Vorlagen ermöglicht diese Website das einfache und schnelle Erstellen von Wireframes, um sie mit Ihren Mitarbeitenden zu teilen und in Echtzeit zusammenzuarbeiten.
Wireframe-Software
Pencil-Tool
Pencil-Tool ist eine plattformübergreifende Open-Source-Software und daher kostenlos. Unverzichtbar, um Wireframes mit begrenztem Budget zu erstellen!
Balsamiq-Tool
Balsamiq-Tool ist eine herunterladbare Software, die die Zusammenarbeit an einem Mockup ermöglicht. Sie ist damit ideal für Gründer, die ihr Projekt gemeinsam mit Partnern starten. Sie ist umfangreich und einfach zu bedienen.
Axure RP9-Tool
Axure RP9-Tool ist eine für Windows und Mac kompatible Software, mit der sich fortgeschrittene Mockups für verschiedene Projekte erstellen lassen: Website, Broschüre, mobile Anwendung … Es gibt eine kollaborative Version, ideal für kleine Unternehmen oder Personen, die unabhängige Dienstleister engagieren.
Adobe XD-Tool
Adobe XD-Tool ist das Werkzeug der Designer. Diese kollaborative Software ermöglicht das Erstellen von Designs für Webseiten, Anwendungen, Spiele usw., um die Benutzererfahrung maximal zu fördern.
Photoshop
Wenn Sie nicht die komplette Adobe-Suite haben oder statt ein spezielles Tool zu suchen, können Sie problemlos Photoshop verwenden. Wenn Sie nach Ressourcen suchen, um Ihre Wireframes in Photoshop zu erstellen, Wireframe-Kit und ein großartiges Ressourcenliste werden Ihnen den Einstieg erleichtern.
Sketch
Eine echte Mischung aus Photoshop und Illustrator, Sketch ist ein ideales Tool für Webdesign. Es ermöglicht das Erstellen realistischer Wireframes. Zur Hilfe können Sie unseren Artikel mit Sketch-Ressourcen oder die Website Sketch-App-Quellen.
Fireworks
Fireworks kann ebenfalls verwendet werden, um realistische Wireframes zu erstellen. Wenn Sie nicht wissen, wie man das macht, Folgen Sie dem Leitfaden !
Die Schlüssel zu einem erfolgreichen Website-Wireframe
Jetzt, wo Sie das für Ihre Bedürfnisse passende Wireframing-Tool gefunden haben, stellt sich die Frage, wie Sie vorgehen müssen, um ein erfolgreiches Wireframe zu erstellen. Und genau darum geht es in diesem Abschnitt!
Kommen wir ohne Umschweife zur Sache: Hier sind 8 Schlüssel, um das Wireframe Ihrer Website erfolgreich zu gestalten.
1. Verwenden Sie Farben sparsam
Das Ziel eines Wireframes ist, die verschiedenen Elemente der Website zu zeigen. Bevor Sie also einige Farben, fragen Sie sich, ob sie Ihnen helfen, dieses Ziel zu erreichen.
In manchen Fällen ist das möglich. Meistens lenkt die Hinzufügung von Farben jedoch den Kunden oder Ihr Team ab. Diese könnten das farbige Wireframe für das endgültige Design der Seite halten und sich darauf fixieren. Dabei ist das nicht das Ziel!
Ideal ist es, bestimmte Farbtöne zu verwenden, um wichtige Komponenten hervorzuheben, wie z. B. die Handlungsaufforderung, Benachrichtigungen, Fehlermeldungen, Hinweise usw. Die Styleguide wird später integriert, wenn das Gesamtdesign bestätigt ist.
2. Verwenden Sie echten Inhalt
Webdesigner verwenden regelmäßig das berühmte « Lorem Ipsum » um Wireframes zu füllen.
Dabei hat Inhalt Einfluss auf das Design. Wenn Sie „falschen“ Text verwenden, müssen Sie möglicherweise Anpassungen an der Benutzeroberfläche vornehmen. Im Gegenteil: Den tatsächlichen Inhalt der Seite zu integrieren hilft Ihnen, Ihre Entscheidungen zu steuern. Ganz zu schweigen davon, dass es Ihren Kreationen mehr Wert verleiht. Das ist umso wichtiger, wenn Sie das Wireframe einem Kunden zeigen müssen…
3. Setzen Sie auf ein Rasterlayout
Die Elemente des Layouts sollten anpassbar, austauschbar und leicht modulierbar sein. Die Verwendung eines Rasters ist ein idealer Weg, um schnell einen roten Faden zu schaffen und das Wireframe sanft anzupassen.
Sie kann Ihnen helfen, die verschiedenen Elemente sehr visuell anzuordnen. Das erleichtert das Verständnis (und die Umsetzung) Ihres Teams!
4. Buttons hervorheben
Nutzer sind es gewohnt, während der Navigation auf einer Website auf Buttons zu klicken. Insbesondere, um wichtige Aktionen auszuführen, wie Inhalte herunterzuladen, eine Nachricht zu senden, eine Bestellung aufzugeben oder eine Zahlung zu bestätigen.
Diese Buttons spielen eine entscheidende Rolle bei der Umwandlung von Besuchern. Sie können sicher sein, dass Ihr Kunde oder Ihr Vorgesetzter auf ... achten werden Call-to-Actions. Denken Sie daran, sie sehr sichtbar darzustellen, zum Beispiel durch Farbe (wie unter Punkt 1 gesehen).
Achten Sie außerdem auf die Konsistenz aller Call-to-Actions: Sie sollten dasselbe Design, dieselbe Größe und dieselbe Farbe haben.
5. Annotationen verwenden
Es kommt vor, dass bestimmte Elemente nicht visuell dargestellt werden können, etwa die Logik hinter bestimmten Tabs oder Bereichen. Das kann Fragen von Entwicklern oder Kunden auslösen.
Fügen Sie in diesem Fall Bildschirmanmerkungen hinzu, um die komplexen Elemente Ihres Wireframes zu erklären. So versteht Ihr Team Ihre Lösungen und Sie müssen nicht viel Zeit damit verbringen, alles zu erklären. Diese Hinweise begrenzen außerdem potenzielle Fehler bei der Umsetzung der Website.
6. Nutzerflüsse kartieren
Der Nutzerfluss bezeichnet den Besuchsverlauf der Internetnutzer während einer Sitzung. Dieser Verlauf umfasst den Einstiegspunkt auf Ihrer Seite, alle Interaktionspunkte (wie besuchte Seiten und die Buttons, auf die sie bis zur finalen Transaktion geklickt haben) sowie den Moment, an dem sie die Website verlassen haben.
Er muss kartiert, um keine wichtigen Elemente zu übersehen, andernfalls Gefahr laufen, Reibungspunkte zu erzeugen und die Conversions zu senken.
Ermitteln Sie die Bedürfnisse der Nutzer, indem Sie sich folgende Fragen stellen:
- Was ist das Ziel der Besucher der Website?
- Welche Funktionen suchen sie?
- Welche ersten Fragen könnten sie haben?
- Welche Informationen benötigen sie möglicherweise zur Navigation?
7. Das Wireframe in einen Prototyp umwandeln
Manche Websites haben einfache, gebräuchliche Interaktionen, andere bieten relativ fortgeschrittene Interfaces.
Manchmal reichen Wireframes nicht aus, um komplexe und ungewöhnliche Designs zu veranschaulichen. Statt lange Notizen zu schreiben und Stunden mit Erklärungen zu verbringen, können Sie Ihre Wireframes in interaktive Prototypen verwandeln. Das führt uns zum letzten Punkt…
8. Ein Tool zur Erstellung von Wireframes verwenden
Pencil, Whimsical, Mockflow, Gliffy, Balsamiq… Wie oben zu sehen ist, mangelt es nicht an Lösungen, um erfolgreiche Wireframes zu erstellen!
Der Vorteil besteht darin, realitätsgetreue Pläne erstellen zu können, die leicht lesbar und verständlich sind. Einige bieten erweiterte Funktionen, mit denen Sie einfach zusammenarbeiten oder Ihre Wireframes animieren können, um ein professionelleres Ergebnis zu erzielen.
Fazit
Bevor Sie mit der Produktion Ihrer Website beginnen, ist ein Mockup unerlässlich, um den Conversion-Trichter der Nutzer zu gestalten. Prüfen Sie die Ergonomie und stellen Sie sicher, dass Sie keinen wichtigen Bereich vergessen.
Diese Tools ermöglichen es Ihnen, Wireframes zu erstellen, um das Endergebnis zu visualisieren und den von Ihnen ausgewählten Webdesigner auf Codeur.com.
Ab jetzt verfügen Sie über alle wichtigen Elemente, um ein erfolgreiches Website-Wireframe zu erstellen und die richtigen Informationen an Ihr Team weiterzugeben!
