Vor der technischen Realisierung eines neuen Internetauftritts oder gar der Bearbeitung optischer Feinheiten gilt es die Projektschritte von Grund auf möglichst effizient abzustimmen. Das erfolgt in aller Regel mithilfe von sogenannten Wireframes. Erfahren Sie in diesem Beitrag, wie und wofür genau Wireframes eingesetzt werden und welche Tools sich besonders eignen, diese umzusetzen.
Was sind Wireframes?
Der Begriff „Wireframe“ beschreibt einen frühen konzeptionellen Entwurf einer Webseite. Dieser zeigt vor allem die Positionierung und Anordnung einzelner Elemente des Internetauftritts und weniger die konkrete Gestaltung jener.
Häufig werden Wireframes schon in der Konzeptionsphase verwendet. Mit ihrer Hilfe lassen sich die Inhaltsstrukturen einzelner Pages visualisieren.
Eines der Hauptargumente für die Verwendung von mehr oder weniger detaillierten Wireframes als Designbasis ist in folgender Tatsache zu finden: Auch noch so gut ausgewählte Farben, Typografien etc. bzw. strategisch präzise abgestimmte Inhalte in Text, Bild, Video usw. können letztendlich niemals ihr volles Potenzial entfalten, wenn Benutzer nicht wissen, wie sie all diese Vorteile auf einer Webseite in Anspruch nehmen können, sprich die Usability unvorteilhaft ist. Unter anderem kann genau dieses potenzielle Problem über eine hinreichende Abwägung anhand von einfachen, schnell erstellten Wireframes ausgeschlossen werden. Buttons, Links oder sonstige Interaktionsmöglichkeit müssen zielgruppengerecht ausgerichtet werden und möglichst auch von Personen, die keine Vorkenntnisse besitzen, klar erkennbar sowie intuitiv benutzbar sein - auch wenn sie nicht grell blinken oder sich in irgendeiner anderen Weise deutlich rein optisch abheben. Wireframes sind der ökonomische Weg zu diesem Ziel.
Warum Wireframes?
Bei Wireframes geht es vornehmlich um die Inhalte einer Webseite bzw. deren Anordnung. Damit bieten diese beste Voraussetzungen, die erfolgsentscheidenden inhaltlichen Aspekte eines Internetauftritts zu besprechen, bevor über spezielle Design-Merkmale diskutiert wird.
Insbesondere die Usability von Webseiten, die einen hohen Interaktionsgrad intendieren, wie Onlineshops, Landingpages oder auch Startseiten, profitiert von einer Ausrichtung mittels Wireframes. Sie richten den Fokus im Prozess des Webdesigns zunächst auf das Wesentliche, also auf die grundsätzlichen Strukturen und Funktionen. In diesem Zusammenhang gilt es folgende Fragen zu beantworten: Welche Inhalte werden schließlich auf der Page geboten bzw. wo sind diese zu platzieren? Welche Funktionen, wie Buttons, Drop-outs oder vielleicht sogar aufwendigere Webanwendungen, sollen schließlich zur Verfügung stehen?
Ziel ist es, die Seitenstruktur möglichst frei von rein visuellen Einflüssen zu erarbeiten. Im Zentrum steht hier vor allem die Usability. Per Wireframes lassen sich sehr schnell und unkompliziert verschiedene Layout-Varianten generieren sowie ausprobieren – und das bevor mehr oder weniger aufwendige Designs ins Blaue erstellt werden, die so letztendlich vielleicht gar nicht funktionieren.
Wie erstellt man Wireframes?
Die Erstellung von Wireframes ist kein Hexenwerk und es bedarf hier tatsächlich keiner umfangreichen Kenntnisse im Webdesign. Wie so oft gilt: Einfach anfangen. Professionelle Webdesigner gehen selbstverständlich sehr viel differenzierter vor. Die Beantwortung folgender Fragen legen jene der Umsetzung von Wireframes immer zugrunde:
• Welche Ziele verfolgt das Unternehmen mit dem Internetauftritt?
• Welches Ziele verfolgen die typischen Nutzer der Webseite?
• Was soll der Benutzer auf der betreffenden Page tun – wozu soll er veranlasst werden?
• Was soll dem User als erstes ins Auge fallen, wenn jener auf die Seite gelangt?
• Welche Standardelemente, wie Logo, Menü etc., müssen wo hin?
• Sind Handlungsaufforderungen, sogenannte Call-to-Actions zu integrieren - und wenn ja, wo?
• Wie sollen die Inhaltsbereiche strukturiert werden?
Wireframes haben viele Vorteile aber auch Grenzen
Wireframes stellen die Strukturen und Funktionen vor das Design. Fehlplanungen mit schwerwiegenden Konsequenzen und viel unnütze Arbeit können mithilfe von Wireframes praktisch ausgeschlossen werden.
Durch den Einsatz von Wireframes entsteht zwischen der Konzeption der Webseite samt Zielen, Zielgruppen sowie Inhalten und dem vollkommen ausgearbeiteten Design kein Leerraum, der erst mit der Präsentation des fertigen Entwurfs beendet wird. Detailliert ausgearbeitete und mit Kunden und/oder eben unternehmensintern abgestimmte Wireframes halten alle Beteiligten auf dem Laufenden und verhindern böse Überraschungen, die bei der Beurteilung eines nicht rückgesprochenen Designs keine Seltenheit sind.
Es kommt jedoch auf den individuellen Arbeitsprozess und/oder die jeweiligen Projektvoraussetzungen an, wie sinnvoll der Einsatz von Wireframes wirklich ist. So sind bei Vorhaben, die vollkommen von Null beginnen, in der Regel detaillierter ausgearbeitete Wireframes erforderlich und bei solchen, die bereits viele Inhalte vorgeben, deutlich weniger präzise. In letzterem Kontext kann Content direkt im Wireframe eingebaut werden, sodass sich die verfügbaren Räume, betreffende Funktionalitäten usw. recht schnell beurteilen lassen. Wenn auch die Abstimmung in einem derartigen Fall weniger Aufwand bedeutet, ist die Erstellung entsprechender Wireframes jedoch umso komplizierter. Unter Umständen ist der Aufwand hier sogar dermaßen groß, dass es sich gar nicht mehr lohnt, Wireframes zu generieren, sondern direkte an die Umsetzung im Frontend gegangen werden kann.
Faktisch sprechen gar nicht wenige Experten aus den genannten Gründen schon vom Ende der Wireframes. Wenn das auch etwas weit gegriffen erscheint, steht immerhin fest, dass Wireframes für einen modernen, agilen Entwicklungsprozess nicht zwangsläufig hilfreich sind.
Mithilfe von interaktiven Prototypen kann in einem flexiblen Prozess, zu dessen Beginn einzelne Inhalte, Anordnungen und Funktionen eben noch nicht genau festzulegen sind, oft effektiver gearbeitet werden. Auch hier erweisen sich zumindest sogenannte Low-Fidelity-Wireframes, also ein promptes, sehr einfaches Skizzieren der Pages, in der Regel als sinnvoll. Ob daraufhin noch High-Fidelity-Wireframes erstellt werden sollten, hängt vom jeweiligen Webdesign-Prozess ab.
Wireframes im Webdesign – ein Überblick
Wann empfiehlt es sich, Wireframes einzusetzen?
Webdesign und UX-Design sind ein Prozess der Findung des perfekten Ergebnisses für die jeweiligen Anforderungen. Wireframing kann hier sehr hilfreich sein, da es eine Brücke zwischen Konzeption und Design mit technischer Umsetzung schlägt, die es ermöglicht, sehr effizient zum optimalen Resultat zu gelangen. Wireframes können demnach praktisch immer dann zuträglich eingesetzt werden, wenn das gewünschte Ergebnis oder auch Teile davon unklar sind.
Wo liegen die zentralen Vorteile von Wireframes?
Mittels Fokus auf die funktionalen Strukturen - ohne rein gestalterische Merkmale zu berücksichtigen – kann der Aufbau einer Webseite objektiver beurteilt werden. Letztendlich lässt sich so im Projektverlauf viel Zeit sparen, da Design und Technik durch Wireframes ein stabiles Fundament erhalten. Ein noch mächtigeres Instrument können sie in Kombination mit Moodboards oder Stylescapes darstellen.
Sind Tools zur Erstellung von Wireframes sinnvoll?
Einfache Wireframes lassen sich durchaus sehr gut mit Stift und Papier erstellen. Für Fortgeschrittene bieten sich Online-Werkzeuge, wie Axure, Balsamiq Mockup oder wireframe.cc., an. Mithilfe einer klassischen Grafik-Software, wie Photoshop, Sketch, XD oder Illustrator, lassen sich Wireframes ebenfalls gut erstellen.