Mit Wireframing Kosten und Zeit sparen
Ob neues Produkt oder Weiterentwicklung eines bestehenden Produktes: Ohne eine solide Produktstrategie werden Sie Ihre Ziele selten erreichen. Die 4 W´s (WAS, WANN, WARUM & WIE) über Wireframes im UX Prozess.
Wir helfen Ihnen den Mehrwert von Wireframes zu verstehen.
Wer die Konzeption einer Website oder Softwaresystems schon einmal begleitet hat, dem wird sehr wahrscheinlich das Wort „Wireframe“ zu Ohren gekommen sein. Die genaue Bedeutung und welchen Mehrwert ein Wireframe bringt, wollen wir heute genauer durchleuchten.
Was ist ein Wireframe?
Das Wort „Wireframe“ bedeutet übersetzt soviel wie „Drahtgerüst“. Analog zu einem Bauplan, der alle wichtigen Anforderungen und Restriktionen beim Hausbau festlegt, funktioniert ein Wireframe als „Gerüst“ oder Plan bei der Entwicklung eines digitalen Produkts. Ein Wireframe ist die schematische Darstellung einer Website / eines Online-Shops / eines Online-Portals usw., in dem alle wichtigen Elemente, Funktionen, Conversion- und Navigationsbereiche dargestellt und platziert werden. Damit der Fokus auf dem Inhalt und dessen Funktionsweise liegt, wird bewusst auf die visuelle Gestaltung, wie z. B. Farb- und Formensprache verzichtet.
Wann werden Wireframes verwendet?
Wireframes helfen besonders bei der Planung und Strukturierung von umfangreichen und komplexen digitalen Produkten (hier am Beispiel von SESAM). Zeitlich betrachtet ist deren Erstellung vor allem zu Beginn eines Projektes sinnvoll, wenn das Konzept für die unterschiedlichen Seiten entwickelt wird.
Warum sind Wireframes so nützlich?
Struktur
Relevante Elemente werden definiert, Ideen konkretisiert und alle Seiten und Bereiche strukturell aufgebaut. Mit dessen Hilfe kann man sich ein gutes Bild über die Vollständigkeit der Inhalte verschaffen und den ersten Eindruck für Inhalt und Funktion bekommen.
Fokus
Da Fragen nach Formen, Farben und Texten in einem späteren Schritt thematisiert werden, helfen Wireframes dabei, den Fokus gezielt auf die Funktionalität, Struktur und Usability eines Produktes zu legen.
Abstimmung
Durch die visuelle Darstellung der Konzeptideen können Inhalte einfach im Team diskutiert oder dem Kund:innen präsentiert sowie erklärt werden, sodass alle Beteiligten ein gutes Gespür für die Idee dahinter bekommen.
Effizienz
Es wird Zeit gespart, da man sich auf das Wesentliche konzertiert. So ist es für die Konzepte und Kund:innen leichter den nötigen Fokus zu setzen. Außerdem ist man hinterher in der Anpassung flexibler, da man “nur” Boxen umändert.
Interaktionen
Durch die Weiterentwicklung von Low-Fidelity Wireframes lässt sich die Verhaltensweise von Elementen (wie z.B. der Navigationsbar, Buttons, usw.) bestimmen und die Interaktionen können definiert werden.
Tests
Mit Hilfe von Wireframes lassen sich die Verständlichkeit, die Einfachheit und die Usability eines Systems ganz leicht testen. Punkte, die in der Konzeptions-Phase schon Fragezeichen aufgeworfen haben, werden meist durch das Design nicht besser verstanden.
Wie geht man bei der Wireframe-Erstellung vor?
Es gibt eine Vielzahl an unterschiedlichen Wireframe-Tools, wie Figma, Adobe XD, Miro, Sketch usw. Sie haben alle ihre Vor- und Nachteile, am Besten probiert man einige aus und wählt dann eines, das einem am Meisten liegt.
Eine gut durchdachte Informationsarchitektur ist das A und O. Sie befasst sich mit der Organisation und Strukturierung von Inhalten und legt wichtige Navigationspfade zwischen den Seiten fest. Bei der Erstellung sollte man sich fragen, wozu die Website generell dient, welche Seiten benötigt werden, worum es den einzelnen Seiten / Bereichen geht und wohin man von dort gelangt.
Aus der Informationsarchitektur können nun einzelne Bausteine pro Seite abgeleitet werden. Dabei geht es nicht darum, die Einzelheiten zu definieren, sondern, vielmehr grob festzulegen, welche Elemente auf jeder Seite dargestellt werden sollen.
Es kann sehr hilfreich sein, direkt zu Beginn ein Raster zu definieren, auf dem sich das gesamte Layout aufbaut. Ein Raster ist eine Richtlinie, die innerhalb eines Layouts Struktur und Ordnung schafft. Besonders bei der Adaption des Designs kann dadurch viel Arbeit eingespart werden.
Es kann sehr hilfreich sein, direkt zu Beginn ein Raster zu definieren, auf dem sich das gesamte Layout aufbaut. Ein Raster ist eine Richtlinie, die innerhalb eines Layouts Struktur und Ordnung schafft. Besonders bei der Adaption des Designs kann dadurch viel Arbeit eingespart werden.
Nachdem jeder Baustein seinen Platz gefunden hat, können die einzelnen Bereiche verfeinert werden. Die Elemente, die bisher durch einen Platzhalter dargestellt wurden, können nun in ihren eigenen Bestandteil ersetzt werden.
Um den Abstraktionsgrad der Wireframes zu verringern, kann man verschiedene Grauabstufungen definieren und die einzelnen Bausteine einfärben. So kann man das visuelle Gewicht der Elemente bestimmen, ohne sich direkt Gedanken um das konkrete Design machen zu müssen.
Dieser letzte Schritt ist optimal, vereinfacht jedoch den Sprung auf das Design. Man kann weitere Details hinzufügen, um das Gesamtbild der Wireframes zu verfeinern. Beispielsweise können die Platzhalter-Texte durch die Originalen ersetzt werden oder man kann versuchen, die optimale Schriftgröße für Überschriften und Fließtexte zu bestimmen.
Ein Wireframe – agil, effizient, und kostengünstig
Auf den ersten Blick klingt die Erstellung von Wireframes etwas aufwendig. Es lohnt sich aber zu Beginn des Projekts Zeit in den strukturellen „Bauplan“ zu stecken. Das ist Zeit, die sich im Laufe des Projekts bezahlt macht. Anhand eines leicht modifizierbaren Wireframes können strukturelle Probleme in der Seitenarchitektur frühzeitig aufgedeckt und behoben werden. Gleichzeitig können neue Ideen und Bedürfnisse schnell adaptiert werden.
Durch die Erstellung von Wireframe-Prototypen, im nächsten Schritt, lässt sich das Seitenschema auch interaktiv an Nutzern testen und verbessern.
Im anschließenden Branding verschiebt sich der Fokus dann von der Funktionalität hin zum Design. Da die Struktur bereits feststeht kann sich im nächsten Schritt allein auf Farben, Formen und Typografie konzentriert werden. Der Prozess wird agiler, effizienter und damit auch kostengünstiger.
Fazit
Wireframes sind der perfekte Startpunkt für jedes digitale Projekt. Sie sparen nicht nur Zeit und Kosten, sondern sorgen auch dafür, dass der Fokus auf das Wesentliche – Funktionalität und Nutzererlebnis – gelegt wird. Mit einer klaren Struktur und effizienter Abstimmung bist du Sie bestens gerüstet, um komplexe Projekte erfolgreich und zielgerichtet umzusetzen.
