Wer sich mit Webdesign auseinandersetzt, kommt fast zwangsläufig mit dem Begriff Wireframe in Berührung. In diesem Artikel erklären wir, was hinter diesem Ausdruck steckt und warum Wireframes für ein überzeugendes Design so wichtig sind.

Von Antje Mädler

Wire­frame – Draht­ge­rüst – das klingt zunächst nicht nach Digi­ta­ler Kom­mu­ni­ka­tion. Tat­säch­lich wurde der Begriff ursprüng­lich als Bezeich­nung für eine ein­fa­che Schnei­der­puppe aus Draht ver­wen­det, mit deren Hilfe Klei­dungs­stü­cke für vor­ge­ge­bene For­men und Grö­ßen ange­legt wur­den. Genauso ver­hält es sich heute im Web­de­sign: Ein Wire­frame ist das Grund­ge­rüst für den Ent­wurf einer Website.

Wie beim his­to­ri­schen Vor­bild spie­len beim Auf­bau eines Wire­frames gestal­te­ri­sche Ele­mente noch keine Rolle. In die­sem frü­hen Sta­dium geht es darum, die Ana­to­mie einer geplan­ten Web­site fest­zu­le­gen und auf ihre Funk­tio­na­li­tät zu prü­fen. Die­sem Schritt kommt also im Gestal­tungs­pro­zess eine beson­dere Wich­tig­keit zu. Oft wird als Syn­onym zum Wire­frame auch der Begriff Mockup ver­wen­det. Eigent­lich bezeich­net die­ser Aus­druck jedoch ein optisch ver­fei­ner­tes Modell, das schon eine Ver­sion des ange­streb­ten Designs zeigt.

Inter­ak­tive Wire­frames, soge­nannte Klick-Dummies, ermög­li­chen zusätz­lich die Simu­la­tion von dyna­mi­schen Sei­ten. Der logi­sche Auf­bau, Ver­knüp­fun­gen und das erwar­tete Benut­zer­ver­hal­ten kön­nen geprüft und opti­miert wer­den. Dies kann sowohl dem inter­nen Gestal­tungs­pro­zess inner­halb einer Agen­tur die­nen als auch der Abstim­mung mit dem Auftraggeber.

Die Bedeu­tung der Informationsarchitektur
Wie gut der Nut­zer Webin­halte wahr­nimmt oder die Funk­tion eines Ele­ments ver­steht, hängt zu einem gro­ßen Teil von ihrer Anord­nung ab. So ist es bei­spiels­weise üblich, die Navi­ga­tion links oder oben zu posi­tio­nie­ren. Wich­tige Inhalte wer­den „above the fold“, also im ohne Scrol­len sicht­ba­ren Bereich einer Web­site, unter­ge­bracht. Eine Abwei­chung von die­sen Stan­dards kann den Sei­ten­be­su­cher irri­tie­ren und mög­li­cher­weise sogar die Benut­zung der Seite erschweren.

Die­ser Balan­ce­akt zwi­schen gelern­ten Mus­tern, die die Benut­zung einer Web­site erleich­tern, und einer eigen­stän­di­gen, unver­wech­sel­ba­ren Archi­tek­tur lässt sich mit Hilfe eines Wire­frames mit rela­tiv wenig Auf­wand durch­spie­len. Der auf das Wesent­li­che redu­zierte Ent­wurf zeigt schnell mög­li­che Schwä­chen in Abfolge und Auf­bau von Inhal­ten auf. Die­ses Gerüst wird spä­ter die Grund­lage für das indi­vi­du­elle Gesicht einer Website.

Der Weg zum Wireframe
Im Arbeits­ab­lauf einer Agen­tur wird nach dem Brie­fing durch den Auf­trag­ge­ber der Pro­jekt­um­fang fest­ge­legt und, gege­be­nen­falls nach einem Re-Briefing, ein schlüs­si­ges Kon­zept erstellt. Der Wire­frame ist darin eines der Kern­stü­cke. Die tech­ni­schen Mög­lich­kei­ten sind dabei viel­fäl­tig. Ein Web­de­si­gner kann sei­nen Ent­wurf klas­sisch zu Papier brin­gen, aber auch mit Hilfe ver­schie­de­ner Online-Tools und Zei­chen­pro­gramme entwickeln.

Da es nur darum geht, die Posi­tion der Organe einer Web­site – Navi­ga­ti­ons­ele­mente, Text– und Bil­d­ein­hei­ten etc. – zu bestim­men, muss auf ästhe­ti­sche Details noch keine Rück­sicht genom­men wer­den. Die geplan­ten Ele­mente wer­den daher durch Linien, Recht­ecke und Blind­text vertreten.

Warum lohnt sich die­ser zusätz­li­che Arbeitsschritt?
Mit Hilfe eines Wire­frames kann eine Web­site gewis­ser­ma­ßen von innen her­aus auf­ge­baut wer­den. Erst wenn der funktionale/logische Auf­bau fest­steht, wird das Design dar­auf ange­wen­det. Letz­te­res lässt sich im wei­te­ren Ver­lauf ein­fach anpas­sen – even­tu­elle Kon­struk­ti­ons­män­gel oder Anpas­sun­gen in der Grund­struk­tur sind aller­dings schon durch den Auf­bau des Wire­frames erle­digt worden.

Eine zusätz­li­che Her­aus­for­de­rung an das Web­de­sign stellt die stän­dige Wei­ter­ent­wick­lung web­fä­hi­ger Geräte dar. Diese brin­gen jeweils ein eige­nes For­mat mit, auf das ein Design nicht eins zu eins über­tra­gen wer­den kann. Umso wich­ti­ger ist also ein Arbeits­schritt, in dem schnell und unkom­pli­ziert ver­schie­dene Sze­na­rien durch­ge­spielt wer­den kön­nen. Das macht die­sen Pro­jekt­ab­schnitt zu einem der wich­tigs­ten Schritte im Gestaltungsprozess.

Drei Wireframe-Tools für jeden Bedarf

• Stift und Papier: Vor­la­gen auf Papier leis­ten gute Dienste für erste Ent­würfe. Ein­fach unsere Wireframing-Vorlagen für Brow­ser, iPad und iPhone her­un­ter­la­den und sofort mit dem Wire­framing starten
• Alles­kön­ner: Axure ist eines der umfang­reichs­ten Pro­gramme zum Erstel­len von Wire­frames. Schnelle Erst­ent­würfe sind ebenso mög­lich wie ein­drucks­volle Mock­ups. Inter­ak­tive Funk­tio­nen, wie bei­spiels­weise das Ver­hal­ten von Schalt­flä­chen, kön­nen ohne Pro­gram­mier­kennt­nisse simu­liert wer­den. http://www.axure.com/
• To-Go: POP Pro­to­typ­ing on Paper ist eine App für iPhone und Android, mit der hand­ge­zeich­nete Wire­frames gescannt und in Klick-Dummies umge­wan­delt wer­den kön­nen. https://popapp.in/

Dieser Artikel ist ursprünglich im Blog der Bildpunktschmiede erschienen.

Was Sie noch beachten sollten, wenn Sie einen Website Relaunch planen? Hier finden Sie weitere Informationen.