Websites mit einem Wireframe konzipieren

Mit einem Wireframe lässt sich die Nutzerfreundlichkeit eines Webauftritts optimieren. Das ist wichtig, denn ist die eigene Website nicht benutzerfreundlich, bleiben Traffic und Konversionen auf der Strecke. Deshalb beginnt jeder Website-Entwurf mit dem sogenannten Wireframing: einem Prozess, der sicherstellt, dass Struktur und Navigation der Seite das Nutzungserlebnis positiv beeinflussen.

In diesem Beitrag erklären wir Ihnen, wo die Unterschiede zwischen einem Wireframe, einem Mockup und dem Prototyp liegen, welche dieser Tools Ihnen bei der Konzeption Ihrer Website helfen und welche Rolle sie für User Interface (UI) und User Experience (UX) spielen.

Warum sind Wireframes wichtig?

Wireframes (zu Deutsch: Drahtgerüste) helfen dabei, eine Website zu gestalten und alle wichtigen Elemente unterzubringen. So werden die Bedürfnisse der Zielgruppe perfekt erfüllt und sichergestellt, dass sich Anwender und Anwenderinnen leicht zurechtfinden. Ausgehend vom Wireframe kann dann ein Prototyp erstellt werden.

Wireframes werden nicht nur für klassische Websites verwendet, sondern auch im Bereich der mobilen Anwendungen. Ein gut durchdachter Wireframe App-Entwurf ist essenziell, um eine Anwendung intuitiv und benutzerfreundlich zu gestalten. Zu den Wireframe Vorteilen zählen eine klare Visualisierung der Seite oder App-Struktur, eine verbesserte Kommunikation im Entwicklungsteam und die Möglichkeit, frühzeitig Usability-Probleme zu identifizieren.

Bevor ein Wireframe angelegt wird, sollten Sie zunächst einmal die Zielsetzung Ihrer Website klar definieren. Diese wirkt sich nämlich auf das Webdesign aus – und auch umgekehrt sollte das Layout die Zielsetzung positiv beeinflussen. Wer ist die Zielgruppe? Wonach suchen Nutzerinnen und Nutzer? Wie können Besucher und Besucherinnen zum Verweilen / zu einem Kauf animiert werden? Wie lässt sich das Nutzer- und Nutzerinnenverhalten auf der Website steuern und optimieren? All das sind Fragen, die geklärt sein sollten, bevor Sie mit der Planung Ihrer Seite beginnen.

Beim Wireframing werden die Inhalte und Elemente einer Website in einer sehr simplen Weise dargestellt. Ziel ist es, eine strukturelle Planung zu entwerfen. UX-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 bzw. Informationsarchitektur aussieht (Navigation) und

• wie der Nutzer oder die Nutzerin 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 oder bei der Kundin vorzustellen. Es gibt einen ersten Überblick darüber, wie die zukünftige Website 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. Abhängig von den Zielsetzungen bei der Website-Konzeption bietet sich ein jeweils anderes Herangehen an.

Das statische Wireframe beschränkt sich allein auf eine schematische Darstellung und gibt zunächst nur die grobe Struktur der Website wieder. Die dynamische Darstellung hingegen ist nicht mehr nur rein konzeptioneller, sondern auch funktioneller Art. Statische Ansätze eignen sich dafür, die Vollständigkeit einer Website zu gewährleisten, wohingegen es bei dynamischen Ansätzen schon stärker um die User Experience geht. Man spricht dann auch von UX Wireframes.

Oft wird bereits mehr als eine Seite entworfen und die Websites so miteinander verknüpft. Auch die Textlänge und Elementgrößen werden mit einbezogen. So dienen High Fidelity Wireframes auch dazu, die Navigation auf der Website 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 Website-Konzeption stellen das Ziel einer benutzerfreundlichen Seite sogar noch stärker in den Fokus. Es ist daher wichtig, dass Sie bei der Konzeption nicht beim Wireframe stehenbleiben, sondern auf dieser Grundlage für eine möglichst nutzer- und nutzerinnenfreundliche Gestaltung sorgen.

Das Mockup gibt dabei einen detaillierten Einblick in Design und Layout der späteren Website. Farben, Schriftarten, sowie -größe und verschiedene Formate werden genutzt, um das schlichte Wireframe auszuarbeiten und mit Leben zu füllen. Das Mockup zeigt ganz detailgenau, wie die spätere Website einmal für die Nutzenden aussehen wird. Hierbei ist es wichtig, eine gute Balance aus Navigation und Layout zu erreichen: Eine schicke Website, die unübersichtlich ist, führt ebenso wenig zu Ergebnissen wie ein Webauftritt, der eine gute User Experience bietet, aber langweilig gestaltet ist.

Wie werden Wireframes verwendet?

Bei der Nutzung von Wireframes sollten Sie zunächst die grundlegende Informationsarchitektur planen, um sämtliche Inhalte korrekt und vollständig unterzubringen. Anschließend organisieren Sie die Benutzer- und Benutzerinnenführung, bevor Sie sich der Funktionsdarstellung und dem Layout widmen. Abschließend führen Sie Tests durch und validieren Ihre Ergebnisse.

Bei der Nutzung eines Wireframes entscheiden Sie sich zunächst für eine grundlegende Informationsarchitektur und passen alle Seiten und Unterseiten auf diese an. Achten Sie hierbei auf eine klare Hierarchie und einen stringenten Aufbau.

In einem zweiten Schritt widmen Sie sich der Benutzer- und Benutzerinnenführung und stellen sicher, dass Ihre Zielgruppe schnell und einfach alle Inhalte Ihres Webauftritts erreicht. In diesem Zusammenhang spielt ein ansprechendes Menü ebenso eine Rolle wie klar verständliche Schaltflächen und Links.

Bei der Funktionsdarstellung nehmen Sie die gewünschten Handlungen Ihrer Zielgruppe in den Blick. Sie erläutern unter anderem, wie Dokumente auf dem Webauftritt ausgefüllt, Links genutzt und Feedbacks gegeben werden. Nur wenn diese Dinge selbsterklärend und verständlich sind, werden Ihre Besucher und Besucherinnen sie nutzen. In einem weiteren Schritt wenden Sie sich dann dem Layout zu. Hierzu gehören unter anderem Bilder, Texte und andere Medienelemente. Präsentieren Sie diese so, dass sie zum Verweilen einladen und die Aufmerksamkeit der Betrachter und Betrachterinnen lenken.

Während das Mockup das Design der Website 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 den Aufbau Ihrer Website bereits mit Stift und Papier mittels Skizze anfertigen. Wer jedoch etwas Budget mitbringt und den Entwurf lieber am Computer bearbeiten möchte, kann auf ein entsprechendes Wireframing-Tool zurückgreifen.

Mithilfe der richtigen Software können Sie ganz unkompliziert das Layout Ihrer Seite erstellen. Platzhalteelemente lassen sich per Drag-and-Drop einfügen, um die Struktur festzulegen und jederzeit die Position von Elementen zu ä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, bieten andere die Möglichkeit, ambitioniertere Wireframes oder sogar dynamische Prototypen anzufertigen. Je nachdem, welche Ziele Sie mit Ihrem Webauftritt verfolgen, wer Ihre Zielgruppe ist und welcher Aufbau Ihnen vorschwebt, bieten sich jeweils andere Tools als Unterstützung an.

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

1. Sketch

Quelle: Screenshot von Sketch

Die intuitive Benutzeroberfläche von Sketch 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. Die Vielzahl an Funktionen eröffnet große Gestaltungsspielräume und stellt sicher, dass das Tool für kleine Websites ebenso geeignet ist wie für große Internetauftritte.

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 bzw. Solo-Nutzerin, fallen 99 Dollar als einmalige Summe für eine 12-monatige Lizenz an.

2. Axure

Quelle: Screenshot von Axure

Mit dem Design-Tool Axure können Sie sowohl Wireframes als auch Customer Journeys und andere Info-Diagramme anlegen. Erfolgreiche Kunden und Kundinnen der Anwendung sind Amazon, Microsoft und Salesforce. Axure eignet sich nicht nur für statische Wireframes, sondern auch für die Erstellung dynamischer Prototypen. Die große Zahl an Funktionen, Informationen und Übersichten hilft dabei, eine stark zielgruppenorientierte Website mit zahlreichen Inhalten zu bauen. Das Tool ist somit für Anwender und Anwenderinnen mit höheren Ansprüchen geeignet.

Kosten: Axure wartet mit drei unterschiedlichen Preismodellen auf. Einzelnutzer und Einzelnutzerinnen zahlen monatlich 25 Dollar im „Pro“-Abonnement, während gemeinsam in Axure arbeitende „Team“-Abonnenten und -Abonnentinnen 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

Quelle: Screenshot von Adobe

Adobe XD ist kein eigenständiges Produkt mehr. Das Wireframe-Tool gibt es nur noch als Bestandteil des "Alle Applikationen“-Pakets – innerhalb der Creative Cloud. 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. Sie werden bei der Nutzung von Beginn an geführt und unterstützt, sodass sich auch Neulinge in der Welt der Website-Konzeption gut mit Adobe XD zurechtfinden.

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

4. balsamiq

Quelle: Screenshot von balsamiq

Eines der wohl bekanntesten Tools, um Wireframes zu erstellen, ist balsamiq. Anders als andere Anbieter und Anbieterinnen fokussiert sich die Anwendung allein auf statische Wireframes. Das schlichte Design sorgt für eine übersichtliche Benutzer- und Benutzerinnenoberfläche und eine einfache Handhabung. Das Programm besitzt eine umfassende Elementenauswahl 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 Abo-Modell für die Balsamiq Cloud 200 Projekte für knapp 200 Dollar pro Monat bzw. 1.990 Dollar pro Jahr erhältlich ist.

5. Figma

Quelle: Screenshot von Figma

Ein weiteres Tool, das in der Wireframe-Phase von unschätzbarem Wert sein kann, ist Figma. Dieses webbasierte Tool ist besonders für seine Kollaborationsfähigkeiten bekannt und ermöglicht es Teams, in Echtzeit zusammen an Wireframes zu arbeiten. Es kombiniert Benutzerfreundlichkeit mit einer Reihe von fortschrittlichen Funktionen, die sowohl für statische als auch für interaktive Prototypen geeignet sind. Die Palette an Designelementen und Vorlagen in Figma ist umfangreich und vielfältig, was eine schnelle und effiziente Gestaltung ermöglicht und den gesamten Prozess stark vereinfacht.

Kosten: Figma bietet eine kostenlose Basisversion, die für einzelne Nutzer oder Nutzerinnen oder kleinere Projekte ideal ist. Für fortgeschrittene Anforderungen gibt es bezahlte Abonnements: Das „Professional“-Paket beginnt bei 12 Dollar pro Editor und Monat, wenn jährlich abgerechnet wird, und das „Organization“-Paket für umfangreichere Teams und Unternehmen kann auf Anfrage spezifische Konditionen bieten.

Wireframe erstellen: Ein Beispiel

Im Folgenden finden Sie zwei Beispiele für Wireframing mit unterschiedlichen Zielsetzungen. Beim ersten Beispiel handelt es sich um den Aufbau einer Unternehmenswebsite, beim zweiten um ein Wireframe für eine Sportnachrichtenseite.

Quelle: Screenshot von edraw

Quelle: Screenshot von edraw

Fazit: Mit Wireframes Ihre Seiten professionell und zielgruppengerecht gestalten

Jede Website 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 Website.

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 Sie jede Schnittstelle der zukünftigen Website einwandfrei testen und optimieren können. Hierbei geht es vor allem um eine positive User Experience und darum, die Zielgruppe zu bestimmten Handlungen zu animieren.

Titelbild: scyther5/ iStock / Getty Images Plus