Skitsevejledning

Oprettelse med et Design System i Sketch: Del 1 [Tutorial]

Bygning og arbejde med et designsystem i sketch

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.

Jeg har set masser af tutorials derude, der viser dig de elementer, der går i at opbygge et Design System i Sketch, men ikke mange, hvis nogen, der faktisk så viser dig det funklende, friske som et daisy-system, du lige har oprettet i praksis.

Det er hvad jeg vil gøre med denne tutorial-serie. Vis dig ikke kun, hvordan du opretter de elementer, der bygger et designsystem, men viser dig også, hvordan du designer et multiscreen-iOS-program ved hjælp af det system, du lige har oprettet, og også viser dig, hvordan jeg konstruerede mit eget system og tankeprocesserne og beslutningerne bag det.

Serienavigation -

  • Del et
  • Del to
  • Del tre
  • Del fire
  • Del fem
  • Del seks
  • Del syv
  • Del otte
  • Del ni

Ser på Design System

Okay. Inden vi springer først og fremmest med at designe vores all-sung, all-dance, Medium-stylet iOS-app (hvem sagde klon?), Så lad mig give dig et hurtigt overblik over Design System (Cabana-Lite) Sketch-fil, som vi Jeg ringer til i de senere dele af denne tutorial-serie.

Inde i formatet (starter) -fil vil der være 3 sider ...

  • Design System (opsætning)
  • Symboler
  • Format

Lad os tage det fra toppen ...

Design System (opsætning)

Her er hvor magien sker mennesker! Udgangspunktet, hvorfra du kan kontrollere mindst 90% af den styling, der finder sted på det projekt, du arbejder på.

Juster elementer her, det være sig dine basefarver eller typografi for eksempel, og disse ændringer spreder sig gennem hele dit design.

De ændringer, du foretager her, afspejles inde på dine symbolsider (som vi vil berøre et øjeblik), såvel som selvfølgelig filtrering ned i de tegnebræt, du arbejder på i øjeblikket.

Inde i denne side er 2 tegnebræt ...

  • Farver + Overlays + Duotone
  • Typografi (Vi berører dette tegnebræt i del to)

Farver + Overlays + Duotone

Med dette tegnebræt vil du kunne se, at jeg har organiseret alle farverelaterede aktiver sammen, såsom basisfarver, overlejringer og billedeffekter (i dette tilfælde Duotone-effekten).

Nu har jeg i mit Cabana Design System lavet en lidt mere adskillelse, hvor Colours Artboard kun indeholder basisfarverne og Color Overlays, og elementer som Duotone er opdelt i et andet Artboard mærket forskellige, der også indeholder elementer som gradienter, og kasseskygger. Men med henblik på denne tutorial prøver jeg bare at holde tingene lidt mere kompakte til dig. Alt godt?

Basisfarver

Til denne tutorial-serie vil du se, at der kun er 4 basefarver, som vi har brug for, når vi designer vores iOS-app. Selvfølgelig, hvis du bygger dit eget system ud og dækker alle baser, når du arbejder på et stort projekt, ville du være klog at oprette basefarver til (og dette er bare forslag) ...

  • Primær
  • Sekundær
  • Tertiære
  • Sort
  • Grå
  • Lysegrå
  • Succes
  • Advarsel
  • Fejl

Du kan justere den nævnte liste til noget, du selv vælger. Fjern tertiæren, og tilføj for eksempel en ny nyance af grå for at have noget, som du tror vil være den rigtige pasform til de mange projekter, du kan anvende dit eget system til.

Okay. Tilbage til disse basisfarver, og lad mig give dig et par tip til, hvordan jeg opretter basisfarverne ved hjælp af lagstiler i mit eget system.

Med fokus først på den primære farve og især kantstil, oprettede jeg simpelthen et rektangel (R) 200x200, fjernede udfyldningen, gav det en 1px kant med min valgte hex-værdi, med en radius på 4.

Derefter oprettede jeg simpelthen en ny lagstil ...

... og mærkede det Border / Primary ...

Til den primære udfyldning oprettede jeg endnu en gang et rektangel (R) 200x200, anvendte min valgte Hex-værdi og gav den en radius på 4.

Oprettede derefter en ny lagstil og mærkede den Fyld / Primær.

Derefter justerede jeg begge disse elementer (rektangler) oven på hinanden. Hvorfor spørger du måske?

Dette gjorde det muligt for mig og dig selv, når du arbejder med et Design System som dette, let at ændre både kantlinje og udfyld farvelagstiler i et rent feje.

Det tager mindre fast ejendom og giver dig mere end noget andet mulighed for at foretage ændringer endnu hurtigere end at have element A her og element B der.

Derefter låste jeg titlerne (dvs. Primær, Sort, Grå osv.) Ned, når jeg havde alle mine basefarver og deres tilhørende lagstilarter på plads.

Derefter ved jeg, at jeg har mine titler på plads, så de nemt kan henvises, og kan trække min markør rundt, f.eks. Den primære farve, vælge den, foretage mine justeringer af lagstilen, hvis det kræves, alt uden at bryde en sved eller i skitsebetingelser uden smerten ved at gå ”Nej! Ingen! Ingen! Jeg mente ikke at vælge det element ”. Ja, vi har alle været der, ikke?

Derefter gentog jeg den proces, som jeg lige nævnte for alle mine andre basefarver (sort, grå osv.), Der låser disse kant / primære og udfyld / primære lagstilarter på plads.

Farveoverlejringer

Med farveoverlejringen og igen til formålet med denne tutorial, har jeg lige konfigureret den ene overlay. Sort for at være præcis.

Dette kan let overlejres på ethvert billede for at hjælpe i kontrast, og dens hex-værdi er hentet fra den sorte basisfarve for ensartethed.

Som jeg nævnte med basisfarverne, så hold ikke Mayo, Design System, som du bygger ud med en fuld fedt, du virkelig vil sigte mod (igen bare et forslag) Overlays, der matcher følgende basefarver ...

  • Primær
  • Sekundær
  • Sort (som vi bruger i denne selvstudie)

Lad mig give dig et par tip til, hvordan jeg konfigurerer farveoverlejringer, endnu en gang ved hjælp af Layer Styles, i mit eget Design System.

Jeg vil fokusere på det sorte farveoverlay, som vi bruger senere i selvstudiet.

Så jeg oprettede simpelthen et rektangel (R) 432x248 (nu kan dette være en hvilken som helst måling, du vil have, det er netop det, jeg tilfældigt har valgt), med en radius på 4 (igen personlig præference, det så bare bedre ud æstetisk), indsat i Hex-værdien af ​​den sorte grundfarve, som jeg tidligere havde oprettet, og faldt opaciteten ned til 60%.

Derefter oprettede jeg en ny lagstil og betegnede den Overlay / Black.

Nu kunne jeg have forladt det der. Men jeg tænkte, at det var fornuftigt at gøre, og også i betragtning af, at denne Overlay ville være, 99% af tiden, vises på et billede, for at tilføje en lille referenceeksempel sammen med den nye Overlay Layer Style. Dette betød bare, at jeg kunne få et bedre mål for, hvordan Overlay ville fungere, når det, som jeg nævnte, sad på toppen af ​​et billede i mit design, og tillader mig at finpusse måske det er Opacity, indtil jeg var tilfreds med resultatet.

Lad mig vise dig, hvordan jeg sætter det på plads ...

Først tegnede jeg et rektangel (R) med de samme dimensioner som Color Overlay, som jeg tidligere havde oprettet, og gav det simpelthen et billedeudfyldning.

Derefter oprettede jeg et nyt rektangel (R), nøjagtigt de samme dimensioner, placerede det over billedet og anvendte derefter Overlay / Black Layer Style, som jeg tidligere har oprettet.

Som jeg nævnte før, havde jeg nu et rimeligt solidt reference til hvordan mine Overlays ville se ud, når de blev brugt mod et billede, og justere i overensstemmelse hermed, indtil jeg var tilfreds med resultatet.

duotone

Til sidst, for Duotone-billedet, fokuserer vi bare på den ene stil til denne tutorial, men i Cabana Design System oprettede jeg omkring 9 stilvarianter.

Ja, noget som Duotone eller Gradients kan være der rent til øjen slik, og egentlig ikke et påkrævet element i dit eget Design System, såsom Base Colours eller Box Shadows, men jeg sprang dem ind, ja, hvorfor ikke hey? Du ved aldrig, hvornår et projekt kan påkalde dem.

Okay. Inden vi afslutter denne del, så lad mig vise dig, hvordan jeg hurtigt oprettede et af Duotone-billederne inde i både mit eget system og format (startfil). Lad os kalde dette en bonussektion af sortering :)

Som jeg tidligere havde gjort med Overlay Image Reference, oprettede jeg et rektangel (R) og anvendte derefter et Image fill.

Så var det bare et tilfælde at tilføje et par ekstra farvefylder til elementet og finpusse blandingstilstande, indtil jeg havde noget, der kunne passere som 'Duotone'. Hvilket i tilfældet med eksemplet, der er inkluderet i startfilen, gik en smule lignende (cue the music)…

  • # 041674 & Lys
  • # 1EDE81 & Multiplicer

Derefter trækkede jeg simpelthen for at omarrangere udfyldningerne i inspektøren, indtil jeg havde noget i det følgende ...

Og gav det derefter et kerrr-aaazzyy-navn til reference (dvs. Green Goblin). Ja min viden kender ingen grænser!

Okay. Det pakker del 1 af denne tutorial-serie. Vær med mig tilbage her til del to, hvor jeg vil berøre typografien i designsystemet, der blev brugt senere i selvstudiet, samt nogle uvurderlige tip og tip til, hvordan jeg samler dette afsnit af mit eget designsystem.

Spring over til del to lige her ...

Vil du forbedre din arbejdsgang med et komplet 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 Hash Browns