Loosst eis vun Ufank un ufänken

Design System. An de leschte Joeren ass dëse Begrëff iwwerall. Fir eis Designer sinn d'Definitioun an d'Nëtzlechkeet vun engem Designsystem selbstverständlech. Wéi och ëmmer, fir aner Teammemberen ass et net ëmmer sou kloer. 

Wann Dir scho wësst wat en Designsystem ass, zéckt net direkt op de Paragraf iwwer Kommunikatioun ze sprangen.

Am Joer 2018 huet Usabilis dës Beschreiwung ugebueden: en Design System ass wéi eng Bibliothéik vu Komponenten (Bibliothéik), Visuals a Prinzipien mat reusable Code. Dëse skalierbare Kit bitt en UX an UI Repository fir Designer an Entwéckler vun digitale Produkter a Servicer. Ok, awer ouni technesche Jargon? 

Mir kënnen en Designsystem mat enger grousser Kichen vergläichen. Et gi vill Zutaten a Rezepter déi Iech erlaben dës Zutaten richteg ze benotzen.

D'Käch vum Designsystem sinn d'Designer (UI an UX) an d'Entwéckler. Et ass hinnen datt den Design System am meeschte wäert déngen. D'Designer wäerten d'Ingredienten auswielen (d'Komponente erstellen), d'Rezepter schreiwen (d'Modeller maachen) an d'Entwéckler ubidden, déi d'Platen kachen (entwéckelen Websäiten, Apps, etc.).

Andeems Dir eng gemeinsam Kichen benotzt, déiselwecht Zutaten an déiselwecht Rezepter benotzt, sinn d'Designer an d'Entwéckler sécherlech Konsistenz op all Platen, déi an de Raum geliwwert ginn (an der Produktioun) a virun allem e Resultat ganz no oder souguer identesch mat der Modeller erstallt upstream.

An dat ass net emol den Haaptvirdeel vum Designsystem! Tatsächlech ass säin Haaptaktiv d'Vitesse vun der Ausféierung déi et fir dat ganzt Produktteam (Designer + Devs) méiglech mécht. D'Komponente si scho fäerdeg, alles wat Dir maache musst ass se ze sammelen fir nei Säiten, Interfaces, ...! Mir vergläichen den Designsystem dacks mam Lego, et ass net fir näischt.

Deen aneren Haaptvirdeel kënnt aus Komponentupdates. Tatsächlech, all d'Komponenten, déi un d'Bibliothéik "verbonne" sinn, en Update vun engem vun hinnen direkt an der Bibliothéik mécht et méiglech, de Komponent ouni Ustrengung ze aktualiséieren, egal wou se benotzt gëtt. Spuert Zäit, spuert Effort (net néideg fir d'Hand ze sichen wou de Komponent benotzt gëtt!), Wat méi kéint Dir froen?

Verzichterklärung: fir d'Entwéckler huet den Designsystem nëmme Virdeeler fir d'Front. Et hëlt op kee Fall ewech vun der Komplexitéit vum Réck an de Gestiounsregelen.

# Inhalter

En Design System besteet allgemeng aus 2 Quelle vun Aarbecht. Eng Quell fir Designer, kompatibel mat der benotzter Software (Sketch, Figma, ...) an eng Quell fir Entwéckler, déi all déi scho entwéckelt Komponenten an hire Code presentéiert. A jiddwer Fall kënnen d'Komponenten, déi op dëse Quellen präsent sinn, direkt "genannt" ginn (entweder an de Modeller fir d'Designer, oder am Code fir d'Devs), wat vill Zäit a Konsistenz op der Realisatioun spuert.  

Wa mir schwätzen du Design System, meeschtens bezéie mir op d'Dev Quell well et ass wat an der Produktioun benotzt gëtt. Dëst sinn d'Elementer déi et enthält, déi vun den Endbenotzer gesi ginn. D'Designerquell soll nëmme fir Designer an Entwéckler siichtbar sinn.

Awer wat ass dobannen? Gutt et hänkt dovun of. Et ginn natierlech Richtlinnen, eng Villfalt vun Artikelen déi bescht Praktiken oplëschten. Zéckt net hinnen ze verfollegen wa se net ganz der Bedierfnesser entspriechen. Ausserdeem ass en Designsystem opzestellen eppes ganz laang. Alles op eemol ze maachen ass komplizéiert. Et ginn allerdéngs wichteg Elementer, op deenen ee sech tendéiert, manner primordial Elementer, déi et trotzdeem gutt ass ze hunn an déi mer spéider komplett kënne bäidroen.

E puer wichteg Inhaltselementer:

• Faarwen
• Typographie
• graten
• d'Komponenten
• d'Richtlinne fir d'Benotzung vun all den uewe genannten Elementer
• den Toun ze benotzen

A menger Erfahrung sinn d'Haaptthemen beim Astelle vun engem Designsystem:

• fir d'Firma: d'Käschte vun der Grënnung an Ënnerhalt déi laangfristeg rentabel wäert sinn
• fir d'Equipen, déi et opbauen an et benotzen: Virwaat d'Arrivée vun neie Memberen am Team an Designer-Entwéckler Kommunikatioun

Hei konzentréiere mir eis op dat wat d'Equipen direkt beaflosst.

Wann Dir Iech frot wat sou speziell ass iwwer d'Arrivée vun zukünftege Memberen, Ech hunn eng Fro fir Iech. Hutt Dir schons probéiert bei engem aneren d'Haus ze kachen? Wa jo, hutt Dir all Schief an Tiräng opgemaach fir d'Ingredienten an d'Geräter ze fannen déi Dir braucht? Sidd Dir iwwerrascht net e Gewierz ze fannen deen Dir als essentiell ugesinn? Fir mech ass d'Äntwert jo.

Et ass genau d'selwecht fir eisen Designsystem. Egal ob et en neien Entwéckler oder en neien Designer ass, deen an d'Team bäitrieden, hie muss ganz séier eleng kënnen fannen, wat e sicht, an datt d'Benotzungsinstruktioune genuch kloer sinn, fir datt hien d'Komponente richteg benotze kann. . Dëst erlaabt eis Newbie (loosse mer hien Fred nennen) deen neie Projet an de beschte Konditiounen an ouni Frustratioun ze iwwerhuelen.

Da kënnt d'Fro vun der Kommunikatioun. Duerch Ausdehnung vun der Nomenklatur an Arrangement vun Komponenten am Design System. Tatsächlech, fir Teammemberen (nei oder net) de Wee ronderëm ze fannen, muss den Designsystem schonn intuitiv sinn.   

Wann Teammembere verschidde Begrëffer benotze fir op déiselwecht Komponent ze referenzéieren, desto oder spéider gëtt et e Problem.

Loosst eis en einfacht Beispill huelen : 

E puer wäerten hei vun Droplist schwätzen, anerer vun Dropdown. Nach anerer aus Dropdown-Lëscht oder souguer vun DDL. 4 méiglech Nimm fir eng eenzeg Komponent ze designéieren.

Wann fir verschidde Komponente vum Designsystem jidderee säin eegene Numm benotzt, wäert d'Kommunikatioun tëscht de Leit ëmmer méi schwéier sinn, well jidderee muss den Effort maachen ze erënneren datt de Lenny "Dropdown" seet, Karl "DDL", Lisa "Droplist" .

Jidderee wäert also all Kéier de Gedanken vum aneren iwwersetzen. Stellt Iech an deem Kontext elo den Tony vir, déi lescht Arrivée. Hie weess nach net datt dës Kollegen verschidden Nimm benotzen fir iwwer datselwecht ze schwätzen. Wärend engem Gespréich wäert d'Lisa mat him iwwer "Droplist" schwätzen. Dat ass gutt, de Fred brauch et fir seng Aarbecht. Et wäert also op den Designsystem bezéien an ... et gëtt kee Komponent mam Numm "Droplist". Et wäert also eng extra Effort huelen fir Fred déi berühmte Komponent ze fannen. Hie wäert och musse léieren datt de Lenny an de Karl aner Begrëffer benotzen. 

Ëmgekéiert, wann Dir iwwer déi nächst Faarf schwätzt, sot Dir "blo", an d'ganz Equipe benotzt dee selwechte Begrëff, da wäert d'Kommunikatioun gutt goen. Wa mir soen "dës Komponent ass blo", jidderee ronderëm den Dësch wësse vu wéi engem Schatt vu blo mir schwätzen.

Wéi Dir kënnt gesinn, eng eenzeg Nomenklatur fir all Teammemberen ze hunn, souwuel mëndlech wéi am Designsystem, ass ganz wichteg fir flësseg Kommunikatioun ze hunn, an och fir einfach Handhabung an Navigatioun am Designsystem z'erméiglechen.

# Erhalen an Aktualiséierung vum Design System

E Schlësselbegrëff an der Usabilis Beschreiwung ass "skalierbar". En Designsystem ass geduecht fir a Bewegung ze sinn. Dëst sinn keng Gesetzer aus Steen geschnëtzt: d'Elementer, déi et komponéieren, kënnen aktualiséiert ginn, anerer kënnen erstallt ginn, al Komponente kënnen geläscht ginn. Just wéi mir e Rezept un eise Goût upassen nodeems se et e puer Mol gemaach hunn, kënne mir nei Zutaten derbäisetzen fir méi Aromen, méi Subtilitéiten ze kréien. 

En Design System ass keen Zweck op sech. Et ass en Aarbechtsinstrument fir Designer an Entwéckler. Als esou entwéckelt hien mat Teams a Projeten.

En Designsystem soll net als Projet mat enger limitéierter Dauer ugesi ginn. D'Komponenten a Reegelen déi et enthält kënne änneren. Aussergewéinlech Variatiounen vun e puer Komponente kënnen néideg sinn. Dofir ass et wichteg weider Ressourcen ze verdeelen (Dev + Designer) fir den Designsystem ze iwwerwaachen an z'erhalen. Wann et fir e Joer ausgelooss gouf, wier et aktualiséieren bal wéi all d'Aarbechte fir se opzestellen nei ze maachen. Et ass ganz laang. Keen wëll dat zweemol maachen. Net ze ernimmen d'Käschte fir d'Geschäft. Et ass dofir essentiell Ressourcen ze verdeelen fir den Ënnerhalt an d'Evolutioun vum Designsystem. Eng Stonn pro Woch kann genuch sinn ofhängeg vum Grad vun der Reife vun der DS.

# Schlëssel Punkten

Wann Dir esou wäit komm sidd, hoffen ech datt dësen Artikel nei Horizont fir Ären Designsystem opgemaach huet, oder datt Dir besser verstitt wat et ass a wat et ass fir.

Wann Dir musst nëmmen e puer Punkten erënneren :

• Den Designsystem ass e Kreatiouns- a Kommunikatiounsinstrument gebaut vun a fir Designer an Entwéckler
• Et garantéiert d'Konsistenz vun engem Produkt
• Seng Käschte fir Implementatioun an Ënnerhalt gi gréisstendeels kompenséiert duerch d'Vitesse vun der Ausféierung déi et Designer an Entwéckler ubitt.
• Et kann mat der Zäit änneren
• Et soll regelméisseg aktualiséiert ginn