Kontakt aufnehmen
Arne Chananewitz

Arne Chananewitz

Head of Search Engine
Optimization (SEO) Braunschweig
+49 531 213605527

    Ich stimme der Verwendung meiner Daten zur Bereitstellung der angeforderten Informationen zu.

    Wireframing

    Stand: 21.07.2022

    Das Wireframing bezeichnet die Visualisierung von grundlegenden Elementen und Konzepten bei der Erstellung und Gestaltung von Webseiten. Mithilfe eines Wireframes (deutsch: Drahtgerüst) können einzelne Teile der Informationsarchitektur, der Navigation und der Benutzerführung visuell dargestellt und evaluiert werden. Dabei liegt der Fokus innerhalb des Wireframing eindeutig auf dem Layout der Website, der Art und Gestaltung des Contents und der Steuerung von Webseitenbesuchern mithilfe von Links, Bild- und Textelementen oder Formularen. Die Wireframes lassen sich sowohl manuell als auch mithilfe spezifischer Tools entwickeln.

    Ziele des Wireframings

    Im Rahmen des Wireframings können Webseitenbetreiber die gesamte Webseitenstruktur in abstrahierter Form abbilden und so die Beziehungen und Wechselwirkungen zwischen einzelnen Elementen der Webseite analysieren und bewerten, ohne von Farben, Fonts und tatsächlichem Content irritiert zu werden. Während Mockups bereits Bilder, Grafiken, Farben und Fonts beinhalten, werden diese Komponenten in einem Wireframe von ihrer konkreten grafischen Darstellung abstrahiert.

    Mithilfe des Wireframings können Webseitenbetreiber die Gestaltung und Anordnung von Elementen, welche die direkte Interaktion zwischen Webseitenbesucher und Webseite maßgeblich beeinflussen, untersuchen und evaluieren. Darüber hinaus wird mithilfe von Wireframes definiert, welche Funktionen und Funktionalitäten den einzelnen Webseitenelementen zugeschrieben werden, um die Interaktion mit der Webseite zu steigern und eine möglichst hohe Usability der Webseite zu erreichen. Ausgehend vom User Centered Design wird dabei ein starker Fokus auf die Informationsstruktur und die Customer Journey gelegt. Um eine Webseite im Rahmen des Wireframings fundiert hinsichtlich ihrer Benutzerführung und Struktur bewerten und evaluieren zu können, sollte zunächst der Zweck der Webseite ausgehend von Geschäftsmodell und Zielsetzung definiert werden.

    Vorgehen und Funktionsweise

    Bei der Erstellung von Wireframes wird in der Regel ein Fokus auf die folgenden Bereiche gelegt: Das Designkonzept und das Layout, die einzelnen Webseitenelemente, die verschiedenen Arten und Beschaffenheiten des Contents und die Benutzerführung. Die Entwicklung und Definition eines umfassenden Layouts mitsamt allen grundlegenden Webseitenelementen wie Header, Body und Footer, Links und Formulare oder Text- und Bildelemente, welche die Beschaffenheit der einzelnen Inhalte und die Beeinflussung und Steuerung der Customer Journey berücksichtigt, dient der späteren Verknüpfung des grundlegenden Konzepts mit der finalen visuellen Gestaltung.

    Im Rahmen des Wireframing werden Inhalte abstrahiert, um die Informationsstruktur und die Proportionen hinsichtlich des Aufbaus der Webseite fundierter und ohne irritierende gestalterische Inhalte bewerten zu können: Text wird in der Regel als Lorem Ipsum eingefügt und Bilder und Grafiken werden schematisch durch Boxen oder Kästchen angedeutet. Auch die Verknüpfung der einzelnen Webseitenelemente hinsichtlich der Benutzerführung wird durch die Abstraktion der Inhalte erleichtert: Webseitenbetreiber bekommen einen fundierten Eindruck darüber, wie und in welchem Maße Webseitenbesucher mit der Seite interagieren und welche Nutzungsintentionen dabei vorliegen.

    Wireframes stellen keine absoluten und starren Konzeptionen dar, sondern bilden vielmehr dynamische Diskussionsgrundlagen. Webmaster und Webseitenbetreiber erhalten einen ersten visuellen Eindruck von der späteren finalen Webseite und können fundierte Entscheidungen bezüglich der Proportionen und Anordnung von Webseitenelementen treffen. Anschließend lassen sich auf Grundlage des Wireframes Mockups und Prototypen erstellen. Darüber hinaus können durch eine erste Visualisierung der grundlegenden Konzepte bisherige Zielsetzungen und Intentionen kritisch hinsichtlich ihrer Relevanz und Umsetzung rezipiert und eine stetige Weiterentwicklung und Verbesserung dieser Konzepte erreicht werden.

    Arten von Wireframes

    Wireframes lassen sich hinsichtlich ihrer Detailliertheit unterscheiden. Dabei wird grundlegend zwischen High- und Low-Fidelity-Wireframes differenziert.

    High-Fidelity-Wireframes zeichnen sich durch eine stärker visuelle und weniger abstrahierte Darstellung der Webseitenelemente aus. Webseitenbetreiber und Webmaster bekommen mithilfe von High-Fidelity-Wireframes einen detaillierteren Eindruck in die spätere Gestaltung der Webseite. Aufgrund der stärkeren Einbettung von Details ist die Erstellung von High-Fidelity-Wireframes weitaus aufwendiger.

    Low-Fidelity-Wireframes hingegen setzen auf eine starke Abstraktion von Elementen und Webseiteninhalten und orientieren sich stärker am Gedanken einer dynamischen Diskussionsgrundlage als an einem detailliierten Entwurf einer Webseite. Low-Fidelity-Wireframes lassen sich gewissermaßen als ersten grundständigen Schritt im Gestaltungsprozess betrachten, auf dessen Grundlage sowohl High-Fidelity-Wireframes entwickelt und Mockups und Prototypen erstellt werden können.

    Bedeutung für das Online Marketing

    Die Entwicklung von Wireframes unterstützt den fundierten und reflektierten Entwicklungsprozess einer finalen Webseite maßgeblich. Durch ein Wireframe als Diskussionsgrundlage lassen sich die Vorstellungen und Wünsche des Auftraggebers mit den technischen Umsetzungsmöglichkeiten und Rahmenbedingungen harmonisieren. Darüber hinaus lässt sich die Konzeption der finalen Webseite Schritt für Schritt nachvollziehen, sodass Fehlerquellen beseitigt und Änderungen und Optimierungen weit vor der Veröffentlichung der Webseite vorgenommen werden können. Darüber hinaus setzt das Wireframing einen eindeutigen Fokus auf die Usability der Webseite für den Webseitenbesucher und die kontrollierte Benutzerführung, welche beispielweise die Erreichung unternehmerischer Ziele gewährleistet.

    Arne Chananewitz
    Über den Autor
    Arne Chananewitz
    Arne Chananewitz ist Head of SEO der Löwenstark Online-Marketing GmbH. Als gelernter Fachinformatiker für Anwendungsentwicklung schlägt sein Herz für Blogs, SEO, Games und Hardware.

     

    Was versteht man unter Wireframe?

    Ein Wireframe für Webseiten ist ein Website-Layout-Schema, das es Designern ermöglicht, die Beziehungen zwischen allen Teilen nachzuvollziehen, aus denen eine komplette Webseite besteht. Dazu gehören Positionierung, Größe und Namen von Schlüsselelementen wie Ebenen, Funktionalität und Inhalt.

    Wie wird mit Wireframes dargestellt?

    Wireframes sind nicht nur statische Entwürfe, sondern interaktive Designs, die die Grundlage einer Website bilden. Durch die sorgfältige Platzierung jedes einzelnen Details im Rastersystem eines Wireframes an der richtigen Stelle schaffen Sie eine hierarchische Ordnung und einen visuell ansprechenden Fluss, der viele häufige Designfehler auf Websites verhindert. Dies führt schließlich zu Conversion-Rate-Optimierungen, die zu großem geschäftlichen Erfolg führen.

    Wie mache ich ein Wireframe?

    Ein Wireframe ist ein schematisches Diagramm einer Webseite, das normalerweise mit einem Vektorzeichenprogramm wie Adobe Illustrator, Inkscape oder Sketch erstellt wird. Wireframes werden verwendet, um das grundlegende Layout einer Webseite darzustellen. Sie können hilfreich sein, um die Hierarchie der Inhalte auf einer Seite zu entwerfen, zu entscheiden, wo Navigationselemente platziert werden sollen, und um festzustellen, wie viel Leerraum zwischen den verschiedenen Elementen auf der Seite erforderlich ist.

    Bei der Erstellung eines Wireframes ist es wichtig, die Grundsätze eines guten Webdesigns zu beachten. Zum Beispiel: Ihr Wireframe sollte auf einem Rastersystem basieren, Sie sollten Typografie und Abstände intelligent einsetzen, um visuellen Kontrast und Hierarchie zu schaffen, und Sie sollten immer zugänglichen HTML- und CSS-Code verwenden.

     

    Auch interessant:

     

    Ihr Kontakt zu uns
    Adresse
    Löwenstark Digital Group GmbH
    Petzvalstraße 38,
    38104 Braunschweig

      Jetzt Kontakt aufnehmen

      * Pflichtfeld
      Ich stimme der Verwendung meiner Daten zur Bereitstellung der angeforderten Informationen zu. Die Löwenstark Digital Group GmbH und verbundene Unternehmen können mich telefonisch, per E-Mail oder Post über Neuigkeiten zu Online-Marketing-Themen und Umfragen zur Kundenzufriedenheit informieren. Meine Kontaktdaten dürfen zu diesem Zweck an verbundene innerhalb der Unternehmensgruppe weitergegeben werden. Ich bin damit einverstanden, dass die Öffnungsrate von Mailings erfasst wird. Die Einwilligung kann jederzeit über den Abmeldelink im Mailing oder unter kontakt@loewenstark.com widerrufen werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.