Designsystemet med enkla penseldrag

Har du någonsin undrat hur vissa företag lyckas få all sin design att kännas så genomarbetad och sammanhållen? Designsystem är svaret.

Ett framgångsrikt designsystem utgör en enhetlig grund för varumärkets identitet, användarupplevelse och allt annat som företaget kommunicerar. Det finns lika många olika designsystem som det finns produkter, vissa är mer lika än andra. Vi delar på samma spelplan men hur vi tar oss an våra förutsättningar bestämmer vi själva. Ett designsystem kan i många fall vara en värdefull investering vid uppskalning av projekt men det finns även situationer där det kostar mer än vad det smakar. I artikeln ska vi titta mer på vad ett designsystem är och vilka värdefulla goldkorn som inte får missas.

Bild på textbeskrivning av designsystemets uppsättning och olika beståndsdelar

Vad är ett designsystem?

Vi vet att designsystemets omfattning och innehåll kan variera beroende på projektets specifika behov, med det i åtanke finns det dock nyckelelement som, trots de förutsättningar som råder, är avgörande för att behålla designsystemets värde och funktion.

En styleguide

Ett visuellt språk. Med färgpaletter, typsnitt, ikoner och andra grafiska element skapar det igenkänning och enhetlighet. Här ingår mer än bara estetik; det kan omfatta även tonalitet och designprinciper, och fungerar som bärare av varumärkets identitet.

Komponentbibliotek

Komponentbiblioteket är systemets byggstenar, från enkla knappar och ikoner till komplexa användargränssnitt som sökformulär. Inspirerat av atomic design-principen, kan komponentuppbyggandet delas upp i stadier som bla atomer (ikoner), molekyler (sökformulär) och organismer, där varje del, stor som liten, bidrar till helheten.

Designmönster

Designmönstret är självaste grundstrukturen som bla består av layout och grid-system. Den styr hur komponenter och innehåll struktureras sinsemellan samt hur de interagerar och anpassas över olika enheter.

Intern kommunikation

En av de viktigaste pelarna är kommunikationen. Genom tydliga riktlinjer, ett gemensamt språk och tydliga processer för uppdateringar och underhåll, skapas förutsättningar för designers och utvecklare att jobba tillsammans. Intern dokumentation av ett designsystem är nyckeln till att få samtliga i teamet att förstå hur produkten ska byggas.

Bild på textbeskrivning av de värden som ett designsystem bidrar med

Varför behöver vi ett designsystem?

Att jobba systematiskt med design av digitala produkter har flera fördelar som påverkar allt från projektets arbetsflöde till slutproduktens kvalitet och användarvänlighet. Systematisering innebär att skapa en språngbräda för effektivitet och konceptet rimmar väl med etablerade metoder för utveckling i kod. Utöver att visa hur olika delar av produkten ser ut, vad de heter och hur de bör fungera så skapas även en bredare förståelse för hur dimensioner som varumärke, tillgänglighet och upprepning av designmönster genomsyrar hela processen. Här nedan har vi samlat vad vi tycker är några av de starkaste anledningarna till att man bör jobba med designsytem i en organisation.

Gemensamt språk

Om jag pratar mandarin och du pratar belgiska så blir det svårt för oss att dela vision och arbeta enhetligt. Detsamma gäller för hur vi kommunicerar och tolkar designens olika beståndsdelar och funktionaliteter.

Slippa återuppfinna hjulet

Troligtvis är du inte först med att möta de utmaningar som ni försöker designa för. Stå på jättarnas axlar och ta del av tidigare designval för att bygga nytt.

Användarcentrerat

När vi effektiviserar produktionsdelen av design får vi mer tid till det allra viktigaste; att identifiera och lösa användarnas utmaningar.

Maximera skalbarhet

Genom att centralisera och återanvända designbeslut separerar vi designens omfattning från produktens. Otaliga varianter och uttag kan göras utifrån på ett koncist system vilket ger ökad kontroll när produkten och kontexten växer.

Kvalitetssäkring

Systematiseringen av design ger ökad sammanhållning och möjlighet att ha tydlig överblick i alla nivåer. Med en tydlig referens är det lättare att identifiera avvikelser.

Hand-off till utvecklare

Utan utveckling finns vår design inte ute i den riktiga världen. En tydligare överlämning leder till mindre tolkningsutrymme och i förlängningen även färre missförstånd.