Wenn Sie den Begriff gehört haben „Drahtmodell“ Wenn Sie jedoch etwas verwirrt sind, was es eigentlich ist, wozu es dient oder warum es nützlich ist, sollte dieser Artikel Ihre Zweifel ausräumen.
Was ist ein Wireframe?
Ein Wireframe ist so etwas wie eine Architektenzeichnung. Es ist Entwurf visuelle Darstellung der Benutzeroberfläche Ihre Website oder Anwendung. Mithilfe von Wireframes können Sie vier Dinge kommunizieren:
- Die Struktur - Navigations- und Informationsarchitektur
- Zeitplan - Zum Beispiel. Hierarchie der Seiten sowie Positionierung der Elemente auf dem Bildschirm
- Der Inhalt - die Idee, wie der Inhalt passen zum Design
- Funktionalität – eine Beschreibung, wie das Produkt funktioniert und wie die Leute es verwenden werden
Dies ist ein unverzichtbares Werkzeug für jeden UX-Designer und in vielen verschiedenen Situationen nützlich. Sie können Wireframes mit unterschiedlichen Genauigkeitsstufen erstellen (dt. Treue) und genau deshalb sind sie ein so mächtiges Werkzeug.
Low-Fidelity (geringere Wiedergabetreue) umfasst handgezeichnete Skizzen, die sich hervorragend zur Konkretisierung erster Ideen eignen, entweder für Sie selbst oder zur Präsentation vor Ihrem Team. Es ist der schnelle Weg um Ihre Ideen zu erstellen, zu bearbeiten und zu verfeinern, und es spielt keine Rolle, wie gut Sie im Skizzieren sind. Jeder, der einen einfachen Kreis, ein Quadrat und ein Dreieck zeichnen kann, ist durchaus in der Lage, eine solche Skizze anzufertigen.
Kommen wir nun zu dem, woran die meisten Experten zuerst denken, wenn wir von „Wireframe“ sprechen. Es gibt Hunderte verschiedener Tools, mit denen Sie sie erstellen können. Figma, Balsamic, OmniGraffle, Illustrator und UXPin sind nur einige davon. Wireframes dieser Art sind der richtige Weg Sie kommunizieren Ihre Idee an Ihr Team, Ihre Klienten oder Klienten. Es ist eine großartige Möglichkeit, Ihr Produkt und genau zu erklären, was Sie herstellen.
Auf der Hi-Fi Als Teil des Spektrums (High Fidelity) können Sie mit einem anklickbaren Prototyp Interaktionen und deren Ablauf entwerfen. Anklickbare Prototypen sind eine gute Wahl, wenn Sie testen die Benutzerfreundlichkeit. Sie können Axure, Keynote verwenden oder mithilfe von HTML sogar Wireframes direkt in Ihrem Browser erstellen.
Manchmal reicht eine schnelle grobe Skizze aus, und manchmal ist ein Drahtmodell mit detaillierten Notizen darüber, was wo sein sollte, wie es aussehen sollte und wozu es dient, angemessener. Es hängt wirklich vom Projekt und der Phase ab, in der Sie sich befinden.
Foto von Federica Galli Er Unsplash
Ihr Wireframe sollte einen genau richtigen Detaillierungsgrad aufweisen, nicht mehr. Deshalb hier einige praktische Tipps:
- Halte es einfach – Geschwindigkeit und Einfachheit sind der Schlüssel zum Wireframing. In den meisten Fällen werfen wir das Wireframe am Ende weg oder löschen es, sobald es seinen Zweck erfüllt. Deshalb muss es nicht perfekt liniert sein und auch nicht jedes Element genau in einem Pixel platziert sein.
- Benutzen Sie das Koordinatengitter (dt. Netz) – Grid hilft Ihnen, Struktur und Einfachheit in Ihrem Layout zu schaffen. Heutzutage ist jede anständige Website nach diesem Prinzip aufgebaut, daher empfehle ich Ihnen, es auch zu verwenden.
- Verwenden Sie kurze und präzise Notizen - Die Teammitglieder werden Ihr Drahtmodell lesen. Vergessen Sie also nicht, ihnen angemessene Notizen zu hinterlassen, die den Sinn Ihrer Skizze klar und präzise wiedergeben. Übertreiben Sie nicht, bringen Sie einfach den Punkt rüber.
- Ermutigen Sie zum Feedback – Zeigen Sie das Wireframe Ihren Kollegen und fragen Sie sie nach ihrer Meinung. Das ist ein todsicherer Weg, es zu verbessern. Hängen Sie es gerne an die nächstgelegene Wand und ermutigen Sie das gesamte Team, Feedback zu geben.
Wie Sie sehen, kann die Erstellung von Wireframes relativ einfach sein, obwohl es natürlich etwas Erfahrung erfordert, um zu verstehen, wie Sie sie für Ihre Ziele optimal nutzen können.
Wenn Sie Interesse an professioneller Hilfe im Bereich UX-Design oder anderen IT-Dienstleistungen haben, Lesen Sie mehr über uns.
Quelle: youtube.com/uxmastery
