I takt med att webben förändras och måste anpassa sig till fler skärmstorlekar och plattformar blir en sammanhängande design allt viktigare. Komplexa system och tjänster innebär en utmaning för utvecklings- och designteam att hitta en gemensam vision för hur produkten ska se ut. Att stora team kan få svårigheter att hålla sig till samma vision är väl knappast förvånande, men utan riktlinjer att förhålla sig till kan även små team få problem att komma överens.

Uppdatering: I min artikel Så lyckas du med ditt designsystem skriver jag mer handfast om hur vi arbetar med designsystem. Något för dig som vill veta mer om hur du bygger ett designsystem som håller!

Vi har bra koll på designsystem för både små och stora produkter. Kontakta oss om du vill veta mer om hur vi kan hjälpa dig skapa en mer enhetlig produkt!

Alla Kholmatova har jobbat inom UX och interaktionsdesign i snart tio år och har under en tvåårsperiod undersökt designsystem närmare. I boken Design systems - a practical guide to creating design languages for digital products. använder hon ett av sina egna projekt som senior product designer på en öppen lärplattform för att illustrera hur designsystem kan gagna en verksamhet och stärka dess varumärke. 

Alla Kholmatova beskriver designsystem som sammankopplade designmönster och arbetssätt vars gemensamma syfte är att uppnå ett mål för en digital produkt på ett enhetligt sätt. Designmönster är element som upprepas genom ett gränssnitt, medan arbetssätt förklarar hur vi skapar och använder mönstren ifråga. 

Designprinciper

För att alla ska ha en gemensam förståelse för hur designsystemet ska användas behöver man fastställa ett antal principer. De ger riktlinjer för hur man som team möter företagets effektmål genom design av den digitala produkten. 

Principernas utformning kan skilja sig åt beroende på hur företaget ser ut, där de både kan vara mer inriktade på varumärket i sig ("tidlöst", "stilrent", "rofyllt") eller på sättet att arbeta ("funktion före form", "ingen onödig information"). Beroende på hur situationen ser ut kan de användas i olika omfattning. Kanske används vissa av dem enbart till ett specifikt projekt? Det är upp till verksamheten att bestämma. 

Eftersom designprinciper ofta innehåller mjuka värden är det svårt att avgöra om de följs eller inte. Att ta fram dem är ett tidskrävande arbete som kan behöva några iterationer innan man känner sig färdig - och det är mycket möjligt att de behöver ses över igen för att se om de fungerar. Nedan följer ett antal frågor att utgå från när man tar fram principerna (egen tolkning av Kholmatovas material).

  • Vad är syftet? - Utgå från företagets värderingar och visioner och formulera designprinciper som kan bidra till dem.
  • Vad är god design för oss? - Fråga de anställda om vad de anser att god design innebär och samla de gemensamma tankarna.
  • Vem designar vi för? - Utgå från användarna och deras behov.
  • Hur fungerar det? - Principerna kan fungera felfritt till en början, men kan behöva ses över igen efter en tid. Följer ni dem eller behövs en justering?

Väl utformade designprinciper ska vara genuina, användbara, och minnesvärda samtidigt som de ger tydliga direktiv. För att förebygga eventuella feltolkningar är det allra bästa att komplettera dem med visuella exempel där det tydligt framgår vad man menar. Då lär sig teamet förstå dem, vilket också gör dem lättare att minnas. Och team som lär sig att "andas" designprinciperna banar väg för framgång - det säger sig självt!

På Design Principles FTW kan du bli inspirerad av andras designprinciper.

Om du har svårt att komma igång kan det vara en god idé att hämta inspiration från andras designprinciper. Design Principles FTW är ett utmärkt ställe att börja på.

Designmönster

Utifrån principerna skapas designmönster, som kan delas in i två kategorier: 

  • Funktionella mönster har som uppgift att möjliggöra eller uppmuntra till interaktion. 
  • Perceptuella mönster ser till estetiska element som ger produkten en viss karaktär, ibland mer iögonfallande och kreativa men de kan även vara diskreta och traditionella. Hit hör inte bara färg, form och typografi utan även dess tonalitet. Detta mjuka värde innefattar intentionen med specifika element, där knappen du designar kan vara tänkt att exempelvis viska eller ropa högt. 

Funktionella designmönster 

För att systematisera funktionella designmönster börjar man med att identifiera flöden i gränssnittet som är kritiska för produkten. Dessa delar klipps ut från gränssnittet - du väljer själv om det ska göras digitalt eller analogt - och grupperas sedan efter nyckelbeteenden ("upptäck", "filtrera", "önskelista" t.ex.). 

Utgå från användarens perspektiv men glöm inte bort företaget - ge nyckelbeteendena namn som har ett värde för dem båda. Nästa steg i processen är att gruppera element efter syfte, återigen genom att klippa i det nuvarande gränssnittet. Här samlas de första kandidaterna till definierade designmönster.

Perceptuella designmönster 

Systematiserandet av perceptuella designmönster handlar också som att identifiera signaturmönster, men genom att utgå från teammedlemmarnas individuella intryck av produkten. Kholmatova förespråkar att medlemmarna skriver ner sina första intryck av produkten och om något specifikt i den väcker särskilda känslor, men även reflektera över om något inte överensstämmer med deras bild av varumärket. Eftersom vi tenderar att plocka upp olika detaljer är detta en smidig metod för att samla intryck från flera perspektiv. 

Processen för att systematisera perceptuella designmönster kan vara något klurigare än för de funktionella, då till synes små element har stor inverkan på intrycket av produkten. Det är inte enbart färger som behöver ses över, utan även animationer och tonalitet. Gemensamt för dem alla är att de behöver ha ett syfte och att deras utformning harmoniserar med resten av designen. Tonalitet är särskilt komplicerat att utforma då de som definierar designmönster för dem sällan faller in i samma målgrupp som slutanvändaren. 

Samlat språk 

För att arbetet med designprinciper och designmönster ska bli så lyckat som möjligt är det viktigt att de involverade talar samma språk. Det handlar dels om ordval för funktioner men även om benämningar på mönster. Ett bra namn på ett designmönster underlättar för teamet att förstå hur det ska användas. Exempel på detta kan vara primära knappar som endast får användas en gång per sida, medan sekundära knappar kan användas obegränsat antal gånger. Kholmatova använder här namngivelserna "boss" och "minions" som exempel. Det tydliggör att det kan finnas flera knappar av typen "minion", men bara en "boss".

Nya teammedlemmar bör introduceras i samma språk redan från början, där de även bör få veta varför namnen valts för att förstå hur man tänkt. Ett sätt att underlätta för de involverade är att skapa en ordlista som förklarar alla benämningar som förekommer i produkten. 

Hitta rätt system

Verksamheter och designteam kan se väldigt olika ut, vilket gör att det inte heller finns något optimalt designsystem att utgå ifrån - det är upp till teamet att bygga ett designsystem utifrån sina egna och företagets förutsättningar. I takt med att de anställda byts ut eller blir fler och företaget förändras bör även designsystemet ses över så att det fortfarande överensstämmer med verksamhetens mål. 

Viktigt att komma ihåg är att ett strikt system inte alltid är att föredra. Beroende på företagets uppbyggnad och mål kan det ibland vara bättre att jobba med ett mer dynamiskt system som prioriterar sammanhang före utseende och funktion. Oavsett hur designsystemet ser ut är det dock viktigt att ha en stabil grund att utgå ifrån där de anställda har en gemensam förståelse för verksamhetens mål.

Upprätthålla och underhålla

Det är viktigt att teamet lär sig att först kolla i biblioteket efter något som kan passa ändamålet innan de tar fram ett nytt designmönster. I de fall man behöver ett nytt mönster kan det hjälpa att utgå från de redan existerande designmönstren, för att se ifall något kan återanvändas. Detta ställer även krav på att dokumentationen är lättillgänglig.

Underhållet av designsystemet är beroende av hur teamet och verksamheten ser ut. Vissa föredrar att lägga in nya designmönster i designbiblioteket direkt (detta handlar ofta om team som arbetar kritiskt med att ta fram mönster och inte accepterar vad som helst). För andra fungerar det bättre att lägga in mönstret i biblioteket först när designmönstret används en andra gång. Genom att anamma detta angreppssätt ser man till att det som tas fram också används. För att teamet ska veta vad som är "på väg upp" i designbiblioteket är det en bra idé att logga potentiella designmönster på ett separat ställe.

I en verksamhet med ett dedikerat designteam kan man utse en person som ansvarar för att lägga in nya designmönster i designbiblioteket. I en annan verksamhet kan det fungera bättre att personen som använder designmönstret även är ansvarig för dokumentationen av det. Återigen - utgå från din verksamhet!

Varför designsystem?

På Meetod har vi tagit fram designsystem åt flera av våra kunder och fördelarna är många. De hjälper verksamheten att skapa en gemensam vision att luta sig mot, gör det snabbare att ta fram ny funktionalitet och ökar kvaliteten i de lösningar som skapas. Enligt vår erfarenhet är införandet av ett designsystem en riktigt bra investering, både för användarupplevelsen och för ekonomin!