En steg-för-steg-guide för att skapa ett designsystem

Introduktion

I denna tid av tillgänglighet överallt och överallt har allestädesnärvaro blivit en norm. Men det är också välkänt att konsekvens är trovärdighet. Användarna är nu mer medvetna. En snabb och smidig upplevelse är en grundläggande förväntan, oavsett gränssnitt.

Dessutom är tid en tillgång som du inte har råd att slösa bort. Allt detta borde vara tillräckligt för att du ska vilja göra mer med din webbplats eller ditt gränssnitt. Men att försöka vara konsekvent med 50 olika komponenter i designen utan fel är en stor uppgift.

Sättigång trumvirvlarna för "Design System" är här för att göra ditt liv enklare.

Vad är ett designsystem?

Ett designsystem är ett omfattande arkiv med tydligt dokumenterade återanvändbara komponenter som produktteamet kan använda för att skapa digitala upplevelser. Med andra ord är designsystem den enda sanningskällan för ett företag när det gäller design.

Ett designsystem är mer än stilguider eller mönsterbibliotek - det är något som ständigt utvecklas. Detta ekosystem av riktlinjer för olika enheter, inklusive UX-design, kan användas som ett ramverk med byggstenar för alla projekt för att säkerställa att alla komponenter är konsekventa och matchar varumärket.

Ett designsystem är användbart för både nystartade företag, växande verksamheter och företag, men blir en viktig och icke förhandlingsbar tillgång när en produkt utvecklas. Det kan också ha en positiv inverkan på affärsmål, arbetsflöde, teamwork, användarupplevelse och den övergripande varumärkesupplevelsen.

alt_text

Vilka är fördelarna med ett designsystem?

Några av fördelarna med att implementera en systemdesign är

Ökar effektiviteten och minskar tidsåtgången - En viktig fördel med alla designsystem är möjligheten att snabbt skapa och återskapa design- och utvecklingsarbete. Teamen kan använda färdiga element för att minska behovet av att ständigt uppfinna hjulet på nytt och minska risken för inkonsekvens.
Förbättrar den visuella konsekvensen mellan sidor och kanaler - Avsaknaden av ett organisationsövergripande designsystem kan leda till inkonsekventa bilder, en splittrad användarupplevelse eller isolering från varumärket. En sammanhängande uppsättning standarder gör det också lättare att hantera större omarbetningar eller visuella varumärkesbyten i stor skala.
Främjar ett enhetligt språk - Ett gemensamt designspråk minskar risken för att design- eller utvecklingstid går till spillo på grund av missförstånd inom och mellan tvärfunktionella team.
Möjliggör bättre fokus på mer komplexa problem - Team kan bättre lösa komplexa problem, som informationsprioritering, resehantering etc., när enkla UI-komponenter skapas och är entydiga.
Fungerarsom referens och utbildningsverktyg för medarbetare - Ett designsystem underlättar onboarding-processen vid personalförändringar. Det gör det också lättare för nya medarbetare att komma in i UI UX-design eller innehållsskapande.
Bidrar till ett starkt och tidlöst varumärke - Ett designsystems syfte är att kommunicera en särskild identitet och design bakom de produkter som det transporterar. Det bidrar till att skapa slagkraftiga varumärken och hjälper människor att minnas varumärkesupplevelsen. Det gör att människor känner sig mer knutna till ett varumärke och litar mer på det.

En tiostegsguide för att bygga upp ett designsystem

Vi har utarbetat en process i tio steg för att hjälpa ditt företag att skapa ett designsystem.

1. Gör en grundlig analys av er befintliga designprocess.

Det första steget i att utforma en strategi och initiera en process är att förstå var man befinner sig just nu. Genom att granska och analysera din organisations nuvarande designprocess kan du få en bättre förståelse för vilken systemdesign som passar bäst för ditt varumärke. Ställ dig själv följande frågor:

Vilken är din organisations nuvarande designstrategi?
Vilka är de befintliga verktyg som din organisation använder?

Se till att du utvärderar produktteamets nivå av designmognad. Detta kommer att hjälpa dig att grovt beräkna den tid som krävs för att implementera det nya systemet i din organisation.

2. Bestäm alfabetet för ditt varumärke

Determine your Brand's Alphabet

Alfabetet för ett varumärke leder till varumärkesidentiteten, dvs. varumärkets och produktens värderingar samt varumärkets språk. Varumärkesspråket består av former, typsnitt, färger, animationer, röst och ton.

Formgivarna kommer att använda ett visuellt språk som definieras av varumärkets alfabet. Genom att granska varumärkesriktlinjerna och prata med intressenterna kan du få hjälp att förstå varumärkets identitet och språk.

3. Genomföra revision för nuvarande produkt AI

Genom att genomföra en UI-revision av den aktuella produkten kan du ta itu med en stor utmaning inom produktdesign: designdubblering. Granskningen syftar till att uppnå två mål -

Uppmärksamma de områden inom produkten med betydande inkonsekvenser.
Urskilja de mest använda och väsentliga delarna av produkten.

En granskning av användargränssnittet är en process i flera steg. Det är viktigt att identifiera och analysera de viktigaste användargränssnittsegenskaperna och hur de används i komponenterna. Du kan använda tillgängliga verktyg för att se antalet unika färger och typsnitt i dina stilmallar. Du kan sedan bryta ner varje webbplatsdesign i enskilda element.

4. Fastställ designprinciperna för ditt system

För att skapa en utmärkt användarupplevelse är det viktigt att förstå orsakerna bakom designbesluten. Dessutom gör en tydlig målsättning det lättare att definiera designprinciper och samordna med team.

Vill du ha en process för designsystem? Börja med dessa frågor:

Vad skapar du?
Varför gör du det
Hur kommer du att bygga den?

Designprinciperna måste återspegla varumärkets värderingar och vision.

5. Bygg upp ett komponentbibliotek

Detta kallas även för mönsterbiblioteket och bör innehålla alla funktionella och dekorativa element i ditt användargränssnitt. Utvärdera komponenterna utifrån projektet, användarnas behov och affärsmålen, och behåll dem du behöver.

Build a Component Library

6. Fastställa regler

Designsystem är inte byggda för att begränsa designers till en specifik designriktning. Tvärtom är det bara tänkt att ge designers och utvecklare ett grundläggande ramverk som utökar den kreativa riktningen och ger utrymme för innovation.

Det är två sätt att se på designsystemets regler, som nämns i Alla Kholmatovas bok:

Strikta regler - Designers och utvecklare följer en rigorös process för att introducera nya mönster eller komponenter.
Lösa regler - Dessa regler tillåter designers och utvecklare att skapa utan att följa strikta begränsningar om de anser att det resulterar i bättre design.

Precis som med många andra aspekter av livet är det viktigt att hitta rätt balans mellan dessa regler så att produkten kan vara konsekvent samtidigt som den är kreativ.

7. Välj din modell för styrning

Dynamiska designsystem som ständigt utvecklas kräver en enkel process för att godkänna och genomföra ändringar. Det finns tre modeller för styrning:

Solitär modell - En individ eller en grupp av individer "styr" direkt designsystemets process.
Centraliserad modell - Ett team ansvarar för och styr systemets utveckling.
Federerad modell - Flera personer från olika grupper leder systemdesignprocessen.

Alla dessa modeller har sina för- och nackdelar, men den solitära modellen kan i synnerhet leda till att den enda ansvariga personen blir en flaskhals för utförandet av många uppgifter. Det bästa är att använda en kombination av olika modeller i linje med dina behov.

8. Definiera komponentstruktur

Dubblering av funktionella komponenter är en stor utmaning i designsystem. Detta leder till ett oflexibelt system och kräver att designers (och utvecklare) skapar nya element varje gång det finns ett nytt scenario.

Framgångsrika systemdesigner är i hög grad återanvändbara och gör det möjligt för användare att använda dem som grund för sina produkter. Därför rekommenderas att man utvecklar element som kan återanvändas i olika innehåll.

Kriterier för återanvändbara och skalbara komponenter:

Modulär - Oberoende komponenter och utbytbara element.
Komponerbar - Använd befintliga komponenter för att skapa nya
Anpassningsbara - Anpassningsbara komponenter som fungerar i en mängd olika sammanhang.

9. Se till att alla team använder ett enhetligt språk

Syftet med ett designsystem är bland annat att underlätta sömlöst teamarbete. Därför är det viktigt att integrera systemet i teamets arbetsflöde. Det ökar produktiviteten samtidigt som det levererar värde till teammedlemmarna.

Att få en bättre förståelse för hur olika personer använder designsystemet i den inledande integrationsprocessen kan hjälpa dig att modifiera systemet i enlighet med detta.

10. Meddela ändringar regelbundet

Ett designsystem utvecklas i takt med organisationen och kan inte vara statiskt. När systemet har införts i organisationen är det därför viktigt att kommunicera alla förändringar och hålla organisationen uppdaterad.

En kortfattad och väl underhållen ändringslogg kan hjälpa användarna att förstå olika uppgraderingar och hur de kommer att påverka deras arbete.

Tre föredömliga exempel för att komma igång

Atlassian Design System

Atlassian Design System (https://atlassian.design/)

Atlassian Design System, ett känt australiensiskt mjukvaruföretag, syftar till att tillhandahålla sömlöst samarbete mellan agila, utspridda team över hela världen.

Trello och Jira, två av Atlassians mest använda samarbetsverktyg, fångar till fullo företagets designfilosofi. Denna filosofi handlar om att utnyttja den digitala upplevelsen för att öka produktiviteten och den övergripande potentialen hos team och enskilda teammedlemmar.

Med detta sagt erbjuder Atlassian Design System agila tekniker och effektiv spårning av varje enskilt steg i ett projekt, från produktplanering till leverans. Detta ger i slutändan fördelaktiga resultat för skapandet och leveransen av produkter. Deras designsystem omfattar huvudsakligen följande:

Riktlinjer för utformning
Standarder för varumärken
Produkt
Illustration
Prototypframtagning
Marknadsföring
Personlighet

IBM Design System

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

IBM är ett utmärkt exempel på ett stort IT-företag som verkar globalt och följer sitt eget designsystem.

Deras kompetens omfattar allt från affärsrådgivning och finansiering till skapande av programvara, IT-hosting/förvaltning och lösningar som kopplar programvara till hårdvara.

IBM:s grundläggande princip är att ständigt driva på utvecklingen, oavsett om det gäller det mänskliga samhället eller ett varumärke, med hjälp av vetenskap, förnuft och intellekt.

Enligt IBM är en bra design inte bara en nödvändighet utan också ett åtagande gentemot användarna. Här är några av de utmärkande funktionerna i deras Carbon Design System, som ger utvecklare och designers som arbetar med Adobe, Axure och Sketch en mängd verktyg och resurser:

Visualisering av data
Mönster
Komponenter
Riktlinjer
Handledning

Uber Design System

Uber Design System (https://baseweb.design/)

Vi har alla åkt Uber minst en gång. Det amerikanska teknikföretaget förlitar sig på rörelse, inklusive matleverans, ride-hailing, peer-to-peer ridesharing och mikromobilitet med hjälp av skotrar och elcyklar.

Uber behöver en effektiv systemdesign för att denna typ av tjänst ska fungera felfritt i alla undervarumärken, interna varumärken, produkter och projekt.

Uber Design Systems främsta egenskaper är följande:

Varumärkesarkitektur
Sammansättning
Tonläge i rösten
Motion
Illustration
Fotografi
Ikonografi
Färg
Logotyp
Typografi

Tips att känna till innan du skapar ditt första designsystem

1. Tidig och tydlig kommunikation är din nya bästa vän

Det kan vara komplicerat att involvera era interna konsumenter direkt. I själva verket kan deras feedback hindra processen om den är tvetydig, ges för tidigt i en alfa- eller betaversion eller inte är till någon hjälp.

Berätta för dina kunder, designsystemets användare, vad du behöver för att säkerställa att du får konstruktiv feedback. Om du befinner dig i en tidig pre-release-cykel ska du vara ärlig och tydlig med exakt vilken input du vill ha. Detta indikerar att du letar efter produktens mest betydande brister och inte efter kritik av hög kvalitet.

Var uppmärksam på att inte tänka för mycket, att inte låta tankarna förtvina, men tveka inte att överkommunicera.

2. Dina fotspår är inte det enda du behöver spåra

En viktig del som saknas i prioriteringen är ofta att spåra användningen av designsystem. Det är viktigt att förstå var systemet används, av vem, hur ofta och hur ofta det uppdateras.

Genom att dagligen samla in statistik över vilka team som använder exakt vilka versioner av biblioteket kan man få en rättvis bild av hur snabbt de använder, uppgraderar och nedgraderar.

När du har identifierat de team som sällan uppdaterar kan du ta reda på vilka problem som blockerar uppgraderingen och därefter åtgärda dem.

3. Feedbackmekanismer är lika underskattade som Rhaeghal från GOT

För att säkerställa att ditt system inte bara är värdefullt för användarna utan också något de känner sig delaktiga i och aktivt har bidragit till, är det viktigt att ha enkla och tydliga sätt för människor att ge feedback (Slack, e-post etc.) och bidra till systemet.

Ge alltid instruktioner om hur och var feedback ska ges på så många områden som möjligt, och anta aldrig något, särskilt inte att en användare kommer att hitta den på den plats som du tycker är mest uppenbar.

Ett designsystem är den ledstjärna som din organisation behöver

A Design System is the North Star Your Organization Needs

Ett framgångsrikt och väl utformat designsystem blir en del av företagets själva ryggrad, vilket leder till konsekventa och förstärkta upplevelser. Dessutom får designers och utvecklare möjlighet att bättre kommunicera syftet med produkten istället för att fastna i att sätta ihop grundläggande byggstenar.

Vilken generalist som helst kan vara din partner när det gäller att leverera en design, men endast en designspecialist identifierar de aktuella frågorna, utmaningarna och ambitionerna för att skapa ett designsystem, speciellt för dig. Nu är det inte läge att vänta. Med den här omfattande guiden om hur man skapar ett designsystem är du bara ett initiativ bort från en fullständig omvandling av din produktionsprocess.