Von Idee zu Inter­ak­tion: Ein Leit­fa­den für Wire­frames

Inhalte auf Basis einer Vor­gabe so zu clus­tern, daß sie dra­ma­tur­gisch anspre­chend und gleich­zei­tig dem For­mat gerecht wer­den, ist selbst für einen erfah­re­nen Webdesigner aus der Hüfte und ohne Vor­ar­beit, dem Wire­frame, kaum zu schaf­fen. Der Wire­frame, wört­lich über­setzt: Die Blau­pause, der Schalt­plan oder das Gerüst einer (inter­ak­ti­ven) Ober­flä­che, einer mobi­len App oder Web­site, kommt dann zum Ein­satz, wenn es darum geht, Infor­ma­tio­nen, Struk­tur und Ele­mente so zu pla­nen, daß Inhalte und Nut­zer­er­fah­rung best­mög­lich mit­ein­an­der har­mo­nie­ren.
 

„Der Wire­frame ist die tech­ni­sche Skizze für Merk­male, Ver­hal­ten und Prio­ri­tä­ten von Inhal­ten.“

 
Wire­frames spie­len in der Kon­zep­ti­ons­phase eine zen­trale Rolle, da sie über­grei­fend abs­trakt, optisch vom Design los­ge­löst, Infor­ma­ti­ons­ar­chi­tek­tur, tech­ni­sche Funk­tio­nen und Nut­zer­füh­rung z.B. einer Web­site auf­bauen. Durch ihren sche­ma­tisch-ein­fa­chen Auf­bau als Skizze sind sie ein effi­zi­en­tes Werk­zeug für inhalt­li­che Abstim­mun­gen, Web­de­sign-Brie­fings und die Kal­ku­la­tion von Auf­wän­den für die spä­tere tech­ni­sche Umset­zung.

Ziel von Wire­frames

  1. Ent­wick­lung einer opti­ma­len Struk­tur auf Basis von UI-Ele­men­ten, Seman­tik und Modu­len
  2. Gewich­tung von Inhal­ten und Erstel­lung einer Infor­ma­ti­ons­hier­ar­chie
  3. Opti­male Inter­ak­tion und Nut­zer­füh­rung im For­mat­kon­text
Warum Wire­frames sinn­voll sind.
Die Site­map für einen Web­auf­tritt ist beschlos­sen und der Kunde beginnt, erste redak­tio­nelle und mediale Inhalte anzu­lie­fern. Wer sich jetzt aus­malt, mit dem gelie­fer­ten Con­tent direkt in einen gra­fi­sche und tech­ni­sche Umset­zung ein­zu­stei­gen, lernt die Vor­züge von Wire­f­raming ken­nen. Wire­frames sind zwar ein zusätz­li­cher Pro­jekt­schritt, den man argu­men­tie­ren muss, stellt aber einen deut­li­chen Gewinn für Betei­ligte, Pla­nung, Ergeb­nis und Bud­get dar:
Klassische Horizontal-Navigation
Klassisches Shop-Wireframe

Bei­spiel eines HiFi-Wire­frames für eine Online­shop-Start­seite im Desk­top-Mode

  • Kon­krete Visua­li­sie­rung abs­trak­ter Abläufe, Ideen oder Ober­flä­chen
  • Vor­zei­tige Iden­ti­fi­zie­rung von Schwach­punk­ten oder Opti­mie­rungs­po­ten­tia­len
  • Zeit- und kos­ten­ef­fek­ti­ves Mit­tel für kon­zep­tio­nelle Abstim­mun­gen und Feed­backs
  • Design­un­ab­hän­gige Pla­nung von Nut­z­er­zie­len und Inter­ak­tion
  • Ver­bes­serte Ein­schät­zung von Timings und Ent­wick­lungs­kos­ten
  • Opti­male Brie­fing-Grund­lage für Web­de­sign- und Ent­wick­ler-Teams
Projekt-Work­flow von Idee bis Rea­li­sa­tion.
IDEE LoFi-Skiz­zen: Fea­tures, Inhalte, Abläufe, Platt­form-Ziele
WIRE­FRAMES Funk­ti­ons­plan: Ste­reo­ty­pen, Sei­ten, Ober­flä­chen
WEB­DE­SIGN Visua­li­sie­rung: Bran­ding, Sei­ten, Ele­mente, Module, Stile
CODING Rea­li­sa­tion: Front­end, Inter­ak­tion, Funk­tio­nen, Anbin­dung

Erste Schritte mit Wire­frames

Das rich­tige Set-Up, bevor es an die Pla­nungs­skiz­zen geht...

Wer noch nicht mit Wire­frames gear­bei­tet hat, steht vor einer gro­ßen Aus­wahl an Anbie­tern, die eine schnelle und ein­fa­che Umset­zung ver­spre­chen. Wer sich als Desi­gner in der Welt von Adobe bewegt, kann Ein­ar­bei­tungs­zeit in Neu­soft­ware ein­spa­ren und mit Adobe Illus­tra­tor oder XD los­le­gen. Nicht ganz so vir­tuos visua­li­siert Bal­sa­miq einen Wire­frame. Als alter­na­tive, web­ba­sierte Lösung bie­ten sich moqups, UXpin oder Mock­Flow an. Tools wie Sketch, Axure, Web­flow oder Figma gehen schon eine Stufe wei­ter und eig­nen sich für Pro­to­ty­p­ing.
Wireframe Webdesign

Inhalte, Ele­mente, Ras­ter und Funk­tio­nen des Wire­frames sind die Grund­lage des spä­te­ren Web­de­signs.

  1. DIE IDEE VER­STE­HEN...

    Bevor es an die Umset­zung der Wire­frames geht, ist es wich­tig, sich in die Mecha­nik, die Anfor­de­run­gen und das Ziel der Anwen­dung ein­ge­ar­bei­tet zu haben. Ein Schul­ter­blick zu ähn­li­chen Platt­for­men oder Mit­be­wer­bern kann dabei hilf­reich sein. Wer den Kon­text und den Nut­zen ver­stan­den hat, ist für das Wire­frame-Kon­zept bereit...

  2. Die und den Besu­cher ken­nen...

    Ziel des Wire­frames ist die Kon­zep­tion ein­zig­ar­ti­ger Nut­zer-Erleb­nisse. Neben den Basis-Regeln für eine gute UX (Klar­heit, Ein­fach­heit, Kon­sis­tenz) aller Benut­zer, sollte man vor allem “den” Benut­zer ken­nen, der sich mit der Ober­flä­che beschäf­ti­gen wird. Das Nut­zungs­ver­hal­ten der Ziel­gruppe sollte sich im Wire­frame wider­spie­geln.

  3. Bühne und Ras­ter bestim­men...

    Funk­tion ist immer auch eine Frage der Dimen­sion und Gewich­tung. Bevor es an das Wire­f­raming geht, sollte man für die gerä­te­spe­zi­fi­sche Auf­lö­sung ein fes­tes Ras­ter erstel­len. Wenn Ele­mente auf die­ses Ras­ter aus­ge­rich­tet sind, spricht man von “In-Grid”, “Boxed” oder “Con­tai­ner”. Lie­gen Ele­mente außer­halb des Ras­ter, spricht man von “Full­width”. Für ein Desk­top-Wire­frame mit 1920px Breite eig­net sich ein 12-spal­ti­ges Ras­ter, 1140 px breit mit 15px Spal­ten­zwi­schen­raum (Gut­ter) und einer Ras­ter­ab­stand (Mar­gin) von 50px. Für den mobi­len Wire­frame eines Smart­phones von 390px Breite wählt man ein 4-Spal­ten-Ras­ter, 10px Spal­ten­zwi­schen­raum (Gut­ter) und ein Ras­ter­ab­stand (Mar­gin) von 20px.

  4. Module und UI-Sets wäh­len...

    Als letz­ten Schritt benö­tigt man für die Erstel­lung des Wire­frames gra­fi­sche Kom­po­nen­ten und Platz­hal­ter. Je nach­dem wel­che Anwen­dung kon­zi­piert wer­den soll und wel­che Soft­ware man ver­wen­det, wählt man bereits vor­han­de­nen, sogen­n­ante “UI-Kits” oder Biblio­the­ken darin aus, die fer­tige Sek­tio­nen wie Navi­ga­tio­nen, For­mu­lare, Gale­rien oder Kom­po­nen­ten wie Text­blö­cke, Schalt­flä­chen, Tabu­la­to­ren lie­fern. Alter­na­tiv las­sen sich Wire­frame-UI-Kits direkt bei Adobe, Bal­sa­miq und Co. down­loa­den.

Das Ein­hal­ten von Grids (Ras­ter) unter­stützt die Bil­dung visu­el­ler Hier­ar­chien und Kon­sis­tenz im Frame­work...

Gestaltungsraster für Desktop mit 12 Spalten
Desk­top-Ras­ter in 1140px mit 12 Spal­ten, 50px Mar­gin und 20px Gut­ter (Spal­ten­ab­stand)
Tablet-Gestaltungsraster mit 4 Spalten
Tablet-Ras­ter in 768px mit 4 Spal­ten, 50px Mar­gin und 20px Gut­ter (Spal­ten­ab­stand)
Mobiles Gestaltungsraster mit 4 Spalten
Mobile-Ras­ter in 360px mit 4 Spal­ten, 20px Mar­gin und 10px Gut­ter (Spal­ten­ab­stand)

Wire­frames auf­bauen

Nach­dem alle Vor­bei­tun­gen abge­schlos­sen sind, kann das erste Wire­frame ange­legt wer­den. Die Idee des Wire­frames ist, alles zu ver­mei­den, was den Nut­zer vom Anwen­dungs­ziel ablen­ken könnte und eine Ober­flä­che zu schaf­fen, die ihn intui­tiv und ziel­ge­ri­chet zur Inter­ak­tion moti­viert. Auch wenn ein High-Fide­lity-Wire­frame ein sehr kon­kre­tes Inter­face abbil­det, soll­ten visu­elle Ele­mente wie Bil­der, Far­ben, Texte nicht ver­wen­det wer­den. Platz­hal­ter rei­chen aus, da der Fokus auf Struk­tur, Funk­tion und opti­ma­ler Inter­ak­tion liegt. Bevor es in die nächs­ten Pro­jekt­schritte geht, die­nen Wire­frames dazu, Nut­zer­re­le­vanz zu erhö­hen, Abläufe zu tes­ten und Struk­tu­ren zu opti­mie­ren.

Mit einer kla­ren, gescrib­bel­ten Idee visua­li­sie­ren Wire­frames in kür­zes­ter Zeit die Ober­flä­che und Nut­zer­füh­rung. Damit kon­kre­ti­sie­ren sie die Pro­jekt­ziele und schaf­fen Klar­heit wenn es um Timing, Design, Inter­ak­tion oder Pro­gram­mie­rung geht. Und das in einem über­schau­be­ren Zeit­rah­men...

Mit vor­be­rei­te­ten Modu­len las­sen sich schnell Abläufe, Funk­tio­nen und Ober­flä­chen prä­sen­tie­ren.

FAZIT

Zusam­men­ge­fasst sind Wire­frames ein kri­ti­scher Bestand­teil des Design­pro­zes­ses für digi­tale Pro­jekte. Sie för­dern die Visua­li­sie­rung einer Idee, hel­fen bei der früh­zei­ti­gen Feh­ler­er­ken­nung, spa­ren dabei Zeit und legen den Grund­stein für eine erfolg­rei­che Benut­zer­er­fah­rung.

Face­book
XING
Lin­ke­dIn
War die­ser Bei­trag hilf­reich?
Wir unter­stüt­zen Sie gerne bei Ihrem nächs­ten Projekt. Von der Kon­zep­tion bis zum Design oder der voll­stän­di­gen Ent­wick­lung einer Web­site.
SAG’
HALLO!
Impressum

//

Datenschutz
PROJEKTANFRAGE
Super, Sie haben bei Ihrem Projekt an uns gedacht. Vielen Dank! Beschreiben Sie kurz, worum es geht, damit wir ein gutes Feedback geben können. Wir melden uns in Kürze zurück. Bis bald!
Von Ihnen im Formular eingegebene Daten speichern und verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Ihre Daten werden verschlüsselt übermittelt. Wir verarbeiten Ihre personenbezogenen Daten im Einklang mit unserer Datenschutzerklärung.

DANKE.

Wir haben ihre Anfrage erhalten und melden uns umgehend.