Skitsevejledning

Sådan oprettes et designsystem i sketch (del 1)

Lad mig vise dig de fundamenter, der skal lægges for at starte opbygningen af ​​et kraftfuldt designsystem

Vil du forbedre din arbejdsgang dramatisk med mit Premium Design System til Sketch? Du kan hente en kopi af Cabana lige her.

Brug tilbudskoden MEDIUM25 for at modtage 25% FRA.

Lægning af fundamentet

Okay. Så for nylig prøvede jeg mig på at opbygge et Design System i Sketch. Det var tidskrævende. Det var sjovt. Det var lejlighedsvis frustrerende, men dreng er jeg glad for, at jeg gjorde det.

At have et Design System (det kaldes Cabana forresten) på plads har øget min arbejdsgang ti gange og givet mig et stærkt fundament at bygge videre på, når jeg dykker først ind i ethvert projekt.

Inspireret af andre systemer, jeg var stødt på, var jeg forbløffet over det tidsbesparende noget som et system kunne bringe i min daglige arbejdsgang. Jeg har måske ramlet lidt i mit sidste indlæg, men virkelig har det øget hastigheden på min arbejdsgang massivt, og det er nødder, at jeg ikke førte en ind i min arbejdsgang på et tidligere tidspunkt. Ker-raaazzzy!

Nu, som det er sædvanligt, er der Naysayers derude, der skriker fra hustagene ”Men du skal ændre 4 symboloverskridelser bare for at style en knap. Jeg er bare ikke cool med det ”, og jeg er tilbøjelig til at være enig med dem ……… .. til et punkt.

Når du først begynder at arbejde med et nyt system i Sketch, kan du muligvis finde dig selv (i de første par gennemløb) lidt hindret, fordi det er en anden måde at nærme sig et projekt inde i Sketch, og noget lidt anderledes end dig ' vi er måske vant til.

Men ærligt, tro mig, når jeg siger, når du først har kastet dem fra Design System-træningshjulene (som jeg lover, at du ikke vil tage lang tid), vil du finde dig selv, hvor du arbejder med autopilot, som går hurtigt gennem et projekt, og det vil virker som anden natur for dig.

Jeg kan godt lide at kalde det 'Sketch Zen Cruise Control'.

Stol på mig. Når du først har bragt et designsystem ind i dit liv denne jul, vil du ikke vende tilbage til din gamle måde at designe i Sketch ...

  • Åbn Sketch
  • Stare på en tom skærm (jeg kalder det 'Blank Screen Syndrome')
  • Grib nogle ikoner fra et sted
  • Gå gennem den strenge proces med at oprette Symbol efter symbol
  • Konfigurer nogle lagstilarter, og derefter et par flere, og derefter nogle mere
  • Så start faktisk en forbandt start på projektet!
  • Se på uret og gå ”Åh hvor gik al den tid hen. Tid til søvnigt land. ”

Okay. Lad os komme til det, og lad mig vise dig de fundamenter, der skal lægges for at begynde at opbygge en ruvende struktur af ægthed kaldet et Sketch Design System ...

Start med disse farver ...

Hold det enkelt, din fjollede pølse (KISYSS)

Med Cabana og med ethvert system, du opretter, skal du bruge det blotte minimum af farver, når det er muligt. Indrømmet, at du kan bruge farver og nuancer, men til de faktiske basisfarver holder du tingene til et minimum. Ikke for forskellig fra for mange kokke / skrifttyper, der ødelægger bouillon det samme, kan ske med farver, hvis du bliver for skør.

Hele pointen med at skabe et designsystem i første omgang er at have et raffineret bibliotek med elementer og stilarter, der holder tingene meget strammere, når man arbejder på ethvert projekt. Et referencepunkt, der holder dig væk fra den mørke side ved at arbejde med 12 forskellige farver og et væld af lidt forskellige skriftstørrelser fra den ene skærm til den næste. Jeg har været skyld i det i fortiden. Jeg tror, ​​vi alle har det.

Så med Cabana holdt jeg mig til en universel struktur af primære, sekundære og tertiære farver. Ikke mere, ikke mindre og nok til at tilpasse sig forskellige projekter, når det er nødvendigt.

Og selvfølgelig den obligatoriske sort, 2 nuancer af grå, hvid og en hvid med 50% uigennemsigtighed til at fungere som et overlay for elementer som ikoner.

Derefter er standardfarverne for rød, grøn og gul til succes, advarsel og fejlmeddelelser, at de er som baggrundsfarve for underretningstegn, tekst på en formular eller grænser til et tekstfelt.

Klar parat start!

Jeg gav hver af mine basefarver en udfyldning og kant (1px) farve med den samme hex-værdi og oprettede derefter separate delte stilarter for hver (dvs.: Fyld / Primær og derefter Border / Primær).

Derefter med det rektangel valgt (med udfyldt delet stil anvendt), duplikerede jeg denne form, anbragte den oven på originalen og anvendte derefter den kantdelte stil, jeg tidligere har gemt.

Dette giver mig derefter mulighed for i fremtiden hurtigt at vælge begge former (med anvendt udfyldnings- og kantformater anvendt) og foretage de relevante stilændringer på én gang.

Når jeg havde bundfarverne på plads, kunne jeg ganske enkelt tage nogle af disse farver, dvs. Primær, sekundær, sort og opret et simpelt farveoverlay ved 60% opacitet, som derefter kunne anvendes på ethvert billede i et projekt, og dette var så simpelt som at tage Hex-værdien fra mine basefarver og anvende den med en 60% opacitet og oprette en ny delt stil, dvs. Overlay / Primary.

... og nu til typografien ...

Når du opretter Cabana, og dette gælder virkelig for ethvert projekt, du arbejder på. Hold dig til reglen med 2 skrifttypefamilier (maks.). Den ene til overskrifter og den anden til Body-kopi. Der er tidspunkter, hvor "det" 3. familiemedlem kan blive inviteret rundt, men du skal give dem en stol ved døren.

Jeg valgte Poppins og Open Sans på grund af det faktum, at de komplementerer hinanden virkelig godt som base (starter) fontfamilier.

Der er virkelig ingen rigtig eller forkert måde at konfigurere dette oprindeligt, da du vil tilpasse typografien til det aktuelle projekt, men for eksempel indledende prototyper fungerer de godt til de formål, de tjener (overskrifter, krop) og tager et bagsæde uden for store distraktioner. Jeg føler, at hvis du startede med for eksempel en Serif-font som Merriweather, de distraherer fra off, hvis dit eneste mål var at bruge et system som Cabana til rent prototypeformål.

Start med Poppins Font Family. Jeg startede med Uber-skrifttypen. Dette er ikke en skrifttype, der vil blive brugt mest af de tilgængelige, men jeg ved af erfaring, at når jeg tidligere har testet andre designsystemer, har deres største skrifttype ikke været generøs nok i størrelsen, og især når du ønsker at oprette produkter til både mobil og internet. Derfor satte jeg Uber på plads med en sund fontstørrelse på 111 t

Derefter gik jeg ned gennem de sædvanlige mistanke om typografi (H1 til H5) ved hjælp af Modular Scaling, med min kropsstørrelse sat til 18pt og ved hjælp af en ratio på 1,2.

Kroppen satte jeg mig på et sundere 18pt bare for at forbedre læsbarheden, hvis jeg selv eller andre besluttede at vælge en mørkegrå eller lignende til kropskopien.

Udover overskrifter og kropsstilarter tilføjede jeg stilarter til bly, lille, billedtekst og lille. Holder sig til standardtegnafstanden for alle de nævnte bortset fra billedtekst.

Jeg skabte både en regelmæssig og fed fedt for hver af typografierne (Uber, Hero, H1, H2, Body osv.). Jeg har set systemer, før jeg valgte en let vægt i stedet for Regular (eller endda bare Fed for overskrifterne, uden mulighed for Regelmæssig), men ikke hver skrifttypefamilie er så generøs med vægte og stilarter, og at stole på en let fontvægt, når det kommer til at udskifte fontfamilier, kan forårsage mere arbejde for dig selv i Sketch, så jeg prøvede at undgå det med bare almindelig gammel almindelig og fed. Et lykkeligt medium tror jeg!

Jeg gentog denne proces med Open Sans-skrifttypen (Font Family # 2) og sørgede for begge fontfamilier, at jeg også oprettede en tekstformat til venstre, center og højre (Ja, vi bruger sjældent højrejusteret tekst, men jeg inkluderede den som et sikkerhedsnet) ...

Når jeg havde sorte versioner af begge skrifttypefamilier (Poppins & Open Sans), alle Text Styled og klar, gik jeg videre til at oprette farvevarianter for hver.

Så ved hjælp af de hexfarveværdier, jeg tidligere har oprettet, kopierede jeg disse på tværs og oprettede nye tekststilarter med følgende farver anvendt ...

  • Grå
  • Lysegrå
  • hvid
  • Primær
  • Rød (fejl)
  • Grøn (succes)

Forskellige

Skygger

I det forskellige afsnit i Design System fokuserede jeg først på Box Shadows for elementer. Evnen til hurtigt at oprette en form i Sketch og tildele den en skygge med forskellige styrker inden for få sekunder, der er massivt skåret ned på det tidspunkt, det normalt tog at skabe skygger i Sketch Inspector.

Forløb og duoton

Okay. Riktigt med Gradienterne kunne du se, jeg var på en slags mission. Lad os ikke komme ind i hele gradientdebatten. De har stadig deres anvendelser og kan bruges med stor virkning, når de anvendes i moderation, så jeg valgte at inkludere dem i systemet.

Den samme form for ræsonnement gælder for Duotone-effekten, som jeg indsatte i systemet. Ja, begge elementer kan virke en smule overflødige for et designsystem, og de indledende trin kunne simpelthen oprettes med bare farver og typografi, men jeg tilføjede dem har en praktisk tilføjelse til at gemme ekstra trin på et senere tidspunkt i designprocessen.

8pt gitter system

Jeg var blevet massivt inspireret af 8pt Grid System, og ja i fortiden havde jeg holdt til mit eget system (af slags), men det kunne stadig afvige meget fra projekt til projekt. Med et 8pt Grid System på plads var jeg i stand til at størrelse og rumelementer på siden i trin på 8 (8, 16, 24, 32 og så videre). Da jeg begyndte at konstruere mine symboler og komponenter i næste trin, satte jeg dette gittersystem i meget god praksis, og jeg viser dig det detaljeret i del 2 af denne artikelserie.

Før jeg brugte noget som 8pt Grid System, var jeg afhængig af en kombination af mit øje og det gode ol 'Sketch measure tool. Jeg ville naturligvis holde mig til en form for konsistens, men i sidste ende i løbet af mange sider eller skærme med et design, og uden et referencemateriale har du en mash-mask til afstandmålinger. 20 px her, 15 px der, 30 px her.

Målinger, der nogensinde varierer så lidt mellem skærme. X-element 20px fra Y-elementet på den ene skærm, men Y-elementet 22px fra Z-elementet på det næste skærmbillede. Denne form for slurv tilføjes til sidst og skaber en usammenhængende oplevelse for brugeren.

Jeg fandt med tilføjelse af noget som 8pt Grid System til Cabana, jeg var i stand til at bringe meget mere konsistens gennem et helt projekt og har også et stærkere referencepunkt for udviklere at følge i de senere faser af et projekt.

Derfor gik jeg med Cabana med 8pt Grid System for at justere og måle polstring på mange af elementerne for bare at bringe en konsistens igennem. Det holder dig meget gladere og på rette punkt, du udviklere har et simpelt referencepunkt, og slutbrugeren kan ubevidst føle det.

Forhåbentlig med denne korte, men informative artikel, har du været i stand til at få en forståelse af de grundlæggende elementer, der kræves for at danne grundlaget for et godt Design System.

Når basiselementerne som Farve og Type er låst på plads, kan du bevæge dig fremad med at oprette de mange symboler, indlejrede symboler og komponenter, der bygger et solidt designsystem.

Bliv medlem af mig til del 2 (som du kan tjekke her)

Ønsker du ikke selv at opbygge et designsystem? Du kan hente en kopi af Cabana lige her.

Brug tilbudskoden MEDIUM25 for at modtage 25% FRA.

Tak, fordi du læser artiklen,

Marc

Designer, forfatter, far og elsker af MacPaint