Wireframes sind eine wunderbare Möglichkeit, die Benutzeroberfläche für Webseiten und Anwendungen zu planen. User Experience (UX)-Designer und -Studenten können sie in ihrem Designprozess verwenden. Designer verwenden Wireframe-Tools oder Bleistift und Papier und planen Hintergründe, Navigation, Home-Button und vieles mehr.
Sie müssen kein Webdesigner oder Student sein, um Wireframes zu verwenden. Sie könnten einen Blog haben, den Sie planen möchten; das Projekt muss nicht von Grund auf neu programmiert werden. Jeder, der einen Website-Builder verwendet, kann vom Wireframe-Prozess profitieren. Ihr Anwendungsfall muss nicht einmal webbezogen sein. Jede Person, die ein Projekt oder ein Konzept visualisieren muss, kann die hier erlernten Fähigkeiten auch anderweitig anwenden.
Bei Wireframes geht es um die Planung und Visualisierung Ihres Projekts. Sie werden im User Experience Design verwendet, weil sie Ihnen helfen, die Erfahrung des Benutzers oder Kunden zu planen. Das von Ihnen erstellte Wireframe kann mehrfach getestet und untersucht werden, bevor Sie das Projekt tatsächlich umsetzen. Auf diese Weise haben Sie, wenn Sie bereit sind, das Projekt oder Produkt zu erstellen, alle Fehler im Design ausgearbeitet.
Benutzerfreundliches Design
Das UX-Design einer Website zielt darauf ab, den Kunden in den Mittelpunkt der Ideenfindung, des Designs und des Produkts einer Webseite zu stellen. Das Konzept kann darüber hinaus auf jedes benutzerorientierte Projekt ausgeweitet werden. Der Prozess umfasst Recherchen, das Sammeln von Feedback und die Ausarbeitung von Ideen für ein einfaches, benutzerfreundliches und leicht verständliches Endprodukt.
Vor dem Wireframing müssen UX-Designer umfangreiche Recherchen über den Erfolg bestimmter Produkte und die erforderlichen Zugänglichkeitsstandards anstellen.
Die Produktforschung ermöglicht es UX-Experten, aus den Fehlern ihrer Konkurrenten zu lernen, die auf Feedback und Forschung basieren. Wenn Ihr Mitbewerber etwas herstellt, das nicht funktioniert, müssen Sie wissen, warum. Es könnte an den Farben liegen oder an den 10 Bildern, die die Ladezeit des Browsers verlangsamen und die Absprungrate erhöhen.
Zu den Zugänglichkeitsstandards könnte eine Vorlesefunktion in einer App gehören oder die Berücksichtigung der Tatsache, dass zu viele Wörter, Symbole und Farben auf einer Seite die Benutzer überreizen und verwirren können. Abgesehen von der Anpassung an Behinderungen sind dies oft schlechte Designentscheidungen, wobei Übersättigung der häufigste Fehler ist.
Bestimmte Arten von Sehbehinderungen und Farbenblindheit bedeuten, dass Sie sorgfältig überlegen müssen, bevor Sie drei verschiedene Lila-Schattierungen oder Neon-Farben verwenden (unglaublich helle Farben sind ein definitives Nein). Seh- oder Hörbehinderungen sind nicht die einzigen Elemente, auf die man achten muss. Einige Menschen auf dem Autismus-Spektrum haben Probleme, wenn eine Webseite zu anregend ist.
Inklusivität bedeutet nicht, dass die künstlerische Freiheit geopfert wird, im Gegenteil, beim UX-Design wird sie sogar verbessert. Das Ziel ist ein Design, bei dem die meisten Menschen die Schaltfläche zum Abonnieren finden können, ohne abgelenkt, verwirrt oder gar verärgert zu werden. Die schlechteste Art von Benutzeroberfläche (UI) verärgert die Menschen. Einfach und sauber ist eine gute Faustregel. Die besten UX-Designer stellen sicher, dass jede Komponente ihrer Arbeit wesentlich ist und einem bestimmten Zweck dient
Der Prozess der Erstellung eines Wireframes
Die Erstellung eines Wireframes kann langwierig und sehr detailliert sein, sie kann aber auch nur ein paar Minuten in Anspruch nehmen. Wie detailgetreu Ihr Entwurf ist, hängt von Ihrem Projekt ab und davon, mit wem Sie zusammenarbeiten. Wenn Sie Recherchen einbeziehen müssen, wird Ihr Design wahrscheinlich ein High-Fidelity-Mockup sein. Einfachere Blog-Seiten können oft mit einem Low-Fidelity-Wireframe erstellt werden.
Welche Komponenten Sie hinzufügen und wie Sie sie darstellen, hängt von Ihrem Anwendungsfall ab. Sie können die Kopfzeile, die Navigation und die Fußzeile berücksichtigen. Die Designelemente im Hauptteil sind frei wählbar. Sie müssen nicht alles auf eine bestimmte Art und Weise darstellen. Es gibt nur die Regeln, die Sie aufstellen.
Die Leute brauchen einen Schlüssel, um diese Regeln zu verstehen, z. B. ob X-Boxen Bilder oder Text sind oder ob eine Schaltfläche ein Kreis ist. Achten Sie darauf, dass Sie nicht gegen Ihre eigenen Regeln verstoßen, denn sonst können Ihre Teammitglieder Sie nicht mehr verstehen. Konsistenz ist ideal für eine Wireframe-Vorlage.
Erfolgreiche UX-Designer heben oft wesentliche Aspekte hervor, die Sie auf dem Wireframe haben möchten. Ein Symbol oder Logo sollte oben auf der Seite stehen, und Sie können auf Ihrer Liste “Symbol – oben” vermerken. Bilder können an beliebiger Stelle platziert und mit einem Hyperlink versehen werden, daher ist es sinnvoll, “Bild + Hyperlink – Körper” zu vermerken.
Die Platzierung von Text ist sehr wichtig, besonders bei einer mobilen App. Ausprobieren und Experimentieren kann hier der beste Weg sein, um solide Ergebnisse zu erzielen. Der Text sollte nicht zu lang oder endlos sein und wird durch Bilder aufgelockert. Das Bild kann links, rechts oder als saubere Unterbrechung zwischen den Absätzen schweben.
Sie können verschiedene Ansichten skizzieren, indem Sie verschnörkelte Linien oder Kästchen mit der Aufschrift txt verwenden. Mit einem Wireframe-Tool können Sie Lorem-ipsum-Text als anpassungsfähigen Platzhalter erstellen oder kopieren und einfügen. Das Ausprobieren Ihrer Ansichten ist der wichtigste Teil der Erstellung eines Wireframes.
Wenn Sie Ihre UI-Elemente in Echtzeit erstellen, werden Sie möglicherweise feststellen, dass das ursprüngliche Layout nicht mehr funktioniert. Wenn Sie sich die Zeit nehmen, mehr als ein Layout zu verwenden, können Sie bessere Seiten oder Anwendungen erstellen.
Sie können Prototypen oder Mockups Ihrer Projekte mit einem Wireframe-Tool erstellen. Das Tool ermöglicht es Ihnen, es während der Erstellung des eigentlichen Designs zu ändern. Ein interaktiver Prototyp hilft dabei, Mitarbeiter, Manager und Kunden über größere Änderungen zu informieren, ohne dass Sie Ihren Code weitergeben müssen.
Wenn Sie ein Projekt oder eine Idee mit einem Drahtgitter aufbauen möchten, benötigen Sie den Schlüssel, der Ihre Formen erklärt, und eine Liste aller einzigartigen Details. Dazu kommt die Recherche und das leichte Skizzieren.
Für viele, die sich noch nicht mit Wireframes auskennen, ist es am besten, sich Beispiele anzuschauen, um zu lernen. Wenn Sie nach Wireframes googeln, finden Sie eine schwindelerregende Fülle von Vorlagen und echten Projekten. Im Folgenden finden Sie einige erfolgreiche Beispiele und Erklärungen dazu, wie sie funktionieren.
