User Interface (UI) und User Experience (UX) werden zunehmend bedeutender: Ist die eigene Webseite nicht benutzerfreundlich, bleiben Traffic und Konversionen auf der Strecke. Deshalb beginnt jeder Webseiten-Entwurf mit dem sogenannten Wireframing: einem Prozess, der sicherstellt, dass Struktur und Navigation der Webseite das Nutzungserlebnis positiv beeinflussen.

In diesem Beitrag erfahren Sie, wo die Unterschiede zwischen einem Wireframe, einem Mockup und dem Prototyp liegen und welche dieser Tools Ihnen bei der Konzeption Ihrer Webseite helfen können.

Download: Leitfaden zur Gestaltung einer barrierefreien Website

Der Wireframe: Webseiten-Konzeption leicht gemacht

Ein Wireframe (zu Deutsch: Drahtgerüst) wird für die Konzeption einer Webseite oder für Webanwendungen wie Apps und Software eingesetzt. Dabei werden Grundelemente definiert und positioniert, um eine grobe Vorstellung über den Aufbau und die Struktur zu erhalten. Im Deutschen kann auch vom „Seitenschema“ gesprochen werden.

Bevor ein Wireframe angelegt wird, sollte zunächst einmal die Zielsetzung der Webseite klar definiert sein. Diese wirkt sich nämlich auf das Design aus und auch umgekehrt sollte das Layout die Zielsetzung positiv beeinflussen.

Beim Wireframing werden die Inhalte und Elemente einer Webseite in einer sehr simplen Weise dargestellt. Ziel ist es, an diesem Punkt der Konzeption eine strukturelle Planung zu entwerfen. Design, Farben und Schrift sind beim Wireframe hingegen noch nicht gefragt. Ein Wireframe klärt stattdessen:

  • welche Elemente wo platziert werden (Informationen),

  • wie die Struktur aussieht (Navigation) und

  • wie der Nutzer mit den Elementen interagieren soll (Interface).

Die Beantwortung dieser Fragen ist auch für die Dokumentation des Projektes entscheidend. Außerdem hilft das Wireframe dabei, das Projekt beim Kunden vorzustellen. Es gibt einen ersten Überblick darüber, wie die zukünftige Webseite aussehen soll.

Statisch vs. Dynamisch: Low-Fidelity und High-Fidelity Wireframes 

Das Wireframing unterscheidet zwischen zwei Arten. Während Low-Fidelity (oder statische) Wireframes einer sehr einfachen Darstellung folgen, beschreiben High-Fidelity (oder dynamische) Wireframes bereits umfangreichere Entwürfe der Webanwendung.

Das statische Wireframe beschränkt sich allein auf eine schematische Darstellung und gibt zunächst nur die grobe Struktur der Webseite wieder. Die dynamische Darstellung hingegen ist nicht mehr nur rein konzeptionell, sondern auch funktioneller Art.

Oft wird bereits mehr als eine Seite entworfen und die Webseiten werden miteinander verknüpft. Auch die Textlänge und Element-Größen werden mit einbezogen. So dienen High-Fidelity Wireframes auch dazu, die Navigation auf der Webseite zu testen.

Sie gehen sozusagen in die nächste Entwicklungsstufe über. Man spricht daher in Abgrenzung zum einfachen Wireframe auch von Mockups (Darstellung des Designs) und Prototypen (technische Umsetzung).

Der Unterschied zwischen Wireframe und Mockup

Das Wireframe bildet die Grundlage für jedes Mockup. Zwar sind auch beim Wireframe die Benutzeroberfläche sowie User Experience Thema, doch die nachfolgenden Schritte in der Webseiten-Konzeption stellen das Ziel einer benutzerfreundlichen Seite sogar noch stärker in den Fokus.

Das Mockup gibt dabei einen detaillierten Einblick in Design und Layout der späteren Webseite. Farben, Schriftarten, sowie -größe und verschiedene Formate werden genutzt, um das schlichte Wireframe auszuarbeiten und mit Leben zu füllen. Das Mockup zeigt also ganz detailgenau, wie die spätere Webseite einmal für die Nutzer aussehen wird.

Vom Mockup zum Prototyp

Während das Mockup das Design der Webseite widerspiegelt, werden im Anschluss durch den Prototypen technische Aspekte definiert und umgesetzt. Dazu werden HTML-Doc und CSS verwendet. Während Wireframe und Mockup eine statische Darstellung verfolgen, werden im Prototyp erstmalig dynamische Inhalte konzipiert, die bereits Interaktionen ermöglichen.

Dies hilft vor allem dabei, die Navigation und Benutzerfreundlichkeit zu testen. So werden Schwachstellen aufgedeckt und es kann überprüft werden, ob Schnittstellen und Verlinkungen korrekt funktionieren.

Das ist von unschätzbarem Wert, denn die Erfahrung zeigt, dass gerade in der Entwicklungsphase Fehler auftreten, die in dieser Phase evaluiert und ausgemerzt werden können.

Schnelle Entwürfe mit dem richtigen Wireframe-Tool erstellen

Um ein Wireframe zu erstellen, braucht es nicht viel. Sie können bereits mit Stift und Papier eine Skizze über den Aufbau Ihrer Webseite anfertigen. Wer jedoch etwas Budget mitbringt und den Entwurf lieber am Computer bearbeiten möchte, der kann auf ein entsprechendes Wireframing-Tool zurückgreifen.

Mithilfe der richtigen Software können Sie ganz unkompliziert das Layout für Ihren Webseiten-Entwurf erstellen. Platzhalterelemente können per Drag-and-Drop eingefügt werden, um die Struktur festzulegen und jederzeit ihre Position ändern – ganz nach Ihrem Geschmack.

Jedoch gibt es bei der Auswahl des richtigen Tools einiges zu beachten. Die verschiedenen Softwares unterscheiden sich teilweise stark in ihren Möglichkeiten. Während Sie mit einigen nur einfache Skizzen erstellen können, bieten andere die Möglichkeit, ambitioniertere Wireframes oder sogar dynamische Prototypen anzufertigen.

Nachfolgend finden Sie vier Tools, die unterschiedliche Funktionen beinhalten, sich jedoch alle dafür eignen, ein Wireframe zu erstellen:

1. Sketch

Was ist ein Wireframe_1

Bild: Sketch

Sketch zählt zu den bekanntesten Tools für Designer. Das Programm ermöglicht es Ihnen, ganz einfach statische Wireframes zu zeichnen. Per Drag-and-Drop können die Elemente dem Konzept dabei hinzugefügt werden.

Die intuitive Benutzeroberfläche sorgt für eine ideale Bedienbarkeit, während die Bearbeitungshistorie und verschiedene Feedback-Optionen die Arbeit im Team merklich erleichtern und eine gute Grundlage für die Zusammenarbeit schaffen.

Kosten: Möchten Sie das Tool als Team nutzen, zahlt jedes Mitglied monatlich neun Dollar (oder insgesamt 99 Dollar jährlich). Verwenden Sie Sketch hingegen als Solo-Nutzer, fallen 99 Dollar als einmalige Summe für eine 12-monatige Lizenz an.

2. Axure

Was ist ein Wireframe_2

Bild: Axure

Mit dem Design-Tool Axure können Sie sowohl Wireframes als auch Customer Journeys und andere Info-Diagramme anlegen. Erfolgreiche Kunden der Anwendung sind Amazon, Microsoft und Salesforce. Axure eignet sich nicht nur für statische Wireframes, sondern auch dynamische Prototypen sind mit dem Tool schnell erstellt.

Kosten: Axure wartet mit drei unterschiedlichen Preismodellen auf. Einzelnutzer zahlen monatlich 25 Dollar im „Pro“-Abonnement, während gemeinsam in Axure arbeitende „Team“-Abonnenten pro Mitglied 42 Dollar zahlen. Für die dritte Option, „Axure for Enterprise“, kann der Hersteller für Preisauskünfte kontaktiert werden.

3. Adobe XD

Was ist ein Wireframe_3

Bild: Adobe XD

Innerhalb der Creative Cloud bietet Adobe auch ein Tool zur Erstellung von Wireframes an. Adobe XD eignet sich dabei ideal, um ein einfaches Seitenschema zu erstellen. Ebenso können Sie das Programm für Prototypen und konzeptionelle Design-Elemente verwenden.

Kosten: Für die Nutzung der Creative Cloud fallen monatlich 57,99 Euro an.

4. Balsamiq

Was ist ein Wireframe_4

Bild: Balsamiq

Eines der wohl bekanntesten Tools, um Wireframes zu erstellen, ist Balsamiq. Anders als andere Anbieter fokussiert sich die Anwendung allein auf statische Wireframes. Das schlichte Design sorgt für eine übersichtliche Benutzeroberfläche und eine einfache Handhabung. Das Programm besitzt eine umfassende Elemente-Auswahl und erinnert im Bearbeitungsprozess an eine einfache Bleistift-Skizze.

Kosten: Der Preis berechnet sich bei Balsamiq je nach Projektumfang. Das kleinste Abo-Modell umfasst dabei zwei Projekte für neun Dollar pro Monat oder 90 Euro pro Jahr, während das größte Abomodell für die Balsamiq Cloud 200 Projekte für knapp 200 Dollar pro Monat bzw. 1.990 Dollar pro Jahr kostet.

Jede Webseite beginnt zunächst mit der Erstellung eines Wireframes. Das strukturelle Konzept hilft dabei, die Zielsetzung der Seite umzusetzen und gibt erste Aufschlüsse über Informationen und Struktur der Webseite.

Steht das Gerüst, wird im Mockup das Design visualisiert. Der Prototyp bezieht ganz zum Schluss der Konzeptionsphase dynamische Inhalte mit ein und sorgt dafür, dass jede Schnittstelle der zukünftigen Webseite einwandfrei getestet und optimiert werden kann.

New call-to-action

Titelbild: ijeab / Getty Images

 New call-to-action

Ursprünglich veröffentlicht am Oct 8, 2020 2:00:00 AM, aktualisiert am April 18 2022

Themen:

Webdesign