Vi­su­al In­ter­face für Au­dio-web-app

Wie Ate­lier Dis­ko die Au­dio-web-ap­pli­ka­ti­on Wer­den.click ent­wi­ckel­te, die ei­nen durch Far­ben und Le­bens­ge­schich­ten trei­ben lässt

PAGE - - Inhalt -

Wie Ate­lier Dis­ko das in­tui­tiv be­dien­ba­re On­li­neAr­chiv für In­ter­view­auf­nah­men rea­li­sier­te

● Das Le­ben steckt vol­ler Über­gän­ge. Man ist Kind, wird er­wach­sen, lernt die Lie­be ken­nen, wird äl­ter und ver­än­dert sich un­ab­läs­sig. Die­ses »Wer­den« ist es, dem die Thea­ter­ma­cher Ma­rie-lui­se Krü­ger und Chris­ti­an Weiß in ih­rem gleich­na­mi­gen Büh­nen­pro­jekt nach­ge­hen. Um mit­ten ins Le­ben hin­ein­zu­füh­len, ha­ben sie da­für mit hun­dert Kin­dern, Ju­gend­li­chen und Se­nio­ren ge­spro­chen – im­mer neue In-

ter­views kom­men hin­zu. Und weil es scha­de wä­re, wenn die­se Ge­schich­ten, Le­bens­aus­bli­cke, Sehn­süch­te und me­lan­cho­li­schen Re­sü­mees nicht fest­ge­hal­ten wür­den, ent­stand die Idee ei­nes Au­dio­ar­chivs.

Es ist kein Zu­fall, dass sich Chris­ti­an Weiß für die Um­set­zung di­rekt an Ate­lier Dis­ko aus Ham­burg wand­te. Seit fast zehn Jah­ren ent­wirft Krea­tiv­di­rek­tor Jan­fre­de­ric Goltz die Fly­er und Pla­ka­te für sei­nen eins­ti­gen Kom­mi­li­to­nen von der Hoch­schu­le für Bil­den­de Küns­te Braun­schweig. Das Bud­get war nicht rie­sig, die Idee, ein On­line­ar­chiv mit In­ter­view­auf­nah­men zu ge­stal­ten, aber be­son­ders reiz­voll. »Die Mög­lich­keit, sich mit ei­nem Au­dio­pro­jekt zu be­schäf­ti­gen, gibt es nicht oft«, sagt Goltz, »und erst recht nicht, Au­dio im Web zu zei­gen.«

Denn schnell war klar, dass das Ar­chiv als We­bAp­pli­ka­ti­on ent­ste­hen soll­te, heißt, nicht für das je­wei­li­ge Be­triebs­sys­tem, son­dern un­ab­hän­gig vom End­ge­rät im Brow­ser. Und auch, dass Ate­lier Dis­ko, an­statt ei­ne Platt­form oder ei­nen Dritt­an­bie­ter zu nut­zen, ei­nen ei­ge­nen Au­dio­play­er ent­wi­ckeln wür­de. Schließ­lich ar­bei­ten der De­si­gner Goltz Jan­fre­de­ric und der Soft­ware­de­ve­l­oper und CTO Da­vid Pers­son am liebs­ten oh­ne vor­ge­fer­tig­te Ele­men­te und set­zen ih­re Pro­jek­te in en­gem Zu­sam­men­spiel um. In der Ham­bur­ger Schan­ze und hoch über den Dä­chern der Stadt sit­zen sie sich ge­gen­über und sind im­mer ganz nah dran an dem je­wei­li­gen Ar­beits­schritt des an­de­ren.

Ra­di­ka­le Re­duk­ti­on

Aber wie soll­te der Play­er aus­se­hen? Soll­te er wie bei App­le mit ei­nem klei­nen Punkt ver­se­hen sein? Wie bei Sound­cloud die­se Wel­len­form ha­ben, in die man rein­kli­cken kann? Ihr An­spruch an die Usa­bi­li­ty war, dass die Ap­pli­ka­ti­on sich ge­nau wie das Thea­ter­stück an al­le Al­ters­grup­pen rich­tet und dass sie so auf­ge­baut und ge­stal­tet ist, dass man sie so­fort und ganz in­tui­tiv ver­steht. Um das zu er­rei­chen, re­du­zier­ten sie die vi­su­el­le Gestal­tung Schritt für Schritt.

Von den Pla­ka­ten, die Jan­fre­de­ric Goltz zu­vor für das Thea­ter­stück ent­wor­fen hat­te, über­nah­men die bei­den ein­zig die Idee des Farb­ver­laufs, der das Wer­den als Pro­zess dar­stellt. Auf Bild­wel­ten hin­ge­gen ver­zich­te­ten sie kom­plett. Kein Por­trät der Schau­spie­le­rin­nen und auch kein an­de­res Bild sind in der Web­app zu se­hen. Statt­des­sen ist die­se ganz auf Far­ben re­du­ziert, auf Blau­, Grün­, Rot­und Gelb­tö­ne, wäh­rend im Hin­ter­grund ab­stra­hier­te schwarz­wei­ße For­men flim­mern, die von ei­nem Fo­to stam­men, das Jan­fre­de­ric Goltz ge­macht hat. »Für mich sieht das In­ter­face wie ein Bild aus, das man be­trach­tet«, sagt Da­vid Pers­son. Und das liegt si­cher­lich nicht nur dar­an, dass bei­de von der Kunst­hoch­schu­le kom­men. Gleich­zei­tig er­in­nert es ein we­nig an De­rek Jar­m­ans Film »Blue«, in dem der Re­gis­seur von sei­nem Le­ben und Ster­ben er­zählt, wäh­rend der Ki­no­zu­schau­er auf ei­ne blaue Lein­wand schaut.

Im Ge­gen­satz zu ei­nem klas­si­schen Ar­chiv, das meist aus ei­ner ver­wo­be­nen Samm­lung be­steht, ist Wer­den.click ganz mi­ni­ma­lis­tisch und klar. Schritt für Schritt hat Ate­lier Dis­ko al­le Fil­ter­funk­tio­nen eli­mi­niert. Gab es an­fangs noch die Idee, je­den Clip mit dem Na­men, dem Al­ter, Ge­schlecht und Wohn­ort des In­ter­view­ten zu ver­se­hen und die Aus­sa­gen nach Jung und Alt zu sor­tie­ren, fin­den sich jetzt nur noch Na­me und Al­ter. »Statt den User zu len­ken, wol­len wir ihn auf ei­ne in­tui­ti­ve Ent­de­ckungs­rei­se durch die Ge­schich­ten schi­cken«, sagt Jan­fre­de­ric Goltz. Ge­blie­ben sind des­halb ein­zig zwei Fil­ter, mit de­nen man wäh­len kann, ob man das kom­plet­te In­ter­view hö­ren möch­te oder nur kur­ze Clips zu The­men­schwer­punk­ten wie Lie­be, Al­ter, Träu­men oder Ster­ben. Da­zu wur­de die ge­sam­te Ap­pli­ka­ti­on zu ei­nem Play­er. Na­tür­lich muss man noch auf ei­nen But­ton kli­cken, um die ver­schie­de­nen Er­zäh­lun­gen zu hö­ren, aber der Play­er ist das Kern­ele­ment und sei­ne Tech­no­lo­gie eng ver­wo­ben mit der Gestal­tung der Web­site.

Al­les ist ver­knüpft

»Vor ein paar Jah­ren wä­re es nicht mög­lich ge­we­sen, so ei­ne Web­app zu bau­en«, sagt Da­vid Pers­son. »Da konn­te man ge­ra­de mal ei­ne Au­dio­da­tei ab­spie­len. Doch es gab enor­me Ent­wick­lun­gen im Be­reich der Web­tech­no­lo­gi­en. Jetzt kann man die Au­dio­da­tei live durch ver­schie­de­ne Ef­fek­te ja­gen und so die An­wen­dung steu­ern.« Das Web wer­de im­mer leis­tungs­fä­hi­ger und sei durch ei­nen By­te­co­de wie We­bas­sem­bly auf dem bes­ten Weg, sich zu ei­ner uni­ver­sel­len Ap­pli­ka­ti­ons­platt­form zu ent­wi­ckeln.

Ei­ne der neu­en Tech­no­lo­gi­en, die Da­vid Pers­son ver wen­de­te, ist Web Au­dio. »Der Na­me klingt, als hät­te es die­se Schnitt­stel­le schon im­mer ge­ge­ben, tat­säch­lich aber ist sie erst seit ein­ein­halb Jah­ren zu­ver­läs­sig nutz­bar und leis­tet im Brow­ser, was zu­vor nur für Ap­pli­ka­tio­nen au­ßer­halb des In­ter­nets, zum Bei­spiel durch Lo­gic Pro, mög­lich war.« Zu­sam­men mit dem Html­ele­ment Can­vas treibt Web Au­dio die Vi­sua­li­sie­run­gen der App an: Klickt man bei Wer­den. click auf ei­ne der Au­dio­ka­cheln, gibt es die­sen ganz schlich­ten, mi­ni­ma­lis­ti­schen Ripp­le­ef­fekt der Wel­len. Web Au­dio tas­tet den Ton ab und trig­gert die­se Vi­sua­li­sie­rung an den ent­spre­chen­den Stel­len ab­hän­gig vom Laut­stär­ke­pe­gel: Ist die­ser gleich­mä­ßig, sind die Wel­len es auch, gibt es ei­ne Pau­se,

»Die Mög­lich­keit, sich mit ei­nem Au­dio­pro­jekt zu be­schäf­ti­gen, gibt es nicht oft und erst recht nicht, Au­dio im Web zu zei­gen« Jan-fre­de­ric Goltz, Krea­tiv­di­rek­tor und Mit­grün­der von Ate­lier Dis­ko, Ham­burg

ent­steht au­ßer­dem vi­su­ell ei­ne Lü­cke, bis der nächs­te Im­puls kommt.

Gleich­zei­tig sen­det die Au­dio­ka­chel ein Si­gnal an die Pro­gress Bar, die dann weiß: »Hey, es gibt Fort­schritt, ich muss mich be­we­gen« – und die­ser Fort­schritt treibt wie­der­um den Play­er an, wei­ter­zu­ma­chen. Die­ses »Loo­se Cou­pe­ling« ge­nann­te Pat­tern ist ge­ra­de beim Ent­wi­ckeln ech­ter Ap­pli­ka­tio­nen im Ge­gen­satz zu üb­li­chen Con­tent­web­sites wich­tig, um der Kom­ple­xi­tät Herr zu wer­den, er­klärt Da­vid Pers­son.

Die Ap­pli­ka­ti­on setzt sich aus zahl­rei­chen »Sha­red Not­hing«­kom­po­nen­ten, die für sich be­trach­tet je­weils völ­lig iso­liert sind, zu­sam­men. Erst ein­mal ist da der Au­dio­play­er, hin­ter dem die Pro­gress Bar steht, die dann wie­der­um mit den an­de­ren Ele­men­ten ver­bun­den ist: mit je­der ein­zel­nen Ka­chel, mit der Fil­ter­lis­te, den kur­zen Clips und den Full Tracks. Die­se un­ab­hän­gig von­ein­an­der ent­wi­ckel­ten Kom­po­nen­ten sind in Ja­va­script im­ple­men­tiert, die Kom­mu­ni­ka­ti­on zwi­schen ih­nen fin­det mit­tels Events statt.

»Die Soft­ware­ent­wick­lung in­ner­halb un­se­rer Agen­tur ist ein Mög­lich­ma­cher, und weil wir in De­sign und Pro­gram­mie­rung so eng zu­sam­men­ar­bei­ten, kom­men wir auf an­de­re Lö­sun­gen und Darstel­lungs­for­men«, sagt Jan­fre­de­ric Goltz. So muss­ten sie nicht auf ei­ne Word­press­si­te mit Em­bed­ded Sound­cloud­files und Ver­schlag­wor­tung zu­rück­grei­fen, was nie die­ses In­ter­face und die In­ter­ak­ti­vi­tät er­mög­licht hät­te. »Es ist grund­le­gend für Wer­den.click, dass wir selbst die Re­geln fest­le­gen, wie die Ap­pli­ka­ti­on funk­tio­niert und re­agiert.«

Stot­tern­de Farb­ver­läu­fe

Ein Pro­blem tauch­te dann aber doch auf, und zwar als Ate­lier Dis­ko Be­we­gung ein­bau­en woll­te: or­ga­ni­sche For­men als Ge­gen­pol zu den geo­me­tri­schen Au­dio­ka­cheln, die me­di­ta­tiv, aber nicht ein­schlä­fernd wir­ken soll­ten und das Wer­den in Form von Farb­blurs vi­sua­li­sie­ren. Al­le Far­ben jen­seits der ge­ra­de ak­ti­ven Au­dio­da­tei soll­ten da­bei zu­sam­men­lau­fen und sich im­mer wie­der ver­än­dern. Doch aus­ge­rech­net das ipad, für das die An­wen­dung op­ti­miert ist, ging da­bei in die Knie. Zu hoch ist die Re­chen­leis­tung, wenn ein In­ter­view ab­spielt und der Blur live im Brow­ser ge­ren­dert wird und sich im­mer wie­der neu ge­ne­riert.

Lan­ge ha­ben die bei­den nach ei­ner char­man­ten Lö­sung ge­sucht und schließ­lich ei­nen klei­nen Trick an­ge­wandt: Der Farb­ne­bel ist jetzt ein Hin­ter­grund­bild, das sich im­mer mit­ska­liert. »Es ist uns nicht leicht ge­fal­len, auf den Live­blur zu ver­zich­ten«, sagt Jan­fre­de­ric Goltz, »aber na­tür­lich muss­ten wir auf Ge­schwin­dig­keit ach­ten. Denn wenn ei­ne Sei­te im­mer mal wie­der stot­tert, hat man das Ge­fühl, dass sie bug­gy ist.«

Statt­des­sen kann man sich auf Wer­den.click jetzt ganz flie­ßend durch Le­bens­ge­schich­ten und durch Farb­wel­ten trei­ben las­sen. Und das ma­chen vie­le, und vor al­lem hö­ren sie aus­gie­big zu. Dem 76­jäh­ri gen Ha­rald, der er­zählt, wie er im Pusz­ta­ca­fé sei­ne gro­ße Lie­be ken­nen­lern­te, dem 18­jäh­ri­gen Phi­lip, den im jun­gen Al­ter die End­lich­keit des Le­bens um­treibt, oder La­ris­sa, 12, die spä­ter auf kei­nen Fall nur am Com­pu­ter rum­tip­pen möch­te, son­dern ei­nen Berg be­stei­gen und in Grie­chen­land ler­nen, wie man St­ei­ne be­ar­bei­tet, oh­ne dass sie durch­bre­chen. sd [1097]

»Weil wir in De­sign und Pro­gram­mie­rung so eng zu­sam­men­ar­bei­ten, kom­men wir auf an­de­re Lö­sun­gen und Darstel­lungs­for­men« Da­vid Pers­son, De­ve­l­oper und Chief Tech­ni­cal Of­fi­cer von Ate­lier Dis­ko, Ham­burg

PRO­JEKT Ent­wick­lung ei­nes On­line-au­dio­ar­chivs zum Thea­ter­pro­jekt »Wer­den« ↗ http://wer­den.click KUN­DE Re­gie­duo krü­gerx­weiss, Braun­schweig↗ www.xweiss.in­fo AGEN­TUR Ate­lier Dis­ko, Ham­burg ↗ https://ate­lier­dis­ko.de TECH­NIK Web Au­dio, Can­vas, Ja­va­script, CSS, HTML5, PHP, JSON, REST ZEITRAUM De­zem­ber 2016 bis Fe­bru­ar 2017

Ne­ben den In­ter­view-clips zu ein­zel­nen Le­bens­the­men kann man sich auf Wer­den.click auch die Ge­sprä­che voll­stän­dig an­hö­ren, die sich – ganz schlicht und nur mit Na­men und Al­ter ge­kenn­zeich­net – an­ein­an­der­rei­hen

Ei­ne der Be­son­der­hei­ten der Web-app: Das ge­sam­te Vi­su­al In­ter­face ist der Play­er, und al­le Ele­men­te – von der Au­dio­ka­chel bis zur Pro­gress Bar – sind mit­ein­an­der ver­bun­den. Oben rechts: Frü­her Schritt in der Ent­wick­lung, als Ate­lier Dis­ko tes­te­te, die Sta

Zum Ver­gleich: die Desk­top-ver­si­on von Wer­den.click (un­ten), in der zum Test ein Track aus dem The­men­be­reich Lie­be ab­ge­spielt wird, und rechts die re­s­pon­sive Va­ri­an­te der Web-ap­pli­ka­ti­on auf dem Smart­pho­ne

Ate­lier Dis­ko (von links): De­ve­l­oper und CTO Da­vid Pers­son, Art­di­rek­tor Jan-fre­de­ric Goltz und der Pro­gram­mie­rer Phil­lip Klein

Aus den Pla­ka­ten, die Ate­lier Dis­ko für das Thea­ter­pro­jekt »Wer­den« ge­stal­te­te, als das Stück En­de Ok­to­ber 2016 auf­ge­führt wur­de, über­nah­men die Krea­ti­ven den Farb­ver­lauf – als Ana­lo­gie für das Wer­den als Pro­zess

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.