Was ist ein Wireframe? Ein Leitfaden für Anfänger zum Website‑Wireframe‑Design

Was ist ein Wireframe für eine Website?

Ein Wireframe ist ein sehr einfaches Layout für eine Website oder mobile App. Ein Wireframe kann so einfach wie eine sehr grobe Skizze oder ein ausgefeilteres Design sein, aber sie werden alle als Low-Fidelity oder Medium-Fidelity betrachtet, was bedeutet, dass sie dem endgültigen Design nicht sehr ähneln.

Stellen Sie sich ein Wireframe als den Rahmen eines Hauses vor. Wenn ein Haus gerahmt wird, können Sie die Grundstruktur in Brettern sehen, aber Sie haben keine Ahnung, wie das endgültige Haus aussehen wird, da die hübschen Teile – Wände, Fenster, Türen, Veranden und andere Elemente – später hinzugefügt werden .

Wireframes müssen nicht hübsch sein oder sogar wie eine echte Website oder App aussehen. Tatsächlich ist es am besten, sie einfach zu halten. Dies ermöglicht eine schnelle Iteration. Sie können zwanzig oder mehr schnelle Skizzen in der Zeit erstellen, die Sie für die Erstellung eines hübschen Modells benötigen würden. Je einfacher Sie Ihr Wireframe halten, desto weniger sind Sie daran gebunden und desto einfacher wird es sein, Änderungen vorzunehmen.

Was ist der Zweck von Website-Wireframes?

Wireframes dienen als Grundstruktur für eine Website oder App. So wie ein Künstler ein Storyboard mit Skizzen für einen Film oder Cartoon erstellt, um den Leuten mitzuteilen, wie die Szenen ablaufen, hilft ein Wireframe jemandem, der eine Website oder App erstellt, beim Erstellen der Struktur. Wireframes ermöglichen eine schnelle Iteration und ermöglichen so eine schnelle und einfache Änderung des Layouts, der Navigation und des Erscheinungsbilds.

Es gibt drei Haupttypen von Wireframes:

1. Low-Fidelity (Lo-Fi): Ein Low-Fi-Wireframe ähnelt kaum dem endgültigen Design. Es handelt sich um eine einfache Skizze oder ein einfaches Schwarz-Weiß-Grafikdesign. Normalerweise gibt es nur wenige Details und möglicherweise nicht einmal echten Text, sondern nur Linien oder skizzierte Kästchen, in die die Features eingefügt werden.
2. Mittlere Wiedergabetreue (Mid-Fi): Ein Wireframe mit mittlerer Wiedergabetreue ist etwas detaillierter und kommt einem ausgefeilten Design etwas näher. Sie sind normalerweise in Schwarzweiß gehalten und enthalten keine tatsächlichen Bilder, genau wie ein Low-Fi-Wireframe, können aber etwas mehr Details enthalten, z. B. Darstellungen grafischer Elemente wie Schaltflächen oder Bildplatzhalter.
3. High-Fidelity (Hi-Fi): Ein Hi-Fi-Wireframe geht über Bildplatzhalter und Lorem-Ipsum-Text hinaus. Ein Hi-Fi-Wireframe ist oft Teil der Prototypenphase, einschließlich tatsächlicher Inhalte, Typografie, Farben und anderer Branding-Elemente, die in die endgültige Website oder App integriert werden.

Wireframe vs. Mockup vs. Prototyp

Viele Leute verwenden die Wörter Wireframe, Mockup und Prototyp synonym, aber jedes davon ist ein anderes Ergebnis. Ein Wireframe ist eine Skizze oder ein einfaches, schnelles grafisches Layout einer Website oder App. Obwohl jede dieser Phasen des Website-Designs viele Gemeinsamkeiten aufweist, ist es wichtig, die Unterschiede zu beachten, wenn es um die Erstellung Ihrer eigenen Website oder App geht.

Ein Mockup ist viel detaillierter als ein Wireframe und sieht möglicherweise dem endgültigen Design sehr ähnlich, ist aber dennoch nicht funktionsfähig. Es dient lediglich als visuelles Element, um zu zeigen, wie das Produkt aussehen wird. Um bei der Hausbau-Analogie zu bleiben: Ein Modell ähnelt eher einem Gemälde oder einem 3D-Modell, um zu zeigen, wie das Endprodukt aussehen wird. Man kann damit zwar nicht viel anfangen, aber es vermittelt einen schönen Eindruck davon, wie es aussehen wird, wenn es fertig ist.

Ein Prototyp verfügt über zusätzliche Funktionalität. Beispielsweise kann ein Low-Fidelity-Drahtmodell auf Papier (skizziert) in einen Prototyp umgewandelt werden, indem mehrere Bildschirme erstellt werden, durch die Benutzer eine Scheinnavigation durchführen können, oder ein High-Fidelity-Drahtmodell kann in Figma, Sketch oder Adobe XD in einen Prototyp umgewandelt werden , oder ein anderes Prototyping-Softwarepaket, indem Elemente miteinander verbunden werden, um die Funktionalität des Endprodukts zu simulieren. In unserer Hausbau-Analogie wäre der Prototyp wie ein puppenhausgroßes Modell des echten Hauses oder eine vollständige 3D-Komplettlösungssimulation. Man kann genau sehen, wie es aussieht und wie die Räume fließen und so weiter, aber man kann trotzdem nicht darin wohnen.

Was sollte in einem Website-Wireframe enthalten sein?

Die Elemente, die in einem Wireframe enthalten sein müssen, variieren je nach Art der Website oder App, die Sie erstellen, dem Zweck, dem sie dienen soll, Ihrer Zielgruppe und anderen Faktoren. Im Allgemeinen gibt es wichtige Elemente , die fast alle Wireframes enthalten sollten.

1. Navigation: Sofern Sie nicht nur eine Seite erstellen, müssen Sie Elemente einschließen, die es Benutzern ermöglichen, zwischen den Seiten zu wechseln, einschließlich einer Schaltfläche oder eines Links, um zur Startseite zurückzukehren.
2. Logo: Die meisten Websites oder Apps haben ein Logo oder einen Site-Namen, der sich normalerweise oben links oder oben in der Mitte der Seite befindet. In einem Wireframe ist das Logo oft nur eine Form, die als Platzhalter verwendet wird, oder vielleicht die Website oder der Firmenname im Text.
3. Layout: Ein Wireframe verfügt über ein Gesamtlayout, das Positionen für Bilder, Text, Navigation und andere Elemente enthält. Dies ist wie eine Blaupause, der man beim Bau des fertigen Produkts folgen muss.
4. Call-to-Action: Ein Call-to-Action oder CTA ermöglicht eine Aktion, die der Benutzer ausführen soll. Sie möchten beispielsweise, dass der Benutzer sich in Ihre E-Mail-Liste einträgt oder etwas kauft. Der CTA ist häufig eine Schaltfläche oder ein Textlink, möglicherweise mit angehängten zusätzlichen Funktionen wie einem Formular. Es können mehrere Calls-to-Action vorhanden sein, für diese sollten jedoch Platzhalter eingefügt werden.

Alle diese Elemente können einfache Platzhalter sein (und sollten es normalerweise auch sein). Sie müssen im Wireframe-Stadium nicht spezifisch sein. Beispielsweise könnten die Navigationslinks oben auf der Seite nur Linien sein, die anzeigen, wohin das Menü letztendlich führen wird. Oder das Logo könnte nur ein Kästchen oder ein Kreis sein, der auf eine mögliche Platzierung hinweist. Denken Sie daran, dass der Zweck eines Wireframes darin besteht, das Grundlayout darzustellen und nicht darin, Schriftarten oder Farben auszuwählen oder repräsentativ für das endgültige Design zu sein.

Brauchen Sie Ihre Inhalte bereit für das Wireframe?

NEIN. Sie benötigen keinerlei Inhalte, um Ihr Wireframe zu erstellen. Da ein Lo-Fi-Wireframe so einfach wie eine Skizze mit Kästchen und Linien als Platzhaltern sein kann, müssen Sie nicht einmal Dinge wie Navigationsoptionen kennen. Wenn Sie sehen möchten, wie ein Design mit Inhalt aussehen könnte, können Sie Platzhaltertext namens Lorem Ipsum verwenden.

Viele Softwarepakete verfügen über Lorem-Ipsum-Plugins , mit denen Sie Platzhaltertext generieren können, oder Sie können sich einfach Kauderwelsch ausdenken, um eine Vorstellung davon zu bekommen, wie der Inhalt auf der Seite und mit den von Ihnen gewählten Schriftarten aussehen wird. Sie könnten sogar Text aus einem gemeinfreien Buch oder Wikipedia-Artikel kopieren, um den Inhalt zu ersetzen.

So erstellen Sie ein Wireframe

Das Erstellen eines Wireframes ist ein relativ einfacher Vorgang. Ein Wireframe beginnt oft als einfache Skizze. Es muss keine schöne Skizze sein. Es müssen nicht einmal gerade Linien sein. Sie benötigen keine Zeichenkenntnisse. Wenn Sie einen Kugelschreiber oder Bleistift halten können, können Sie ein Drahtmodell skizzieren.

Wenn Sie eine vollständige Website oder eine mobile App erstellen, müssen Sie mehrere Wireframes erstellen. Im Moment konzentrieren wir uns darauf, nur eines zu erstellen. Sie können diesen Vorgang bei Bedarf für jedes Drahtmodell wiederholen.

1. Listen Sie die benötigten Elemente auf

Der erste Schritt beim Erstellen eines Wireframes besteht darin, zu entscheiden, was auf der Seite angezeigt werden soll. Sie benötigen wahrscheinlich Elemente wie ein Logo, ein Navigationsmenü, einige Bilder, eine Überschrift und etwas Text oder andere Inhalte. Sie können später jederzeit Elemente hinzufügen, aber versuchen Sie, so gründlich wie möglich vorzugehen.

2. Erstellen Sie Skizzen

Als Nächstes möchten Sie mindestens ein grundlegendes Layout für das Drahtmodell skizzieren. Wenn Sie möchten, können Sie dies auch digital tun, aber es ist normalerweise schneller und einfacher, Iterationen Ihres Drahtmodells zu erstellen, wenn Sie nur mit einem Kugelschreiber oder Bleistift skizzieren. Der Zweck dieser Phase besteht darin, verschiedene Layouts auszuprobieren, um zu einem zu gelangen, mit dem Benutzer am einfachsten interagieren können. Sie können in dieser Phase so viele Drahtmodellskizzen erstellen, wie Sie möchten.

3. Finalisieren Sie das Drahtmodell

Nachdem Sie eine Skizze als Grundlage ausgewählt haben, möchten Sie möglicherweise ein ausgefeilteres Drahtmodell erstellen , das Sie den Leuten zeigen können, um Feedback zu erhalten. Es ist nie eine gute Idee, etwas zu erstellen, ohne es mit anderen zu testen, die wertvolles Feedback geben und Ihnen bei der Verbesserung helfen können. Sie können ein Programm wie Figma verwenden, um eine ausgefeiltere Version der endgültigen Skizze zu erstellen.

4. Holen Sie erstes Feedback ein

Wenn Sie ein oder zwei Wireframes haben, die Ihnen wirklich gefallen, holen Sie Feedback von Stakeholdern oder potenziellen Benutzern ein. Stakeholder sind Personen, die ein berechtigtes Interesse am Endergebnis haben. Dies kann Ihr Chef, Geschäftspartner, Kunde oder Personen sein, die möglicherweise die endgültige Website oder App nutzen. Versuchen Sie, in dieser Phase keine Freunde oder Familienangehörigen heranzuziehen, da deren Feedback wahrscheinlich voreingenommen ist und sie wahrscheinlich nicht Ihre Zielgruppe sind.

5. Iterieren Sie das Design

Sobald Sie Feedback haben, müssen Sie wahrscheinlich einige Änderungen an Ihrem Wireframe vornehmen. Nachdem Sie die Änderungen vorgenommen haben, bitten Sie erneut um Feedback. Dies kann je nach Bedarf mit denselben Personen wie zuvor oder einer anderen Gruppe geschehen. Fahren Sie mit der Iteration fort und holen Sie Feedback ein, bis Sie mit dem Design zufrieden sind und der allgemeine Konsens des Feedbacks positiv ist.

Wireframes sind für den Website-Designprozess unerlässlich

Es mag verlockend sein, den Wireframing-Prozess zu überspringen, weil Sie denken, dass er zu viel Zeit in Anspruch nimmt, aber auf lange Sicht wird Ihnen Wireframing tatsächlich Zeit sparen. Da Wireframing es Ihnen ermöglicht, Probleme frühzeitig im Prozess zu erkennen und zu ändern, können Sie große Probleme verhindern, deren Behebung später viel mehr Zeit in Anspruch nehmen würde. Sobald Sie mit dem Wireframing von Websites und Apps beginnen, werden Sie wahrscheinlich nie wieder damit aufhören wollen.

Sobald Sie Ihr Wireframe fertiggestellt haben, können Sie einen Website-Builder wie den von Mailchimp verwenden, um Ihre Website zu erstellen. Der Editor ist einfach und leicht zu bedienen und bietet gleichzeitig Flexibilität und eine solide Auswahl an Optionen, mit denen Sie Ihr Wireframe in kürzester Zeit zum Leben erwecken können. Mailchimp bietet außerdem zusätzliche Dienste, um das Beste aus Ihrer Website herauszuholen, darunter ein umfassendes Kundenbeziehungsmanagementpaket und einen leistungsstarken und erschwinglichen E-Mail-Listendienst. Beginnen Sie noch heute mit dem Website-Builder von Mailchimp.