Metode

Vejen til design af systemets modenhed

Det er meget som at vokse op, men ikke så akavet og pinligt.

Carbon, Lyn, Klarhed, Polaris, Plasma, Build. Beskriver jeg navnene på SpaceX-raketter eller systemer til virksomhedsdesign?

I dagens softwarelandskab er vi ikke længere begrænset til følelser af utilstrækkelighed ved bare at gennemgå Dribbble. Nu kan vi føle os usikre, fordi vi aldrig har oprettet et designsystem, selv halvt så robust som ovenstående.

Men ligesom at se Lebron spille basketball eller Thom Yorke orkestrere en sang, er det vigtigt at huske, at de fleste af os simpelthen ikke er udstyret til at trække det af. Så snarere end bare at hænge op vores sko og guitar (eller hvad Radiohead spiller på i disse dage), kan vi kigge mod disse bedst-i-klassen systemer for inspiration, og forstå hvordan vejen til succes ser ud.

Nathan Curtis sagde, at designsystemer skulle behandles som et produkt. I dette lys kan du se, hvordan systemer har en veldefineret vækststi fra nystartet start til monolitisk selskab på NYSE. Designsystemer behøver ikke at være enorme. Og det er de sjældent.

Brug af produkt som reference gør det lettere at forstå, hvordan man konstruerer dit eget designsystem.

Undgå pedantiske debatter om, hvad der definerer et designsystem. Definér i stedet målene for dit system, dets målgruppe og din MVP. Dette vil hjælpe dig med at tage mere effektive beslutninger om, hvor du skal rette din indsats. Vigtigere er det, at du ikke bliver lammet af, hvor du skal begynde.

Designsystemer kan opdeles i tre overordnede temaer, der kortlægger de almindelige produktmodenhedstrin:

1. Et system for effektivitet (opstart)

2. Et system til konsistens (skalering)

3. Et system til optimering (Enterprise)

1. Effektivitet (opstart)

Det er vigtigt at forstå, at disse modningsniveauer afspejler stadiet i dit designsystem, ikke dit produkthold selv. Hvert hold, nyt eller modent, finder sig selv i gang med at starte et designsystem fra bunden. I denne fase er du enten en del af et startprodukt, eller begynder at oprette dit første designsystem i en moden organisation.

Opbygning af interne designeffektiviteter

Værktøjer: Sketch, Atomic, Subform

Først og fremmest skal et designsystem gøre designere selv mere effektive. Denne effektivitet gør det muligt for designere at tømme skærme hurtigere ud og frigøre dem for at holde sig foran kurven på innovative funktioner. Efter min erfaring er intet andet mål i resten af ​​denne artikel værd at forfølge, uden at dette er korrekt beskrevet.

VMWares Clarity-system giver en .sketch-fil som grundlaget for deres designteam

Det første trin kræver simpelthen, at dit designteam bruger et designværktøj, der endda giver mulighed for effektivitet. Sketch, Atomic og Subform er efter min mening de klare ledere. De har intelligens indbygget i deres værktøjer, mens de tilbyder masser af plads til designere at udforske. Sketch får nikken fra mig, fordi den har integrationer i flere dage, hvilket gør det nemt at vokse dit system over tid.

Opret konsistens blandt designere

Værktøjer: Delte designsystemer som Brand.ai eller Craft Library; Design systemrammer som Material Design eller UX Power Tools.
UX Power Tools bruger indlejrede symboler til at kaskade ændringer fra en kilde.

Når du er i de tidlige stadier af designsystemudvikling, fungerer konsistensen ofte opad. I stedet for et sæt retningslinjer, der dikterer praksis, dikterer nye mønstre retningslinjer (nogle gange til en fejl). De fleste af os designere ville meget gerne stoppe og etablere designprincipper og retningslinjer for brug, men denne indsats vil næsten altid blive trumfet af produktionen. I mellemtiden skal du være i stand til at læne dig op på nøgleprincipper og -metoder, der styrer god UX og produktdesign.

2. Konsistens (skalering)

I denne fase vokser dit produkt sandsynligvis, og det samme gælder dit team. Du har erfaring nok til at vide, hvad dit produkt begynder at blive, og det giver dig mulighed for at oprette flere retningslinjer og principper til at styre dit arbejde. I denne fase bevæger du dig også forbi dine digitale værktøjer og begynder at opbygge kommunikationsværktøjer. Når dit team vokser på tværs af lokationer, din virksomhed erhverver nye produkter, eller du ansætter flere designere, øges behovet for konsistens enormt.

WeWork's udforskninger, der fører op til deres plasmasystem, fra: https://medium.com/@andrewcouldwell/plasma-design-system-4d63fb6c1afc

Tilvejebringelse af begrundelse

Værktøjer: Stilguide, designprincipper, mønsterbiblioteker

I øjeblikket er du godt øvet til at skabe skærme og brugerstrømme og har en god fornemmelse af, hvad du skal arbejde med. Hvis du antager, at dit produkt er designet med vilje og er baseret på grundlæggende HCI-principper, kan du bruge dit eksisterende arbejde som udgangspunkt for at destillere skjulte principper, der kan have været styrende for dit arbejde. Det vigtigste er, at det giver dig tid til at pause og finde måder at forbedre det, du har gjort ved at etablere bedre retningslinjer fremover.

Inkorporerer Brand

Værktøjer: Brand Guide, Stemme og tone retningslinjer

Mærke og produkt går hånd i hånd i dagens alt-som-en-service verden. Indtil dette tidspunkt har du måske kørt magert eller simpelthen ikke haft interne ressourcer til virkelig at eje dit produktmærke. Inden du virkelig kan lukke konsistensgabet, skal du integrere dit brand i dit produkt.

Shopify har naturligvis fantastiske retningslinjer for tale og tone.

Dette sikrer, at dit designsystem afspejler, hvordan dit produkt præsenteres for markedet. Det hjælper også med at bringe andre teams (marketing og branding) i folden, før de foretager det sidste spring med udvikling mod fuld optimering.

3. Optimering (Enterprise)

Her er vi. Den hellige gral. Denne fase repræsenterer modenheden for systemer, der er de mest beskrevet i dag. Der er en stærk forbindelse mellem design og udvikling, og dette er kun muliggjort af grundlæggelsen lagt i de foregående trin.

Det er vigtigt at bemærke, at ikke alle hold har brug for at nå dette niveau.

Det hele kommer ned til dine egne mål og produktprioriteter. Denne fase kræver modenhed, buy-in, erfaring og en klar ROI på næsten enhver afdeling i dit produkthold.

Udviklingskonsistens

Værktøjer: HTML og Sass; Javascript eller andre mellemlagsrammer

Google har frigivet snesevis af værktøjer, men et forholdsvis enkelt eksempel på en kodet version af deres rammer er Material Design Lite. Dette minder meget om Bootstrap, kun baseret på de grundlæggende designprincipper i sit eget designsystem.

Material Design Lite leverer kodestykker, der spejler designrammen.

Optimering af overdragelse

Værktøjer: Brugerdefinerede systemer og værktøjer til at holde design og dev aktiver synkroniseret, Regeringsstrategier, Design Ops, Design Teknologer

For nylig sprang Airbnb designernet ™ med deres React Sketch.app:

Dette er omtrent så modent et system, man kunne skabe, fordi det også inkluderer kompilering af værktøjer og andre ting, som jeg ikke er smart nok til at formulere. Airbnb projicerer en klar gennemsigtighed og samarbejde mellem deres design- og udviklingshold.

Meget som en virksomhedsvirksomhed, når du når dette trin, bliver processer og ejerskab kritisk for at føre tilsyn. Mens os udenforstående kan svimle over Airbnb's system, er virkeligheden, at et system af den størrelse og kompleksitet vil være en bjørn at styre og optimere internt i de kommende år. Det er her DesignOps og regeringsstrategier spiller ind.

Det er også her, du endelig kan brand dit designsystem med et navn, der lyder som en rumfærgen, og selv tænde designernet.

Resumé

Så hvad har vi lært? Generelt er der ingen officiel definition af, hvad et “designsystem” er andet end en struktureret tilgang til optimering af dit produktdesignarbejde.

Ligesom et softwareprodukt vil et designsystem gennemgå faser af modenhed, efterhånden som det bliver mere komplekst og tjener individuelle behov ud over selve designteamet.

Så før du svaner dykke ned i at oprette et designsystem, skal du reflektere over, hvorfor du opretter det, og etablere et mål MVP. Identificer hvilke (r) problem (er) du prøver at løse, og vælg den mest passende tilgang til dine behov.

UX Power Tools fremstiller sofistikerede Sketch-værktøjer, der hjælper dig med at lave dit eget designsystem. De bedste Sketch-designere bruger det, og jeg tror, ​​du måske også kan lide det. Tjek demoen!