Der kan være en del udfordringer forbundet med at fastholde konsistens på større websites eller andre digitale løsninger, som med tiden ændrer sig gennem optimering eller brugertilpasning. Her kan et designsystem være til stor hjælp for både din organisation og eksterne interessenter der skal træffe designbeslutninger. Undgå misforståelse når der løbende udvides eller det eksisterende design skal opdateres.
Et designsystem kan hjælpe med at sikre at din brugergrænseflade er konsistent. Det inkluderer typisk en række standardiserede komponenter og retningslinjer hvilket kan gøre det nemmere at skabe en sammenhængende og godt designet brugeroplevelse. Dette kan spare tid og kræfter i udviklingsprocessen og kan også bidrage til højne kvaliteten af dit webprojekt. Derudover kan et designsystem gøre det nemmere at vedligeholde og opdatere din projekt over tid, da alle designelementer og komponenter vil være centralt styret og organiseret.
Lidt historie
Designsystemer har eksisteret siden 1960’erne og har udviklet sig siden hen. I 1980'erne introducerede Apple fx deres "Human Interface Guidelines", der beskrev en række principper og designmønstre til at skabe brugervenlig software." Offentlighedens interesse steg dog da Yahoo introducerede deres Design Pattern Library tilbage i 2006, og siden er Google også kommet på banen med deres Material Design, som også køres som et Open Source projekt.
Designsystemer har vundet betydelig popularitet i de senere år, da flere og flere organisationer har anerkendt vigtigheden af at have en konsistent brandidentitet.
Overvejelser
Inden man kaster sig ud i at indføre principperne er det værd at overveje hvor meget tid man indledningsvis vil investere. Detaljegraden i dit system afhænger af omfanget af projektet, og hvor meget variation der er på tværs af dit indhold.
Byggestenene i dit designsystem kan være af varierende størrelse. Hvordan du vælger at organisere dig afhænger også af om dit projekt har en lang levetid. Jo længere projektet lever, jo større er sandsynligheden for at der på sigt skal tilrettes, udvides med ny funktionalitet, eller at det generelle visuelle design skal have en opdatering. Bliver der dog ikke tilføjet ny funktionalitet er spørgsmålet om det er rentabelt at bruge tiden på den store forkromede løsning. Her kan det være til fordel ’bare’ at få udgivet sit projekt. Man burde nu løbende arbejde på at forbedre brugeroplevelsen og dermed også opdatere UI efter behov.
Fordele med et design system
Der er mange fordele ved at indføre en stringent tilgang til det digitale design. Når først byggestenene er på plads er det mere effektivt at tilføje variationer på eksisterende komponenter som knapper, menuer og andre elementer der genbruges på tværs af UI.
En anden væsentlig fordel er at dit team, men også eksterne interessenter, har en ”single source of truth” at henvise til. Her kan systemet bruges bl.a. i afklaringsfasen omkring det visuelle design. Man skaber en fælles forståelse af hvad der forventes at bliver implementeret i sidste ende. Systemet hjælper også i overleveringen fra designer til udvikler hvor væsentlige detaljer omkring interface og layout kan videregives helt eksakt. Afhængigt af hvordan man vælger at organisere sig, skal det dog nævnes at ting som animationer, overgange og hvordan komponenter opfører sig, kan være en udfordring at få indført på en klar og forståelig måde. Her handler det igen om hvor meget energi man vil bruge på at udbygge sit system. I nogle tilfælde er det nok at udstikke nogle generelle retningslinjer i stedet for at være super detaljeret i forhold til alle aspekter af ens design.
Struktur
Man tager som regel udgangspunkt i den designguide der forhåbentlig er udviklet til projektet eller ens virksomhed, men det betyder ikke at alt er afklaret på forhånd når det kommer til web. Her handler det om hvor flittig designeren har været med at kortlægge web UI, men ofte er denne del noget sparsom. Det er måske heller ikke pointen ved designguiden af gå helt i dybden og her kan et design system være et vigtigt supplement.
Man kan betragte designsystemet som et levende dokument, hvor designguiden bruges som reference i forhold til den endelige opsætning af de grundelementer ens web UI består af.
Typiske byggeklodser til dit designsystem:
- Farver
- Skrifttyper
- Knapper
- Formelementer
- Navigation
Templates:
- Komponenter (gruppering af elementer)
- Paneler (brug af komponenter)
- Sider (paneler og komponenter)
I hvor høj grad du går i detaljen omkring dine komponenter er op til dig, men her skal man også indtænke forskellige breakpoints som desktop, tablet eller mobil layouts.
Løbende tilpasning
Når ens projekt kører og man senere ønsker at justere eller opdatere UI, er det en væsentlig fordel, hvis designet allerede er systematiseret. Hvis ens system er godt opbygget, kan man hurtigt finde de nøjagtige designelementer, der kræver justering. Det er også let at udvide dele af systemet med varianter efter behov. Som tidligere nævnt er det vigtigt at have et centralt sted, hvor man kan henvise til, da det effektiviserer processen og eliminerer tvivl om seneste versioner. Dette reducerer ikke kun risikoen for designfejl og inkonsistens, men tillader også større skalerbarhed, da flere designere kan bidrage til projektet uden at skabe flaskehalse.
Her skal det dog nævnes at der skal beregnes timer til vedligehold i form af løbende opdatering, for at systemet forbliver relevant og tidssvarende.
Designsystemer tilbyder mange kommunikationsfordele for designteams, udviklere og interessenter. Ved at give en fælles visuel sprogbrug og sæt af designretningslinjer, kan designteams kommunikere mere effektivt. Med en fælles forståelse af designelementer og komponenter kan designere skabe sammenhængende og ensartede designløsninger, som er let forståelige for alle teammedlemmer.
Desuden kan designsystemer lette samarbejde på tværs af forskellige teams og afdelinger, nedbryde siloer og muliggøre mere effektiv kommunikation og teamwork. Dette kan føre til forbedret effektivitet og produktivitet samt bedre resultater.
Alt i alt kan designsystemer i høj grad forbedre designprocessen ved at lette samarbejdet og reducere mængden af tid og kræfter, der er nødvendige for at skabe høj kvalitet og ensartede løsninger.
Fordele og ulemper ved designsystemer
Fordele:
- Effektivitet på den lange bane
- Nemt for andre at overtage design
- Skaber overblik
- One place of truth
- Nemmere overlevering
- Effektivitet i designfasen
Ulemper:
- Tidsmæssig investering ved opstart
- Kræver løbende vedligehold
- Kan betyde længere forløb ved mindre designtilføjelser