Designsystem: vad det är, varför och hur man skapar det

Ämnet designsystem, verkar det som, redan har övervägts från alla håll: du kan hitta många artiklar, inlägg, rapporter och annat material om skapa ett designsystem. Trots detta har alla som stöter på den här termen många frågor. Vi kommer att försöka besvara de viktigaste i detalj:

• Vad är ett designsystem?
• Vad är det för?

Vad är ett designsystem?

Ett designsystem är en struktur som inkluderar visuella komponenter, ett kodbibliotek och användningsriktlinjer.

Ofta gör nybörjardesigners misstaget att förenkla konceptet genom att tänka på ett designsystem som bara ett UI-kit – ett dokument som innehåller grafiska gränssnittselement, typografi och färger.

Designsystemet består av tre nivåer:

A UI-kit är det visuella språket för en produkt för vilken ett designsystem skapas. Dessa är färger, typsnitt, ikoner, knappar, kulor, växlingsknappar, skjutreglage, bilder, animationer. Elementen varierar och beror på den digitala produktens särdrag. Alla bidrar till att skapa den synliga delen av gränssnittet som användaren interagerar med.

Ramverket är ett kodbibliotek som är skrivet för vart och ett av dessa element, samt plugins för animering, taggar och etiketter för navigering.

Riktlinjer är en uppsättning mallar och regler för att använda element som organiserar arbetsprocessen. Tack vare riktlinjer är en designer inte involverad i enkla uppgifter, utan en utvecklare är omedelbart involverad.

Riktlinjerna anger till exempel parametrarna för ett popup-fönster på en webbplats: indrag från texten, platsen och storleken på titeln och brödtexten, en plats för en knapp och hur fönstret kommer att se ut med mindre eller mer text.

Typer av designsystem

Det finns ingen enda klassificering, men experter särskiljer två typer av designsystem - öppen och sluten källkod.

I system med öppen källkod kan alla företag använda material och anpassa dem för sina projekt – ändra knappfärger, typsnitt och ikoner. Till exempel i Ant Design, Human Interface Guidelines och Material Design-system.

Designsystem med sluten källkod skapas vanligtvis för ett specifikt företag eller produkt. Dessa är antingen helt stängda material, endast tillgängliga för anställda, eller delvis öppna.

Hur man skapar ett designsystem

Utvecklingen av designsystem bygger på principerna för atomdesign. Atomdesign är en teknik som inkluderar fem nivåer av designelement: atomer, molekyler, organismer, mönster och sidor.

Designsystemstruktur:

• Atoms är de minsta komponenterna: knappar, ikoner, inmatningsfält och typsnitt.
• molekyler är en kombination av flera enkla element: två knappar, en titel och en inmatningsrad, ett meddelandefält, en kryssruta och text.
• organismer är kompletta komponenter: webbplatshuvud, auktoriseringsformulär, produktkort och meddelandebanner.
• Mallar – sidlayouter utan innehåll: meny, webbplatsens utseende.
• sidor är sidor fyllda med innehåll.

Den allmänna algoritmen ser ut så här:

• Välj färger och typsnitt, ställ in modulära rutnät och välj animationer, bilder och ljud.
• Skapa grundläggande gränssnittselement.
• Designelementkombinationer och layouter.
• Skapa en lista med element tillsammans med reglerna. Ange i riktlinjen vad elementet är, var det används och vilka uppgifter det löser.

Vanligtvis skapas inte designsystem från grunden, utan bygger på redan utvecklat material: UI-kit, riktlinjer eller varumärkesböcker.

Varför behöver du ett designsystem?

Som med alla IT-produkter är det viktigt att svara på frågan "Vad är ett designsystem till för?" Eller, som några kollegor i butiken säger, "så vad"?

Svaret på denna fråga hjälper dig att förstå värdet av produkten. En del av det kan redan ses av det vi beskrev ovan. Men låt oss bryta ner det och ta en djupare titt.

Automation

Automatisering ger den mest uppenbara fördelen. Ett designsystem hjälper dig att automatisera verksamheten, vilket frigör tid för andra uppgifter.

Iterativitet

Att kunna ärva och automatiskt tillämpa ändringar på designsystemelement är ett värdefullt verktyg för ett produktteam. Du kan snabbt göra kosmetiska eller till och med stora förändringar på en plats. På detta sätt kan du alltid förbättra produkten.

Konsistens

Konsistens säger att de objekt och enheter i en produkt som fyller samma funktion ska sträva efter enhet och likhet.

När vi använder jämförbara funktioner i en produkt blir de bekanta och bekväma: vi förstår instinktivt hur knappen fungerar och ser ut, samt var den är placerad.

Vi hoppas att alla lärde sig något värdefullt av artikeln. Och vi var återigen övertygade om att arbetet med en artikel strukturerar kunskap och motiverar ytterligare studier.