Ein umfassender Leitfaden für Wireframing in der Produktentwicklung
Veröffentlicht: 2018-04-13Ein Webentwicklungsprojekt hat viel mit dem Bau eines Hauses gemeinsam. Wenn Sie ein Haus bauen, wählen Sie natürlich die beste Person aus, die diese Arbeit erledigen kann. Sie möchten jemanden mit Erfahrung und profundem Wissen und Sie möchten sicherstellen, dass der Bauunternehmer über den richtigen Prozess verfügt, um die Arbeit innerhalb der vorgeschriebenen Zeit und innerhalb eines sanktionierten Budgets zu erledigen. Was macht Sie davon überzeugt? Eine Blaupause, oder? Nun, im Bereich der Webentwicklung ist es Wireframing.
Inhaltsverzeichnis
Was ist Wireframing?
In einfachen Worten ist Wireframing eine Illustration einer Webseite. Ein Wireframe ist ein Layout einer Webseite, das artikuliert, welche Art von Schnittstellenelementen auf wichtigen Seiten Platz finden. Es ist ein wichtiger Teil des Interaktionsdesignprozesses.
Das Hauptziel von Wireframing ist es, ein visuelles Verständnis einer Seite in der frühesten Phase eines Projekts zu bieten, um die Zustimmung aller Beteiligten und Mitglieder eines Projektteams zu erhalten. Wireframes werden auch verwendet, um die globale und sekundäre Navigation zu erstellen, um sicherzustellen, dass die in die Website integrierte Terminologie und Struktur den Erwartungen der Benutzer entspricht.
Der Unterschied zwischen Wireframes, Mockups und Prototypen?
Drahtmodell
Ein Wireframe ist wie ein Skelett oder eine Grundstruktur einer Website. Beim Wireframing geht es mehr um Funktionalität. Beispielsweise stellt ein Wireframe einer Website oder App die Navigation, die Hauptschaltflächen, die Spalten usw. dar. Es kann mit einem Entwurf eines architektonischen Entwurfs gleichgesetzt werden.
Attrappe, Lehrmodell, Simulation
Mockups hingegen sind realistischere Darstellungen von Produkten. Im Gegensatz zu einem Wireframe-Mockup konzentriert man sich auf Details. Alle Aspekte wie Farben, Schriftarten, Symbole, Diagramme, Bilder werden beachtet.
Prototyp
Prototypen bieten eine hochauflösende visuelle Darstellung Ihres Projekts. Sie können sich einen Prototyp als wertvolle Ergänzung zu einem Mockup vorstellen. Prototyp, wie der Name schon sagt, zeigt genau, wie das Produkt aussehen wird. Beim Prototyping geht es darum, Ihr Wireframe miteinander zu verbinden, Schaltflächen mit den jeweiligen Zielseiten zu verbinden, Dropdown-Menüs zu überlagern usw.
Um es weiter zu vereinfachen, sind dies alle Phasen des Prozesses beim Produktdesign, beginnend mit dem Skizzieren (eine einfachste primäre Phase des Designens – Handzeichnung) und endend mit der Erstellung eines Prototyps.
Wireframing für eine mobile App
Wireframing für eine mobile App bietet ähnliche Vorteile wie für eine Website. Es gibt eine klare Vorstellung davon, wie eine App aussehen und funktionieren wird. Niemand kauft gerne eine vage Idee. Wireframing bietet eine große Erleichterung beim Projektübergang. Es reduziert auch die Gesamtkosten der Produktentwicklung, da Änderungen in einem frühen Stadium vorgenommen werden können.
Eine wichtige Sache, die Sie beim Wireframing für eine mobile App beachten sollten, ist die Plattform (iOS oder Android), auf der Sie Ihr Produkt einführen werden. 
Wichtige Dinge, die Sie beim Wireframing beachten sollten
Beim Erstellen von Wireframes ist es wichtig, daran zu denken, dass es sich nur um Leitfäden dafür handelt, wo die wichtigsten Inhalte und Navigationselemente Ihrer Website auf der Seite erscheinen werden. Da das Ziel der Illustration nicht darin besteht, visuelle Gestaltung darzustellen, ist es immer vorzuziehen, es einfach zu halten. Es spart Zeit und Mühe. Hier sind einige Tipps, die sich beim Wireframing als nützlich erweisen werden:
- Beginnen Sie mit einfachen Wireframes mit geringer Wiedergabetreue.
- Vermeiden Sie die Verwendung von Farben. Vielleicht möchten Sie sich an Graustufen halten, um Unterschiede darzustellen.
- Keine Notwendigkeit, Bilder zu verwenden. Verwenden Sie einfach eine geometrische Form anstelle von Bildern, um eine allgemeine Vorstellung zu vermitteln.
- Verwenden Sie eine generische Schriftart und behalten Sie sie beim Wireframing durchgehend bei. Typografie ist kein wesentlicher Teil des Prozesses.
- Es ist nicht erforderlich, jede einzelne Seite mit einem Wireframe zu versehen.
Wireframing ist ein Verfahren, Probleme zu durchdenken und Schnittstellen zu spezifizieren. Denken Sie daran, dass Wireframing wie andere Formen eines Entwicklungsprozesses seine Gefahren bergen kann, wenn es nicht richtig durchgeführt wird.
Wesentliche Elemente am Beispiel von Wireframes
Die Elemente des Wireframing hängen weitgehend von der Art der Website ab, die Sie erstellen möchten, sowie von den Kundenanforderungen. Es gibt jedoch bestimmte Elemente, die oft als standardmäßige Wireframing-Elemente integriert werden, wie z. B. Kopfzeile, Fußzeile, Logo, Suchfeld, Navigationssysteme, Textkörper, Share-Buttons, Breadcrumbs.
Arten von Wireframes
Wireframes können sich von ihren Produktionsprozessen (Papierskizzen vs. computergezeichnete Bilder) in der Menge an Details unterscheiden, die sie enthalten. Die beiden Begriffe, die häufig zur Bezeichnung der Wireframing-Produktion verwendet werden, sind – Low- und High-Fidelity-Drahtgitter.
- Low-Fidelity-Drahtmodelle – Sie sind einfach und schnell zu entwickeln. Sie helfen, die Teamkommunikation zu erleichtern. Oft enthalten Low-Fidelity-Drahtgitter einfache Bilder, lorem ipsum Text als Füller.
- High-Fidelity-Drahtmodelle – Sie eignen sich aufgrund ihres höheren Detaillierungsgrades besser für die Dokumentation. Diese Wireframes enthalten Informationen zu jedem kleinen Element auf der Seite.
Warum erstellen wir Wireframes?
Hier sind einige wesentliche Vorteile von Wireframing:
- Wireframing spielt eine zentrale Rolle in der Kommunikation während der Web- oder App-Entwicklung. Es bietet allen Beteiligten eine Gelegenheit; Kunden, Entwickler, Designer, um die Struktur der Website zu visualisieren und sich ein klares Bild davon zu machen.
- Es ist einfacher, Ihre Ideen mit Wireframes zu kommunizieren und zu vermitteln.
- Wireframes verleihen den Projekten Klarheit und ermöglichen es Ihnen auch, alle Interaktionen und Layoutanforderungen durchzuarbeiten.
- Wireframing macht die Entwicklung von Inhalten designfreundlich.
- Wireframes regen den Kunden an, über seine Anforderungen nachzudenken, und helfen ihm, seine Projektziele und seinen primären Fokus zu definieren.
- Es hilft, frühzeitig Feedback zu Ihrem Produkt einzuholen.
- Wireframes ermöglichen es Designern, Layouts für viele Bereiche der Website zu erstellen, was zu einem flüssigeren kreativen Prozess führt.
Wichtige Schritte im Wireframing-Prozess
Einige wichtige Schritte, die beim Wireframing zu befolgen sind, sind:
- Recherche – Eine kleine Vorstellung davon, wie andere Designer Wireframing verwenden, wird Ihnen sehr dabei helfen, Inspiration zu finden.
- Wählen Sie Ihr Tool – Es stehen mehrere Tools zum Erstellen von Wireframes zur Verfügung. Sie können eine nach Ihrer Bequemlichkeit auswählen.
- Richten Sie ein Raster ein – Es stehen mehrere Rastervorlagen zum kostenlosen Download zur Verfügung, Sie können sogar Ihre eigene Rastervorlage mit Hilfe von Telerik, UI-Grid usw. anpassen.
- Bestimmen Sie ein Layout – Legen Sie Boxen fest, fügen Sie Inhalt hinzu, falls verfügbar, beziehen Sie Ihren Kunden in dieser Phase mit ein, um eventuelle Abweichungen mitzuteilen.
- Konvertieren Sie es in einen Prototyp.
Einige beliebte Tools zum Erstellen von Wireframes
Egal, welche Art von Wireframing Sie anstreben, Low Fidelity oder High Fidelity, die Verwendung von Wireframing-Tools hilft Ihnen dabei, professioneller zu werden und priorisierter und organisierter zu arbeiten. Hier ist die Liste von sieben Wireframing-Tools, die Sie effektiv verwenden können:
- Balsamico
- Scheinfluss
- InVison
- Wireframe.cc
- HotGloo
- Pidoco
- Axur
Wireframing ist eine der wesentlichen Fähigkeiten, die man sich als Produktentwickler aneignen muss. Um ein erfolgreicher Produktmanager zu werden, müssen Sie über einen ganzheitlichen Ansatz in Bezug auf Wireframing und andere Produktentwicklungsfähigkeiten verfügen, die die Grundlage für das Verständnis der Grundlagen des Produktdesigns bilden. Dies wird sicherlich Ihr Tor zu einer erfolgreichen Karriere in der Produktentwicklung sein.
Studieren Sie Produktmanagement-Kurse online von den besten Universitäten der Welt. Erwerben Sie Master-, Executive PGP- oder Advanced Certificate-Programme, um Ihre Karriere zu beschleunigen.
