Schnell in den Block gescribbelt oder aufwändig am Rechner gesetzt – Wireframes erleichtern unseren Alltag als Strategen und Gestalter. Eine rasche Skizze mit Erklärungen wie „Hier das Bild, hier der Text, hier noch ein Call-to-Action“ und schon schafft man eine Diskussionsgrundlage in einer Besprechung oder eine klare Handlungsanweisung im Gestaltungsprozess. Doch fangen wir von vorne an.
Gleich zu Beginn: Wireframes sind kein gestaltetes Design, sondern Funktionslayouts. Sie sind Bestandteil der Konzeption und dienen dazu die Aufteilung von Informationen und Elementen schnell und effektiv zu visualisieren. Mit ihnen können Menüstruktur, Inhalte der Seite, mögliche Funktionalitäten oder abstrakte Ideen kurz und knackig dargestellt und verstanden werden.
Wireframes wirken im ersten Moment vielleicht etwas grob, jedoch sind sie ein perfektes Tool, um auf verständliche Art und Weise den Aufbau einer Website zu planen und zu koordinieren. Welche Inhalte müssen z. B. pro Seite generiert werden und wer übernimmt diese Aufgabe? Sie helfen uns in der internen Abstimmung des Konzepts, bei der Präsentation, bei der Argumentation vor dem Kunden, aber auch als Re-Briefing, um Kundenwünsche festzuhalten. Würde man im Prozess erst mit dem Design beginnen, bestünde die Gefahr den Fokus aus den Augen zu verlieren. Auch, wenn die Gestaltung vielleicht vieles kaschieren kann, ergibt sie zusammen mit einer soliden Konzeption und guten Inhalten ein unschlagbares Trio, welches auch Ihre Kunde bemerken werden. Denn, was nützt mir die schönste Gestaltung, wenn ich meinen Inhalt vernachlässige. Eine solche Mogelpackung ist sehr schnell entlarvt und garantiert nicht vertrauensbildend.
Mit Hilfe von dynamischen Wireframes, die man beispielsweise in Adobe XD oder vergleichbarer Software erstellen kann, lässt sich die Funktionalität am Gerät auch gleich erproben. So können im Vorfeld Platzierungen von Buttons, die Informationsverteilung oder ganz einfach die Bedienbarkeit am jeweiligen Endgerät (Smartphone, Tablet oder Desktop) getestet werden. Mögliche Defizite können somit schon vor dem eigentlichen Designprozess beseitigt werden.
Ist ein Website-Konzept freigeben, erfolgt im Anschluss das Design. Hierbei unterstützen mich die Wireframes als Gestalter, da mir schon ein grobes Gerüst, also ein Raster, vorgegeben ist. Dieses gilt es nun nach Kundenwünschen und -vorgaben zu gestalten, um das ideale Ergebnis ans Tageslicht zu befördern.
Wireframes sind im Vergleich zu einem Design schnell angelegt. Mit ihnen können die Inhalte einer Website gesondert von der Gestaltung betrachtet werden. Bei größeren Webprojekten sind sie im Vorfeld unabdingbare Bestandteile des Prozesses, um endlose Korrekturschleifen im Nachgang zu vermeiden. Sie dienen dazu, dass man sich bereits im Vorfeld mit dem wichtigsten Bestandteil, dem Inhalt, auseinandersetzt. Denn wie der bekannte Webdesigner Jeffrey Zeldman so schön sagte: „Design setzt Inhalt voraus. Design ohne Inhalt ist kein Design, sondern Dekoration.“.
Übrigens sind Wireframes nicht nur für Websites von Vorteil. Als Funktionslayout können sie auch sämtliche Nutzeroberflächen und Screens, die es zu gestalten gibt, konzipieren. Die Bandbreite geht vom Küchengeräte- bis hin zum Touchdisplay im Auto. Sämtliche digitale Oberflächen, die ein Mensch bedient, können mit diesem Tool geplant werden.
Bildnachweis:
Bild-Nummer: von maicasaa, von Korrawin – stock.adobe.com
