Was ist Wireframing? Ein Leitfaden für Anfänger

Veröffentlicht: 2022-08-02

Was ist Wireframing? Einfach gesagt, es ist einer der wichtigsten Aspekte des UX-Designprozesses (User Experience). Wenn Sie sich in die komplexe Welt des User-Experience-Designs eingemischt haben, ist Ihnen wahrscheinlich zumindest der Begriff „Wireframes“ schon einmal begegnet.

Aber was genau sind Wireframes und warum sind sie ein so wichtiger Bestandteil des UX-Designprozesses?

In diesem Leitfaden erfahren Sie genau, was ein Wireframe ist. Wir zeigen Ihnen zunächst den Aufbau eines Wireframes und erklären, wie Wireframes in den gesamten Designprozess passen. Sie erfahren auch, welche Funktionen Wireframes beinhalten sollten.

Danach zeigen wir Ihnen die verschiedenen Wireframe-Typen und die Tools, die Sie benötigen, um Ihre eigenen zu erstellen.

Am Ende haben Sie sich wahrscheinlich nicht mehr gefragt: „Was ist Wireframing?“ um ganz einfach eigene Wireframes erstellen und einsetzen zu können.

Nun, lass uns einen Blick darauf werfen.

Was ist ein Wireframe?

Beginnen wir ganz am Anfang mit der einfachen Frage: „Was ist ein Wireframe?“

In Wirklichkeit unterscheidet es sich nicht allzu sehr von einem Entwurf, den Architekten verwenden. Es ist ein zweidimensionaler Umriss einer App oder Webseite, den ein Designer verwendet, um das Endprodukt zu erstellen. Die Absicht eines Wireframes ist es, dem Designer einen offensichtlichen Überblick über eine Seite zu geben:

  • Layout
  • Struktur
  • Benutzerfluss
  • Beabsichtigte Verhaltensweisen
  • Informationsarchitektur
  • Funktionalität

Ein Wireframe repräsentiert fast immer das ursprüngliche Konzept des Designprojekts. Daher werden Dinge wie Grafik, Farbe und Styling auf ein absolutes Minimum beschränkt.

In einigen Fällen kann ein Drahtmodell von Hand auf einem Blatt Papier skizziert werden. Andere Wireframes werden im digitalen Bereich erstellt. Es hängt wirklich von den Details ab, die in dem spezifischen Wireframe benötigt werden. Es hängt auch davon ab, wie viele Details in das endgültige Design der Webseite oder App einfließen.

Mit anderen Worten, je detaillierter die Webseite, desto detaillierter muss das Wireframe sein.

Die Praxis des Wireframing wird am häufigsten von UX-Designteams verwendet. Das Durchlaufen des Prozesses ermöglicht es allen beteiligten Parteien (Stakeholdern), sich darauf zu einigen, wo Informationen auf einer Seite zu finden sind, bevor das Projekt an die Entwickler zum Ausbau übergeben wird.

Das Wireframing eines Projekts, bevor es an die Entwickler übergeben wird, erspart später oft eine Menge Kopfschmerzen. Denn der anfängliche Entwurf des Projekts (das Wireframe) kann (und sollte) immer der erste Bezugspunkt dafür sein, wie das Endergebnis aussehen soll.

Wireframing

Wann ist die beste Zeit für Wireframe?

In den meisten Fällen findet der Wireframing-Prozess während der Phase des Produktlebenszyklus statt, die als Erkundungsphase bezeichnet wird.

Die Erkundungsphase ist die Zeit, in der Designer:

  • Gemeinsam an Ideen arbeiten
  • Identifizieren von geschäftsbezogenen Anforderungen
  • Testen des Gesamtumfangs des Projekts

Mit anderen Worten, das Wireframing einer Webseite gibt ihr ihre erste Iteration, die als Ausgangspunkt für das Gesamtdesign eines Projekts verwendet wird.

Wireframes sind auch wertvoll, weil sie zukünftigen Website-Benutzern präsentiert werden können, um Feedback zur Effektivität des Designs zu erhalten. Basierend auf dem Feedback der Benutzer erstellen die Designer des Projekts dann eine viel detailliertere Design-Iteration, wie ein Mockup oder einen Prototyp.

Von dort aus beginnt sich das Gesamtprojekt zu entfalten.

Warum sind Wireframes nützlich?

Es gibt drei wichtige Zwecke und Vorteile, die Wireframes für den Designprozess bringen:

  1. Sie sind kostengünstig und einfach zu erstellen.
  2. Sie definieren spezifische Merkmale einer Website oder Webseite und helfen bei der weiteren Verdeutlichung.
  3. Sie konzentrieren den Designprozess auf den Endbenutzer.

Um die Dinge weiter aufzuschlüsseln, schauen wir uns jeden dieser wichtigen Punkte im Detail an.

1. Sie sind kostengünstig und einfach zu erstellen

Warum verwenden Designteams zu Beginn ihrer Projekte so viel Wireframing? Die Antwort ist einfach: Sie sind unglaublich einfach zu erstellen und kosten fast nichts. Wenn Sie Zugriff auf einen Stift und einen Block Papier haben, können Sie in Wirklichkeit die Details eines neuen Drahtmodells skizzieren, ohne etwas auszugeben.

Wenn es um digitale Wireframes geht, bedeutet die große Auswahl an Tools, die Ihnen zur Verfügung stehen, dass Sie in nur wenigen Minuten Ihr eigenes digitales Wireframe erstellen können.

Mehr zu diesen Tools später in diesem Handbuch.

Einer der Vorteile eines Wireframes ist sein Aussehen und seine Haptik. Sie sehen, das Problem bei der Präsentation eines ausgefeilten Produkts für Benutzer, um Feedback zu erhalten, besteht darin, dass die Leute weniger wahrscheinlich ehrlich über ihre wahre Meinung sind, wenn ein Projekt bereits abgeschlossen aussieht.

Aber wenn Sie ein Wireframe verwenden, um den absoluten Kern von Seitenlayouts freizulegen, werden offensichtliche Schmerzpunkte und Fehler leichter identifiziert und herausgestellt. Diese Probleme können dann vom Designteam behoben werden, ohne viel Geld oder Zeit in die Neuentwicklung zu investieren.

Denn je später Sie im Produktdesignprozess vorankommen, desto teurer und schwieriger ist es, Änderungen vorzunehmen, die in der Wireframing-Phase leicht hätten vorgenommen werden können.

2. Sie definieren spezifische Merkmale einer Website oder Webseite und helfen bei der weiteren Klärung

Wenn ein Webdesigner seinem Kunden Ideen mitteilt, hat der Kunde möglicherweise nicht immer viel technisches Verständnis. Designer verwenden oft Wörter wie „Handlungsaufforderung“ oder „Heldenbild“, und viele Kunden folgen der Sprache nicht.

Durch Wireframing bestimmter Seitenfunktionen kann ein Designer Kunden klarer kommunizieren, wie diese Funktionen funktionieren und welchen genauen Zweck sie erfüllen werden.

Wireframes ermöglichen es den Beteiligten auch, die Menge an Platz zu verstehen, die für jedes der Seitenfeatures zugewiesen werden muss. Der Prozess hilft dabei, das visuelle Design mit der Informationsarchitektur einer Website zu verbinden, und verdeutlicht die Gesamtfunktionalität der Seite.

Wenn Sie alle Seitenfunktionen auf dem Wireframe sehen, erhalten Sie auch ein viel besseres Verständnis dafür, wie all diese Funktionen im Einklang funktionieren. Der Wireframing-Prozess könnte Sie sogar dazu veranlassen, einige Funktionen zu entfernen, wenn Sie feststellen, dass sie nicht gut mit den übrigen Elementen auf der Seite funktionieren.

Dies kann während des Wireframing-Prozesses zu einigen großen Meinungsverschiedenheiten zwischen den Projektbeteiligten führen. Aber es ist viel besser, dass diese Meinungsverschiedenheiten jetzt auftreten (und gelöst werden), anstatt später im Designprozess, wenn der Code neu geschrieben werden muss.

3. Wireframes halten den Designprozess auf den Endbenutzer ausgerichtet

Wireframes sind großartige Kommunikationsmittel. Dies liegt daran, dass sie wertvolles Feedback von Benutzern ermöglichen, den Ideenaustausch zwischen Designern vorantreiben und wichtige Gespräche zwischen Stakeholdern in Gang setzen.

Durch die Einbeziehung von Benutzertests in frühen Phasen des Designprozesses fördert Wireframing ein ehrlicheres Benutzerfeedback. Es identifiziert besser die wichtigsten Schmerzpunkte, die bei der Entwicklung eines erfolgreichen Konzepts und Endprodukts helfen.

Wireframing ist eine unschätzbare Methode für Webdesigner, um genau zu sehen, wie Benutzer mit der vorgeschlagenen Schnittstelle interagieren würden. Die gesammelten Erkenntnisse zeigen dem Designer, was einem Benutzer intuitiv erscheint. Designer können dann basierend auf dem Feedback der Benutzer Endergebnisse erstellen, die einfach zu verwenden und komfortabel sind.

Welche verschiedenen Arten von Wireframes können Sie verwenden?

Es gibt drei verschiedene Arten von Wireframes. Die Art des Drahtmodells wird dadurch bestimmt, wie viele Details das Drahtmodell enthält.

1. Lo-Fi-Wireframes

Dies ist eine einfache, sehr einfache Darstellung einer Webseite. Es wird fast immer als Ausgangspunkt eines Designs dienen.

Aus diesem Grund sind Lo-Fi-Wireframes normalerweise ziemlich grob. Sie werden ohne Sinn für Pixelgenauigkeit, Raster oder Skalierung erstellt.

Der Zweck eines Lo-Fi-Drahtmodells besteht darin, Details wegzulassen, die sonst vom Gesamtlayout ablenken könnten. Es enthält:

  • Blockformen
  • Mock-Content (Fülltext für Überschriften und Labels)
  • Einfache Bilder

Lo-Fi-Wireframes werden verwendet, um Gespräche in Gang zu bringen, den Benutzerfluss abzubilden und über das Navigationslayout zu entscheiden. Einfach gesagt, ein Lo-Fi-Drahtmodell ist die perfekte Lösung, wenn Kunden oder Stakeholder mit Ihnen in einem Raum sitzen und Sie schnell etwas aufzeichnen möchten, während Sie in einer Besprechung sitzen.

Sie eignen sich auch hervorragend für Designer, die mehrere verschiedene Konzepte in Betracht ziehen und entscheiden möchten, in welche Richtung sie mit einem Projekt gehen sollen.

2. Mid-Fi-Wireframes

Dies ist das Drahtmodell, das im Designprozess am häufigsten verwendet wird.

Ein Mid-Fi-Drahtmodell zeigt eine gründlichere Darstellung des Seitenlayouts. Obwohl es keine Dinge wie Typografie oder Bilder enthalten wird, werden den spezifischen Komponenten viel mehr Details gegeben. Und die Seitenfunktionen sind klarer definiert und getrennt.

In den meisten Fällen hat ein Mid-Fi-Drahtmodell unterschiedliche Textgewichte, die den Hauptinhalt von den Überschriften trennen. Obwohl Mid-Fi-Drahtgitter immer noch schwarz und weiß sind, verwendet ein Designer oft verschiedene Grautöne, um die verschiedenen Elemente des Designs hervorzuheben.

Ein Mid-Fi-Wireframe wird mit einem digitalen Wireframing-Tool wie Balsamiq oder Sketch erstellt.

Für WordPress-Site-Besitzer bietet Ihnen die Funktion Wireframe Blocks im Kadence Blocks-Plugin den einfachsten Weg zum Wireframe. Dazu später etwas mehr.

3. Hi-Fi-Wireframes

Zu guter Letzt gibt es Hi-Fi-Drahtgitter. Diese haben pixelspezifische Layouts. Ein Lo-Fi-Wireframe zum Beispiel wird wahrscheinlich „lorem ipsum“-Textfüller und graue Kästchen haben, die mit X gefüllt sind, die die Bildplatzierung anzeigen. Ein Hi-Fi-Drahtmodell enthält jedoch vollständig geschriebene Inhalte und die tatsächlichen Bilder, die auf der Seite zu sehen sein werden.

Die in einem Hi-Fi-Drahtgitter enthaltenen Details machen es ideal zum Dokumentieren und Erkunden komplizierter Designkonzepte wie interaktiver Karten oder Menüsysteme. Aufgrund der Zeit, die zum Zusammenstellen eines HiFi-Drahtmodells benötigt wird, sollten sie für die letzten Phasen Ihres Designzyklus reserviert werden.

Was ist in einem Wireframe enthalten?

Die Anzahl der Funktionen, die ein Wireframe enthält, hängt weitgehend davon ab, ob es sich um Lo-, Mid- oder Hi-Fidelity handelt. Im Allgemeinen sind die Hauptelemente, die jedes Wireframe enthalten wird, jedoch:

  • Suchfelder
  • Share-Buttons
  • Logos
  • Überschriften
  • Lorem ipsum Platzhaltertext

Ein Hi-Fi-Wireframe wird auch Kontaktinformationen, Navigationssysteme und Fußzeilen enthalten.

Denken Sie daran, dass Bilder und Typografie nicht immer in einem Lo- oder Mid-Fi-Drahtmodell enthalten sein müssen. Viele Designer experimentieren jedoch mit der Textgrößenanpassung, um die Informationshierarchie darzustellen oder um anzuzeigen, wo eine Kopfzeile platziert wird.

Traditionell werden Wireframes immer in Graustufen erstellt. Aus diesem Grund wird ein Designer auch mit Graustufenschattierungen experimentieren, indem er helle Grauschattierungen verwendet, um helle Farben anzuzeigen. Dunkle Grautöne weisen auf kräftige Farben hin.

In einem Hi-Fi-Drahtmodell können einige Designer gelegentlich Farbe hinzufügen. Meistens ist es auf Rot und Dunkelblau beschränkt.

Die Verwendung von roter Farbe zeigt eine Fehlermeldung oder Warnung an, während die dunkelblaue Farbe einen späteren aktiven Link darstellt.

Wireframes sind immer zweidimensional. Aus diesem Grund ist es wichtig, sich daran zu erinnern, dass sie nicht viel dazu beitragen, interaktive Funktionen des vorgeschlagenen Designs zu präsentieren, wie z.

Mobile Wireframes vs. Website-Wireframes

Wenn Sie wie die meisten Leute, die diesen Leitfaden lesen, denken, denken Sie wahrscheinlich hauptsächlich an Desktop-Drahtmodelle und nicht viel an mobile Drahtmodelle. Aber in Wahrheit erfordern mobile Wireframes ihre eigenen speziellen Überlegungen.

Wenn Sie das wissen, was genau ist der Unterschied zwischen mobilen Wireframes und Website-Drahtmodellen?

1. Wireframe-Größe

Da es einen offensichtlichen Größenunterschied zwischen Desktop-Websites und mobilen Websites/Apps gibt, müssen die jeweiligen Layouts berücksichtigt werden.

Beispielsweise hat eine Desktop-Website einen Breitbildschirm. Aus diesem Grund würde das Wireframe für eine Desktop-Site wahrscheinlich ein Layout aufweisen, das sich über mehrere verschiedene Spalten erstreckt.

Auf Mobilgeräten ist ein Wireframe jedoch normalerweise auf nur eine oder zwei Spalten beschränkt. Das bedeutet, dass Sie entscheiden müssen, ob ein Benutzer eine unendliche Bildlaufleiste sieht oder ob Sie lieber die Anzahl der pro Seite angezeigten Elemente verringern möchten, um darunter zusätzliche Inhalte anzuzeigen.

2. Verhalten

Ein weiterer wesentlicher Unterschied ist das Gesamtverhalten einer Desktop-Site oder einer mobilen App/Site. Auf einer Desktop-Site verwendet ein Site-Benutzer ein Trackpad oder eine Maus, um auf der Webseite zu navigieren. Darüber hinaus kann ein Benutzer auf die Funktionen klicken, die ihn interessieren, um weitere Informationen anzuzeigen.

Auf dem Desktop können Benutzer sogar mit der Maus über bestimmte Elemente fahren, um Website-Menüs anzuzeigen.

Wenn ein Benutzer jedoch mobil ist, müssen Benutzer auf ihren Bildschirm tippen, um Funktionen zu öffnen.

Das bedeutet, dass Sie beim Wireframing für Mobilgeräte kritischer darüber nachdenken müssen, wie Sie Benutzer ermutigen möchten, auf bestimmte Schaltflächen zu tippen, um bestimmte Ziele zu erreichen.

3. Interaktion

Benutzer werden auf Ihrer mobilen Website oder App ganz anders interagieren als auf Ihrer Desktop-Website.

Während die mobile Version Ihrer Website Daten und Inhalte auf die gleiche Weise wie eine Desktop-Website abruft, bieten mobile Apps und Websites den Benutzern häufig die Möglichkeit, Inhalte herunterzuladen, um sie beispielsweise offline zu verwenden.

Achten Sie beim Wireframing für Mobilgeräte darauf, zu berücksichtigen, wie die Interaktion zwischen Mobilgerät und Desktop variiert.

Wireframing in WordPress

In der heutigen Landschaft mit reichlich vorhandener Technologie für scheinbar alles Vorstellbare stehen Webdesignern viele fortschrittliche Wireframing-Programme und -Tools zur Verfügung.

Insgesamt ist Sketch wohl das bekannteste Tool für Wireframing. Es verwendet eine Kombination aus Vektordesignformen und Zeichenflächen, mit denen Webdesigner ihre eigenen Drahtgitter auf einer pixelbasierten Leinwand erstellen können.

Für WordPress-Benutzer ist das beste Tool für Wireframing jedoch die brandneue Wireframe Blocks-Funktion im Kadence Blocks-Plugin.

Wireframing-Blöcke von Kadence Blocks sind eine neue Reihe von WordPress-Blöcken, die Ihnen saubere, vorgefertigte Abschnitte bieten, die Ihnen beim Erstellen Ihrer Website helfen. Das Beste ist, dass alles direkt im natvie WordPress-Blockeditor erledigt wird.

Wireframe Blocks bietet Benutzern über 30 verschiedene Wireframe-Blöcke zur Verwendung, darunter:

  • Inhalt
  • Preistabellen
  • Fußzeilen
  • Referenzen
  • Karten
  • Countdowns
  • Portfolios
  • Formen
  • Eine Menge mehr

Als Besitzer einer WordPress-Site müssen Sie Ihr Wireforming nicht außerhalb des nativen WordPress-Blockeditors durchführen. Wireframe Blocks von Kadence Blocks bietet Ihnen das einzige Tool, das Sie für Wireframes in WordPress benötigen.

Und es könnte nicht einfacher zu bedienen sein.

Die neuen Wireframe-Blöcke sind im kostenlosen Kadence Blocks-Plugin verfügbar. Werfen Sie einen Blick darauf und sehen Sie, was es für Ihren Wireframing-Prozess tun kann.

Was ist Wireframing? Jetzt wissen Sie!

Da haben Sie es: „Was ist Wireframing?“ in 10 Minuten oder weniger erklärt.

Wireframes scheinen etwas zu sein, das leicht übersehen werden könnte. Aber sie werden es Designern ermöglichen, klares Feedback von Kunden, Stakeholdern und Benutzern in Bezug auf die Navigation und das Layout der wichtigen Seiten einer Website zu erhalten.

Und wenn Sie in der Wireframing-Phase mit der Zustimmung von Kunden, Stakeholdern und Benutzern ausgestattet sind, können Sie Ihr Projekt zuversichtlich vorantreiben, in dem Wissen, dass Sie etwas schaffen, das Benutzern und Kunden zustimmen wird ... und hoffentlich Liebe.

Laden Sie Kadence Blocks mit einer kostenlosen Website-Wireframing-Bibliothek herunter

Wenn Sie es lieben, überzeugende Inhalte mit schönem Design zu erstellen, bietet Kadence Blocks Tools, um direkt im nativen WordPress-Editor kreativ zu sein. Profitieren Sie außerdem von unzähligen vorgefertigten Inhalten, die Sie ganz einfach in Ihre Website integrieren können, einschließlich einer Wireframe-Bibliothek mit Blöcken, um mit Ihrem nächsten Webdesign loszulegen. Ideal für Inspiration und schnelle Entwicklung!

jetzt downloaden