Ein UI-Wireframe ist eine visuelle Darstellung eines Benutzeroberflächendesigns (UI), das die grundlegende Struktur und das Layout einer Web- oder mobilen Anwendung umreißt. Es ist ein Low-Fidelity-Mockup oder ein Skelett des endgültigen Designs, das die Platzierung verschiedener Designelemente wie Schaltflächen, Menüs, Formulare und Bilder auf dem Bildschirm zeigt.
UI-Wireframes sind aus mehreren Gründen wichtig:
UI-Wireframes werden am besten in den frühen Phasen des Designprozesses verwendet. Designer beginnen in der Regel damit, mehrere Low-Fidelity-Wireframes zu erstellen, um verschiedene Layoutoptionen zu erkunden und das Design basierend auf dem Feedback von Stakeholdern zu iterieren. Sobald ein endgültiges Design ausgewählt ist, werden Wireframes oder Mockups mit höherer Genauigkeit erstellt, um mehr Details und ein besseres Gefühl für das Endprodukt zu vermitteln. Diese Wireframes werden dann während der Implementierungsphase vom Entwicklungsteam als Referenz verwendet.
Ein UI-Drahtgitter umfasst normalerweise die folgenden Elemente:
Beim Entwerfen des Layouts einer neuen Seite oder beim Umgestalten einer bestehenden Seite ist es wichtig, sich an das Rastersystem zu halten. Unterteilen Sie Ihr Wireframe in ein Raster und stellen Sie sicher, dass Ihre Bilder, Texte und Handlungsaufforderungen alle gut in das Raster passen. Das bedeutet nicht, dass alle Assets die gleiche Größe haben, sondern dass sie proportional zueinander bleiben.
Sehen Sie sich alle Abstände an, die Sie zwischen Textabschnitten oder Schaltflächen haben. Jetzt verdoppeln. Es ist immer besser, mehr Platz zwischen Absätzen oder Bildern zu haben, als sie zusammengepfercht aussehen zu lassen. Benutzer werden nicht durch viel Leerzeichen (im Rahmen des Zumutbaren) abgeschreckt, sondern fühlen sich schnell überwältigt und verwirrt von übereinander gestapelten Bildern.
Testen Sie Ihre Seite mit echten Benutzern. Denken Sie daran, dass Ihr Design-, Technik- und Produktentwicklungsteam Sie nur so weit bringen kann. Sie müssen auf echtes Benutzerfeedback hören und ihre Aktionen überwachen, die mit Ihrem neuen UI-Schema durchgeführt werden. Ist es für Benutzer schwierig, eine bestimmte Schaltfläche zu finden? Mach es größer. Ist ein Bild zu groß für Laptop-Benutzer? Machen Sie Ihre Seite reaktionsschneller. Testen Sie Ihre Seite und iterieren Sie entsprechend.
Ja, jeder kann ein UI-Drahtmodell erstellen. Es ist jedoch wichtig zu bedenken, dass Wireframes ein kritischer Teil des Designprozesses sind und ein grundlegendes Verständnis der Designprinzipien und Best Practices für Benutzeroberflächen erfordern.
Nein, UI-Wireframes sind in der Regel Low-Fidelity und enthalten keine endgültigen visuellen Designelemente wie detaillierte Typografie, Farbschemata oder Branding-Elemente. Sie können jedoch grundlegende visuelle Hinweise enthalten, um einen allgemeinen Eindruck von der endgültigen Designrichtung zu vermitteln.
Die Anzahl der Iterationen von UI-Wireframes hängt von der Komplexität des Projekts und dem erforderlichen Detaillierungsgrad ab. In der Regel erstellen Designer mehrere Low-Fidelity-Drahtmodelle, bevor sie sich auf ein endgültiges Design festlegen, und erstellen dann High-Fidelity-Drahtmodelle oder Mockups, um mehr Details bereitzustellen. Es ist nicht ungewöhnlich, dass Designer das Design auch während des gesamten Entwicklungsprozesses iterieren.
