Introduksjon
Designsystemer har blitt stadig mer populære i programvareutvikling. Som utvikler har jeg erfart at arbeid med designsystemer er både utfordrende og givende. Denne artikkelen deler mine erfaringer. Vennligst merk at dette ikke er en introduksjon til designsystemer; for det, vurder disse ressursene:
Historie
Jeg begynner med en historie om implementering av et designsystem for en kunde. En spesiell takk til Laurens, som har vært en viktig del av dette fra starten og også har delt sine tanker.
Hvorfor et designsystem?
Vi fokuserte på designsystemer da vi hadde behov for å standardisere utseendet på tvers av flere apper i én organisasjon. Både designere og utviklere (samt kunden) så behovet. Designere begynte å bruke forhåndsdefinerte komponenter og mønstre for å effektivisere arbeidet sitt.
Prosess
Vi fikk muligheten til å teste designsystemet vårt med en ny app vi utviklet. Dette førte til tettere samarbeid mellom designere og utviklere. Vi brukte Tailwind CSS-rammeverket, som forenklet arbeidet for alle. Vi baserte designene våre i Figma, som fungerte som vår "source of truth". Denne tilnærmingen ga designerne fleksibilitet, men skapte noen ganger utfordringer for utviklerne når designene ble endret.
Å involvere både designere og utviklere fra starten var avgjørende. Utviklere foreslo ofte små designjusteringer for å gjøre implementeringen enklere, og designere måtte være fleksible når uventede UI-problemer oppstod.
Utfordringer
Et designsystem må balansere konsistens med fleksibilitet. Vi bygde et Vue-bibliotek, siden vi primært bruker Vue, men vi fikk snart behov for et CSS-bibliotek for andre sammenhenger.
Suksesser
Nøkkelen til designbiblioteket vårt var å bruke det i reelle prosjekter. Dette ga umiddelbar tilbakemelding og gjorde det enklere å rettferdiggjøre prosjektet overfor forretningsinteressenter. Så hvis jeg skal gi ett råd – begynn å bruke designsystemet ditt med en gang.
Erfaringer
Implementeringen av et designsystem forbedret samarbeidet og ga umiddelbar tilbakemelding. Det forbedret komponentene våre, slik at de både ble estetisk tiltalende og funksjonelle. Mangelen på et dedikert team for nye komponenter førte til ekstra arbeid for utviklere på tvers av ulike team. Samtidig økte denne tilnærmingen effektiviteten, siden vi kunne gjenbruke komponenter utviklet av kolleger og selv bidra til biblioteket.
Komponenter måtte kunne testes isolert og være gjenbrukbare, noe som forbedret kodekvaliteten og tilgjengeligheten. Etter hvert som flere apper tok i bruk designsystemet, ble produktkonsistensen bedre. Denne gjenkjenneligheten bidro til å styrke merkevareidentiteten på tvers av produkter.
I tillegg førte det til bedre samarbeid og kommunikasjon mellom team, siden ulike team måtte bruke de samme komponentene. Dette forbedret kunnskapsdelingen mellom team, designere, utviklere og produkteiere.
Over tid har produktiviteten og hastigheten økt. Det som tidligere kunne kreve mange personer å implementere, kan nå gjøres av færre, takket være delte komponenter.
Konklusjon
I fremtiden vil designsystemer bli enda viktigere. Nye teknologier, som AI, vil gjøre dem enklere å bruke. Her er noen tydelige fordeler:
- Konsistens på tvers av produkter: Designsystemer bidrar til å holde grensesnitt like på ulike plattformer. Dette hjelper brukere med å gjenkjenne merkevaren din og forbedrer opplevelsen deres.
- Økt effektivitet: Å bruke de samme komponentene gjentatte ganger reduserer utviklingstiden og lar team fokusere på viktigere oppgaver. Dette gjør prosjektene raskere.
- Bedre samarbeid: Designsystemer hjelper designere og utviklere med å jobbe bedre sammen. De kommuniserer tydeligere og trenger færre endringer.
Bare så du ikke tror at designsystemer bare er idyll, krever det betydelig tid og planlegging å sette dem opp, det gir noen fleksibilitetsutfordringer, og det vil alltid være behov for ekstra vedlikehold.
Å starte et designsystem krever en investering, men fordelene i form av hastighet og kvalitet er verdt det.
Jeg vil gjerne høre om dine erfaringer med designsystemer. Hvilke fordeler eller utfordringer har du lagt merke til? Du kan sende meg en melding på Łukasz Polok | LinkedIn eller Ukash (@lukaspoloki) / X (twitter.com)
eller kommentere der du ser dette innlegget. La oss lære av hverandre.
