Le­an Pat­tern Li­bra­ry

PAGE - - WERKZEUG -

● Der Blog Dou­ble Your Fre­e­lan­cing (DYF) ver­kauft er­folg­reich Bil­dungs­pro­duk­te und Kur­se für Frei­be­ruf­ler. Die in die Jah­re ge­kom­me­ne Web­site war aus ver­schie­de­nen Tem­pla­tes zu­sam­men­ge­setzt, zeig­te ei­nen Mix ver­schie­de­ner Css-sti­le und mach­te ei­nen ama­teur­haf­ten und in­kon­sis­ten­ten Ein­druck. An­stel­le ei­nes Re­de­signs ent­schie­den sich der Be­trei­ber Brenn­an Dunn und die bri­ti­sche Ux-de­si­gne­rin Laura Eliz­a­beth für ei­nen Pat­tern-ba­sier­ten An­satz. So las­sen sich neue Ver­kaufs- oder Mar­ke­ting­sei­ten schnell auf­set­zen und die Web­site leicht ska­lie­ren, oh­ne die Kon­sis­tenz zu ge­fähr­den.

Die Bi­b­lio­thek selbst ist in die drei Ab­schnit­te Sty­ling, Mo­du­le und Brand As­sets un­ter­teilt. Sty­ling um­fasst das ge­sam­te all­ge­mei­ne Er­schei­nungs­bild der Web­site: Ty­po­gra­fie, Far­ben, Grids et ce­te­ra. Die Mo­du­le las­sen sich mi­schen und an­pas­sen, um wei­te­re Sei­ten zu er­stel­len. Im Be­reich Brand As­sets lie­gen das Lo­go so­wie Fonts, Fo­tos und Pro­duk­til­lus­tra­tio­nen.

Die Pat­tern Li­bra­ry ba­siert ur­sprüng­lich auf ei­ner Pho­to­shop-da­tei, doch zur­zeit co­diert Laura Eliz­a­beth ei­ne Word­press-vor­la­ge für die CSS-KOM­po­nen­ten. Ei­ne In­ves­ti­ti­on in Schnitt­stel­len – zum Bei­spiel zum Con­tent-ma­nage­ment-sys­tem – lohnt sich erst, wenn das Un­ter­neh­men wei­ter wächst. ↗

be­zeich­nen wür­de. Und ei­ne Ka­te­go­rie But­tons lie­ße sich wei­ter klas­si­fi­zie­ren in Call­to­ac­tion­but­tons, Send­but­tons, Ra­dio­but­tons, Check­bo­xes et ce­te­ra. Die­se Mi­ni­mal­ein­hei­ten las­sen sich dann ganz nach Be­lie­ben zu Mo­le­kü­len, Or­ga­nis­men, Tem­pla­tes und schließ­lich gan­zen Pa­ges ver­ei­nen (sie­he »Schmu­cke Bi­b­lio­thek« auf Sei­te 85).

Pat­terns: Was kommt rein, was bleibt drau­ßen?

Die funk­tio­na­le Ka­te­go­ri­sie­rung der De­sign Pat­terns hat sich nicht nur bei think mo­to be­währt, doch manch­mal er­for­dern spe­zi­el­le An­for­de­run­gen des Un­ter­neh­mens ei­ne ab­wei­chen­de Kon­zep­ti­on. Wolf Brü­ning er­läu­tert die Vor­ge­hens­wei­se bei OT­TO: »Wir ha­ben un­se­re Pat­terns nach den Auf­ga­ben struk­tu­riert, die der UX De­si­gner zu lö­sen hat, und un­ter­tei­len da­her nach Ele­men­ten für Con­tent, Glie­de­rung, In­ter­ak­ti­on, Feed­back, For­mu­la­re et ce­te­ra.« Da­zu gibt es noch die Ka­te­go­rie »Frag­men­te«, in der Ele­men­te zen­tral de­fi­niert sind, die zwar im ei­gent­li­chen Sin­ne kei­ne Pat­terns sind, aber grund­le­gend den vi­su­el­len Stil der Pat­terns und der OT­TO­WEB­site prä­gen. Das sind zum Bei­spiel Schrift­ar­ten, nor­mier­te Schrift­grö­ßen und Far­ben, aber auch die Ra­di­en ab­ge­run­de­ter Ecken.

Wie in­ten­siv De­sign­teams um die Ent­schei­dung rin­gen, wel­che De­sign Pat­terns in die Li­bra­ry auf­ge­nom­men wer­den, da­von kann Laura Eliz­a­beth, UXDe­si­gne­rin in Croy­don, Groß­bri­tan­ni­en, ein Lied sin­gen: »Man muss sich wirk­lich je­de ein­zel­ne Kom­po­nen­te an­schau­en, und das dau­ert«, ver­sucht sie den Zeit­auf­wand zu ver­mit­teln. Wer sich bei der Ka­te­go­ri­sie­rung un­si­cher ist, kann sich auf Sty­le­gui­des.io von be­reits be­ste­hen­den Pat­tern Li­bra­ries in­spi­rie­ren las­sen. So be­kommt man schon mal ei­ne Vor­stel­lung von mög­li­chen Sys­te­ma­ti­ken und kann auf der ei­ge­nen Web­site ge­ziel­ter nach Ele­men­ten Aus­schau hal­ten, die man neu kom­bi­nie­ren oder wie­der­ver­wen­den möch­te. »Auch schein­bar un­be­deu­ten­de Din­ge wie die Na­mens­ge­bung neh­men viel Zeit in An­spruch«, warnt Eliz­a­beth. Schließ­lich soll der Na­me des Pat­terns für De­si­gner wie De­ve­l­oper auf den ers­ten Blick ver­ständ­lich sein.

Be­nen­nen Sie Pat­terns im­mer zu­sam­men mit den De­ve­l­opern!

Mar­co Spies rät De­si­gnern, beim Na­ming eng mit den Ent­wick­lern zu­sam­men­ar­bei­ten: »So schla­gen sich die Css­klas­sen in den Na­men nie­der und die ent­spre­chen­den Ele­men­te sind für Ent­wick­ler schnell auf­zu­fin­den.« So wie der De­ve­l­oper das Atom im CSSCo­de be­nen­nen wür­de, soll­te es auch in der Sket­cho­der Pho­to­shop­da­tei hei­ßen.

Bei think mo­to den­ken die UX und In­ter­face De­si­gner von An­fang an in Pat­terns und sam­meln sie in ei­ner Sketch­da­tei. Da­mit ih­re De­ve­l­oper­kol­le­gen den Wi­re­frame ver­ste­hen, ex­por­tie­ren sie das De­sign in das Kol­la­bo­ra­ti­ons­tool Ze­plin, das es di­rekt in CSS um­wan­delt. Auch Pat­tern Lab oder In­vi­ si­on wür­den sich zu die­sem Zweck eig­nen (sie­he »Tools zum Au­fau von UI De­sign Pat­tern Li­bra­ries«, rechts). »Da­mit sind ei­gent­lich schon 80 Pro­zent der Ent­wick­lung der Pat­tern Li­bra­ry ge­tan«, sagt Mar­co Spies. Ih­ren Au­fau, das fin­det auch Wolf Brü­ning, soll­ten De­si­gner und Ent­wick­ler glei­cher­ma­ßen vor­an­trei­ben, denn bei­de pro­fi­tie­ren von ei­ner gu­ten Li­bra­ry.

Da­mit Mit­ar­bei­ter An­pas­sun­gen und Än­de­run­gen schnell um­set­zen kön­nen, soll­te man das Sys­tem zu­dem grund­sätz­lich of­fen und mo­du­lar hal­ten, meint In­ken Pe­ter­sen, Part­ner & Prin­ci­pal Pro­duct Stra­te­gist beim Ham­bur­ger UX Pro­duct Lab Uber­crea­ti­ve. »Die Pat­tern Li­bra­ry ist ein Ar­beits­tool und soll­te da­her gut be­dien­bar, ver­ständ­lich und ein­la­dend ge­stal­tet sein.« Neue Te­am­mit­glie­der soll­ten sich auch oh­ne Ein­füh­rung schnell zu­recht­fin­den, da­her sorgt Uber­crea­ti­ve im­mer für vie­le An­wen­dungs­bei­spie­le, die die Bi­b­lio­thek le­ben­dig ma­chen.

So hal­ten Sie Pat­tern Li­bra­ries am Le­ben

Man­che Un­ter­neh­men glau­ben: Wenn sie erst ein­mal ei­ne Pat­tern Li­bra­ry ha­ben, ist au­to­ma­tisch al­les kon­sis­tent und funk­tio­niert wie von al­lei­ne. Doch ist der Auf­wand für die Pfle­ge zu hoch, macht die Pat­tern Li­bra­ry mehr Ar­beit, als dass sie das Le­ben er­leich­tert, und läuft Ge­fahr, un­voll­stän­dig zu blei­ben oder sehr schnell zu ver­al­ten. »Das war schon bei den klas­si­schen Sty­le­gui­des so«, sagt Mar­co Spies. Zie­hen De­si­gner und De­ve­l­oper die Pat­tern Li­bra­ry nicht kon­ti­nu­ier­lich als ak­tu­el­le Re­fe­renz her­an, »stirbt sie den lei­sen Tod«, weiß auch Wolf Brü­ning.

Ei­ne Pat­tern Li­bra­ry kann nur le­ben, wenn das Un­ter­neh­men ei­ne Kul­tur schafft, in der sie auch tat­säch­lich von Nut­zen ist, und die ent­spre­chen­den Pro­zes­se – et­wa agi­le Pro­jekt­ma­nage­ment­me­tho­den wie Scrum oder Kan­ban – ein­zieht. Lei­der aber sei in vie­len Un­ter­neh­men noch nicht an­ge­kom­men, den Ent­wick­lungs­pro­zess agil in Sprints zu or­ga­ni­sie­ren, per­ma­nent zu tes­ten, Kon­zep­te zu ent­wi­ckeln. Dort wis­se man schlicht noch nicht, wie man mit Feed­back um­geht und Nut­zer in­te­griert, wie man Co­crea­ti­on macht und wie man zwi­schen­durch über De­sign Spi­kes die über­ge­ord­ne­te Vi­si­on ein­fängt: »Das ist viel­leicht in der Start­up­sze­ne ver­brei­tet«, sagt Mar­co Spies, »nicht aber bei eta­blier­ten Un­ter­neh­men.«

Die War­tung und ste­te Ak­tua­li­sie­rung der Pat­tern Li­bra­ry soll­te Be­stand­teil des nor­ma­len Ar­beits­pro­zes­ses sein. Nur so ist sie ein wirk­lich ge­nutz­tes und le­ben­des Sys­tem. »Mei­ner Er­fah­rung nach nimmt das bei ei­ner kon­ti­nu­ier­li­chen Pfle­ge und Ak­tua­li­sie­rung zwi­schen 10 und 15 Pro­zent der Ar­beits­zeit bei den Pat­tern­li­bra­ry­ver­ant­wort­li­chen in An­spruch«, schätzt In­ken Pe­ter­sen. Um die Pat­tern Li­bra­ry ver­ant­wor­tungs­voll zu war­ten und ih­re Ent­wick­lung vor­an­zu­trei­ben, soll­te man gleich zu Be­ginn Rou­ti­nen ver­ein­ba­ren. Mar­co Spies emp­fiehlt: »Man könn­te zum Bei­spiel je­den vier­ten Sprint da­für nut­zen, um

»Ei­ne gu­te Pat­tern Li­bra­ry be­deu­tet ver­netz­te De­si­gnar­beit im tech­no­lo­gi­schen Kon­text. Ar­bei­tet das Un­ter­neh­men zu ana­log, wird es schwie­rig«

De­si­gn­bugs zu be­he­ben, um Op­ti­mie­run­gen vor­zu­neh­men und um die Bi­b­lio­thek up­zu­da­ten.« Letzt­lich müs­se aber je­des Un­ter­neh­men für sich her­aus­fin­den, wel­che Rou­ti­nen sinn­voll sind.

Ei­nes gilt auf je­den Fall: Je mehr Le­ben in der UI De­sign Pat­tern Li­bra­ry steckt, des­to eher be­mer­ken Mit­ar­bei­ter po­ten­zi­el­len Wild­wuchs. Auch wenn der War­tungs­auf­wand mög­lichst ge­ring sein soll­te: Wie je­des nütz­li­che Werk­zeug braucht auch ei­ne Pat­tern Li­bra­ry Pfle­ge – sonst fängt sie an zu ros­ten. ae

Ato­mic De­sign. Wie man Brad Frosts Web­de­sign-me­tho­de um­setzt, er­fah­ren Sie im PA­GE edos­sier »Mo­du­la­re Gestal­tung« ↗ www.pa­ge-on­li­ne.de/pddp1051

Web- und App-de­sign mit Sketch. Ei­nen Work­shop zum The­ma Pho­to­shop vs. Sketch gibt’s in PA­GE 12.16 ↗ www.pa­ge-on­li­ne.de/pepa1612

Die Ru­bri­ken der Pat­tern Li­bra­ry des Blogs Dou­ble Your Fre­e­lan­cing kann je­der neue Mit­ar­bei­ter schnell in­tui­tiv er­grün­den. Un­ter dem Me­nü­punkt »Brand As­sets« sind Lo­go, Fonts, Fo­tos und Pro­duk­til­lus­tra­tio­nen leicht zu fin­den Sehr über­sicht­lich und schlan

Der Me­nü­punkt »Mo­du­les« ent­hält ei­nen spe­zi­el­len Be­reich für Kal­ku­la­to­ren. Da es auf der Web­site um Ho­no­ra­re geht, soll­ten auch die Kal­ku­la­t­or­gra­fi­ken ein ein­heit­li­ches Er­schei­nungs­bild ha­ben

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.