Designsystem: säkrar kundupplevelsen & effektiviserar utveckling

Att skapa en enhetlig och positiv kundupplevelse kan vara en utmaning idag. Genom att arbeta med ett designsystem har vi ett dokument med gemensamma riktlinjer och standarder att utgå ifrån i design- och utvecklingsprojekt.

Ditt varumärke är ditt ansikte utåt. Utformningen påverkar helhetsintrycket av ditt företag och era tjänster och är en avgörande faktor för hur man upplevs av sina kunder. Här är det av yttersta vikt att man gör ett bra och medvetet intryck för att behålla befintliga och skapa nya relationer.

Vad är ett designsystem?

Ett designsystem är ett dokument som är till för att skapa en gemensam grund och uppfattning av hur olika komponenter ska användas på digitala miljöer hos ett företag. Genom att arbeta med designsystem som metod gör ni det möjligt för era användare att få uppleva er som en trovärdig aktör genom enhetlig design på samtliga kanaler. Det agerar också som ett kraftfullt stöd i utvecklingsskedet i ett projekt.

Här är de fördelar ditt företag kan ta del av med hjälp av designsystem:

• Främja konsekvent gränssnitt och sammanhållning – enhetlig upplevelse
• Främja agilt arbete – dokumenterad grund som stödjer iterativt och effektivt arbete
• Frigör tid – mer tid för innovation och värdeskapande
• Delat språk – mindre tid i möten och för att hantera missförstånd
• Synliggör designbeslut – få direkt överblick av komponenters beteenden
• Värdefull referens – en viktig källa och hubb för företagets best practice
• Levande dokumentation – dokumentation som speglar produktutvecklingen

Designsystemets beståndsdelar

Ett designsystem har inga satta regler för vad det måste innehålla. Det viktigaste är att designsystemet återspeglar er slutprodukt. Här är den vanligast förekommande toppstrukturen bland designsystem för digitala kanaler:

• Logotyp
• Färgpalett
• Typsnitt
• Typografi
• Knappar
• Ikoner
• Komponenter
• Mallar

Logotyp

Logotypen behöver oftast visualiseras i fler olika dimensioner, exempelvis en logotyp för mindre utrymmen som mobilvy eller en ljus logotyp på mörk bakgrund. Användningsområde som mått, bakgrundsfärg och kommunikationskanal specificeras i designsystemet och gör det solklart för alla att förstå när det är korrekt att använda en specifik logotyp.

Bild 1. Urval av Sopra Sterias logotyper.

Färgpalett

I en färgpalett kategoriseras och prioriteras varje enskild färg genom att få en benämning som beskriver dess riktning och prioritet. Färgen presenteras tillsammans med relevant färgkod som sedan används vid designbeslut gällande bland annat typsnitt, knappar och komponenter.

Bild 2. Exempel på färgpalett – Sopra Sterias färger.

Typsnitt

Vanligtvis förekommer olika typsnitt och typsnittsvikt på en webbplats då ett typsnitt kan vara mer lämpad för exempelvis rubriker medan en annan kan vara mer lämpad för brödtext. Genom att visa på vilka typsnitt och typsnittsvikter som används för en specifik kommunikationskanal undviks eventuella missförstånd.

Bild 3. Exempel på synliggörande av vilka typsnitt och stilar som används i designsystemet.

Typografi

Till typografi hör egenskaper som val av typsnitt, storlek, radavstånd, vikt, färg, och justering. Dessa synliggörs i designsystem genom att illustrera nivåer för rubrik och brödtext samt eventuella förklarande riktlinjer som vilken skärm en specifik typografi är lämpad för.

Bild 4. Exempel på typografi – visar på textnivå, skärmstorlek, färgval och justering.

Knappar

Egenskaper som en knapp består av är färg, typografi samt olika feedbacklägen. Genom att presentera samtliga lägen av en och samma knapp i ett designsystem kan utvecklare enkelt komplettera ett ofullständigt designförslag och på så sätt förankra enhetlig design i slutprodukten.

Bild 5. Urval av knappar som används på Sopra Steria Sveriges webbplats.

Ikoner

Ikoner har oftast syftet att komplettera och förklara information visuellt. I ett designsystem definieras riktlinjer så som mått och vart de bör användas för att säkerställa att information framhävs på ett konsekvent sätt.

Bild 6. Urval av ikoner som används på Sopra Steria Sveriges webbplats.

Komponenter

En komponent är en samling av olika noga utvalda beståndsdelar som färg, typografi, knappar samt media och har som syfte att framhäva en funktion eller information. Ett exempel på en komponent skulle kunna vara ett så kallat kort som oftast innehåller en bild, rubrik, brödtext och en länk eller knapp för att leda slutanvändaren. En sådan komponent kan sedan användas enskilt eller i grupp beroende på designbeslut.

Bild 7. Exempel på komponenter – två olika kort bestående av ikon, rubrik, brödtext och bild.

Bild 8. Exempel på komponent – modul bestående av rubrik tillsammans med en grupp av fyra kort samt en knapp.

Mallar

En mall är en identifierad sida som består av tidigare framtagna komponenter och är i många fall det slutgiltiga resultatet av att ha implementerat ett designsystem. Även mallar har specifika användningsområden och bidrar till konsekvent och lättigenkännlig struktur inom såväl design- och utvecklingsprojekt som för kunden. Mallar gör det således möjligt för ditt företag att fokusera på att ta fram innehåll baserat på fördefinierad struktur för att exempelvis visa på tjänsteutbud.

Bild 9. Exempel på större komponent som används i sidmall.

Det finns alltså många fördelar med att använda designsystem. För att ett designsystem ska fylla sitt syfte krävs att den ses som ett levande dokument och hålls uppdaterad. De dokumenterade designbesluten resulterar i organiserat arbete som lägger grunden för att skapa en gemensam och plattformsoberoende upplevelse för era kunder.

Läs även  Därför behöver ditt företag satsa på UX writing.

Om du har frågor kring UX Design hör gärna av dig till Maria Hofverberg hos oss eller läs mer här.