Skitsevejledninger

Tekstsystem mestring med delte stilarter

Lær, hvordan du effektivt bruger og gemmer skrifttyper med skitse-app for at bringe din typografikonsistens til et nyt niveau.

Dette er en del af Frames for Sketch - række tutorials om bedste praksis, vi brugte til at gøre Frames Kit virkelig nyttigt værktøj. Vi dækker over, hvordan du holder din typografi konsistent på tværs af forskellige projekter, så delte tekstformer forbliver rene og nyttige for dig at arbejde med.

Hej! Vi er tilbage til dig med en anden tutorial, så du kan lære noget nyt om at bruge skrifttyper i vores yndlingsprogram. For ikke så længe siden har Sketch introduceret os en ny tekststilstyringsmenu, lad os se et kort blik på den og se, hvordan kan vi bruge den til at opretholde et tilgængeligt og harmonisk typografisystem inklusive 2 separate skrifttyper.

Tekstformater med et stærkt hierarki

Du har måske bemærket, at undertiden dine fingre ved at omgå tanken lykkes at komme hurtigere med et navn på et nyt lag eller en stil, så du måske har bemærket sådanne menuindstillinger i dit projekt som Titel-2, subheader-lille, header- 3 osv. Så lad os stoppe med at fremstille og distribuere dårligt organiserede stilarter.

Når vi har et rod i stilarter, bliver det mere kompliceret at kommunikere endda grundlæggende krav, når det kommer til alt, hvad der er tekst eller font relateret. Et projekttekstsystem skal have et godt sted i ethvert produktdesigners sind, så vores mål er at lave et tilgængeligt og genanvendeligt typografisystem, der kan udvides eller kollapse afhængigt af projektets størrelse.

For at gøre dette, bliver vi nødt til at bestemme på forhånd antallet af brugte tekstformater, for dette eksempel vil vi bruge den eksisterende standard til webudvikling, for os designere HTML tilbyder seks overskrifter på forskellige niveauer, der viser vigtigheden af ​​et afsnit, titel eller tekst.

-tagget er således den vigtigste overskrift på det første niveau, og

-mærket bruges til at indikere overskriften på det sjette niveau og er det mindst betydningsfulde.

Lad os se på, hvordan vi anvender denne tilgang til tekstformer og foretage nogle enkle trin for at organisere dem i grupper, så vi kan give dem en struktur og styre dem.

Oprettelse af et typografisystem

1. Åbn Sketch-appen, og start med at skrive alle dine tekststilarter på en enkel liste, for at indstille alle tekstlags justering til midten fra den største til den mindste. Tip - husk, at antallet af dine stilarter kan påvirke den generelle følelse af typografi i projektet, så mere betyder ikke bedre, prøv at konstant genbruge de samme størrelser i stedet for at lave en ny, når du designer en ny webside eller skærm.

2. Du duplikerer nu kolonnen, og lav de venstre og højre justerede kolonner for at danne en skrifttabel, og glem ikke at ændre justeringen af ​​hvert tekstlag, så det passer til den relevante kolonne.

3. Kopier den resulterende tabel, og dupliker det krævede antal gange i overensstemmelse med dit farve på dit brand eller interface, f.eks. Accent, Disabled eller Active text status.

4. Nu er navngivning virkelig det, der betyder noget for denne fase. Du er nødt til at tildele navn til hvert tekstlag i henhold til deres kolonner, så de samme stilarter kunne danne grupper, og stilen kunne have en menustruktur, for at gøre det, vi bruger Rename It plugin .

Vores menustruktur ser sådan ud:

% * / Skrifttype / Justering / Farve
Hvor (% *) er det aktuelle lagnavn

(Hvis du ikke planlægger at tilføje en anden skrifttype, behøver du ikke at medtage / fontnavn til strukturen).

5. Nu skal du oprette en tekststil fra hvert tekstlag, du kan bruge https://github.com/lucaorio/sketch-styles-generator plugin til hurtigt at generere stilarter fra vores navnestruktur. Så du behøver ikke mere at manuelt tildele hvert lag til en delt tekststil fra rullemenuen.

Efter dette skal du have en tekstmenustruktur som sådan:

Du er velkommen til at downloade skabelonfilen nedenfor for at bruge den som udgangspunkt for dit næste projekt. Du kan indstille dine egne skrifttyper til filen for at fremskynde denne proces næste gang.

Freebie opdateres med et nyt sæt tekstformater, der er kompatibel med version 52, begge skabeloner er tilgængelige som et bundt med enkelt- og Duo-fontskabeloner. (29.10.18)

Download tekststilarter bundt

Originalt skud: https://dribbble.com/shots/5461577-Text-Styles-Bundle-for-Sketch

Fontparring

Så har du virkelig brug for en anden fontfamilie i dit projekt?
Det andet skrifttype i dit dokument giver dig mulighed for at gøre din tekst mere effektiv og skabe seje udseende kombinationer, som du måske kan se på disse smarte landingssider, eller du kan bruge flere skrifttyper med hensyn til tilgængelighed af dit produkt til forskellige brugergrupper.

For at forbinde et andet skrifttype skal du:

  1. Kopier de tidligere oprettede tabeller, og ændre skrifttypen for alle tekstlag. For eksempel: fra Arial til Roboto-skrifttype.
  2. Brug plug-in Rename it til at erstatte / Font-navnet i menustrukturen, for eksempel: fra / Arial til / Roboto
  3. Overskriv nu alle de nye tekstlag som nye delte stilarter.

Og det er gjort, nu kan du sparke tilbage og se på en godt struktureret delt tekstformat, der sandsynligvis vil redde din dag en dag. Se GIF-kontrollen, hvordan rullemenuen skal se ud:

Kontroller promosiden Frames Kit for at finde ud af mere nyttige funktioner.

Del og importer dine tekstformater

Nu, hvor vi har et færdigt system med tekstformater, er et normalt personligt ønske om at bruge denne tilgang så hurtigt som muligt til andre projekter, hjælper plug-in-programmet Shared Text Style os med at dette er muligt.

Ved at bruge den kan du eksportere en JSON-fil, der vil eksistere uafhængigt af dit nuværende dokument, og som du er i stand til at gemme hvor som helst på din harddisk eller Dropbox. Denne fil vil indeholde alle oplysninger fra dine delte stilarter, så du kan bare slippe den til et nyt projekt igen og få denne velstrukturerede menu igen på ingen tid og vil holde din typografi til et mere mere konsistent niveau.

Hent delet tekststil-plugin.

Hold dit hoved kolde og typografi rent.

Flere pro tip:

  • Lav forskellige JSON-filer klar til mobil- og webdesigntypografi.
  • Da dit projekt kan vokse og ændre konstant foretager versionskontrol for din typografisystemfil, skal du holde den synkroniseret med GitHub eller abstrakt.
  • Du kan importere en JSON-fil for at overskrive de oprindelige tekststilstater, så du kan genindlæde afspilningen med skitse.
  • Her kan du finde et stort antal forskellige skrifttypekombinationer, som du kan prøve - http://fontpair.co/.

Og inden du rejser

  • Download tekstformatskabelonen freebie.
  • Download med Dropbox
  • Besøg Frames Kit-promo-siden for flere hacks og funktioner, udforsk det mest nyttige designsystem til skitse og få en rabat ved at dele.
  • Følg Robowolf på Twitter for flere fantastiske freebies og tutorials.