UI-kit
Fra designguide til UI-kit
Jeg omsatte DGI’s farver og typografi til et UI-kit i Figma og designede de øvrige komponenter. Kittet blev brugt som fundament for DGI’s designsystem på tværs af websites og portaler.
UI-design
Komponenter
Figma
Designsystem
Hvordan skaber vi et fælles fundament for mere ensartet design på tværs af DGI’s websites og portaler?
Jeg tog initiativ til UI-kittet, fordi det var uoverskueligt at finde relevante komponenter på tværs af eksisterende designs. DGI havde en designguide med farver og typografi, men manglede et fælles komponentgrundlag for de løsninger, vi arbejdede med uden for hovedsitet.
Jeg implementerede farver og typografi i Figma og designede UI-kittets øvrige komponenter. Målet var at samle et fælles udgangspunkt for kommende designopgaver og understøtte det designsystem, frontendudviklerne udviklede.
Komponenter og tilstande
Knapper og tekstfelter med forskellige varianter og tilstande
Responsiv datatabel
Fra tabellens overblik på desktop til en stablet visning på mobil
Komponenter i brug
Knapper og tekstfelter samlet i en dialog til standbylisten
Mine valg og tanker
Jeg byggede UI-kittet med udgangspunkt i DGI’s designguide for at gøre det lettere at skabe ensartede designs på tværs af websites, brands og portaler. Farver og typografi var allerede defineret, men jeg savnede et samlet sted at finde de komponenter, jeg skulle bruge i det daglige designarbejde.
Min tanke var at samle de tilbagevendende elementer, så jeg ikke skulle lede i tidligere designs eller genskabe en knap eller et tekstfelt til hver ny opgave. Ved at genbruge de samme komponenter kunne de få et konsekvent udtryk uden små forskelle i størrelse og udformning fra design til design.
Det betyder, at man kan bruge mere tid på den konkrete løsning og mindre tid på at tegne de samme grundelementer igen. Nye wireframes, designs og prototyper kan bygges med et fælles udgangspunkt, samtidig med at indhold og opbygning tilpasses den enkelte opgave.
Jeg ønskede også at skabe en tydeligere sammenhæng mellem mit arbejde i Figma og frontendudviklernes designsystem. UI-kittet skulle være det visuelle grundlag, vi kunne arbejde videre fra i fællesskab, så ensartetheden fulgte med fra design til implementering.
Et fundament for det videre arbejde
UI-kittet blev brugt som base for det designsystem, frontendudviklerne udviklede. Mit bidrag var at samle DGI’s farver og typografi i Figma og designe de øvrige komponenter, som kunne genbruges på tværs af digitale løsninger.
Det fælles komponentgrundlag gjorde designarbejdet mere effektivt og hjalp med at fastholde DGI’s visuelle identitet i nye løsninger. Det betyder, at man kan udvikle nye funktioner og websites med afsæt i noget eksisterende, frem for at begynde forfra hver gang.