Fordelene ved at oprette et designsystem

Styleguides har eksisteret i årevis og har altid været vigtig for en virksomheds visuelle identitet, men begrebet har omdannet en ny dimension til hele konceptet.

I de gamle dage skabte en UI-designer en løs fortolkning af det grundlæggende. En oversigt over farver, skrifttyper, knapper og muligvis ikonstilen, og det vil blive gemt væk på en harddisk, kun nogensinde for at blive åbnet, når de sendes til eksterne agenturer, der har brug for et blik på en visuel retning for et kommende projekt , eller nye startere til designteamet, men det er meget sjældent meget vigtigt for de faktiske interne designere, der bruger det.

Det største viden af ​​viden blev generelt lagt fast i forkant af designeren hjernen. Dette ville betyde en konstant spærring af problemer omkring forsøget på at huske, om et bestemt visuelt mønster blev brugt før et eller andet sted. Dette, 9 gange ud af 10, ville ende i et kaotisk rod af inkonsekvens.

I de senere år har styleguiden fået en forfriskning og med introduktionen af ​​konceptet et designsystem eller et designsprog. Med dette kommer en helt ny tilgang, der episk kan påvirke, hvordan et produktteam nærmer sig design som helhed. Med et solidt, konsistent, godt forklaret og gennemtænkt system bliver det visuelle aspekt ved at skabe et design helt modulopbygget. Produkter som Craft by Invision eller Brand.ai har gjort det visuelle designfase næsten til et træk og slip. At skabe sikkerhed i den viden, at de elementer, du bruger, stemmer overens med enhver anden designer på teamet. De fjerner enhver fjendskab fra den visuelle designfase, næsten til et niveau, hvor skabelse af lavtidelighedsprototyper er fortiden.

”Styles kommer og går. Godt design er et sprog, ikke en stil. ”–Massimo Vignelli

Jeg vil ikke bruge denne artikel som en måde at forklare, hvordan man nøjagtigt opretter et designsystem. Jeg har allerede skrevet en artikel omkring det: Oprettelse af et design-systemsprog. Dette er mere en envejs diskussion om, hvordan et designteam kan drage fordel af at investere i et designsystem.

En introduktion til vores designsystem - QUIK

I de sidste par år har jeg været meget involveret i at skabe designsystemer på tværs af forskellige virksomheder, fra opstart til veletablerede organisationer. Min seneste venture har skabt vores designsystem til Qstream.

Fra meget tidligt i min tid på Qstream indså jeg, hvor vigtigt det var, at vi introducerede et nyt, fungerende system til vores designteam så hurtigt som muligt. Uoverensstemmelser og dårlige designvalg plagede produktet, og efterhånden som produktet, og designteamet udvidede, var det vigtigt at stabilisere skibet og skabe et sprog, som hver designer kunne forstå fuldstændigt.

Og med det begyndte vi at oprette vores nye designsystem, der hedder QUIK - Qstream User Interface Kit.

Trin 1: Uoverensstemmelser

Igen, jeg vil ikke gå for dybt ind i processen med hensyn til, hvordan vi skabte systemet, men jeg giver en hurtig gennemgang til, hvordan vi kom ud af ukrudtet.

Den første ting at gøre var at foretage en total revision af de visuelle komponenter i produktet. Brad Frost har sammensat en god artikel omkring, hvordan du går i gang med en UI-revision, hvis du er interesseret.

Dette kan være en forfærdelig, tidskrævende, ensformig opgave, men det er så fordelagtigt. Det a) giver dig mulighed for at få en fuldstændig forståelse af, hvor de vigtigste uoverensstemmelser ligger b) giver dig et rigtig godt overblik over, hvilke elementer der er vigtige og bruges konsekvent i hele produktet c) giver dig et crashkursus om, hvordan præcist produktet fungerer og d ) giver dig mulighed for at vise den bredere forretning skrøbelighederne i det eksisterende visuelle system, og nøjagtigt hvorfor et nyt, konsistent designsystem er nødvendigt.

Et uddrag af vores UI-revision, der viser uoverensstemmelsen på tværs af UI-platforme.

Trin 2: Oprettelse af elementerne

Vi brød vores system ned i 3 forskellige enheder.

  1. Brand - Produktets brandidentitet består af nøgleelementer, der skaber den visuelle identitet. Farver, typografi og ikonografi er kernen i enhver platform.
  2. Elementer - Elementerne består af de mindste genanvendelige dele af systemet. Disse elementer genbruges konstant på tværs af alle områder af systemet. (Knapper, indgange)
  3. Komponenter - En komponent er en samling af elementer, der ofte bruges ved siden af ​​hinanden til at identificere et fælles mønster i en strøm. (Alarmer, borde, kort osv.)

Det næste trin er at prioritere, baseret på UI-revisionen, hvilke elementer der oftest bruges på tværs af produktet. Dette vil være de første områder, du først tackle.

Når vi identificerede nøgleelementerne for systemet, var det på tide at begynde at oprette stil og regler omkring hvert område. Vi tacklede farver, typografi, afstand og generel ikonografi først inden vi flyttede over på de mere dannede elementer som knapper, input osv.

Et fugleøjeoversigt over hele vores system til dags dato.

Naturligvis, jo dybere systemet går, desto mindre hyppigt bruges elementerne, men det er alt sammen del af at vokse systemet og gøre det overordnede sprog så konsistent som muligt på tværs af alle aspekter af produktet.

(Vi har også et andet projekt i gang omkring vores illustrationsstil, men jeg gemmer det til en anden artikel, du kan se mere omkring det her)

En prøve af vores illustrative stil brugt på tværs af platformen.

Trin 3: Implementering

Vi er i øjeblikket i denne fase. For at være ærlig, vil vi sandsynligvis aldrig komme ud af denne fase. En ting, du er nødt til at indse, før du tager en udfordring som denne, er, at den aldrig vil ende. Du udvikler et produkt, det er ikke et projekt, der til sidst ender. Det vil konstant udvikle sig og vokse.

Alt hvad du skal gøre er at tage et kig på, hvordan produktteam har omstruktureret for at imødekomme designsystemteam, hvor mange vælger designere, der udelukkende fokuserer på at arbejde direkte på deres designsystem, intet andet. Systemet er blevet en integreret del af en produktkerne. Når det oprettes korrekt, skaber et designsystem fokus, klarhed og selvtillid og vil på sin side skabe konsistens på tværs af produktet og fremskynder omdrejningen af ​​produktudviklingen. Hvad er ikke at elske!

”Et designsystem er ikke et projekt. Det er et produkt, der serverer produkter. ”- Nathan Curtis

Binding af systemerne

At oprette et designsystem, der fungerer på tværs af produktet, er en ting. Vi er også midt i at skabe brand-retningslinjer samt skitsere vores designprincipper. (Igen flere artikler, der skal følges om vores proces).

Vi føler, at det er nøglen at skabe et solidt fundament på tværs af alle aspekter af design, før vi bevæger os længere, da uden den rigtige stillads på plads, vil det forårsage problemer nede på linjen. Oprettelse af et solidt sæt retningslinjer og principper vil hjælpe os med at guide os i den rigtige retning, når vi begynder at opskalere.

Planen, når vi først har QUIK til et niveau, som vi føler, at forbruget er, er at skabe en Playbook, der huser de vigtigste funktioner i vores produkter, kernepersonlighed og -enhed.

  • Retningslinjer for mærker - et sæt retningslinjer, der introducerer vores brandpersonlighed samt skitserer nøgleegenskaber, som f.eks. Stemmetone, farver, logo-begrænsninger osv.
  • QUIK - et system samlet for at forene vores design tro og metodik på tværs af vores platform på et centralt sted.
  • Designprincipper - Formålet med principperne er at sikre, at vi hele tiden forankres til det, der virkelig er vigtigt for Qstream og vores kunder. De vil hjælpe os med at tage beslutninger, der er i overensstemmelse med deres mål.

Fremadrettet

Vi stræber efter at skabe konsistens på tværs af vores platform. Vi har stadig en lang vej at gå. Alle, fra alle vinkler af produktteamet, er fuldt ud klar over, at dette er en uhyrlig udfordring, men vi er også lige opmærksomme på dets betydning for skalerbarheden af ​​produktet.

Hvis du gerne vil slå mig op om emnet, eller hvis du bare vil skyde brisen, er du velkommen til at kontakte mig her:

// Twitter // Dribbble // Behance // Portfolio site //