Fairrank Kontaktformular
Fairrank anrufen

Was ist ein Wireframe
und wozu dient es?

Die Nutzerfreundlichkeit (Usability) einer Website spielt eine große Rolle. Ist eine Seite unübersichtlich und schwer zu navigieren, springen Nutzer schneller wieder ab, sodass Traffic (die Anzahl der Besucher) und Konversionen (bestimmte vom Nutzer getätigte Handlungen, z. B. ein Kauf) zurückgehen.

Um ein positives Nutzererlebnis (User Experience) sicherzustellen, nutzen Webentwickler deshalb bei jedem Website-Entwurf ein sogenanntes Wireframe. Was genau sich dahinter verbirgt, welche Arten es gibt und wann Wireframes zum Einsatz kommen, erklären wir Ihnen in diesem Beitrag!

Inhalt

Was genau ist ein Wireframe?

Einfach gesagt handelt es sich bei einem Wireframe (Engl. für Drahtgerüst) um einen schematischen Entwurf einer Website, einer App oder einer Software. Darin wird definiert, welche Elemente verwendet werden und wo diese positioniert werden. Zudem wird festgehalten, wie die Navigation zwischen einzelnen Elementen funktionieren soll.

Insgesamt werden in einem Wireframe also drei Punkte dargestellt:

  1. Was sind die Hauptelemente und wo werden sie platziert? (Informationen)
  2. Wie sieht die Struktur aus? (Navigation)
  3. Wie kann der Nutzer damit interagieren? (Interface)

Vergleicht man das Wireframe mit den Arbeitsmaterialien eines Architekten, entspricht es dem Grundriss eines Hauses. Hier werden grundlegende Punkte festgelegt, die letztendlich das Nutzererlebnis positiv beeinflussen sollen.

Wie sehen Wireframes aus?

Ein Wireframe ist sehr schlicht gehalten. Es geht beim Wireframing lediglich um die strukturelle Planung. Designelemente sind hingegen noch nicht gefragt. Ein einfaches Wireframe kann daher auch mit Stift und Papier skizziert werden. Alternativ gibt es verschiedene Software-Tools, mit denen man das Grundgerüst erstellen kann. Dabei werden aber ebenfalls nur Platzhalterelemente in verschiedenen Graustufen eingefügt.

Inhalte, Farben, Schriftarten, Bilder etc. sind im Wireframe noch nicht enthalten, da diese ablenken können. Stattdessen geht es darum, die generelle Anordnung von Elementen festzulegen, zum Beispiel:

  • Logo
  • Header
  • Suchfelder
  • Überschriften
  • Textfelder
  • Formulare
  • etc.

Welche Arten von Wireframes gibt es?

Es gibt zwei Arten, ein Wireframe anzulegen: das sogenannte Low-fidelity oder statische Wireframe und das High-fidelity oder dynamische Wireframe. Diese unterscheiden sich hauptsächlich durch die Ausarbeitung der Details und die Vollständigkeit der Abbildung.

Diese Formen bauen aufeinander auf. Ein statisches Wireframe wird genutzt, um grobe Strukturen festzulegen. Davon ausgehend, werden beim dynamischen Wireframe mehr Informationen integriert und Interaktionsmöglichkeiten dargestellt.

Low-fidelity (statische) Wireframes

Ein Low-fidelity Wireframe ist der erste Schritt bei der Planung einer Website. Bleibt man bei dem Architektur-Vergleich, handelt es sich bei dieser Form nur um die Planung der Räume und Anschlüsse.

Übertragen auf die Website bedeutet das, dass geplant wird, welche Elemente benötigt werden und wo diese platziert werden sollen. Dafür werden Platzhalterblöcke in das Wireframe eingefügt. Der Vorteil dieser Art liegt darin, dass schnell und kostengünstig wesentliche Aspekte des Aufbaus geklärt werden können.

High-fidelity (dynamische) Wireframes

Beim High-fidelity Wireframe werden dann erste Details – sozusagen die Inneneinrichtung – eingefügt. Diese Darstellung ist nicht mehr nur konzeptionell, sondern auch funktionell. Das heißt, man kann bereits mehrere Seiten miteinander verknüpfen und Interaktionsmöglichkeiten integrieren. Zudem kann man – wenn vorhanden – schon konkrete Inhalte einfügen.

Dieser Schritt wird in der Regel genutzt, um mithilfe von Klick-Dummies die grundsätzliche Navigation einer Website zu testen. Dadurch hat man schnell Gewissheit, ob ein Modul vollständig und logisch gedacht ist. Während dieser Konzeptionsphase kann man auftretende Fehler und Probleme schnell und einfach beheben, sodass man im weiteren Verlauf der Webentwicklung teure Kosten einsparen kann.

Die nächsten Schritte: Mockup und Prototyp

Das Wireframe bildet also die Grundlage für die Entwicklung einer Website. Weiter geht es im nächsten Schritt mit einem sogenannten Mockup. Anhand der im Wireframe vorgegebenen Struktur kann der Designer nun sein Design passend zu den Inhalten erstellen. Hier werden verschiedene Punkte für das Aussehen der Website festgelegt, zum Beispiel:

  • Schriftart
  • Schriftgröße
  • Farben
  • Bilder
  • Grafikelemente

Beim Mockup sieht man zum ersten Mal, wie die Website später einmal im Detail aussehen wird.

Noch einen Schritt weiter geht schließlich der Prototyp. Bei diesem steht die technische Umsetzung im Fokus. Zu diesem Zweck werden unter anderem mithilfe von HTML und CSS dynamische Inhalte erstellt, die Interaktionen ermöglichen. Das dient verschiedenen Punkten:

  • Nutzerfreundlichkeit und Navigation testen
  • Prüfen, ob Schnittstellen und Verlinkungen funktionieren
  • Schwachstellen entdecken und beheben

Wie werden Wireframes erstellt?

Noch bevor das Low-fidelity Wireframe erstellt wird, muss die wichtigste Frage beantwortet werden:

Was ist die Zielsetzung der Website?

Die Antwort auf diese Frage bestimmt, wie das Layout designt werden muss. Dieses sollte darauf ausgerichtet sein, die Zielsetzung positiv zu beeinflussen.

Das statische Wireframe kann man dann mit Stift und Papier kreieren, um eine erste Vorstellung über den Aufbau zu haben. Allerdings kann man auch Wireframing-Tools verwenden, bei denen Platzhalterelemente einfach eingefügt und an die gewünschte Stelle gezogen werden.

Spätestens beim umfangreicheren High-fidelity Wireframe ist ein solches Tool unumgänglich. Dafür stehen verschiedene Softwares zur Auswahl, unter anderem:

  • Adobe XD
  • Axure
  • Balsamiq
  • Sketch

Die einzelnen Tools bieten unterschiedliche Funktionen. Manche ermöglichen lediglich einfache Skizzen, während bei anderen komplexere Strukturen abgebildet oder dynamische Elemente eingebaut werden können. Die Wahl des Tools hängt also davon ab, was genau damit gemacht werden soll.

Warum arbeitet man mit Wireframes?

Wireframes werden genutzt, um auf einfache Art und Weise festzustellen, ob die inhaltlichen Elemente das richtige Storytelling vermitteln. Dabei spielt vor allem die Zusammenarbeit zwischen Webentwickler und Kunden – aber auch Webdesigner, SEO-Manager und anderen – eine große Rolle. Mithilfe eines Wireframes können die Informationen und Vorstellungen des Kunden gefiltert und in Form gebracht werden.

Die Klarheit der Wireframes macht die Entwicklung der Website übersichtlicher. Konzeptionelle Probleme kann man frühzeitig erkennen und beheben, Details kann man leichter besprechen und klären. So haben am Ende alle Beteiligten die gleiche Erwartung an die fertige Website.

Welche Vorteile bieten Wireframes?

Die genannten Punkte zeigen bereits auf, warum die Arbeit mit Wireframes bei der Erstellung von Websites sinnvoll ist. Darüber hinaus sind einige weitere Vorteile zu nennen:

  • Einzelne Arbeitsschritte sind zügig und effizient zu realisieren.
  • Die anschließende Adaptierung vom Wireframe zum passenden Screendesign ist wesentlich schneller.
  • Der Kunde kann sich besser auf die jeweiligen Spezifikationen konzentrieren. Dadurch gehen wichtige Informationen nicht verloren, denn der Kunde muss sich nicht zeitgleich auf Inhalte und Ästhetik konzentrieren.
  • Die Entwicklungskosten können durch ein finales Wireframe ohne Risiken vollumfänglich kalkuliert Ohne das Wireframe kann es zu Nachkalkulationen kommen: Es kommt häufig vor, dass Dinge doch aufwendiger sind in der Entwicklung, weil sie nicht im Detail durchgeplant wurden.

Wann kommen Wireframes zum Einsatz?

Bei der Entwicklung einer neuen Website oder einem komplexen Relaunch sollte man immer Wireframes benutzen. So kann man schnell wichtige Fragen klären und die Struktur festlegen. Auch bei kleineren Verbesserungen der User Experience auf der Website können Wireframes für die Planung genutzt werden.

Gleiches gilt für die Entwicklung von Apps oder Softwares. Dabei ist es ebenso sinnvoll, am Anfang Wireframes zu erstellen.

Fazit

Wireframes sind ein nützliches Tool in der Webentwicklung, da sie schnell zu erstellen, effizient und kostengünstig sind. Wenn Sie Unterstützung beim Aufbau einer neuen Website oder einem Relaunch benötigen, stehen wir Ihnen mit unserer Expertise gerne zur Seite. Wir besprechen ausführlich Ihre Vorstellungen und erstellen anhand dessen ein erstes Gerüst für Ihren Webauftritt. Nehmen Sie Kontakt zu uns auf – wir freuen uns auf Sie!

Bilder: Sigmund / Unsplash; Kelly Sikkema / Unsplash; Campaign Creators / Unsplash; Visual Design / Unsplash