Carsten Schurig

Geschäftsführer
+49 531 213605500

kostenlose Beratung

    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.

    Kostenlose Beratung

    Wireframing

    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.

     

    Auch interessant:
    Anfrage & Kontakt
    Petzvalstraße 38,
    38104 Braunschweig
    Braunschweig
    Petzvalstraße 38,
    38104 Braunschweig
    Leipzig
    Täubchenweg 8,
    04317 Leipzig
    Berlin
    Karl-Marx-Allee 91a,
    10243 Berlin
    Halle (Saale)
    Mansfelder Str. 56,
    06108 Halle (Saale)
    München
    Max-Planck-Str. 10,
    85716 Unterschleißheim
    Mainz
    Am alten Weg 2,
    55127 Mainz
    Köln
    Karlheinz-Steimel-Weg 15,
    50969 Köln
    Bielefeld
    Westheermannstr. 9,
    33332 Gütersloh
    Zürich
    Hardturmstrasse 161,
    CH-8005 Zürich
    Wien
    Mooslackengasse 17,
    A-1190 Wien
    Alle Standorte
    Jetzt unverbindlich anfragen

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