Was ist … Lexikon: Wireframe

Ein Wireframe ist ein Gitter, das der Webdesigner in der Planungsphase über eine Webseite legt, um zu defi­nie­ren, in wel­chem Planquadrat sich unter­schied­li­che Bereiche einer Website befin­den. Durch einen Wireframe glie­dert man so Bereiche mit Text und sol­che mit Abbildungen. Mit Hilfe von Wireframes wer­den auch die Areale auf Webseiten defi­niert, die die meis­te Aufmerksamkeit des Betrachters oder Lesers bekom­men sol­len. Wichtige Bereiche sind des­halb grö­ßer.

Ein Wireframe wird zur grund­le­gen­den Strukturierung einer Webseite ein­ge­setzt und unter­glie­dert eine Internetseite unab­hän­gig von Grafiken oder Farben.

Die ursprüngliche Bedeutung

Im eigent­li­chen Sinne han­delt es sich bei einem Wireframe um ein Drahtgitter, das die Konturen bestimmt. Ursprünglich ging es dar­um, mit Hilfe einer Drahtfigur als Schneiderpuppe Formen anzu­pas­sen. Heute hat man den Begriff auf das Internet über­tra­gen. Das CAD Computer Aided Design war das ers­te, das mit Hilfslinien arbei­te­te, um drei­di­men­sio­na­le Objekte mit­tels eines Wireframes dar­zu­stel­len.

Der Wireframe in der Website-Erstellung

Heute wird Wireframe als Begriff vor­wie­gend bei der Konzeption und Gestaltung von Webseiten ver­wen­det. Als Wireframe oder Mock-up wer­den Entwürfe von Internetseiten in der Entwicklungsphase bezeich­net. Bevor die eigent­li­chen Inhalte ein­ge­stellt wer­den, wird mit Hilfe von Wireframes die Struktur der Webseite defi­niert. Dazu gehö­ren bestimm­te Inhaltsbereiche eben­so wie Navigationselemente, Logos, Suchfunktionen, Fußnoten, Menüleisten und vie­les mehr. Technisch unter­schei­det man zwei unter­schied­li­che Arten von Wireframes: den sta­ti­schen und den dyna­mi­schen. Wie unter­schei­den sich die­se?

Der statische Wireframe

Als sta­ti­schen Wireframe bezeich­net man einen Erstentwurf einer Webseite, der grund­le­gend defi­niert, wel­che Elemente auf der Webseite ent­hal­ten sein sol­len. Hierbei han­delt es sich um ein rudi­men­tä­res, kon­zep­tio­nel­les Schema. Inhalte und Design spie­len in die­ser Phase noch kei­ne Rolle.

Der dynamische Wireframe

Anders ist dies beim dyna­mi­schen Wireframe. Hierbei besteht der Entwurf bereits aus meh­re­ren Seiten, die auch schon in eine hier­ar­chi­sche Ordnung gebracht wur­den. Die Verknüpfung zwi­schen den Seiten funk­tio­niert bereits, so dass Funktionen wie bei­spiels­wei­se Suche oder Navigation schon getes­tet und über­prüft wer­den kön­nen. Ein so genann­ter Navigationsbaum oder ein Flussdiagramm geben Aufschluss über die Organisationsstruktur der Webseiten.

Dennoch befin­den wir uns auch bei dyna­mi­schen Wireframes immer noch in der Konzeptionsphase. Das Design spielt ledig­lich eine unter­ge­ord­ne­te Rolle. Einzelne gra­fi­sche Elemente wer­den nur ver­ein­facht dar­ge­stellt, da es ledig­lich um die grund­le­gen­de Gliederung eines Internetauftritts und sei­ner Websites geht.

Was kommt nach dem Wireframe?

Hat man sich auf die Struktur einer Webseite ver­stän­digt und will die­se über­neh­men, wer­den die Wireframes wei­ter bear­bei­tet. Nun wer­den Logos ein­ge­bun­den, das Design ent­wor­fen, Inhalte for­mu­liert und Farben fest­ge­legt. In einem ers­ten Schritt ver­wen­det der Webdesigner für den Entwurf in der Regel nur Graustufen. Sie rei­chen aus, um Wahrnehmungsreihenfolgen zu tes­ten und gezielt Akzente zu set­zen. Textabschnitte wer­den mit den berühm­ten Lorem ipsum Passagen ver­se­hen, um zu demons­trie­ren, wie die fer­ti­ge Seite spä­ter aus­sieht.

Vorteile

Wireframes haben vie­le Vorzüge. Zum einen erleich­tern sie es dem Webdesigner, Webseiten zu struk­tu­rie­ren. Andererseits bie­ten sie durch ihre Abstraktion gera­de auch dem Laien eine gute Vorstellung davon, was wo auf einer Webseite ste­hen soll und wel­che Inhalte mit wel­chen ande­ren ver­knüpft wer­den sol­len.

Bei einem Webauftritt mit vie­len Unterseiten wird die Struktur ansons­ten näm­lich sehr kom­plex und unüber­sicht­lich, so dass es schwer fällt, die Konzeption klar und ver­ständ­lich zu hal­ten. Da dies dem Leser oder Internetbesucher eben­so ergeht, ist die Phase der Konzeption und Strukturgebung beson­ders wich­tig. Wireframes sind das wich­tigs­te Abstraktions-Hilfsmittel bei der Gestaltung von Webseiten. Sie sind selbst­er­klä­rend und set­zen kei­ner­lei tech­ni­sches Verständnis vor­aus.

Für den Webdesigner bedeu­tet dies eine enor­me Zeitersparnis. Im Unterschied zum tra­di­tio­nel­len Layout kann er nun in frü­her Phase bereits Änderungen ohne gro­ßen Aufwand vor­neh­men. Er kann auch viel leich­ter unter­schied­li­che Entwürfe einer Webseite anfer­ti­gen. Auf Kundenseite sorgt die Anschaulichkeit der Wireframes dafür, dass Entscheidungen bezüg­lich des Layouts und Designs siche­rer und schnel­ler getrof­fen wer­den. Aufwändige Fehlplanungen wer­den ver­mie­den und spa­ren nicht nur Planungs- und Abstimmungszeit, son­dern auch hohe Kosten ein.

Sicherheit für den Webdesigner

Für den Webdesigner bedeu­tet dies auch, dass er viel häu­fi­ger Abstimmungen mit dem Auftraggeber vor­neh­men kann. Damit ist das Risiko, in eine fal­sche Richtung zu pla­nen, fast aus­ge­schlos­sen. Der Planungsprozess geht zudem sehr viel schnel­ler in einen kon­kre­ten Layoutprozess über. Projekte kön­nen so in kür­ze­rer Zeit abge­wi­ckelt und fer­tig­ge­stellt wer­den.

Nachteile

Einen ein­zi­gen Nachteil haben Wireframes: Aufgrund der Darstellung inner­halb eines Planungsgitters wird man häu­fig dazu ver­lei­tet, in Kästchen zu den­ken. Für die Grundstruktur und den Entwurf einer Webseite ist dies abso­lut not­wen­dig. Danach aber muss man wie­der­um den Blick auf das Ganze len­ken und die ein­zel­nen Bereiche zu einer opti­schen und inhalt­li­chen Einheit füh­ren.

Kunden haben zudem die Eigenschaft, sich bei Wireframes häu­fig mit Kleinigkeiten auf­zu­hal­ten, die den Planungsprozess ver­zö­gerrn. Dies ist aber auch bei dem klas­si­schen Layout der Fall und inso­fern kein Argument, das gegen Wireframes spricht. Wer ein­mal mit Wireframes gear­bei­tet hat, egal, ob als Webdesigner oder auf Kundenseite, wird sie nicht mehr mis­sen wol­len.