Verschiedene Prototyp-Ebenen in der Webentwicklung: Lernen vom Tiger

Lese­dau­er: ca. 6–7 Minuten

Im Web­sei­ten-Pro­zess spielt die Erstel­lung von Pro­to­ty­pen eine ent­schei­den­de Rolle. Durch das schritt­wei­se Ver­fei­nern eines Kon­zepts – vom gro­ben Ent­wurf bis hin zur detail­lier­ten Aus­ar­bei­tung – kön­nen Kon­zepter, Desi­gner und Ent­wick­ler sicher­stel­len, dass die geplan­te Web­sei­te opti­mal und ziel­füh­rend umge­setzt wird. Ein Bei­spiel aus der Natur, das die­sen Pro­zess ver­an­schau­licht, ist die Vor­stel­lung eines Tigers in ver­schie­de­nen Ebe­nen: seine Kno­chen, Mus­keln und Seh­nen sowie das fer­ti­ge, majes­tä­ti­sche Tier mit Fell. Raaaaw­wr.

Diese Ebe­nen kön­nen uns hel­fen, die unter­schied­li­chen Stu­fen der Pro­to­ty­pen­ent­wick­lung zu ver­ste­hen. Der Künst­ler Björn Holz­weg hat die Tiger-Ebe­nen in Koope­ra­ti­on mit der Affen­faust-Gale­rie in Ham­burg an die Wand gebracht. Wer aus Ham­burg kennt das Street-Art Werk? 

Cre­dits: Björn Holz­weg x Affen­faust Gale­rie Hamburg

Low-Fi Prototyp: Die Knochenstruktur

In der Anfangs­pha­se eines Pro­jekts geht es darum, die Grund­struk­tur und das Fun­da­ment eines Kon­zepts zu erar­bei­ten, auch als Low-Fide­li­ty (Low-Fi) Pro­to­typ bekannt. Dies lässt sich mit dem Ske­lett eines Tigers ver­glei­chen, das als Basis dient.

Wir arbei­ten in der gesam­ten Kon­zept- und Design­pha­se mit dem Tool Figma, wel­ches viele Vor­tei­le wie z.B. kol­la­bo­ra­ti­ves Arbei­ten in Echt­zeit bie­tet. Mehr dazu in die­sem Arti­kel

Cre­dits: Björn Holzweg

Low-Fi Pro­to­typ in der Web­ent­wick­lung mit Figma:

  • Grobe Konzep­tion: Wie die Kno­chen eines Tigers das Grund­ge­rüst bil­den, so dient ein Low-Fi Pro­to­typ als Grund­ge­rüst der Web­sei­te. Hier­bei werden grund­le­gen­de Lay­outs skiz­ziert, ohne sich um Details zu küm­mern. In Figma begin­nen wir mit ein­fa­chen Wire­frames, die die Haupt­kom­po­nen­ten der Web­sei­te darstellen.
  • Posi­tio­nie­rung und Archi­tek­tur: Wel­che Ele­men­te sol­len wo plat­ziert werden? Dies umfasst die Navi­ga­ti­on, Hea­der, Foo­ter und Haupt­in­hal­te. Mit Figma kön­nen wir schnell ver­schie­de­ne Lay­outs aus­pro­bie­ren und die beste Struk­tur für die Web­sei­te festlegen.
  • Trag­fä­hig­keit des Kon­zepts: Es wird geprüft, ob das grund­le­gen­de Kon­zept trag­fä­hig ist und die Nut­zer­an­for­de­run­gen erfüllt werden. Figma erlaubt uns, Feed­back zu den Wire­frames ein­zu­ho­len und schnell Anpas­sun­gen vorzunehmen.

Ein Low-Fi Pro­to­typ kann in Form von ein­fa­chen, mono­chro­men Wire­frames erstellt werden. Diese kon­zen­trie­ren sich auf die Struk­tur und Anord­nung der Ele­men­te, ohne sich bereits auf Far­ben, Typo oder Bil­der festzulegen.

 

Mid-Fi Prototyp: Muskeln und Sehnen

Der nächs­te Schritt ist die Erstel­lung eines Mid-Fide­li­ty (Mid-Fi) Pro­to­typs, der die Ver­bin­dun­gen und Wech­sel­wir­kun­gen zwi­schen den ver­schie­de­nen Kom­po­nen­ten dar­stellt. Dies ent­spricht den Mus­keln und Seh­nen eines Tigers, die die Bewe­gun­gen und die Kraft­über­tra­gung ermöglichen.

Cre­dits: Björn Holzweg

Mid-Fi Pro­to­typ in der Web­ent­wick­lung mit Figma:

  • Zusam­men­hän­ge und Abhän­gig­kei­ten: Wie bei den Mus­keln und Seh­nen eines Tigers geht es darum, die Bezie­hun­gen und Abhän­gig­kei­ten zwi­schen den ver­schie­de­nen Kom­po­nen­ten der Web­sei­te zu ver­ste­hen und zu visua­li­sie­ren. Diese basie­ren auf in Work­shops erar­bei­te­ten Per­so­nas und deren User Jour­neys auf der Web­sei­te. Jedes Ele­ment im Pro­to­typ muss eine Funk­ti­on haben, die auf Nut­zer­be­dürf­nis­se antwortet.
  • Funk­tio­na­le Dyna­mik: Es wird unter­sucht, wie die ver­schie­de­nen Teile der Web­sei­te zusam­men­ar­bei­ten und inter­agie­ren. In die­ser Phase kön­nen wir erste Pro­to­ty­p­ing-Funk­tio­nen in Figma nut­zen, um mit Klick­pfa­den und ein­fa­che Inter­ak­tio­nen die User Jour­neys zu simulieren.
  • Inter­ne Struk­tur: Der Mid-Fi Pro­to­typ zeigt, wie die inter­nen Mecha­nis­men und Pro­zes­se der Web­sei­te funk­tio­nie­ren. Dies kann die Navi­ga­ti­on, Inter­ak­tio­nen und ein­fa­che Ani­ma­tio­nen umfas­sen. In Figma ver­wen­den wir Kom­po­nen­ten und Varia­blen, um kon­sis­ten­te und wie­der­ver­wend­ba­re Ele­men­te zu erstellen.

Ein Mid-Fi Pro­to­typ ist detail­lier­ter und funk­tio­na­ler als ein Low-Fi Pro­to­typ, jedoch noch nicht voll­stän­dig aus­ge­ar­bei­tet. Hier ver­wen­den wir mehr Details und Inter­ak­tio­nen, um die Benut­zer­füh­rung und die Benut­zer­er­fah­rung bes­ser zu ver­ste­hen und zu testen.

 

High-Fi Prototyp: Der Tiger mit Fell

Der High-Fide­li­ty (High-Fi) Pro­to­typ ist die letz­te Phase der Pro­to­ty­pen­ent­wick­lung, in der alle Details und Fein­hei­ten aus­ge­ar­bei­tet werden. Dies ent­spricht dem fer­ti­gen Tiger mit sei­nem Fell, das die äuße­re Schön­heit und das fer­ti­ge Erschei­nungs­bild darstellt.

Cre­dits: Björn Holzweg

High-Fi Pro­to­typ in der Web­ent­wick­lung mit Figma:

  • Detail­ge­treue Dar­stel­lung: In die­ser Phase wird die Web­sei­te mit allen Fea­tures und High­lights in einer visu­ell anspre­chen­den Weise dar­ge­stellt. Design-Ele­men­te wie Far­ben, Typo­gra­fie und Bil­der werden inte­griert. In Figma fügen wir alle visu­el­len Ele­men­te hinzu und arbei­ten an der Fein­ab­stim­mung des Designs.
  • Benut­zer­er­fah­rung: Wie das Fell eines Tigers des­sen typi­sches Aus­se­hen ver­voll­stän­digt, sorgt der High-Fi Pro­to­typ dafür, dass die Web­sei­te nicht nur funk­tio­nal, son­dern auch ästhe­tisch anspre­chend ist. Wir ver­wen­den Figma, um detail­lier­te und rea­lis­ti­sche Pro­to­ty­pen zu erstel­len, die nahe­zu wie die fina­le Web­sei­te aussehen.
  • Fein­schliff: Hier werden die letz­ten Anpas­sun­gen und Opti­mie­run­gen vor­ge­nom­men, um sicher­zu­stel­len, dass das End­pro­dukt per­fekt ist. Inter­ak­tio­nen sind voll­stän­dig imple­men­tiert und der Web­site-Pro­to­typ ist bereit für die Pro­gram­mie­rung. In Figma tes­ten wir die Pro­to­ty­pen aus­gie­big und sam­meln Feed­back, um die letz­ten Ver­bes­se­run­gen vorzunehmen.

Ein High-Fi Pro­to­typ in Figma ermög­licht es uns, die Web­sei­te in ihrer fina­len Form zu prä­sen­tie­ren. Alle visu­el­len und funk­tio­na­len Details sind ent­hal­ten, und der Pro­to­typ kann als Vor­la­ge für das Ent­wick­ler-Team dienen.

 

Fazit: Iteratives Vorgehen hat viele Vorteile

Ein Tiger braucht Kno­chen, Mus­keln und Fell, um das schnel­le, edle Tier zu sein, das er ist. Eben­so benö­tigt eine erfolg­rei­che Web­sei­te ein soli­des Grund­ge­rüst, funk­tio­na­le Ele­men­te und ein anspre­chen­des Design. Durch die schritt­wei­se Erstel­lung von Pro­to­ty­pen in ver­schie­de­nen Detail­stu­fen kön­nen wir sicher­stel­len, dass eine Web­sei­te sowohl funk­tio­nal als auch optisch überzeugt.

Der ite­ra­ti­ve Ver­fei­ne­rungs­pro­zess ist ent­schei­dend, um ein End­pro­dukt zu schaf­fen, das die Bedürf­nis­se der Nutzer opti­mal erfüllt und eine her­vor­ra­gen­de Benut­zer­er­fah­rung bie­tet. Geduld und sorg­fäl­ti­ge Pla­nung, wie sie uns die Natur lehrt, füh­ren zu beein­dru­cken­den Ergeb­nis­sen. Mit Tools wie Figma lässt sich die­ser Pro­zess effek­tiv und effi­zi­ent umset­zen, sodass wir die Web­sei­te kon­ti­nu­ier­lich, mit jedem Pro­to­typ-Schritt, ver­bes­sern und anpas­sen können.

Nach oben