User Experience (UX) ist der Weg, um die Lücke zu schließen und sicherzustellen, dass Ihr Design konvertiert. Vermarkter ziehen es häufig vor, Websites ausschließlich in Bezug auf Design oder Conversions zu betrachten. Mit einem Wireframe können Sie das Seitenlayout und die Benutzerströme testen, um genau zu sehen, wie die neue Website funktionieren wird, und um potenzielle Fehler zu identifizieren, die letztendlich Conversions verhindern können. In diesem Beitrag betrachten wir das Beispiel eines Website-Drahtmodells mit einem Design und einem Erstellungstool, mit dem Sie arbeiten können.
Website-Drahtmodell
Die primären Funktionen und die Navigation eines neuen Website-Designs werden mithilfe eines Website-Drahtmodells abgebildet. Bevor über visuelle Designkomponenten wie Inhalt und Farbschemata nachgedacht wird, vermittelt es ein Verständnis für die Funktionalität der Website. Das Team kann ein Website-Drahtmodell als praktische Projektlandkarte verwenden, um zu sehen, wohin alles führen wird, wenn es verwandte Aufgaben erledigt.
Dieser Schritt des Prozesses könnte versucht sein, von einigen Designern oder Kunden übersprungen zu werden, da sie denken, dass er zeitaufwändig und unnötig ist. Beim Wireframing geht es jedoch um Selbstvorbereitung, und die richtige Vorbereitung braucht Zeit. Das Arbeiten ohne Strategie dauert jedoch in der Regel länger und erhöht die Wahrscheinlichkeit, dass ein Projekt vollständig scheitert.
Warum ein Wireframe für eine Website erstellen?
Ein Website-Drahtmodell kann aus einer Reihe von Gründen erstellt werden, aber der wichtigste ist, dass es Ihnen ermöglicht, jede Gelegenheit zu finden und zu nutzen, um die Funktionalität, Benutzerfreundlichkeit und Bequemlichkeit Ihrer Website zu verbessern, um Ihre Kunden zufrieden zu stellen. Es kann auch eine verbesserte Kommunikation zwischen den Mitgliedern Ihres Designteams erleichtern und das frühzeitige Sammeln von Kundenfeedback ermöglichen.
So erstellen Sie ein einfaches Website-Drahtmodell
#1. Bestimmen Sie das Ziel der Website.
Sie werden es hilfreich finden, den Zweck Ihrer Website zu kennen, bevor Sie sich an die Arbeit machen, um ein Wireframe zu entwerfen. Auch wenn es offensichtlich erscheinen mag, dass Sie den Datenverkehr so weit steigern möchten, wie es Ihr Server bewältigen kann, überlegen Sie, was all diese Besucher erreichen sollen, wenn sie sich auf Ihrer Website befinden.
#2. Erkennen Sie den Benutzerfluss.
Damit jeder in Ihrem Team weiß, wie Besucher mit jeder Seite Ihrer Website interagieren sollten, unterstützen Sie Wireframes bei der Identifizierung und Bewertung von Benutzerströmen. In dieser Phase skizzieren Sie jeden möglichen Zugangspunkt, den ein Besucher verwenden könnte, um Ihre Homepage zu erreichen, bevor Sie einige wichtige Einstiegspunkte auswählen, um einen Reisefluss zu etablieren.
#3. Legen Sie die Größe des Wireframes Ihrer Website fest.
Abhängig von der Größe des Bildschirms, für den Sie entwerfen, müssen Ihre Wireframes unterschiedliche Größen haben. Die Größe der Bildschirme auf mobilen Geräten, Tablets und Desktop-Computern ist unterschiedlich, ganz zu schweigen davon, dass die Größe des Fensters eines Desktop-Computers geändert werden kann. Verwenden Sie Pixel anstelle von Zoll oder Punkten, um die genauesten Spezifikationen für Ihr Drahtmodell zu erhalten.
#4. Beginnen Sie mit der Gestaltung der Wireframes Ihrer Website.
Es ist an der Zeit, ein Wireframe zu erstellen, um Ihren Benutzerfluss darzustellen. Wir empfehlen die Verwendung von gepunktetem Papier oder Rasterpapier, um die Ausrichtung beizubehalten, wenn Sie mit einem Stift auf Papier schreiben. Dadurch wird es für Sie einfacher, die physische Version Ihres Wireframes in eine digitale umzuwandeln.
#5. Berechnen Sie die Conversion Points.
Nachdem Sie Ihre Wireframes skizziert haben, müssen Sie genau definieren, wie der Benutzer in den einzelnen Phasen vorgehen soll. Der Benutzer findet die Prozesse möglicherweise nicht leicht zu befolgen, nur weil Sie die Schritte für ihn festgelegt haben.
#6. Verzichten Sie auf unnötige Schritte.
Iteratives Wireframing ist ein Verfahren. Produktionsreife Wireframes lassen sich selten in einer einzigen Skizzierrunde erstellen. Sie haben vielleicht bemerkt, dass einige Webseiten unnötig sind und konsolidiert werden können, damit der Benutzer weniger Links anklicken muss.
#7. Holen Sie sich Input bezüglich des Wireframes.
Bevor Ihre Website live geht, wird sie mehrere Test- und Anpassungsrunden durchlaufen, aber es ist trotzdem eine gute Idee, frühzeitig Input zu Ihren Wireframes zu erhalten. Holen Sie sich Input zum Flow selbst, indem Sie mit Ihren Design- und Entwicklungsteams, internen Mitarbeitern und Kunden zusammenarbeiten.
Beispiel für Website-Drahtmodell
Die besten Wireframe-Beispiele für Websites finden Sie unten, um Ihre Vorstellungskraft anzuregen und Ihnen dabei zu helfen, die für Sie geeignete Wireframe-Methode zu finden. Das Beispiel eines Website-Drahtmodells umfasst:
#1. Skizze Website Wireframe
Einige Programmierer beginnen ihre Skizzen auf Papier oder einem Whiteboard. Bevor Sie sich tatsächlich Gedanken über grafische Funktionen machen, demonstriert diese einfache, handgezeichnete Methode eine grundlegende Idee.
#2. Detailliertes handgezeichnetes Drahtmodell
Von Hand gezeichnete Wireframes müssen nicht unbedingt einfach sein. Für eine präzisere Gestaltung können Sie neben Bleistift und Papier auch ein Lineal verwenden.
#3. Low-Fidelity-Drahtmodell
Ihr erstes Konzeptdesign wird mithilfe von Low-Fidelity-Wireframes verbessert, die digital erstellt werden und Dinge in einfachen Inhaltsblöcken anzeigen. Bei der Entscheidung, welche grafischen Elemente entwickelt und welche Texte geschrieben werden sollen, sind Low-Fidelity-Wireframes von entscheidender Bedeutung.
#4. Mobiles Wireframe mit niedriger Wiedergabetreue
Denken Sie daran, dass Wireframes auch für Ihre mobilen Apps und responsiven Websites erstellt werden. Da mobile Benutzer häufiger als je zuvor auf Websites zugreifen, erstellen viele Designer sogar zuerst die mobile Version.
#5. High-Fidelity-Drahtmodell
Sie können mit digitalen Werkzeugen ein High-Fidelity-Drahtmodell erstellen, das detaillierter illustriert, ohne eine übermäßige Menge an grafischen Elementen zu erzeugen. Das Ergebnis ist ein ansprechenderes Erscheinungsbild, ohne dass zeitaufwändige Designarbeiten erforderlich sind, die während des Überprüfungsprozesses möglicherweise ignoriert werden.
Website-Wireframe-Design
Ein Webdesign-Projekt beginnt mit der Erstellung von Wireframes. Nachdem Sie etwas recherchiert, Inspiration gefunden und sich mit dem Kunden auf ein Geschäftsziel geeinigt haben, verwandeln Sie dieses Wissen in ein Wireframe.
Beispiele für das Wireframe-Design von Websites
Lassen Sie uns nun zu einigen visuellen Beispielen übergehen, da Sie nun wissen, was ein Wireframe ist und warum es so wichtig ist. Sie haben vielleicht bemerkt, dass es mehrere Wireframe-Typen gibt. Ist einer dem anderen überlegen? Nicht immer; es hängt alles davon ab, in welcher Phase sich Ihr Designprojekt befindet. Mit Skizzen anzufangen und von dort weiterzumachen ist völlig in Ordnung.
#1. Drahtmodell-Skizzen
Egal, wie erfahren Sie als Designer sind, manchmal ist es einfach einfacher, zu Stift und Papier zu greifen und mit dem Skizzieren zu beginnen, um diese ersten Ideen schnell umzusetzen. Sie können sie so schlampig oder so ordentlich und präzise machen, wie Sie möchten.
#2. Beispiele für Low-Fidelity-Wireframes
Um die Informationen und Designelemente in diesem Drahtgitterbeispiel auf die 12 Spalten aufzuteilen, konstruierte der Designer ein Raster. Es spart Ihnen später Zeit, wenn Sie die Rasterstruktur festlegen, bevor Sie mit dem Entwerfen beginnen. Hier ist ein einfaches Low-Fidelity-Drahtmodell, das die Position des Logos, des Heldenbilds und der unterstützenden Bilder mit hauptsächlich Linien und umrandeten Kästchen zeigt. Der Haupttext wird in einem Feld mit hellgrauer Tönung angezeigt.
#3. High-Fidelity-Wireframe-Beispiele
Der Detaillierungsgrad in High-Fidelity-Mockups nimmt zu, je näher Sie dem Mockup des endgültigen Designs kommen. An diesem Punkt können die Kopfzeilen und Unterkopien echten Inhalt enthalten, obwohl die Hauptkopie immer noch ein Platzhalter sein kann.
Sehen Sie sich dieses High-Fidelity-Drahtgittermodell einer mobilen Benutzerreise an, um die Einzelheiten zu sehen. Es ist eine großartige Zeit, um in Bezug auf Inhalt und Organisation vor dem Designen zu sein. Diagramme und Karten werden in diesem High-Fidelity-Wireframe-Beispiel verwendet, um wichtige Zeitachseninformationen zu vermitteln.
Website-Wireframe-Tool
Wir haben unsere Top-Auswahl für die effektivsten verfügbaren Wireframing-Geräte zusammengestellt.
#1. Adobe XD Website Wireframe-Tool
Seit seiner ersten Veröffentlichung im Jahr 2016 ist Adobe XD unglaublich beliebt geworden, und das aus gutem Grund. Dieses Tool eignet sich hervorragend für Zusammenarbeit, Prototyping und Wireframing. Es ist ein Werkzeug, das Sie sich ansehen sollten, wenn Sie mit anderen zusammenarbeiten. Mit Optionen zur Entwicklung von Interaktionen bietet Adobe XD Funktionen für alles, von einer schnellen Skizze bis hin zu einem High-Fidelity-Drahtmodell, mit dem Sie den Benutzerfluss nachahmen können! Wenn es um das Layering von 3D-Bildern geht, hat die automatische Animationsfunktion des Tools die Dinge einfacher gemacht.
#2. Miro Website Wireframe-Tool
Besonders für Brainstorming-Sitzungen, interaktive Präsentationen, Design-Thinking-Workshops und ähnliche Aktivitäten ist Miro ein äußerst nützliches und beliebtes Tool. Die Anwendungen enden jedoch nicht dort! Es verfügt über Wireframing-Funktionen und ist ein unglaublich flexibles Tool! Teams können die Funktionen Video-Chat, Hintergrundmusik und „Beschwörung“ nutzen. Und selbst das ist erst der Anfang.
#3. Mockplus Website-Wireframe-Tool
Mockplus ist ein schnelles Wireframing- und Prototyping-Tool, mit dem Designer schnell interaktive Wireframes für Websites und mobile Apps erstellen können. Dieses Tool ermöglicht es Designern, frühe Designkonzepte auf Desktops und Mobilgeräten zu teilen und zu testen. Mockplus geht weit darüber hinaus, Ihnen nur die Tools zur Entwicklung Ihres Wireframes zur Verfügung zu stellen, und hilft Ihnen bei Ihren Designs mit einer Vielzahl vorinstallierter Komponenten, Symbole, Benutzeroberflächen und Vorlagen. Es ist auch einfach, Wireframes zu erstellen, die realistischer sind, wenn ein vollständiger Satz von Interaktionen und Animationen vorhanden ist. Außerdem ist es eine kollaborative Anwendung, die es Ihrem gesamten Team ermöglicht, an demselben Projekt zu arbeiten.
#4. Wireframe.CC Website Wireframe-Tool
Ein unkompliziertes, einfaches und einfach zu verwendendes Tool zum Wireframing mobiler Websites und Apps. Dieses webbasierte Wireframe-Tool ist recht einfach zu verwenden, da das Layout dem Erstellen von Objekten auf Papier, dem Ausschneiden und dem Einfügen in Ihr Design ähnelt. Dank Wireframe.cc war es unglaublich einfach, Ihre Maus in ein vielseitiges Werkzeug zu verwandeln. Skizzieren Sie einfach Ihr gewünschtes Formular auf einer leeren Leinwand und wählen Sie es aus den 9 Alternativen aus, die in der angezeigten Symbolleiste angezeigt werden. Die von Wireframe.cc angebotenen Designvorlagen sind unkompliziert, mit Optionen für die mobile Landschaft, die mobile Vertikale und die Webseite.
#5. Figma Website Wireframe-Tool
Eine Cloud-basierte Designplattform, die sich perfekt für die gemeinsame Nutzung und Zusammenarbeit im Team eignet. Während viele Designer Figma nur wegen seiner fantastischen Prototyping- und Grafikdesignfunktionen verwenden, würden es nicht viele Designer mit Wireframing gleichsetzen. Dieses Designtool bietet Ihnen jedoch die Flexibilität, so ziemlich jedes gewünschte Design zu erstellen, einschließlich Low- bis High-Fidelity-Drahtmodellen. Die designzentrierte Methodik von Figma macht es zu einem hervorragenden Werkzeug für schnelle Wireframe-Konzepte, indem Prozesse vereinfacht werden, die normalerweise schwierig sind.
Erstellen eines Website-Wireframes
Es kann viel Aufwand erfordern, ein Wireframe zu erstellen, insbesondere wenn die Testphase nicht erfolgreich ist. Wenn Sie jedoch die Zeit im Voraus aufwenden, um UX-Fehler zu beheben, erhöht sich die Erfolgswahrscheinlichkeit Ihrer Website auf lange Sicht. Sie können beginnen, indem Sie die unten angegebenen Schritte zum Erstellen des Website-Drahtmodells befolgen.
#1. Bauen Sie die Wireframe-Tools zusammen
Wireframes können manuell bzw. digital erstellt werden. Alles, was Sie brauchen, um loszulegen, wenn Sie sich für die erste Option entscheiden, ist ein Stift und ein Blatt Papier. Für Brainstorming-Zwecke beginnen einige Designer mit einem „Low-Fidelity“-Papier-Drahtmodell und erstellen anschließend eine „High-Fidelity“-Digitalversion. Es verfügt über eine benutzerfreundliche, gruppenbasierte Wireframing-Schnittstelle, die sich hervorragend für Teams und Geschäftsleute eignet, die Echtzeitkommunikation benötigen. Es ist jedoch nur für statisches Wireframing geeignet.
#2. Studieren Sie Ihre Zielbenutzer und UX-Designs.
Es ist von Vorteil, einige Nachforschungen anzustellen, bevor Sie mit dem Entwurf Ihres Wireframes beginnen. Sie sollten damit beginnen, Ihren Zielmarkt zu identifizieren. Dies kann Ihnen bei der Entscheidung helfen, welche Aspekte Ihrer Website am meisten hervorgehoben werden sollten, damit Besucher finden, was sie brauchen. Es ist auch eine gute Idee, über UX-Designtrends und Best Practices zu recherchieren. Dies kann Ihnen Informationen über Dinge wie Menülayouts geben, wo Ihr Logo und andere wichtige Markenkomponenten platziert werden sollten, und Inhaltslayouts. Bei diesen Eigenschaften bevorzugen Nutzer Websites, die sich an Konventionen halten.
#3. Wählen Sie Ihre idealen Benutzerabläufe aus.
Der Weg, den ein Besucher nimmt, um eine bestimmte Aufgabe auf Ihrer Website zu erledigen, wird als „Benutzerfluss“ bezeichnet. Zur Veranschaulichung kann ein Benutzerfluss auf einer E-Commerce-Website von einer Produktseite bis zum Abschluss des Bestellvorgangs reichen. Sie können den einfachsten Benutzerfluss für jedes potenzielle Ziel erstellen, indem Sie die wichtigsten Aktionen herausfinden, die Benutzer auf Ihrer Website ausführen müssen. Indem Sie Ihre Website benutzerfreundlich und ansprechend gestalten, verbessern Sie die UX.
#4. Erstellen Sie jetzt Ihr erstes Wireframe.
Nachdem Sie Ihre Ressourcen und wichtigen Daten gesammelt haben, können Sie mit dem Entwurf Ihres Wireframes beginnen. Denken Sie daran, dass das Ziel dieser Übung nicht darin besteht, ein fertiges Website-Design zu erstellen. Sie denken nur über UX nach oder wie Sie eine Seite entwerfen, die einfach zu verwenden und zu verstehen ist. Zu diesem Zweck sollten die Funktionen und Formate in Ihrem Wireframe relevant dafür sein, wie Besucher mit Ihrer Website interagieren und diese nutzen.
#5. Usability-Tests sind eine gute Möglichkeit, Ihr Design zu testen.
Nach Fertigstellung Ihres ersten Wireframes müssen Tests durchgeführt werden. Auf diese Weise können Sie beurteilen, ob es gelungen ist, die UX und Benutzerströme zu skizzieren, die für Ihre Website am einfachsten und natürlichsten sind. Es gibt zahlreiche Ansätze, um ein Website-Drahtmodell zu erstellen.
#6. Ihr Wireframe kann ein Prototyp werden
Es ist an der Zeit, Ihr Wireframe in einen Prototypen umzuwandeln, nachdem Sie es getestet und das optimale UX-Design für Ihre Website ermittelt haben. Prototypen enthalten im Gegensatz zu statischen Wireframes einige grundlegende Funktionen, mit denen Sie Benutzerabläufe genauer testen können.
Ist Wireframing Teil von UX oder UI?
UX-Designer verwenden die Wireframing-Technik, um das Big-Data-Management ihres Designs für eine Webseite, App oder ein Produkt zu spezifizieren und zu organisieren.
Was sollte in einem Website-Drahtmodell enthalten sein?
- Demnächst.
- Suchbox.
- Brotkrümel.
- Überschriften.
- Navigation
- Körperinhalt.
- Links zum Teilen.
Wie sieht ein Website-Wireframe aus?
Einfache Schwarz-Weiß-Layouts, sogenannte „Wireframes“, geben die genauen Abmessungen und Positionen der Seitenelemente, Funktionen, Konversionszonen und der Navigation Ihrer Website an. Ihnen fehlen jegliche Farbe, Schriftauswahl, Logos oder andere Designmerkmale, die von der Struktur einer Website ablenken würden.
Was sind die 2 Arten von Wireframes?
- Low-Fidelity-Drahtgitter.
- Mid-Fidelity-Drahtgitter.
- High-Fidelity-Drahtgitter.
Ähnliche Artikel
- WAS IST EIN WIREFRAME: Webdesign, Mockup, UX und Unterschiede
- OKR-SOFTWAREVERGLEICH: Vergleichen Sie die 10 besten OKR-Softwares im Jahr 2023
- Operativer Cashflow: Verwendung und seine Anwendungen
- FREELANCE GRAPHIC DESIGNER: Definition, Gehalt, Lebenslauf & Arbeit
Bibliographie
