5 trin til oprettelse af et designsystem

Indblik i, hvordan vi lavede vores designsystem i Sketch

Conestoga College Doon Campus Design Foundations Studio

Designsystemer er blevet et fast aktiver i ethvert design- og udviklingshold. De er banebrydende af tech-virksomheder som Google (Materiale), AirBnB, Uber og Facebook og tjener et vigtigt formål: at give et enkelt referencested for digital design, herunder retningslinjer, komponenter og kodestykker. De er ikke kun til techfirmaer og apps - de tjener snarere enhver organisation med digital tilstedeværelse. I dette indlæg viser vi dig trin for trin, hvordan vi oprettede vores designsystem og de valg, vi tog undervejs. Vi vil henvise til vores produktkredsløb som eksemplet i udbygningen af ​​vores designsystem og har valgt Sketch som designværktøj til at opbygge og katalogisere komponenter.

Kredsløbets universelle menu

Om Circuit og vores designproblemer, udfordringer og mål

Circuit er en fordybende indholdsplatform, der bruges til at skabe virtuelle ture og utrolige indholdsoplevelser. Siden lanceringen har vi fokuseret på at forbedre brugeroplevelsen ved at foredle og tilføje nye funktioner. Produktet er nået langt på kort tid, men der er stadig meget at gøre på vores køreplan. Da produktdesign blev en kernefunktion sammen med udvikling, fandt vi os selv ramme de samme forhindringer igen og igen:

  1. Det var vanskeligt hurtigt at designe og prototype nye funktioner på en række skærmstørrelser og inkorporere klientmærkefarver, logoer og billeder på farten.
  2. Efterhånden som vores team voksede, var der flere tilfælde af design, der ikke kunne synkroniseres, og designere, der arbejdede med forældede paletter eller startede fra bunden.

I et forsøg på at strømline vores designproces besluttede vi at indføre et designsystem.

Hvad er et designsystem, og hvordan hjælper det?

Et designsystem (eller designbibliotek) er en samling retningslinjer, stilguider og genanvendelige komponenter, der muliggør hurtig oprettelse af mockups og understøtter hurtigere udbygning af funktioner. Det kan besvare specifikke spørgsmål fra hvilke skrifttyper og farver der bruges på websteder, til hvordan knapper og paneler vises.

Efter at have rullet vores designsystem ud, er det superhurtigt at oprette mockups og eksperimentere med design. Vi er i stand til at designe til en række skærmstørrelser, som hjælper os med at tage bedre UI-beslutninger. Vi kan nemt gå tilbage og ændre tekst, størrelse, billeder og styling på farten. Dette har været fantastisk til at tilpasse skærme til at vise klienter og få feedback. Vi kan også tilføje struktur til vores webdesignproces og hjælpe med at identificere og strømline vores nuværende websted, app eller produkt, så alle er på samme side. Endelig er det en enkelt kilde til sandhed for orientering af designere og udviklere. Uden at skrive omfattende dokumentation er vi i stand til at overlevere en enkelt fil til en indkommende designer og undgå forvirring omkring eventuelle stylingdetaljer.

Tabel med fordele og ulemper ved et designsystem (skema lavet med vores designsystem!)

Det er ikke en let opgave at opbygge et designsystem og kræver konstant arbejde for at forblive på linje med dit live-websted. Det er dog bestemt værd at gøre det.

Sådan oprettes og organiseres et designsystem

Her er de trin, vi fulgte for at oprette vores designsystem. Vi valgte Sketch for at oprette vores bibliotek, og nogle af anbefalingerne vil være specifikke for dets funktionalitet, men de koncepter, vi dækker, er universelle. Andre værktøjer, du kan bruge, inkluderer Figma, Adobe Xd og Adobe Illustrator.

Slutresultatet kunne se sådan ud.

Trin 1 - Gennemgå dit websted eller din app, og lav en liste

For at starte, har du brug for et design; dette kan være en mockup, en live side eller en app. I vores tilfælde havde vi en live webapp og en samling af komponenter og symboler i Sketch. Mange komponenter i designfilen var forældede eller kom dem aldrig til i det levende produktionsmiljø.

Lav derefter en liste over alle de komponenter, du har, og noter de forskellige tilstande, de måtte være i (tomgang, svæve, klikket, deaktiveret, standard osv.). Vores liste bestod af skrifttyper, farver, typografi, ikoner og en lang liste over komponenter såsom, avatarer, knapper, kort, sidefødder, navigation, statuslinjer osv.

Trin 2 - Organiser sider

Metoden Atomic Design (venstre) og Pattern Page-metoden (højre)

Uanset hvilken software der er valgt, vil du sandsynligvis bruge sider til at organisere indholdet i dit bibliotek. Der er to måder, du kan gøre dette på. Den første er Atomic Design Methodology af Brad Frost, hvor elementer modelleres i henhold til 5 hierarkiske grupper: Atomer, molekyler, organismer, skabeloner, sider. Den anden metode, som vi refererer til som Mønstersider, præsenterer relaterede komponenter på deres egne sider, såsom Farver, Type, Ikoner, Avatarer, Knapper osv. Til sammenligning er det en flad struktur uden meget arvestykke, der kan gøre det mere ligetil for indgående designere til at lokalisere specifikke stykker, men mangler den strukturerede 'byggesten' -strøm i den Atomiske metode.

Hvordan vi organiserer vores designsystem

Vi strukturerede vores system efter de atomære principper, skønt de forenklet det betydeligt. Vi endte med 5 hovedsider:

En side med retningslinjer til skriftlig dokumentation, der forklarer standarderne og målene for designsystemet.

En Sandbox-side, der er vores 'dev-miljø' til design. Vi bruger dette til at eksperimentere med nye funktioner og design. Når en funktion er godkendt, bygget, testet og promoveret til produktion, opdaterer vi designet og promoverer det til kernebiblioteket.

En side med symboler, der indeholder alle vores atomer, molekyler og organismer, fra enkle knapper og ikoner til sammensatte komponenter, grupperet og organiseret alfabetisk. Vi gjorde dette, så komponenter er hurtige at finde og vi kan hurtigt bevæge os rundt på siden gennem alle tegnebræt. Dette fungerer muligvis ikke for større designbiblioteker, men i øjeblikket er det fint efter vores behov.

Den færdige side med symboler

En stilguide, der er en sammensat samling af designelementer som font, typografi & ikoner, komponenter, skabeloner og sider. Vi har indlejret symbolerne i grupperinger på denne side, og det er nemt at eksportere hele stilguiden som et PDF-dokument, når vi skal udlevere det til en designer eller udvikler.

En af siderne med stilguider

Endelig en ændringslogg til at holde styr på større ændringer, skabere og udgivelser, når designbiblioteket udvikler sig over tid.

Generelt er det din præference, og den måde, du organiserer dit designsystem på, skal passe til dine produkters og teams behov.

Trin 3 - Opret lagformater og tekstformater (spring dette trin over, hvis du ikke har Sketch)

Lag- og tekstformater er gode, fordi de giver dig mulighed for at tilsidesætte figurer og tekst, du har tilknyttet stilarterne senere.

Lagstiler giver os mulighed for at gemme objekter egenskaber som fyld, rammer, skygger, justering osv. Og giver os mulighed for konsekvent at anvende dem på andre objekter.

Circuit's lagstilarter

Tilføjelse af en lagstil: vælg dit objekt og i egenskabspanelet under udseende skal du klikke på "Ingen lagstil" og "Opret ny lagstil" for at gemme objektets egenskaber.

Navngivende lagstilarter: hvordan du navngiver dine stilarter vil bestemme, hvordan de vises i menuen (ovenfor). Hvis du finder ud af, at det tager for lang tid at komme til din stil eller er vanskeligt at finde, kan du altid ændre det i typevinduet. Lag> Organiser lagformater. Sådan har vi navngivet vores lagstilarter:

Circuit / farve / Primær / Blå / Medium

Tekstformater giver os mulighed for at gemme egenskaberne ved tekst, herunder skriftstørrelse, font, justering osv. Og giver os mulighed for hurtigt at indtaste eller ændre tekst, der bruges i symboler senere. Her vil du sandsynligvis ønske at organisere dine stilarter i henhold til de semantiske klassificeringer af tekst på dine websider, dvs. H1, H2, H3, body osv.

Circuits tekststilarter

Tilføjelse af en tekstform: vælg din tekst og i egenskabspanelet under udseende skal du klikke på "Ingen tekstformat" og derefter "Opret ny tekstformat".

Navngivende tekstformater: Ligner navngivende lagformater. Vi grupperede vores stilarter efter H1, H2, H3, ... afsnit og alle komponenter, der havde brug for dets egen tekststil.

Du kan også anvende lagformater på tekstformater. Sådan gør du:
Vælg tekst> Lag> Konverter til konturer, så skal du være i stand til at tilføje dine lagstilarter til tekst ligesom enhver normal form. Men hvis du har en masse tekst, kan du gøre dette for meget gå ned i din Sketch eller gøre den utroligt laggy.

Trin 4 - Opret symboler / komponenter

Dette er den sjove del. Vær særlig opmærksom på afstand, størrelse, former og om nødvendigt husk at anvende tekst- og lagformater på individuelle dele af komponenterne, dette muliggør tilsidesættelse af delene senere. Målet er at ende med en komplet samling af symboler og komponenter.

Opret et symbol: I Sketch skal du gruppere dine elementer og trykke på "Opret symbol" i øverste nav. Begynd i det små ved at definere med ting som knapper, avatarer og ikoner, og flyt derefter til at opbygge dine sammensatte komponenter.

Navngiv symbolet: Dette bestemmer, hvordan de vises i insert-menuen. For en knap navngav vi dem som sådan:

Knap / Standard / inaktiv
Knap / Standard / Hover
Knap / Standard / Deaktiveret

Navngiv og orden lagene i dit symbol: Dette er meget vigtigt, fordi det er sådan, de vil vises under tilsidesættelsen. Tænk over dig selv, hvis ordren giver mening og navngives og ordnes, hvordan en anden ville forvente det?

Overstyr panelet af en kortkomponent

Selvfølgelig kan du ikke altid bestille dem på en måde, der er fornuftig at finde i tilsidesættelsen, fordi lag stadig bestemmer, hvilket element der er øverst, men det er stadig godt at huske, når du opretter dine symboler.

Indlejrede symboler: Symboler inden for symboler. Ved at bruge mindre symboler til at oprette sammensatte symboler, kan du foretage en ændring ét sted og få dem til at afspejle i alle tilfælde i alle dine design. Hvis du for eksempel ændrer egenskaberne for sige en knap, ændres også alle knapper i hele din mockup.

Skala altid et nyt symbol for at teste!

Skaler dit symbol: Responsivt design er en almindelig praksis nu. Når du først opretter dit symbol kan du opleve, at elementer måske ikke skalerer, hvordan du ville forvente. Du kan bestemme, hvordan ting skaleres i størrelsesvinduet i egenskabspanelet. Hold musen over forhåndsvisningen viser dig, hvordan den skalerer op.

Bemærk, det er lettere at skalere op end det er at nedskalere, da nogle gange tingene bliver lidt vild. Så hvis du er usikker, så start små!

Opret skabeloner og sider - Når du har en samling af symboler, kan du begynde at oprette skabeloner og sider til hurtig oprettelse af mockups af hele skærme. Det er også en god ide at begynde at indsamle dine symboler i en stilguide til at organisere og præsentere dem.

Mockup af en mobilskærm, der viser, hvordan tilsidesættelser anvendes

Trin 5 - Løbende opdateringer til designsystemet

Du vil aldrig vide, hvor godt dit system fungerer, før du bruger det til faktisk at oprette nogle mockups. Derefter kan du opleve, at du bliver nødt til at gå tilbage og justere dine symboler, fordi de ikke skalerer nøjagtigt, hvordan du ville, eller du fandt, at det var for trættende at anvende nogle lagstilarter og hellere vil have mindre klik for at komme til en stil .

Og det er okay! Husk, at et designsystem er et levende bibliotek og skal løbende opdateres.

Her er et par ekstra Sketch-tip, der hjælper dig med at administrere dit system:

  • Opret datamapper for at tilføje dit eget bibliotek med billeder ved tilsidesættelse. Husk, at hvis du flytter mappen, bliver du nødt til at knytte den sammen igen. Skitse> Indstillinger> Data / bibliotek.
  • Opdatering af dit bibliotek i andre dokumenter - underretninger til højre → Opdater bibliotek (skal gemme og lukke biblioteket først)
  • Sketch API er en officiel, opdateret kilde til dobbeltkontrol af fakta, da tredjepartswebsteder undertiden har forældede oplysninger.
  • SketchApp-kilder er et nyttigt sted at få gratis aktiver til skitse

Plugins gør det lettere at bruge og organisere dit designsystem. Et par, som vi elsker i øjeblikket:

  1. Sketch Runner - brug dit tastatur til at indsætte symboler hurtigt!
  2. Symbol Organizer - gør din symbolside fin og organiseret, hvordan du vil have den.
  3. Unsplash It - tilføj fotos fra Unsplash.

Vi håber, at denne artikel har været nyttig til at vise, hvordan du kan strømline din arbejdsgang med et designbibliotek. Glad at skabe!