Sådan bygger du et mønsterbibliotek i Sketch

Har du nogensinde kæmpet med konsistens inden for webdesign? Dette sker alt for ofte, især når man arbejder i målestok. Heldigvis for os er mønsterbiblioteker her for at hjælpe!



Et mønsterbibliotek er en samling af brugerinterfacedesignelementer, der kan genbruges til at opbygge sider. Eksempler inkluderer navigationer, knapper, afsnit, overskrifter og formularer. Ved at designe individuelle elementer i stedet for komplette sider tilskynder vi aktivt til genanvendelighed, hvilket resulterer i design, der er konsistente og lette at vedligeholde.

Før vi implementerer et mønsterbibliotek, skal vi sikre, at vores designværktøjer kan håndtere genanvendelige elementer. I de sidste to år har mit go-to-designværktøj været Sketch: et let, vektorbaseret værktøj, der er perfekt til grænseflader og mønsterbiblioteker. Hvorfor er det perfekt? Jeg giver dig et eksempel.

Lad os sige, at du har et knapelement, der bruges flere gange på et websted, og derefter beslutte at ændre det. Normalt skal du gennemgå og manuelt ændre hver forekomst af den knap. Ikke med Sketch. Softwaren indeholder en funktion kaldet symboler: en særlig form for laggruppe, hvor eventuelle ændringer, du foretager i et symbol, automatisk anvendes på alle dets andre forekomster. Det er perfekt til at arbejde med genanvendelige elementer.



OK, nok af mig, der synger Sketchs ros. Lad os dykke ned i vejledningen! Har du ikke en kopi af Sketch? Gå bare over hovedet her for at downloade den gratis prøveperiode.

Trin 01

Få dit tegnebræt klar

Få dit tegnebræt klar

Inden vi begynder, skal du sikre dig, at du har den gratis Google-skrifttype Kilde Sans Pro installeret. Opret et nyt dokument, og indsæt derefter et nyt tegnebræt ved at gå til Indsæt> Tegnebræt (tastaturgenvej: A). Et tegnebræt er et fast lærred, som vi bruger som vores skærmstørrelse. Du bemærker, at 'Artboard 1' er blevet føjet til laglisten til venstre. I inspektorpanelet til højre skal du indstille bredden til 1280px og højden til 2000px.



Trin 02

Lav dit gitter

Lav dit gitter

Nu for at oprette vores gitter. Med valgt Artboard 1 skal du gå til Vis> Lærred> Vis layout (tastaturgenvej: Ctrl + L). Du vil se et standardgitter vises. Nu skal vi bare redigere det. Når tegnebræt 1 stadig er valgt, skal du gå til Vis> Lærred> Layoutindstillinger. Indstil total bredde til 1080px, antal kolonner til 12, tagrendebredde til 30px og kolonnebredde som 60px. Sørg for, at tagrenden udenpå er markeret. Klik på knappen Center.

Trin 03

At lave en knap

lego ideer nasa apollo saturn v (21309)
At lave en knap

Nu har vi vores tegnebræt og gitter opsat, det er tid til at tilføje noget indhold. Til denne vejledning opretter vi fire forskellige typer mønsterbibliotekselementer. Lad os starte med knapper. For at oprette knapbaggrund skal du gå til Indsæt> Form> Rektangel (tastaturgenvej: R). I inspektøren skal du indstille bredden til 280 pixel og højden til 44 pixel. Indstil radius til 3 pixel og udfyldningsfarven til # 1A9DD3.

Trin 04

Indsættelse og formatering af tekst

Indsættelse og formatering af tekst

Nu for at tilføje teksten. Gå til Indsæt> Tekst (genvej: T). Skift skrifttypen til Source Sans Pro, Vægt til fed, Farve til #FFFFFF, Størrelse til 16pt, og klik på ikonet for centerjustering. Placer teksten, så den er centreret inde i baggrunden. Vælg begge lag, og gå til Arranger> Gruppelag (tastaturgenvej: Cmd + G). Når gruppen er valgt, skal du gå til Lag> Opret symbol. Du vil bemærke, at Sketch beder dig om at navngive symbolet, så indtast Button. Symboler kan genkendes med et lilla lagikon.

Trin 05

Brug af symboler

Brug af symboler

Alle ændringer, der foretages på et symbol, som det vi lige har oprettet, vil blive anvendt på alle andre forekomster af dette symbol. Det eneste problem er, at hvis vi ændrer knapteksten inde i symbolet, vil det ændre teksten på alle andre knapper. For at forhindre dette sker skal du markere tekstlaget og markere afkrydsningsfeltet Ekskluder tekstværdi fra symbol i inspektøren. Lad os nu oprette en duplikatknap. Gå til Indsæt> Symboler> Knap.

Trin 06

Symboler i aktion

hvad er forskellen mellem kunst og design
Symboler i aktion

For at se symboler i aktion skal du ændre baggrundsfarven på en knap. Bemærk, hvordan farven skifter for begge. Men hvis du ændrer teksten på den ene knap, ændres teksten på den anden ikke. Kun typografierne er synkroniseret, ikke tekststrengene. Dette betyder for eksempel, at vi kan oprette Tilmeld, Køb nu og Kontakt mig knapper, der alle deler den samme stil.

Trin 07

Før du går videre, er det vigtigt at være opmærksom på, hvordan måling fungerer i Sketch. Vælg en knap, hold Alt nede, og hold markøren over den anden knap for at vise afstanden mellem dem. Dette er ikke kun en funktion, som designere bruger hele tiden, men en der er perfekt til udviklere, der regelmæssigt skal beregne nøjagtige pixelmålinger.

Trin 08

Kom i gang med overskrifter

Kom i gang med overskrifter

Dernæst overskrifter. Da overskrifter er genanvendelige tekstelementer, er det vigtigt at bruge funktionen Tekstformater i stedet for symboler. Indsæt et tekstlag, og skriv Overskriftniveau 1. Skift typografi til Source Sans Pro, Vægt til fed, Farve til # 3A4654 og Størrelse til 37pt. Gå til Lag> Opret delt stil. I inspektøren bemærker du, at der er fremhævet tekst. Skitse beder dig om at navngive tekststil, så indtast H1.

Trin 09

Overskriftsstørrelser

Overskriftsstørrelser

Gentag det sidste trin for at oprette dine H1 til H6-elementer. Mine skriftstørrelser for overskrifter er H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt og H6: 15pt. Da hver overskrift er en tekstformat, vil eventuelle ændringer blive anvendt på alle andre forekomster af den. Jeg har brugt Jeremy Church's Skriv skaleringsværktøj for at bestemme størrelsen på mine overskrifter. Type Scale bruger den modulære skala til at vælge forholdsmæssige skriftstørrelser afhængigt af det valgte forhold.

Trin 10

Organisering af tekstformater

Organisering af tekstformater

For at organisere de tekstformater, vi lige har oprettet, skal du gå til Indsæt> Stylet tekst> Organiser tekstformater. Her kan du slette og omdøbe tekstformater, men ikke ændre dem. Da tekstformater er ordnet alfabetisk, navngiver jeg lignende elementer med det samme første ord: for eksempel List Unordered og List Ordered. Følg den samme proces for at organisere symboler. OK, vi har tacklet knapper og overskrifter! Men hvad med billeder?

Trin 11

At lave en avatar

At lave en avatar

For avatarer skal du indsætte et billede og et rektangel, der begge har en bredde og højde på 130 pixel. Giv rektanglet en radius på 65 pixel. Gruppér begge lag, og placer rektanglet bag billedet. Højreklik på rektangelaget, og vælg Brug som maske. Vi har nu en cirkulær avatar. Vi har brugt et rektangel med en radiusindstilling i stedet for en faktisk cirkel, for hvis du vil gøre avataren firkantet, kan du blot redigere radiusen i stedet for at indsætte en ny form.

Trin 12

Men hvad nu hvis jeg vil erstatte et billede, hører jeg dig spørge? OK, måske bad du ikke om det, men det fører mig ind på en pæn funktion, passende navngivet Image Replace. Vælg din avatar, og gå til Lag> Billede> Udskift. Vælg et andet foto. Sketch ændrer automatisk størrelsen på det nye billede og skifter det til det eksisterende. Du bruger dette oftere, end du tror: det er en anden god tidsbesparelse!

Trin 13

Træk brugerbilleder med Content Generator for Sketch

Træk brugerbilleder med Content Generator for Sketch

Et alternativ til at indsætte dine egne billeder er at bruge Indholdsgenerator til skitse plugin af Timur Carpeev. Du skal blot oprette en figur og gå til Plugins> Content Generator Sketch Plugin> Persona> Fotos. Det trækker brugerbillederne fra Brugerinterfacer og indsætter dem som en formfyldning. Sketch-plugin-fællesskabet er fantastisk.

Trin 14

Farveprøver

Farveprøver

Næste op, farveprøver! Det er vigtigt at dokumentere almindeligt anvendte farver i vores mønsterbibliotek. Indsæt et rektangel med bredde og højde på 120 pixel, og giv det en udfyldningsfarve på # 1A9DD3. Gentag dette trin med farverne # 3A4654, # 475361, # 8793A1 og # EFF0F1. Der er også en plugin til oprettelse af farveprøver af Jody Heavener. Gå til plugins> farveprøver, og indtast de fem hex-værdier ovenfor.

Trin 15

Opbygning af dit farvebibliotek

Opbygning af dit farvebibliotek

Vælg en farveprøve, og klik på udfyldningsfarven i Inspektøren. Nederst i farvevælgeren bemærker du to sektioner: Globale farver og Dokumentfarver. Globale farver gemmes for alle Sketch-dokumenter, du opretter, mens dokumentfarver er unikke for hvert dokument. Ved at tilføje farver til dokumentfarvesektionen opbygger du dit eget farvebibliotek.

Trin 16

Ofte anvendte farver

Ofte anvendte farver

Bortset fra dokumentfarver udvælger Sketch også almindelige farver i dit dokument og angiver, hvor ofte de er blevet brugt! Denne funktion er skjult, men kan tilgås fra farvevælgeren. Klik på området til højre for skyderne til nuance og opacitet. Du får vist en popup med titlen Frequent Colors Used in .... Ikke kun fortæller Sketch dig, hvor ofte farven er blevet brugt, men hvor.

Trin 17

Husholdning

Husholdning

Download de sidste trin ressourcen der ledsager denne tutorial, og sørg for at du har skrifttypen Source Code Pro installeret. I ressourcen er HTML inkluderet sammen med hvert element. Dette sikrer, at de korrekte HTML-tags og klassenavne bruges til udvikling. Brugsanvisninger kan gives, hvor det er relevant. Et godt eksempel på dette er i gittersystemet, hvor det er nyttigt at have oplysninger om kolonneklasser, modregning af kolonner osv.

hvordan man tegner en kat gående

Trin 18

Sørg for, at folk kan hoppe til elementer, så de ikke gør det

Sørg for, at folk kan hoppe til elementer, så de ikke behøver at rulle

I ressourcen vil du også bemærke, at overskriften har en Spring til… -vælger. Mønsterbiblioteker kan være lange, så det er vigtigt, at dine teammedlemmer hurtigt kan hoppe til et element uden at skulle rulle gennem hele siden. Et eksempel på dette kan findes på A List Apart mønsterbibliotek og Anna Debenhams mønsterbibliotek .

Det er det! Du ved nu, hvordan du arbejder med mønsterbiblioteker: alt hvad du skal gøre nu er at finde inspiration til et eget bibliotek. Jeg kan varmt anbefale at besøge Webstedsguide Ressourcer af Anna Debenham og Brad Frost, hvor du kan finde masser af gode artikler, værktøjer og eksempler.

Ord : Richard Child

Richard Child er designkonsulent. Denne artikel opstod oprindeligt i nummer 272 af netmagasin .

Kan du lide dette? Læs disse!