Bei der Entwicklung eines Webprodukts sind Wireframes eine Möglichkeit, die Arbeit zu verbessern, Fehler zu vermeiden und Zeit zu sparen. Viele Webdesigner verwenden Wireframing in jedem einzelnen Projekt, um das Produkt zu entwerfen und zu verstehen, wie es entwickelt werden soll. Dieser Blogbeitrag erläutert die Bedeutung des Wireframings, das noch vor der eigentlichen Arbeit am Produkt stattfindet.
Was ist ein Wireframe?
„Wireframe“, wörtlich „Drahtgitter“, ist eine Skizze eines Bildschirms oder einer Vorlage. So wie man zunächst ein Bild skizziert und es nach und nach zum Leben erweckt, geschieht dies bei Websites. Anwender schaffen damit zunächst die Rahmenbedingungen. Wenn diese festgelegt sind, können sie sich auf die Entwicklung konzentrieren.
Die Gestaltung einer effektiven Website erfordert viele Elemente. Dazu gehören die Entwicklung des Layouts, die Berücksichtigung der Benutzerfreundlichkeit (UX) und das Verfassen von Inhalten sowie die Einbeziehung bewährter Verfahren zur Suchmaschinenoptimierung (SEO). Und alles beginnt mit einem Brainstorming, bei dem alle beteiligten Kreativen gemeinsam mit dem Kunden herausfinden, was er braucht und was er auf der Website haben möchte. Wireframes sind ein visueller Leitfaden für die wichtigsten zu gestaltenden Webseiten. Ihr Zweck ist es, als Blaupause für alle am Projekt Beteiligten zu dienen. Auf diese Weise wissen alle Beteiligten genau, wo jede Komponente hingehört, wie Navigationsleisten, Überschriften, Zwischenüberschriften, Inhalt, Bilder, Videos, Schaltflächen für Handlungsaufforderungen, Grafiken usw. Anwender müssen noch keine Farben, Bilder oder spezifischen Texte hinzufügen. Stattdessen fügen sie Platzhalter ein, die zeigen, wo sich alles befinden wird, sobald die Website fertig ist. Dazu gehören Quadrate oder Rechtecke für Bilder, lorem-ipsum-Text für den Inhalt und die Schriftgrößen H1, H2 und H3 für Überschriften und Zwischenüberschriften.
Arten von Wireframes
Es gibt zahlreiche Möglichkeiten, Wireframes zu erstellen. Anwender können auch mit einem Bleistift auf einem Notizbuch skizzieren. Wer jedoch digitale Wireframe Tools verwendet, dem stehen unterschiedliche Arten von Wireframes zur Verfügung. Low-Fidelity-Wireframes zeigen einfache Bilder. High-Fidelity-Wireframes hingegen vermitteln ein realistischeres Bild davon, wie die Website aussehen wird. Sie enthalten tatsächliche Website-Inhalte und Funktionen, wie anklickbare CTA-Schaltflächen, die den Leser zu der Seite führen, zu der die CTA-Schaltfläche führen soll. Sie können auch Logos, Typografie, Bildgrößen usw. enthalten.
Die Bedeutung von Wireframing
Welche Rolle spielen Wireframes bei der Benutzerführung und Interaktion? Kurz gesagt handelt es sich um einen Prozess, bei dem eine Blaupause, ein Plan des Produkts erstellt wird. Viele denken bei Wireframes an Zeichnungen, die darstellen, wie die verschiedenen Funktionen auf den Bildschirmen der Geräte angeordnet sind. Wireframing kann jedoch viel mehr sein und Folgendes beinhalten:
- Design: Das Design umfasst Skizzen und Zeichnungen, die notwendig sind, um sich vorzustellen, wie das Produkt funktionieren und aussehen wird.
- Benutzergeschichten: Benutzergeschichten beschreiben mögliche Benutzerabsichten, die mit dem Endprodukt realisiert werden sollen.
- Umfangsdefinition: Die Umfangsdefinition ist in der Regel eine Liste von Funktionen, die im Produkt implementiert werden müssen, sowie alle dazugehörigen Details wie Prioritäten, Anforderungen, Fristen usw.
- Prototyp: Ein Prototyp ist eine vereinfachte, aber funktionierende Darstellung des Produkts, die für Benutzertests bereit ist. Dabei kann es sich um eine Reihe interaktiver Skizzen handeln, die das Benutzererlebnis verdeutlichen, oder um eine Anwendung, die die Navigation zwischen den Bildschirmen ermöglicht.
Wireframes umfassen alles, um zu verstehen, wie das Endprodukt aussehen und funktionieren soll, bevor Anwender mit der Arbeit daran beginnen.
Welche Vorteile bringt Wireframing?
1. Zeitersparnis
Da alle notwendigen visuellen Dokumentationen, Funktionen und Spezifikationen bereits definiert sind, ersparen sich Anwender eine Menge Arbeit, wenn es an die Erstellung des eigentlichen Produkts geht. Wenn sie richtig dokumentiert sind, sparen Wireframes auch Zeit für Kommunikation, die erforderlich ist, um vorherige Vereinbarungen und Entscheidungen zu klären. Anhand einer genauen Liste der zu erledigenden Aufgaben kann jedes Teammitglied einschätzen, wie viel Zeit es für eine bestimmte Aufgabe benötigt, was ebenfalls eine gute Möglichkeit zur Optimierung des Teamzeitplans darstellt.
Die Lean-Startup-Methode und die agile Entwicklung gehen davon aus, dass an einem Produkt auf interaktive Weise gearbeitet wird. Anwender müssen ständig Hypothesen aufstellen und sie überprüfen, um flexibel zu sein. Das Erstellen von Wireframes berücksichtigt diesen Ansatz und definiert die Art und Weise, wie diese Iterationen durchgeführt werden. Dazu gehört, wie viel Zeit sie in Anspruch nehmen, wie Hypothesen aufgestellt werden, wie sie überprüft werden, wie der Entwicklungsprozess angepasst wird usw. Die Vorbereitung auf jegliche Art von Änderungen, die im Laufe des Projekts zu erwarten sind, spart auch eine Menge Zeit, die sonst für zusätzliche Kommunikation, Entscheidungsfindung oder Verhandlungen aufgewendet werden müsste.
2. Nützlich für alle
Da alle Mitglieder des Designteams genau wissen, wie die einzelnen Webseiten aussehen werden, bevor sie erstellt werden, können alle besser an die Arbeit gehen. Und wenn jemand Fragen oder Zweifel hat, wie das Ganze aussehen soll, kann er sie in der ersten Brainstorming-Sitzung ansprechen. Auf diese Weise können alle gemeinsam Bedenken äußern und Ideen vorschlagen und den Denkprozess hinter jeder Entscheidung genau verstehen. UX-Designer verwenden Wireframes, um die Art und Weise zu entwerfen, wie Benutzer mit einer Website interagieren werden. Grafikdesigner erstellen das endgültige visuelle Design auf der Grundlage der zuvor definierten Wireframes. Für Entwickler sind Wireframes eine Möglichkeit, sich ein Bild von der erwarteten Produktfunktionalität zu machen. Wireframes sind auch der beste Weg, um das endgültige Produkt darzustellen. Daher können Wireframes dem Product Owner gezeigt werden, damit er alle getroffenen Entscheidungen genehmigen kann, bevor das Team mit der Arbeit am Projekt beginnt.
3. Definiert das Minimum Viable Product
Das Minimum Viable Product ist eine Version des Produkts, die nur die für die Markteinführung und die Gewinnung von Nutzern erforderlichen Funktionen aufweist. Aber wie lassen sich diese Funktionen definieren? An dieser Stelle kommen Wireframes ins Spiel. Die Entscheidung, welche Funktionen am wichtigsten sind, die Überlegung, wie sich das Produkt verhalten und funktionieren soll, die Festlegung des Umfangs der ersten Iterationen – all das sind Teile des Wireframing-Prozesses.
3. Definiert das Minimum Viable Product
Das Minimum Viable Product ist eine Version des Produkts, die nur die für die Markteinführung und die Gewinnung von Nutzern erforderlichen Funktionen aufweist. Aber wie lassen sich diese Funktionen definieren? An dieser Stelle kommen Wireframes ins Spiel. Die Entscheidung, welche Funktionen am wichtigsten sind, die Überlegung, wie sich das Produkt verhalten und funktionieren soll, die Festlegung des Umfangs der ersten Iterationen – all das sind Teile des Wireframing-Prozesses.
4. Hilft Fehler zu vermeiden und spart Geld
Einer der Hauptvorteile von Wireframes ist, dass sich Anwender ein Gesamtbild des Produkts machen, noch bevor es erstellt wird. So können sie sicher sein, dass keine Features, Details und Wünsche fehlen und nur die notwendigen Funktionen implementiert werden. Wer also mit der Arbeit an einem Produkt beginnt, hat mit Wireframes bereits Hypothesen überprüft und den Umfang definiert, was sowohl Zeit als auch Geld bei der Erstellung des Produkts spart.
5. Wireframes als Leitfaden für den Designprozess
Der Prozess beginnt mit einer einfachen schriftlichen Informationsarchitektur. Einfachheit bedeutet, dass eine Informationsarchitektur schnell auf Papier geschrieben werden kann und kein Computerprogramm benötigt wird. So wird der Klickpfad des Nutzers grob geplant, ohne dass etwas visuell dargestellt werden muss. Sobald dies behoben ist, beginnen Anwender mit der Erstellung von Wireframes. Sie erstellen grobe Vorlagen basierend auf der Informationsarchitektur, bekommen einen ersten visuellen Überblick und bestimmen das Gewicht der Elemente.
Wichtig: Wireframes geben nicht vor, wie das Bildschirmdesign aussehen wird. Designer sind oft versucht, Farben, Bilder und Typografie zu verwenden. Doch das führt später zur Verwendung von Wireframe-Elementen im Screendesign. Daher ist es sehr wichtig, den Kunden darüber zu informieren, dass das Wireframe nicht das ursprüngliche Bildschirmdesign ist. Nur so können Erwartungen kommuniziert und Kunden nicht enttäuscht werden, wenn beispielsweise das fertige Screendesign nicht „denselben Icon-Stil“ zeigt.
6. Wireframes als Grundlage für Klickpfade
Visuelle Wireframes helfen, mühsame oder redundante Klickpfade zu eliminieren, indem klickbare Prototypen erstellt werden. Je nachdem, ob es sich bei dem Wireframe um einen Desktop-, Tablet- oder mobilen Bildschirm handelt, kann der Klickdummy in Echtzeit auf dem jeweiligen Gerät getestet werden. Dadurch bekommen Ersteller ein besseres Gefühl als Benutzer und können diesen „Prototyp“ sogar für den ersten Test verwenden, bevor das eigentliche Screendesign passiert. Daher eignen sich Wireframes hervorragend, um Gewichtungen zu ermitteln, ob ein allgemeines Verständnis für die Seitenstruktur vorhanden ist.
7. Guter Plan mit Raum für Optimierungen
Ist dieser „Visual Build Plan“ erst einmal erstellt, fällt schnell auf, wenn Elemente vergessen werden, die beim Erstellen der Informationsarchitektur oder beim Auflisten der benötigten Seitenelemente verloren gegangen sind. Aber dafür sind Wireframes da – sie visualisieren die ursprüngliche Theorie. Dabei lassen sie genügend Spielraum, um vergessene Elemente hinzuzufügen und Benutzerpfade zu verbessern. Dieser Visualisierungsprozess eignet sich auch als Dokumentation für Kunden, Design und Entwicklung. Wenn also der Inhalt der Homepage wesentlich länger ist, als es sich die Webentwickler vorgestellt haben, wird das Projekt entweder an den Inhalt zurückgeschickt, um ihn zu kürzen, oder das Design braucht zusätzliche Zeit, um das Layout zu überarbeiten. Mithilfe von Wireframes wird dieser Prozess effizienter.
8. Sie ermöglichen eine bessere Bewertung der Benutzerfreundlichkeit (UX)
Manche Dinge klingen in der Theorie gut, funktionieren aber in der Praxis nicht. Angenommen, der UX-Designer möchte eine bestimmte Anzahl von Elementen in die Navigationsleiste einfügen, zusammen mit Dropdown-Menüs für untergeordnete Seiten. Aber wenn alles fertig ist, stellt er fest, dass es dadurch unübersichtlich wird. Wenn alle Elemente auf dem Papier festhalten, können Anwender diese Probleme erkennen, bevor der Designprozess beginnt.
9. Wireframes rationalisieren den Designprozess
Wenn Wireframes erstellt werden, wird keine Zeit mehr mit dem Hin- und Herschieben von Änderungen verschwendet. Dieser Schritt gehört zwar immer noch zu jedem Projekt, aber wenn sich alle Beteiligten vor Beginn des Projekts über die Entwürfe einig sind, kann jedes Teammitglied effizienter arbeiten. Das bedeutet auch, dass Anwender weniger Zeit für die Arbeit an jeder einzelnen Website benötigen, was die Wahrscheinlichkeit erhöht, dass sie vor dem Abgabetermin fertig werden und Kunden zufrieden stellen.
10. Sie vereinfachen die Entwicklung von Website-Inhalten
Das Schreiben von Inhalten ist ein subjektiver Prozess. Zu den bewährten Verfahren gehören das Befolgen eines Styleguides, der Markensound und das Schreiben mit Blick auf bestimmte Käuferpersönlichkeiten. Dennoch kann der Inhalt in Länge und Format erheblich variieren. Die Entwicklung von Wireframes gibt den Autoren eine Vorstellung davon, wie die Länge begrenzt oder die bevorzugte Formatierung aussehen soll. Durch die Erstellung von Wireframes können Kunden eine ziemlich klare Vorstellung davon bekommen, wie eine Rohfassung ihrer Website aussehen wird, bevor sie erstellt wird.
Bewährte Praktiken beim Erstellen von Wireframes
Es gibt verschiedene Möglichkeiten, Wireframes zu erstellen. Es ist eine gute Praxis, bestimmte Schritte zu befolgen, um die besten Ergebnisse zu erzielen:
Brainstorming mit dem Team
Der erste Schritt ist, sich mit allen zusammenzusetzen, die an dem Webdesign arbeiten werden. Auf diese Weise können alle ihre Ideen einbringen und den anderen mitteilen, welche Überlegungen dahinter stecken. Außerdem kann jeder die Faktoren berücksichtigen, die seine spezielle Rolle im Projekt betreffen und die jemand anderes vielleicht nicht auf dem Radar hat.
Erste Ideen zeichnen
Anwender könnten zwar schon während des Brainstormings mit dem Zeichnen von Wireframes auf einem Notizbuch beginnen oder Wireframing Tools verwenden, aber es ist vielleicht einfacher, die ersten Iterationen mit Stift und Papier zu erstellen. Sobald diese fertig sind, können Anwender Fotos davon machen und sie per E-Mail an das Teammitglied schicken, das die Wireframes erstellt. Es empfiehlt sich auch, sie in die Aufgabenbeschreibungen auf den Projektmanagement-Karten aufzunehmen, damit alle Beteiligten sie leichter finden.
Farben minimieren
Beim Erstellen von Wireframes müssen Anwender nicht ins Detail gehen, wenn es um Farben und bestimmte Bilder geht. Die Entwürfe sind eine erste Darstellung dessen, wie die Website aussehen wird. Benutzer können Notizen einfügen, die die Richtung vorgeben, sie sollten sich jedoch auf die wichtigsten Designelemente konzentrieren.
Notizen zu Funktionalitäten
Sinnvoll sind Notizen darüber, wie bestimmte Bereiche der Webseite funktionieren werden. Zum Beispiel, ob es sich um ein Dropdown-Menü, ein Bildkarussell, ein Besucherquiz oder eine Art von Tool handeln wird. Dazu gehören allgemeine Details, die dem Webdesigner klare Anhaltspunkte geben, was wohin gehört.
Wireframes für Desktop und Mobile erstellen
Jede einzelne Website sollte ein responsives Design haben. Und da Websites auf einem Desktop-Computer nicht auf die gleiche Weise geladen werden wie auf einem Smartphone, sollten Anwender Wireframes erstellen, die zeigen, wie beide Displays aussehen werden. Vielleicht erscheinen die Navigationsleiste oder Karten, die auf größeren Bildschirmen nebeneinander angeordnet waren, auf mobilen Geräten übereinander. Webdesigner können diesen Schritt umgehen, wenn sie mit einer Website-Vorlage arbeiten, die bereits responsive ist.
Was Anwender beim Erstellen von Wireframes nicht tun sollten
Wireframes nicht für jede einzelne Seite
Der Sinn von Wireframes ist es, Zeit zu sparen. Wenn Webdesigner also eine Website mit verschiedenen Produkten entwerfen, erstellen sie nur ein Wireframe für eine Produkt-/Dienstleistungsseite. Sie sollten sich dann auf die wichtigsten Seiten konzentrieren, wie die Homepage, die Seite „Über uns“, die Preise, den Blog und die Kontaktseite.
Keine Zeit mit Perfektionismus vergeuden
Wireframes müssen nicht beeindruckend aussehen. Sie müssen nur zeigen, wie das Gerüst und die Hierarchie der Webseiten aussehen wird.
Nicht jedes winzige Detail einbeziehen
Anwender sollten zwar hilfreiche Hinweise auf die Bedeutung der einzelnen Elemente geben, aber sich nicht in den Details verlieren. Sinnvoll ist es, geradlinig zu bleiben und zur nächsten Seite überzugehen. Der Art-Director oder Webdesigner kann später auf alle Details eingehen.
Wireframe Tools als nützliche Werkzeuge zur Erstellung von Wireframes
Das Zeichnen von Wireframes in einem Notizbuch ist ein einfacher und unkomplizierter Prozess. Aber für diejenigen, die eine Software bevorzugen, dessen Ergebnisse sich leicht mit anderen teilen lassen, gibt es eine Vielzahl von Softwareprogrammen und Wireframe-Tools. Diese Tools können die Arbeit am Drahtmodell erleichtern.
Zusammenfassung
Wireframes sind ein notwendiger Bestandteil jedes Webprojekts. Sie sind nicht nur äußerst nützlich für das Team, sondern helfen auch dabei, mit dem Kunden zu kommunizieren und sein Produkt in kürzester Zeit und mit so wenig Geld wie möglich zum Erfolg zu bringen. Wenn Webdesigner Wireframes in ihren Webdesign-Prozess integrieren, können sie Projekte effizienter umsetzen und schließen diese schneller ab. Wireframes helfen bei der Erstellung eines visuellen Plans für ein Projekt und sparen Anwendern viel Zeit in der Konzeptionsphase.