Vodič za skice

Kratki vodič za Cabana Design System

Saznajte kako jednostavno poboljšati svoj tijek dizajna u Sketch-u upravo ovdje, upravo sada!

U studenom 2017. godine (izblijedio blagu neobičnu glazbu i drhtavi zaslon) odlučio sam započeti izgradnju Datoteke za dizajn / Sketch Starter File pod nazivom Cabana. Moj izvorni članak o tome možete pročitati ovdje.

Od tog vremena stvorio sam priličnu količinu članaka, u kojima su neki detaljno opisani kako sam konstruirao sustav, kao i kako možete raditi s dizajnerskim sustavom u pripravnosti ...

  • Kako stvoriti dizajn sustava u skici
  • Stvaranje s dizajnerskim sustavom u Sketch-u

Ali znate što (i iako su upute sadržane u Cabani prilično detaljno opisane same po sebi), ne bih koristio Cabana detaljnijim uputstvom ...

... ali to želim ovdje raditi i dati vam detaljnije upute kako biste mogli uskočiti u Cabanu i reći: "Vruća digigity prokletstvo, ja sam Cabana Design System Pro, samo pričekajte dok ostatak tima dobiti dio mene, promocija ovdje dolazim ", ili možda nešto malo suzdržanije od toga?

Ovim člankom želim da budete u mogućnosti da se udaljite ne samo sa samopouzdanjem da koristite Cabana Design System u svom svakodnevnom radnom procesu, već i sa razumijevanjem koliko koristan za vaš tijek rada može biti sustav poput Cabane.

Prije nego što počnemo, uzmite si kavu, primjerak Cabane i dopustite mi da vam pokažem kako provesti ovaj mali dizajnerski sustav radosti.

Prvo stvari

  • Uzmi kopiju Cabane ovdje
  • Instalirajte i Poppins i Open Sans fontove
  • Upalite svoj primjerak Sketch-a
  • Napravimo to!

Kada prvi put otvorite Cabanu, prikazat će vam se 4 stranice nepotvrđene sjajnosti ...

  • Počnite ovdje
  • Vodič za stilove
  • komponente
  • Demonstracija sustava dizajna
  • simboli

Prvo se usredotočimo na stranicu Molimo započeti ovdje. Ima savršen smisao zar ne?

Start Počnite ovdje

Na ovoj se stranici događa većina čarolija dizajnerskog sustava. U La La!

Ovdje ćete naći 3 odvojene Artboards…

  • boje
  • Tipografija
  • raznovrstan

Osnovne boje

Pogledajmo kako prilagoditi osnovne boje unutar Cabane?

Ovdje ćemo se usredotočiti na primarnu boju i pokazat ću vam kako je jednostavno izvršiti samo jedno podešavanje na ovoj stranici i razmnožiti ga u cijelom sustavu. Ovo je neka vrsta čarobnjaka Sketch / Design System koja radi ovdje!

Jednostavno povucite pokazivač oko bloka Primarna boja, a to će zauzvrat odabrati obojanost i boju obruba. Ne brinite zbog odabira tih malih naljepnica, svi su naslovi i etikete zaključani, ne biraju se i ne kreću se nigdje!

Zatim od Inspektora jednostavno ažurirajte Boju popunjavanja i obruba na nešto što više odgovara vašem projektu, a zatim kliknite ikonu Sync za ove nove stilove da biste primijenili promjene.

Ako brzo pređete na neku od drugih stranica, bilo da se radi o simbolima ili komponentama, na primjer, vidjet ćete ovu jednostavnu prilagodbu boje u svoj svojoj rasprostranjenoj slavi.

Ovakav način uštede vremena sigurno bi učinio da Doc Brown Povratak u budućnost vikne "Sjajna skica!".

Unutar Cabana DS (Sustav dizajna) također imate sljedeće boje koje će vam pomoći od početka ...

  • sporedan
  • Tercijarni
  • Crno
  • siva
  • Svijetlo siva
  • Uspjeh
  • Upozorenje
  • greška

Sa ostatkom dostupnih boja možete koristiti samo ono što je potrebno za projekt pri ruci, a ostatak ostaviti onakvim kakvi jesu. Nije problem. Na primjer, rijetko se nađem da koristim tercijarnu boju, ali ona je tu samo kad projekt može pozvati na njega, a vi jamčite da nije bilo drugog projekta koji bi zahtijevao sljedeći projekt! Znate kako to ide?

Prekrivanja u boji

Prekrivanja u boji jednostavno su postojana radi dosljedne marke i čitljivosti u cijelom vašem projektu. S opcijama primarne, sekundarne i crne boje za odabir.

Da biste postavili sloj na mjesto, na primjer primarni sloj, jednostavno morate preskočiti inspektora i odabrati šesterokutnu (#) vrijednost boje koju ste trenutno postavili za svoju osnovnu osnovnu boju, a zatim s odabranom prekrivanjem u ovom polju. Šesterokutna vrijednost i kliknite na ikonu Sync. Gotovo!

Čak sam prikazao i demo sliku kako biste dobili grubu mjeru kako će vaša odabrana boja izgledati kad je prekrivena. Slobodno podesite neprozirnost ako je potrebno, a zatim se sjetite sinkronizirati sve promjene koje ste napravili.

Možete nastaviti i ponoviti sličan postupak za prekrivače sekundarne i crne boje, ako je potrebno.

Tipografija

Ne dopustite da vas mnoštvo fontova ispred vas pošalje kako trčite za kopijom Photoshopa. Budite mirni i slušajte. Sve će biti u redu, obećavam :)

Sustav dizajna Cabana trenutno koristi 2 porodice fontova; Poppini, za naslove, gumbe itd ...

… I Otvori Sans, za tijelo, olovo itd…

Nazivaju se Obitelj fontova br. 1 (Poppins) i Obitelj fontova 2 (Open Sans).

Ovo vam samo omogućava da jednostavno promijenite porodice fontova u nešto prikladnije za vaš projekt bez potrebe za prolaskom vaših stilova teksta i promjenom imena porodice fontova.

Za svaku obitelj fontova imate stilove koji se kreću od Ubera (za one veće od životnih naslova prilagođenih za uporabu na webu) pa sve do Tinyja (pogodnije za manji tekst na mobilnom uređaju).

Obitelji fontova pridružuju se svakom stilu koji vam omogućava slobodu prelaska s dvije familije fontova prilikom rada na projektu.

Da biste lako promijenili jednu od obitelji fontova tako da odgovara vašem trenutnom projektu, jednostavno povucite pokazivač oko jednog od blokova teksta (možete odabrati sve blokove ili samo boje koje ćete koristiti u svom projektu).

Ne brinite se oko odabira naslova (tj. Obitelj fontova br. 1 (crna)), svi su zaključani.

U stvari, možete točno smanjiti prikaz tako da su sve obitelji vidljive na vašem zaslonu (pri ruci ako radite s manjim zaslonom) i još uvijek samouvjereno odabirete blokove teksta bez nenamjernog odabira drugih elemenata na ploči s umetnicima.

Ako pogledate sliku ispod, vidjet ćete da sam povukao pokazivač s gornje lijeve strane ploče bez brige za odabir bilo kojeg od tih mučnih (ali zgodnih za referencu, naravno) naslova. Sretni odabrani dani!

Zatim na ploči s inspektorom promijenite obitelj fontova i kliknite na Syncicon da biste vidjeli promjene.

Napomena: Sve prilagodbe boje, veličine fonta, težine i poravnanja bit će spremljene kada kliknete na ikonu Osvježi. Promijenit će se samo stvarna obitelj fontova. Stoga ne brinite o gubitku tih poteškoća koje ste napravili prije nego što kliknete ikonu Sync.

Također imajte na umu da se Skica može činiti neodgovarajućim ako promijenite sve stilove teksta odjednom. Dajte mu trenutak ili dva dok sva ažuriranja teksta ažuriraju.

Sada možete primijetiti da se žuta (boja upozorenja) boja ne pojavljuje u opcijama tipografije. Ovo je namjerno učinjeno jer smatram izuzetno rijetkim da na dizajn primijenite Yellow Type. Blokovi u boji, da, ali za tipografiju i moguća pitanja pristupačnosti koje mogu donijeti nisam ga uključio.

To ne znači da ga ne biste mogli sami primijeniti, ako se zahtijeva, ali iz vlastitog osobnog iskustva rijetko sam, ako ikad, pozvao Žutu tipografiju u dizajnu, tako da nema smisla uključiti je.

Imajte na umu da su slojevi slojeva i stilovi teksta 2 zasebne cjeline u Sketch-u, a boja koju ste postavili, na primjer, boja primarne osnovne boje neće se širiti preko tipografije s naslovom primarni. Morat ćete kopirati i zalijepiti preko Hex vrijednosti, a zatim Sync da biste vidjeli promjene. Ovo je samo način na kojem Layer i Text Styles rade u Sketch-u. Oprosti što razočaram ljude.

Sjene

Ovdje možete odabrati između suptilnih, mekanih sjenki za poboljšanje elemenata u projektu. Za uklanjanje sjene s elementa jednostavno odaberite opciju No Shadow na ploči Shared Styles.

Da biste prilagodili bilo koju od opcija Shadow, na ploči Shadows možete urediti vrijednosti X, Y, Blurand Spread, a za sve promjene Opacity-a jednostavno kliknite Color (Boja) i tamo prilagodite Alpha vrijednost. Nakon što unesete bilo kakve promjene, vidjet ćete se da se pojavi ikona sinkronizacije, kliknite na nju da biste ažurirali promjene. Gotovo i gotovo!

Ako se odlučite prilagoditi čvrstoći sjene, samo kliknite na ikonu Sync nakon što su promjene uvedene.

Da biste koristili stil sjene sloja u svom projektu, jednostavno stvorite Sloj oblika, a to bi mogao biti spremnik ili slika, a zatim na ploči Inspektor odaberite stilove sloja sjene, na primjer Sjena> Sjena 40%.

Ako odlučite da Shadow jednostavno nije u redu za vaš odabrani element, jednostavno se prebacite na Shadow> No Shadow Layer Style.

Jednostavno sa špricama!

Gradijenti

Zamislite gradijente unutar Cabana Design System kao još jedan dodatni dodatak. Oni nisu potrebni, projekt na kojem radite možda neće imati potrebu za njima, ali oni su tamo ako ih ikad trebate pozvati. Samo vam pokušavam uštedjeti malo vremena ako biste im ikada trebali na nekom projektu. Uvijek razmišljam unaprijed!

Da biste jednostavno promijenili bilo koji gradijent unutar Cabane, samo idite naprijed i odaberite gradijent koji želite promijeniti (na primjer ljubičasta kiša), a zatim prilagodite preliv gradijenta inspektoru i nakon što ste zadovoljni rezultatima, Čarobnjak za vas, kliknite na ikonu za sinkronizaciju da biste zaključali u podešeni gradijent.

Ako želite promijeniti i oznaku Stil sloja, slijedite gore navedene korake, a umjesto klika na ikonu Sync, odaberite pada Novi stil sloja s padajućeg izbornika i ime mu odgovarajuće.

Svi gradijenti imaju 80-postotnu neprozirnost na njima, tako da ih možete jednostavno nastaviti i prekrivati ​​na slikama, ali slobodno prilagodite neprozirnost prema vašim potrebama.

🖼 Duotonska slika

Sada, kao i Gradients prije, na stilove Duotone Image mogli biste gledati kao na mali neobavezni dodatak i nije nužno potreban za projekt koji ste spremni ići, ali kao i oni Gradienti koje sam upravo spomenuo, oni su tu ako vam trebaju njih (Da. Duotone je i dalje u trendu) i štedi vam dodatni posao na njihovom stvaranju kasnije.

Za uređivanje Duotone slika koje su već dostupne, jednostavno odaberite jednu (na primjer, Blue Moon), a zatim je okrenite inspektor u različitim opcijama miješanja u boji. Ovdje možete birati između opcija miješanja poput zaslona, ​​množenja i osvjetljenja da biste pronašli nešto što se dobro kombinira s odabranim vrijednostima boja.

Možete odabrati i jednu od ispuna, pa je kliknite i povucite kako biste je preuredili u Inspektor i isprobali razne kombinacije dok niste zadovoljni krajnjim rezultatom. Divite se mješavini!

Kad u projektu koristite svoj preferirani Duotone, jednostavno umetnite sloj oblika, odaberite odgovarajući Duotone Shared Style i zatim umetnite sliku po vašem izboru (poželjno crno-bijelu sliku da efekt bude uočljiviji).

Vodiči s 8 točkastih mreža

Konačno na sustav s 8 točaka mreže, čiji sam pravi zagovornik, i koristim ga u gotovo svim svojim projektima.

Zašto? Pa, zato što je svaki put stvarati estetski ugodan i strukturiran sastav za Projekt teško učiniti bez takvog Grid sustava, a „slijepi slijepi put“ nije način da se rade stvari na projektu klijenta.

"Idemo 16pt ovdje, a, eto, idemo s 15,75pt ovdje, i onda idemo, 14,5pt ovdje, za dobru mjeru".

Ne. Nije cool!

Sa snažnim Grid sustavom kao što je onaj od 8pt koji se koristi unutar Cabane, možete se osjećati sigurno u spoznaji da su elementi unutar vašeg projekta definirali, dosljedni međusobni odnos i ne samo to, već i sami i programer. raditi od istog navedenog Grid sustava od dizajna do razvoja i izbjegavati probleme s razmakom i usklađivanjem sve do proizvodnje. Sretno, svi ljudi!

Pomoću vodiča s mrežom od 8pt u Cabani možete nastaviti i umetnuti zajedničke stilove u projekt, grupirati ih i zatim prikazati / sakriti Grupu prema potrebi dok radite. Ako vi i vaši vragovi koriste alat kao što je Zeplin, tada možete učiniti 8pt Share D stilove vidljivim vašem razvojnom programeru kako bi ih onda lako mogli navesti u proizvodnji.

Nadam se da će vam ovaj kratki vodič za upotrebu Cabane pomoći na neki način započeti s putovanjem u sustavu dizajna.

A ako ste jedan od onih koji nisu imali zadovoljstvo koristiti takav sustav poput Cabane (Stvarno? ), možete dohvatiti sjajni, novi primjerak Cabane odmah ispod ...

Želite li brzo poboljšati svoj tijek dizajna u Sketchu? Uzmi primjerak Cabana Design System ovdje.

Upotrijebite kôd ponude MEDIUM25 da biste ostvarili 25% popusta.

Hvala što ste pročitali članak,

voćna pulpa

Dizajner, autor, otac i ljubitelj Sunčanih dana