Was ist ein Wireframe, wofür wird er im Webdesign benötigt und wie wird er erstellt?

Den Begriff Wireframe hat vermutlich jeder schon einmal gehört, der sich mit Websites bzw. Webdesign beschäftigt. Oft ist auch vom sogenannten Wireframing die Rede.

Dabei geht es im Grunde um nichts anderes, als Ideen visuell wiederzugeben und somit eine Art Grundgerüst zu gestalten. In Wahrheit ist die Sache dann aber natürlich doch etwas komplizierter und unterschiedliche Arten von Wireframes gibt es ebenfalls noch.

Grund genug für mich, einen Artikel darüber zu schreiben, was es mit dem Wireframing genau auf sich hat. Hier erfahrt ihr nun alles, was ihr wissen müsst, wenn ihr mit dem Begriff Wireframe bislang eher weniger anfangen konntet oder euch die Details dazu interessieren.

Was ist ein Wireframe?

Ein Wireframe (auf Deutsch Drahtgitter) ist im Grunde genommen die sehr einfache Anordnung einer Website. Dafür wird die ungefähre Struktur gemeinsam mit dem Interface und dem Kerndesign zusammengesetzt, um eine Art Mini-Demo zu schaffen. Ein Wireframe enthält in der Regel keine Farben und auch noch keine speziellen Schriften oder Feinheiten des finalen Designs. Es geht hier wirklich nur um das Grundgerüst.

In erster Linie dient ein Wireframe damit der ersten Anschauung. Mängel in Sachen Interface werden schnell deutlich und auch wenn die Nutzerführung nicht funktioniert, wird dies mit einem Wireframe sofort ersichtlich. Es hilft also ungemein beim Entscheidungsprozess einer Website, weil es die ersten Gedanken visualisiert, ohne aber zu stark in die Details einzutauchen oder das Gesamtbild mit Farben etc. zu verfälschen.

Das reine Drahtgitter wird oft auch dem Kunden gezeigt. Der kann anhand des Wireframes nämlich schon einmal sehen, wohin die Reise geht und wie die Interaktion auf seiner Website später funktionieren soll. Kunden bekommen allerdings meist sogenannte High-Fidelity Wireframes zu Gesicht, während intern Low-Fidelity Wireframes ausreichend sind. Mehr zu den Unterschieden erkläre ich euch später.

Ein Wireframe ist also ein extrem reduzierter Entwurf. Es ist eine Art Rohbau, ein Drahtgitter eben, welches den Kern der Sache darstellt. Es ist üblicherweise recht schmucklos, weil es wirklich nur um die Darstellung der Grundebene geht.

Warum ist ein Wireframe sinnvoll?

Stellt sich die Frage, warum man sich die Mühe machen sollte, in so einer frühen Phase überhaupt eine Art Prototyp zu entwickeln. Ganz einfach, denn ein Wireframe gibt die theoretischen Überlegungen vorab erstmals visuell wieder. Manchmal klingt etwas auf dem Papier fantastisch, doch kaum steht ein Wireframe, zeigt sich auf einmal, dass es so eben doch nicht funktioniert. Gerade in Sachen Benutzerführung spielt das Wireframe daher eine wichtige Rolle.

Für Kunden ist das High-Fidelity Wireframe von Bedeutung, weil es eine Art schicker Prototyp ist, der bereits einen Vorgeschmack liefert. Stört den Kunden an diesem Wireframe etwas, kann er es äußern, noch bevor die Details ausgearbeitet wurden und entsprechend viel Arbeitszeit hineingeflossen ist. Auch das macht ein Wireframe sinnvoll und wertvoll, um unnötige Mehrarbeit zu vermeiden.

Vor allem aber zeigt es Mängel jeglicher Form auf, die in der kreativen Phase vielleicht übersehen wurden. Ganz grob gesagt, verdeutlicht das Wireframe daher die Idee der entsprechenden Website. Es zeigt in reduzierter Form und als erster Entwurf, worum es geht und wie das Ziel in seinen Grundzügen funktionieren wird. Das ist wichtig, damit jeder weiß, in welche Richtung man sich bewegt.

Was sind Low-Fidelity oder High-Fidelity Wireframes?

Unterschiede bei einem Wireframe sind durchaus vorhanden, gerade weil der Übergang zum Prototyp etc. heutzutage recht fließend ist. Wireframing kann also auch weitaus mehr sein, als nur ein Drahtgitter. Im Klartext wird zwischen einem Low-Fidelity und einem High-Fidelity Wireframe unterschieden.

Das Low-Fidelity Wireframe ist simpel und vor allem statisch. Hier kann nicht geklickt werden, es zeigt keine Animationen oder sonstige Spielereien. Es ist mit einer Bleistiftskizze vergleichbar, die auf Papier gezeichnet wird. Sie kann viele Details enthalten, bleibt aber immer einfarbig und ohne Dynamik. Es ist nur eine Zeichnung.

Das High-Fidelity Wireframe gleicht einem Prototypen. Hier ist Dynamik im Spiel. Menüs lassen sich bereits öffnen, Buttons haben Animationen, Schrift und Farben sind ebenfalls oft vorhanden. Im Grunde ist das High-Fidelity Wireframe also wirklich eine Art Prototyp, der schon weit mehr zeigt, als nur den groben Entwurf.

Mit welchen Tools werden Wireframes erstellt?

In meiner Arbeit stolpere ich immer wieder über zwei Vertreter, wenn es um Wireframes geht. Adobe XD wird von vielen Designern und Entwicklern genutzt, um High-Fidelity Wireframes zu erzeugen. Hier ist vieles möglich, sodass Menüs bereits animiert sind und eben eine Art Prototyp zusammengebaut werden kann.

Auf der anderen Seite ist da Balsamiq. Ein Tool, welches für sogenannte Low-Fidelity Wireframes Verwendung findet. Es erstellt extrem simple, komplett statische Wireframes, die wirklich einem Drahtgitter gleichen. Sehr gut, um den tatsächlichen Kern der Sache visuell darzustellen. Weniger geeignet, um einen potenziellen Kunden damit zu beeindrucken.

Da wären wir dann auch gleich am Knackpunkt der Sache. Wireframes sind oft nicht mehr das, was sie eigentlich sein sollten. Meist werden die Wireframes, denen wir heutzutage begegnen, zu regelrechten Prototypen ausgebaut, die schon sehr funktionsfähig sind und eine visuelle, nicht nur die funktionelle Idee zeigen. Statische High-Fidelity Wireframes hingegen sind selten geworden und eher etwas, was intern oder für einen selbst Sinn macht, nicht aber, um es jemanden zu präsentieren.

Wer braucht eigentlich einen Wireframe?

Ist das nicht deutlich geworden? Für jede Website und jede App macht es Sinn, einen Wireframe zu erstellen. Der zeigt Grundmuster auf, stellt Navigationsgrößen dar, präsentiert den Flow, den das Endergebnis am Ende haben wird. Nur wer seine Ideen visuell darstellt, erkennt Ungereimtheiten. Wer sie ohne Wireframe umsetzt, investiert oft viel Zeit und Arbeit, bevor dann plötzlich klar wird, wo die Probleme liegen.

Wireframes sind also wichtig und nützlich, um während der Projektphasen Mängel und Schwierigkeiten zu erkennen. Wer z.B. als Webdesigner für Kunden arbeitet, kann diesen mit einem Wireframe präsentieren, wohin die Reise gehen soll. Dementsprechend können sie bereits Feedback geben, nach welchem dann wiederum Anpassungen vorgenommen werden können.

Am Ende sind Wireframes und das ist gar nicht schlecht zu wissen, heutzutage aber eben meist schon funktionierende Prototypen. Dank Adobe XD ist dies so einfach wie niemals zuvor. Statische, sehr rudimentäre Wireframes hingegen sind etwas, was meist nur noch intern und für die eigene Entwicklung erstellt wird.