De­SiGn trifft co­de

SCREENGUIDE - - KREATION - TEXT: Mir­ko Lem­me

Fra­mer er­leich­tert das Pro­to­typ­ing

Vor der Pro­gram­mie­rung ei­ner App oder Web­site kommt oft der Pro­to­typ. Der Ams­ter­da­mer Ko­en Bok und sein Team ha­ben mit Fra­mer ein viel­ver­spre­chen­des Werk­zeug ent­wi­ckelt, das die gra­fi­sche Ent­wick­lung ei­nes Pro­to­typs mit der Fle­xi­bi­li­tät von Co­de kom­bi­niert. Ein Pro­to­typ ver­knüpft auf dem Weg zu ei­nem fer­ti­gen Pro­dukt ei­ne De­sign-Idee mit der ge­wünsch­ten Hand­ha­bung. Tools wie Ado­be Ex­pe­ri­ence De­si­gner oder Sketch ver­spre­chen schnel­le Er­geb­nis­se auf der Ba­sis gra­fi­scher Ent­wick­lung. Da­bei bleibt es im­mer ein we­nig schwie­rig, kom­ple­xe In­ter­ak­tio­nen und Er­eig­nis­se ab­zu­bil­den, die über das Ab­spie­len ver­schie­de­ner Bil­der im Sin­ne ei­ner ein­fa­chen Dia­show hin­aus­ge­hen. Fra­mer wagt den Schritt in kom­ple­xe­re Ge­fil­de auf der Ba­sis von schnell er­lern­ba­rem Pro­gramm­code.

FRAMERJS WIRD ZU FRA­MER STU­DIO WIRD ZU FRA­MER

Mit­te 2014 im­ple­men­tier­te das Fra­mer-Team die zu­vor rei­ne Ja­vas­cript-Bi­b­lio­thek FramerJS in „Fra­mer Stu­dio”, das nun nur noch „Fra­mer” heißt [fra­mer.com]. Mit sei­nen Wur­zeln in der glei­chen Tech­no­lo­gie, die auch Web­sei­ten und -apps be­feu­ert, ver­wun­dert es nicht, dass das Co­ding in Fra­mer ei­ne ent­schei­den­de Rol­le ein­nimmt. Die wei­ter­hin ge­pfleg­te Bi­b­lio­thek FramerJS ist na­tur­ge­mäß plat­tor­mun­ab­hän­gig ein­setz­bar, zum Bei­spiel als In­te­gra­ti­on in ei­nen Text­edi­tor wie Atom [goo.gl/kh1Ctg]. Die ei­gen­stän­di­ge Ap­pli­ka­ti­on Fra­mer, um die es im Fol­gen­den geht, gibt es der­zeit nur für App­le Com­pu­ter.

ZWEI WEL­TEN: DE­SIGN & CO­DE

Zu­nächst sieht al­les wie ge­wohnt aus (Abb. 1). Fra­mer star­tet mit der Lein­wand-An­sicht ei­nes gra­fi­schen Edi­tors, wie Web­wor­ker ihn aus Pho­to­shop, Sketch oder an­de­ren Pro­to­typ­ing-Tools wie Ado­be XD ken­nen, mit dem die viel­leicht größ­te Ähn­lich­keit be­steht. Doch im Kopf des Fens­ters fällt auf, dass Sie sich in der „De­sign”-An­sicht be­fin­den. Mit ei­nem Klick auf den da­ne­ben ste­hen­den But­ton „Co­de” zeigt sich ein klas­si­scher Text­edi­tor mit Syn­tax-High­light­ing und Pro­jekt­struk­tur, in dem Sie per Pro­gramm­code Ih­rem Mock­up in­ter­ak­ti­ves Le­ben ein­hau­chen kön­nen (Abb. 2).

DE­SIGN: GE­STAL­TEN UND AR­RAN­GIE­REN MIT RE­S­PON­SIVEN ELE­MEN­TEN

Mit Werk­zeugleis­te, Ar­beits­flä­che und Ob­jek­t­in­spek­tor kommt die De­sign-Ober­flä­che von Fra­mer ver­traut da­her. Sie kön­nen geo­me­tri­sche Ob­jek­te an­le­gen, Bil­der ein­fü­gen, Ef­fek­te wie Schlag­schat­ten oder ab­ge­run­de­te Ecken be­stim­men so­wie Di­men­sio­nen, Po­si­tio­nen und Ebe­nen-Rei­hen­fol­gen fest­le­gen. Die Ar­beits­flä­che oder das „Art­board” hat da­bei ei­ne fes­te Grö­ße. Doch Fra­mer weiß um die An­sprü­che ei­ner un­ste­ten Ge­rä­te­welt und fügt der Gestal­tung ein ent­schei­den­des Fea­tu­re hin­zu: Den Be­zug von Ob­jek­ten zur Ar­beits­flä­che. Fra­mer er­mög­licht Ih­nen, Brei­ten und Hö­hen von Ob­jek­ten an die Di­men­sio­nen des Art­boards zu kop­peln (Abb. 3). Soll ein Ele­ment bei­spiels­wei­se stets 50 % der Brei­te ein­neh­men und zen­triert er­schei­nen, le­gen Sie den ent­spre­chen­den Fix­punkt und das Ver­hal­ten der Brei­te am Ob­jekt selbst fest. Sie müs­sen da­bei nicht in Pro­zen­ten den­ken, Fra­mer rech­net hier selbst im Sin­ne des Drei­sat­zes. Aus ei­nem 100-Pi­xel-Ob­jekt wird bei dop­pelt so brei­ter Ar­beits­flä­che, wenn Sie das wol­len, ein 200-Pi­xel-Ob­jekt. Die­se Mög­lich­kei­ten, auf die Di­men­sio­nen der Um­ge­bung au­to­ma­tisch zu re­agie­ren, al­so be­reits im De­sign-Pro­zess das „Re­s­pon­sive” zu im­ple­men­tie­ren, macht Fra­mer fle­xi­bler als vie­le an­de­re Lö­sun­gen (Abb. 4). Ein ähn­lich auf­ge­bau­tes Kon­zept bie­tet Sketch in Kom­bi­na­ti­on mit dem Plu­gin „Au­to Lay­out” [ani­maapp. git­hub.io] (das im um­fang­rei­che­ren Plu­gin „Launch­pad” auf­ge­gan­gen ist). Ad­o­bes Ex­pe­ri­ence De­si­gner hin­ge­gen bie­tet der­zeit kei­ne Lö­sun­gen für der­art dy­na­misch ver­än­dern­de Art­boards. Was Sie nicht steu­ern kön­nen, sind kom­ple­xe De­sign-Al­ter­nie­run­gen zu de­fi­nier­ten View­port-Bre­ak­points, zum Bei­spiel um ein ein­spal­ti­ges Lay­out bei ei­nem View­port über 800 Pi­xel Brei­te in ein zwei­spal­ti­ges Lay­out zu über­füh­ren. Was im Web gang und gä­be ist, ver­mag Fra­mer nicht ab­zu­bil­den; ei­ne Spal­te bleibt ei­ne Spal­te. Sie ar­bei­ten al­so streng ge­nom­men eher mit ei­nem flui­den als ei­nem re­s­pon­siven De­si­gn­kon­zept. Fra­mer zielt wohl auch des­we­gen in Sa­chen Fea­tu­res und Auf­bau eher auf Ober­flä­chen für Mo­bi­l­appli­ka­tio­nen und we­ni­ger auf klas­si­sche Web­site-Lay­outs ab.

SCROLLING UND FIXIERTE ELE­MEN­TE

Da Fra­mer wie je­des gu­te Pro­to­typ­ing-Tool am En­de kei­ne sta­ti­schen Bil­der, son­dern be­nutz­ba­re Web-Ober­flä­chen er­zeugt, kön­nen Sie auch Din­ge wie In­halts-Over­flow und fixierte Ele­men­te be­rück­sich­ti­gen. Ist die ge­stal­te­te Ar­beits­flä­che bei­spiels­wei­se län­ger als der Vor­schau-View­port, ent­steht im Er­geb­nis ei­ne scroll­ba­re An­sicht, wie Sie sie von Web­sei­ten oder Apps ken­nen, de­ren In­hal­te über die Bild­schirm­grö­ße hin­aus­ge­hen. Ele­men­te zu Be­ginn oder am En­de des Art­boards kön­nen Sie so set­zen, dass sie von die­sem Ele­ment­fluss aus­ge­nom­men und stets fi­xiert sind, al­so nicht mit­scrol­len (Abb. 5).

CO­DING, NA­MEN, IN­TER­AK­TI­ON

Im Co­de von Fra­mer se­hen Sie erst ein­mal we­ni­ge An­wei­sun­gen in Be­zug auf das Lay­out; Ko­or­di­na­ten, Di­men­sio­nen, Far­ben etc. blei­ben zu­nächst der De­sign-An­sicht vor­be­hal­ten. Was das Co­ding hin­ge­gen bie­tet, ist ei­ne Re­fe­renz auf je­des im De­sign er­stell­te Ele­ment. In der De­sign-An­sicht kön­nen Sie ei­nem Ele­ment oder ei­ner Ele­ment­grup­pe ein Hand­le ge­ben, das im Co­de wie ei­ne ID wei­ter­ver­wen­det wird. Über die­sen Be­zeich­ner kön­nen Sie Ih­rem Ele­ment dann ein Ver­hal­ten bei­brin­gen. Bei­spiels­wei­se kann ein Event­lis­tener da­für sor­gen, dass bei ei­nem Klick durch den Nut­zer ei­ne be­stimm­te Ak­ti­on aus­ge­löst wird. Soll bei Klick auf Ele­ment A ein an­de­res Ele­ment B ver­schwin­den, sieht die An­wei­sung da­für bei­spiels­wei­se so aus:

Ge­schrie­ben wird da­bei in Cof­fee­script [cof­fee­script.org], ei­ner ver­ein­fach­ten Va­ri­an­te von Ja­vas­cript, die zur Lauf­zeit wie­der in brow­ser­les­ba­res Ja­vaS­cript kom­pi­liert wird. Der gän­gigs­te und viel­leicht wich­tigs­te Ablauf in Pro­to­ty­pen ist der Wech­sel von ei­ner An­sicht zur nächs­ten, al­so der Über­gang und die Rei­hen­fol­ge­lo­gik der Art­boards. Fra­mer stellt da­für die so­ge­nann­te Flo­wCom­po­nent zur Ver­fü­gung, mit de­ren Hil­fe Sie mit den Art­boards kom­mu­ni­zie­ren kön­nen. Art­board1 und Art­board2 sind wie Ele­men­tA und Ele­men­tB die Na­men, die Sie selbst als Re­fe­renz für Art­boards und Ele­men­te ver­ge­ben ha­ben. Ei­ne prak­ti­sche Me­tho­de, die Fra­mer auf die­ser Ebe­ne bie­tet, ist flow.show­P­re­vious(), das ganz oh­ne Pa­ra­me­ter aus­kommt und ein­fach zum zu­vor ge­zeig­ten Art­board zu­rück­na­vi­giert. Sie müs­sen sich al­so nicht ex­pli­zit um den „Rück­weg” küm­mern, wenn Sie den „Hin­weg” ein­mal de­fi­niert ha­ben.

PROGRAMMLOGIK

Fra­mer teilt die Lo­gik sei­nes Pro­gramm­codes in vier grund­le­gen­de Kon­zep­te auf: Lay­ers, Ani­ma­ti­on, Sta­tes und Events. Lay­ers be­zeich­nen Ele­men­te der De­si­gno­ber­flä­che, die mit­hil­fe der Na­men an­ge­spro­chen und ma­ni­pu­liert wer­den kön­nen. Ani­ma­ti­on steu­ert die Ve­rän­de­rung von ei­nem Sta­di­um zum nächs­ten, entweder an­hand ein­zel­ner Ele­mentei­gen­schaf­ten oder auf der Grund­la­ge der Sta­tes, die ver­gleich­bar sind mit ei­nem ab­ge­spei­cher­ten Satz von Ei­gen­schaf­ten. Events die­nen in ers­ter Li­nie der Ab­fra­ge von Nut­zer-In­ter­ak­tio­nen – von click über tap, swi­pe, pan und mehr kön­nen Sie hier­über auf Ein­ga­ben der Pro­to­typ-Nut­zer re­agie­ren. Um das Ele­ment B aus dem obi­gen Bei­spiel nicht ein­fach nur ver­schwin­den, son­dern in den Hin­ter­grund aus­blen­den zu las­sen, kön­nen Sie die­sen End­zu­stand als Sta­te de­fi­nie­ren und die Ve­rän­de­rung vom Aus­gangs­zu­stand zum de­fi­nier­ten Sta­te als zwei­se­kün­di­ge Ani­ma­ti­on ab­lau­fen las­sen: Die An­wen­dungs­mög­lich­kei­ten von Fra­mer auf der Co­de­ebe­ne sind man­nig­fal­tig; die Op­tio­nen für Me­tho­den, Events, Ani­ma­tio­nen und pro­gram­ma­ti­sche Lo­gik ge­hen tief. Ei­nen Über­blick bie­tet die auf­ge­räum­te Do­ku­men­ta­ti­on [fra­mer.com/docs]. Da­mit aber auch Web­wor­ker oh­ne viel JS- oder Cof­feS­crip­tKennt­nis ei­nen schnel­len Ein­stieg fin­den, gibt es ei­ne gan­ze Rei­he vor­ge­fer­tig­ter Snip­pets und Short­cuts, die grund­le­gen­de Ak­tio­nen be­reit­stel­len und Kon­zep­te am Bei­spiel er­läu­tern. Dar­über hin­aus kön­nen Sie Ele­mentei­gen­schaf­ten, die Sie im Co­de bei­spiels­wei­se in ei­nem Sta­te de­fi­nie­ren, kurz­fris­tig mit­hil­fe ei­ner UI fest­le­gen – so müs­sen Sie nicht je­den Ei­gen­schafts­na­men und Wer­te­be­reich nach­schla­gen oder im Kopf be­hal­ten (Abb. 6). Wer im Netz schon mit Tools wie Co­dePen oder JSFidd­le ge­ar­bei­tet hat, er­kennt hier Par­al­le­len: ne­ben dem Co­de­fens­ter be­fin­det sich ei­ne Live-An­sicht, die oh­ne Re­fresh di­rekt auf die Än­de­run­gen des Co­des re­agiert. Au­to­ver­voll­stän­di­gung und -sug­ges­tio­nen bie­tet der Edi­tor von Haus aus. Auch ein­zel­ne Stan­dard-Snip­pets las­sen sich aus ei­ner Bi­b­lio­thek hin­zu­fü­gen und be­schleu­ni­gen so die Pro­gram­mie­rung. Ob und was Sie beim Schrei­ben syn­tak­tisch falsch ma­chen,

wird über ei­ne Zei­le un­ter­halb des Co­de­fens­ters ein­ge­blen­det. Wer noch tie­fer in den Co­de ein­drin­gen möch­te, hat auch die Mög­lich­keit, den Web­kit-We­bin­spek­tor zu star­ten und den Qu­ell­code der Live-Vor­schau zu in­spi­zie­ren.

OUTPUT, PRÄ­SEN­TA­TI­ON UND SHA­RING

Pro­to­ty­pen von Ap­pli­ka­tio­nen und Web­sites die­nen im End­ef­fekt ins­be­son­de­re der Prä­sen­ta­ti­on vor Ent­schei­dern und Kun­den. Fra­mer bie­tet meh­re­re Mög­lich­kei­ten, die Er­geb­nis­se an­de­ren Per­so­nen und Tes­tern zu­gäng­lich zu ma­chen: • Da­tei­e­be­ne: Fra­mer-Pro­jek­te sind nor­ma­le Ver­zeich­nis­se mit ei­ner in­dex.html, CSS- und JS-Da­tei­en und kön­nen, idea­ler­wei­se im Ser­ver­kon­text, di­rekt per Browser auf­ge­ru­fen wer­den. • LAN-Pre­view im Browser: Über ei­ne Pre­view-Funk­ti­on star­tet Fra­mer ei­nen lo­ka­len Web­ser­ver und macht den Pro­to­typ für das lo­ka­le Netz­werk per Browser er­reich­bar. • Re­mo­te Pre­view per App: Mit der glei­chen Pre­view-Funk­ti­on und der Hilfs-App „Fra­mer Pre­view” für iOS und An­dro­id lässt sich der Pro­to­typ in qua­si-na­ti­vem Kon­text auf Mo­bil­ge­rä­ten aus­pro­bie­ren. • Cloud: Mit der Fra­mer Cloud la­den Sie ih­ren Pro­to­typ ins Netz, um ihn von dort aus mit aus­ge­wähl­ten Per­so­nen im Browser zu tes­ten. Die Cloud-Va­ri­an­te drängt sich für ei­ne Kom­mu­ni­ka­ti­on mit Kun­den förm­lich auf. Mit der Mög­lich­keit, zu­sätz­li­che Be­schrei­bun­gen zu hin­ter­le­gen und auch meh­re­re Ver­sio­nen zu ver­wal­ten, fin­den Sie hier ei­nen un­kom­pli­zier­ten und ro­bus­ten Dia­lo­g­hel­fer.

PREI­SE

Nach ei­ner 14-tä­gi­gen Test­pha­se schlägt Fra­mer mit 15 US-Dol­lar pro Mo­nat zu Bu­che. Da­bei ist die Ver­wen­dung der Cloud be­reits mit in­be­grif­fen. Sie zah­len al­so so­wohl für ei­ne Soft­ware als auch für ei­nen Ser­vice. Das Abo-Mo­dell macht mit die­ser Per­spek­ti­ve durch­aus Sinn. Et­was güns­ti­ger wird es mit ei­ner jähr­li­chen Abrech­nung (159 US-Dol­lar pro Jahr) oder für Stu­den­ten, die auf die Jah­res­li­zenz 50 % Ra­batt be­kom­men. Die „En­ter­pri­se”-Li­zenz für Fra­mer, die oh­ne Fix­preis aus­ge­zeich­net ist, ver­spricht noch um­fang­rei­che­re Cloud-Ka­pa­zi­tä­ten, Si­cher­heits­kon­zep­te für das kol­la­bo­ra­ti­ve Ar­bei­ten und In-Hou­seSchu­lun­gen.

DAS FRA­MER-TEAM UND DIE COM­MU­NI­TY

Ne­ben ei­ner um­fang­rei­chen On­line-Do­ku­men­ta­ti­on zeigt sich auf fra­mer.com je­de Men­ge Kom­mu­ni­ka­ti­ons­lust. Die Com­mu­ni­ty or­ga­ni­siert das Fra­mer-Team über of­fe­ne Face­book-Grup­pen wie „frame­rams­ter­dam” oder „framer­ber­lin” und ein of­fe­nes Fra­mer-Team für den In­stant Mes­sen­ger Slack [fra­mer.slack.com]. Dar­über hin­aus bie­ten die Ams­ter­da­mer re­gel­mä­ßi­ge Mee­tups in Eu­ro­pa und den USA an. Als Er­gän­zung zur Do­ku­men­ta­ti­on und als ei­ge­ner News-Kanal zeigt der Fra­mer-Blog Bei­spie­le, Tu­to­ri­als und Dis­kus­si­onraum für UI-Her­aus­for­de­run­gen und neue Ent­wick­lun­gen rund um den Fra­mer-Cli­ent [blog.fra­mer.com]. Wer neue Fea­tu­res be­reits vor of­fi­zi­el­lem Launch tes­ten möch­te, kann mit sei­ner re­gu­lä­ren Li­zenz auch die neu­es­te Be­ta-Ver­si­on her­un­ter­la­den und aus­pro­bie­ren. In Sa­chen Re­lease-Zy­klus legt das Fra­mer-Team der­zeit ei­ne ho­he Fre­quenz an den Tag. Erst im April be­kam die UI von Fra­mer ei­ne Kom­plett­über­ho­lung, im Ju­ni ge­sell­te sich das „Face­book Sound Kit” zur Im­ple­men­tie­rung von Au­di­o­feed­back hin­zu, und seit Ju­li ge­ben ani­mier­ba­re Ver­läu­fe Grund zur Neu­gier. Es ist da­von aus­zu­ge­hen, dass es mit der Ent­wick­lung von und mit Fra­mer erst ein­mal so schnell nicht lang­wei­lig wird.

FA­ZIT

Fra­mer ist ein mäch­ti­ges Pro­to­typ­ing-Tool und mit sei­ner auf­ge­räum­ten und ver­ständ­li­chen Ober­flä­che an­ge­nehm ein­stei­ger­freund­lich. Es ist wahr­schein­lich, dass ei­ner aus­ge­wach­se­nen De­si­gnab­tei­lung die Gestal­tungs­mög­lich­kei­ten nicht weit ge­nug ge­hen und sich ein Pro­gram­mie­rer ei­nen tie­fer kon­fi­gu­rier­ba­ren Edi­tor wünscht. Da­bei gilt es aber, im Hin­ter­kopf zu be­hal­ten, dass Pro­to­ty­pen eben nicht den An­spruch ha­ben, ein fer­ti­ges Pro­dukt zu sein, und die Zeit, die auf die Ent­wick­lung ei­nes in­ter­ak­ti­ven Mock­ups ver­wen­det wird, über­schau­bar blei­ben soll­te. Fra­mer scheint hier tat­säch­lich der Spa­gat zwi­schen schnel­len Er­geb­nis­sen und kom­ple­xen An­for­de­run­gen zu ge­lin­gen. Da der Fo­kus aber sehr auf­fäl­lig auf Mo­bi­le, sprich Smart­pho­ne- & Ta­blet-Ap­pli­ka­tio­nen liegt, müs­sen Sie im Ein­zel­fall gut über­prü­fen, ob sich da­mit bei­spiels­wei­se die Idee ei­ner We­bapp oder ei­nes Mul­ti­platt­form-An­ge­bo­tes ab­bil­den lässt. Der nie­der­schwel­li­ge Zu­gang und die 14-tä­gi­ge Test­pha­se er­leich­tern die­se Ent­schei­dungs­fin­dung.

Abb. 1: Die ver­trau­te Ober­flä­che ei­nes gra­fi­schen Edi­tors

Abb. 2: Die Co­de­an­sicht mit Live-Vor­schau

Abb. 3: Nicht nur Di­men­sio­nen und Po­si­tio­nen, son­dern auch das Ver­hal­ten bei sich ver­än­dern­dem View­port lässt sich de­fi­nie­ren, inkl. ani­mier­ter Vor­schau.

Abb. 5: Das ge­stal­te­te Art­board mit Vor­schau des Ver­hal­tens beim Scrolling

Abb. 4: Flui­des und kon­trol­lier­tes Re­si­zing in Fra­mer

Abb. 6: Mit hilf­rei­chen op­tio­na­len Ei­gen­schaft-In­ter­faces ver­ein­facht Fra­mer das Schrei­ben von Sta­tes und An­wei­sun­gen.

Mir­ko Lem­me ist Front­end-Ent­wick­ler bei der agen­tur­fu­er­kran­ke­me­di­en Gm­bH in Ber­lin [agen­tur­fu­er­kran­ke­me­di­en.de] und da­ne­ben, wenn es die Zeit zu­lässt, frei­be­ruf­li­cher Web­wor­ker [mi­le­on.net]. Der pas­sio­nier­te Mu­si­ker mag au­ßer­dem Vi­deo­spie­le, Dou­glas Adams und Sel­ber­ko­chen.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.