5 viktiga steg för att bygga det perfekta designsystemet

Viktiga steg för att bygga ett designsystem

Designsystem är en samling återanvändbara föremål, element och regler som kommer som en riktlinje för hela teamet med projektdesign. Det anses nu allmänt vara en avgörande del av UX-designprocessen som väger in för att ge en framgångsrik upplevelse för användarna.

Under de senaste åren har detta system gett en frisk fläkt till produktdesignstrategier i många länder, och det är mycket mer än de typiska användargränssnittsguiderna.

Vi hör mycket om nödvändigheten av att skapa detta system, med tanke på konsekvensen och andra fördelar som det erbjuder oss.

Kända företag som IBM och Airbnb har också införlivat sina egna designsystem för att påskynda och underlätta skapandet i sina team.

Med denna korta introduktion i åtanke, låt oss gå ner till en mer detaljerad beskrivning av designsystem och ta reda på hur det kan hjälpa oss.

Vad är egentligen ett designsystem?

Ett designsystem är en allt-i-ett-informationskälla som består av olika element för att hjälpa teammedlemmar i produktdesign och utveckling.

Den låter dig hantera allt som är relaterat till produktdesign i större skala för flera applikationer. Det övergripande resultatet av denna uppsättning riktlinjer är en sammanhängande ordning i system som täcker varje enskilt steg, från åtgärdsknappar till en målsida.

 

Vad är skillnaden mellan designsystem och stilguider?

Vanligtvis består ett designsystem av olika element som gör det till en pålitlig källa för olika tillämpningar.

Det du hittar i en stilguide är ett brett utbud av färger, logotyper, typsnitt och andra nödvändiga attribut för ett varumärke. Design- och marknadsföringsteam använder mest stilguiderna, men ett designsystem ligger över de visuella och presentationsaspekterna.

Det är en kombination av stil, röst och komponenter som är avgörande för att skapa förkroppsligandet av ett system.

Tänk på de guider som främst är inriktade på hur företag ska prata med sin publik.

Detta skiljer sig från de vanliga stilguiderna eftersom det talar om för dig vad du ska göra och vad du ska undvika för att förmedla en bättre känsla till en människa, och därför lämnar en mer värdefull upplevelse bakom dig.

Med enkla ord kan du hitta principerna, guiderna, mönstren, komponenterna och protokollen på en plats som kallas designsystem.

Varför ska ett företag ha designsystem?

Ett designsystem är en dynamisk samling av information som utvecklas tillsammans med produkterna när företaget expanderar eller när kundens behov förändras.

Ökad produktivitet och enklare samverkan är två oskiljaktiga resultat av designsystem i lagarbete. De kan hjälpa företag på många sätt med deras tillväxt, och här är några av de viktigaste:

Konsistens

Företag behöver ofta designa för flera plattformar samtidigt som de behåller konsistensen av interaktion och beteende mellan dem.

Ju mer konsekventa dina källor är, desto lättare skulle det vara för designers och utvecklare att implementera högkvalitativt användargränssnitt.

På så sätt kommer de att kunna betrakta en specifik produkt eller sida som en kombination av kända element. Tänk på att du behöver en CTA-knapp på en målsida.

Istället för att beskriva de exakta detaljerna om typsnitt, stoppning, färg och bakgrund, ber du dem bara att ge dig en "Primär CTA."

Om du gör det förhindrar du att se en produkt med mer än tio olika typer av knappstilar, flera designlayouter och varierande känslor och utseende.

Ur en annan synvinkel ger det en komponentbaserad och modulära tankesätt till dina designers. Det tillåter dem att definiera mycket mer hanterbara element och göra de nödvändiga ändringarna enligt designbehoven.

Denna konsistens lämnar inget slutresultat utan en produkt med högre kvalitet som också underlättar övervakningen av QA-teamet.

Lagarbete

Är du ett av de företag som har flera team som arbetar med projekten samtidigt? Om så är fallet för dig kan inrättandet av ett designsystem påskynda samarbetet mellan teammedlemmar avsevärt.

Denna informationskälla låter dig spara så mycket tid på att skapa nya projekt från grunden eller uppgradera befintliga eftersom människor har bättre tillgång till olika resurser.

Dessutom blir kommunikationen mellan designers och utvecklare effektivare. Det är därför många ser designsystem som en brygga mellan dessa discipliner.

Att ha ett designsystem ökar inte bara produktiviteten för nuvarande teammedlemmar utan accelererar också etapper ombord av nykomlingar.

Nya designers eller utvecklare i ditt team kan bli bekanta med dina värderingar mycket snabbare och kommer att kunna hitta det de behöver utan ansträngning.

Vilken typ av designsystem behöver vi?

Vilken typ av designsystem som ska följas är starkt beroende av ditt team och den produkt du vill producera. Vi kan ta reda på det genom att börja med några enkla frågor.

• Kommer systemet att användas av ett litet team eller ett stort team? Förstår de ämnet till fullo?
• Vad är det totala antalet produkter som kommer att anpassas? Vilka plattformar och tekniker använder vi?
• Är konsistensen av alla produkter en viktig fråga för oss eller inte?

Följande principer kan ge oss en bättre förståelse i detta avseende.

 

Flexibel eller styv?

Först och främst måste du ha en klar uppfattning om om du vill lämna utrymme för ytterligare experiment eller inte.

En flexibel plan ger alla teammedlemmar en allmän riktlinje att använda samtidigt som den ger dem en viss grad av frihet. Det betyder att dina teammedlemmar i både design- och utvecklingssektioner kan använda det baserat på deras krav.

Å andra sidan täcker en stel plan detaljerad dokumentation, vilket ger både designers och utvecklare en synkroniserad plan att följa.

Att lägga in nya idéer eller element i planen är inte lätt i strikta system, och därför bör de förberedas i första hand med allt i beaktande.

Det bästa tillvägagångssättet är att använda en kombination av flexibilitet och styvhet. Ibland kanske dina designers och utvecklare inte är så intresserade av att använda ditt designsystem, och att tvinga dem att göra det lämnar ingen inverkan än att trycka tillbaka dem.

Ett väldigt löst system som lämnar allt valfritt kunde dock inte betraktas som ett designsystem alls! Så kom ihåg att få det bästa av två världar genom att förbereda ditt designsystem med strikta och lösa systemplaner tillsammans.

Modulär kontra integrerad

Modulära systemdesigner används nu i stor utsträckning i olika branscher. Det rekommenderas bäst att användas i projekt som innebär flera användares behov och bör skalas på kort tid.

Men implementeringen av sådana system kräver ofta högre budgetar eftersom det är en utmanande uppgift att skapa oberoende delar som kan samarbeta effektivt.

Det används ofta i omfattande projekt som stora nätbutiker eller statliga webbplatser.

Ett integrerat system, å andra sidan, är huvudsakligen fokuserat på ett enda sammanhang. Även om den är gjord av vissa delar kan de bytas ut eller användas omväxlande.

Det är lämpligt för system som inte har så många upprepande element i dem.

Hur bygger man ett designsystem?

Att starta ett designsystem för din organisation kan kännas extremt skrämmande i början. Det finns ett brett spektrum av punkter att ta hänsyn till, och ett designsystem kan inte förberedas och tas i bruk över en natt.

Generellt sett finns det två fall framför oss, att starta ett helt nytt projekt eller att arbeta med de produkter vi har för närvarande. Det övergripande tillvägagångssättet är nästan detsamma, men det senare omfattar fler steg.

För ett nytt projekt bör du börja med att kontrollera olika prover som innehåller element och koncept. Leta efter de mönster som kan få dig att känna dig nöjd och använd sedan befintliga populära principer för att komma på färger och former för olika delar.

Om du redan arbetar med ett projekt är det första steget att ta att skapa en inventering av UI-element.

Genom att göra det kommer du att kunna analysera skillnaderna och likheterna mellan dem och därför minska extra alternativ.

Nu kan du effektivt gruppera dem baserat på deras applikation och använda de tillgängliga verktygen för att påskynda processen.

Som en allmän procedur är nyckelstegen för att skapa ett sådant system som följer.

Analysera vad du har

Det bästa sättet att välja vilket designsystem som ska implementeras är genom att se över det befintliga tillvägagångssättet du har använt för dina designs. Börja med att lista ut de processer du följer och de verktyg du använder för det ändamålet.

Utvärdera också hur lätt dina produktteam kan förstå designaspekter i ett försök att uppskatta den tid som krävs för att introducera designsystemet.

Identifiera sedan alfabetet du använder för ditt varumärke.

Denna allmänna term inkluderar produktvärdena och färgerna, rösten och typsnitten du använder. Du kan också granska riktlinjerna för ditt varumärke och hänvisa till denna datainsamling när du arbetar med designprinciper.

 

Undersök visuella aspekter

Det sista du någonsin vill stöta på är designduplicering. Det ger dig inkonsekvens, vilket leder till lägre kvalitet i projektresultaten.

Gör en visuell revision för att identifiera dubbleringarna och klassificera alla relaterade komponenter i produkten. Denna granskning hjälper dig inte bara att hitta inkonsekvenserna i produkten utan också de viktigaste och mest använda delarna i den.

Du kan börja denna flerstegsprocess genom att ta reda på antalet unika färger och typsnitt i din CSS med hjälp av verktyget CSS Stats.

Nu när du har en bättre uppfattning om din styling kan du leta efter komponenterna.

Här kan du använda webbplatsen Atomic Design där du, som namnet antyder, hittar en uppdelning av de minsta element som finns på en webbsida.

Skapa designspråk och mönster

Ditt formspråk är hjärtat i det designsystem du tänker använda. En storslagen användarupplevelse kan uppnås genom att tydligt förstå varför designbeslut fattas.

Dina designprinciper bör ge ett begripligt svar på frågor om vad du bygger, orsaken bakom det och den metod du har använt för det. Ett designspråk bör ha fyra primära delar.

Färg

Vanligtvis används två eller tre huvudfärger för att representera ett varumärkes identitet. Om du vill ge dina designers fler alternativ, inkludera färgblandningar, nyanser och nyanser.

 

Teckensnitt

Ett korrekt designsystem består ofta av två typsnitt; ett för rubriker och brödtext och ett annat teckensnitt för koder. Håll dig borta från att ha flera typsnitt eftersom det bara förvirrar dina användare utan några positiva resultat. Också, Att välja rätt typsnitt för webbplatsen kan vara knepigt så var noga uppmärksam på det.

 

Avstånd och storlek

Mellanslagen och marginalerna du använder på dina sidor ser bäst ut när de är balanserade. Att välja system som är i full kompatibilitet med smartphones blir nu ett måste i detta avseende.

 

Bilder

Dina bilder bör också förberedas utifrån riktlinjer. Sätt upp några regler och planer för ditt varumärke och håll dig till det till varje pris.

Nu är det dags att dyka in i de faktiska komponenterna som kommer att användas i ditt användargränssnitt. Gör ett bibliotek av de delar och delar du har, vilket inkluderar varenda knapp, bild och till och med dina formulär.

Utvärdera dem baserat på dina exakta behov, slå samman de liknande och ta bort de extra föremålen för att göra en mer förenklad beslutsprocess.

 

Sätt regler och strategier

Som tidigare påpekats är det yttersta målet med ett designsystem att ta kreativiteten till en högre nivå.

Vi nämnde i de föregående avsnitten att dina regler bör vara en kombination av strikta och lösa sådana så att teammedlemmarnas kreativitet aldrig begränsas till en enda riktning.

Med tanke på den dynamiska karaktären hos ett designsystem bör du definiera hur du kommer att hantera förändringar på lång sikt.

En av de populära modellerna beskriver tre tillvägagångssätt för en förvaltningsstrategi – ensam, centraliserad och federerad.

I den ensamma modellen fattar en ansvarsfull individ eller en grupp alla beslut relaterade till designsystemet.

Den centraliserade modellen avser förhållanden där ett team är ansvarig för vad som händer i systemet. Och den federerade modellen innebär att ha flera personer från olika team som ansvarar för systemet.

Många tror att den ensamma modellen är det mest riskfyllda valet eftersom en person bestämmer för allt, vilket i många fall kan förhindra att uppgifter slutförs.

Organisationer som har ett team som ansvarar för att uppgradera och ändra systemet bör hålla dem i nära kontakt med andra för att göra systemet mer mångsidigt.

Med tanke på att flera team är involverade i den federerade modellen kan människor anpassa sig till förändringar mycket snabbare. Ändå krävs en teamledare för att kontrollera de övergripande framstegen.

Vart och ett av dessa alternativ har för- och nackdelar, och valet av modell är helt upp till dig.

Du kan implementera en kombination av alla tillvägagångssätt i ditt team, men oavsett vad du gör, håll alltid fokus på teammedlemmarnas deltagande i ditt system och uppmuntra dem att diskutera sina idéer.

Inslag Up

Designsystem är inte längre futuristiska visioner. Ett designsystem är ett komplett paket av designförnödenheter som alltmer blir grunden för produktstrategier i företag.

Ju bättre integration den kan ge med designers och utvecklare, desto bättre resultat genererar den. Detta system stärker designdrivna aktiviteter och fortsätter att utvecklas över tiden.

Därför bör vi kontinuerligt hålla den uppdaterad tillsammans med produktförändringar och utvecklingar.