Kontakt aufnehmen
Arne Chananewitz

Arne Chananewitz

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

    Ich habe die Datenschutzerklärung gelesen und erkläre mich damit einverstanden, dass die von mir im Kontaktformular eingegebenen Daten elektronisch erhoben und gespeichert werden.

    Wireframing

    Stand: 21.07.2022

    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.

    Ü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
    Löwenstark Digital Group GmbH
    Petzvalstraße 38,
    38104 Braunschweig

      Jetzt kostenlose Analyse anfordern

      * Pflichtfeld