Visandõpetus

Cabana projekteerimissüsteemi kiirjuhend

Siit saate teada, kuidas visandis Design Workflow eskiisprojekti hõlpsalt täiustada!

Tagasiteel 2017. aasta novembris (vihje mõnele kergelt kummalisele muusikale ja ebamääraselt ekraanile tuhmuvale) otsustasin alustada Design System / Sketch Starter File-i nimega Cabana ehitamist. Minu selleteemalist artiklit saate lugeda siit.

Olen sellest ajast alates loonud üsna palju artikleid, mõned neist käsitlevad väga üksikasjalikult seda, kuidas ma süsteemi loon ja kuidas saate disainisüsteemiga töötada valmis ...

  • Kuidas luua visandis kujundussüsteem
  • Loomine visandis kujundussüsteemiga

Kuid teate, mida (ja kuigi Cabana sisesed juhised on iseenesest üsna detailsed), ei oleks ma Cabana kasutajatele täpsemaid juhendeid andnud ...

... aga see on eesmärk, mida ma siin teha tahan ja anda teile üksikasjalikumad juhised, et saaksite hüpata Cabanasse ja öelda: "Kuum diggity neetud, et ma olen Cabana Design System Pro, lihtsalt oodake, kuni ülejäänud meeskond saada minust tükk, promomine siia ma tulen ”või võib-olla midagi pisut vaoshoitumat?

Selle artikli abil soovin, et saaksite kaotada mitte ainult enesekindluse kasutada Cabana kujundussüsteemi oma igapäevases töövoogudes, vaid ka mõistma, kui kasulik võib teie töövoole olla selline süsteem nagu Cabana.

Enne kui alustame, haarake endale kohv, Cabana koopia ja lubage mul teile näidata, kuidas seda väikest rõõmu disainisüsteemi ellu viia.

First Esiteks esimesed asjad

  • Haarake Cabana koopia siit
  • Installige nii hüpiktekstide kui ka Open Sans'i fondid
  • Käivitage eskiisi koopia
  • Teeme ära!

Kui te esimest korda Cabana avate, kuvatakse teile 4 lehte võltsimata suurepärasust ...

  • Palun alustage siit
  • Stiilijuhend
  • Komponendid
  • Kujundussüsteemi demo
  • Sümbolid

Keskendume muidugi kõigepealt lehele Palun alustage siit. Kas see on täiesti mõistlik?

Palun alustage siit

Sellel lehel toimub enamus disainisüsteemi võludest. Oi la!

Siit leiate 3 eraldi tahvlit ...

  • Värvid
  • Tüpograafia
  • Mitmesugused

alusvärvid

Vaatame, kuidas kohandada Cabana sisemuses baasvärve?

Keskendume siin põhivärvile ja näitan teile, kui lihtne on sellel lehel teha vaid üks muudatus ja lasta sellel kogu süsteemis levida. See on mingi visandite / kujundussüsteemi nõidus, mis töötab siin!

Lihtsalt lohistage kursorit ümber põhivärvi ploki, see omakorda valib nii täitmise kui ka äärise värvi. Ärge muretsege nende väikeste siltide valimise pärast, kõik jaotised ja sildid on lukustatud, mittevalitavad ega liigu kuskile!

Seejärel värskendage inspektorilt täitmis- ja äärisevärvi millekski, mis sobib paremini teie käepärase projektiga, ja klõpsake muudatuste rakendamiseks nende uute stiilide jaoks ikooni Sünkrooni.

Kui hüppate kiirelt üle ühele teisele lehele, olgu see näiteks sümbolid või komponendid, näete seda lihtsat värvireguleerimist kogu selle paljususes.

Selline aja kokkuhoid paneks kindlasti Tagasi tulevikku Doc Browni hüüdma “Suur eskiis!”.

Cabana DS (disainisüsteem) sees on teil ka järgmised värvid, mis abistavad teid algusest peale…

  • Teisene
  • Kolmanda taseme
  • Must
  • Hall
  • Helehall
  • Edu
  • Hoiatus
  • Viga

Ülejäänud saadaolevate värvidega saate kasutada ainult seda, mida on vaja projekti jaoks, ja jätta ülejäänud sellised, nagu nad on. Pole probleemi. Ma harva satun näiteks kolmanda astme värvi kasutama, kuid see on just selleks ajaks, kui mõni projekt seda taotleb, ja garanteerite, et kui seda poleks olemas, siis järgmine projekt seda nõuab! Kas teate, kuidas läheb?

Värvilised ülekatted

Värvilised ülekatted on kogu projekti järjepideva kaubamärgi ja loetavuse huvides olemas. Valikuteks on primaarne, teisene ja must.

Ülekatte, näiteks primaarse ülekatte, paika saamiseks peate lihtsalt hüppama üle inspektorile ja valima värvuse Hex (#), mille olete praegu oma peamiseks põhivärviks määranud, ja seejärel valima ülekate Overlay Hex Value ja klõpsake sünkroonimise ikooni. Kõik tehtud!

Olen isegi hüpikpilti esitanud, nii et saate umbkaudse ülevaate sellest, kuidas teie valitud värv ülekattega välja näeb. Näpistage vajadusel läbipaistmatust ja seejärel pidage meeles, et sünkroonige kõik tehtud muudatused.

Võite minna samalaadset protseduuri teisese ja musta värvi ülekatete korral korrata.

tüpograafia

Ärge laske sellel arvukal fontidel teie ees Photoshopi koopiat saata. Ole rahulik ja kuula edasi. Ma luban, et kõik saab korda :)

Kujundussüsteemis Cabana kasutatakse praegu 2 fondiperet; Hüppade pealkirjade, nuppude jms jaoks

… Ja avatud sans kehale, pliile jne…

Neid nimetatakse Font Family # 1 (Poppins) ja Font Family # 2 (Open Sans).

See võimaldab teil lihtsalt muuta fontide perekondi millekski teie projekti jaoks sobivamaks, ilma et peaksite oma tekstistiile läbi vaatama ja fontide perekonnanimesid muutma.

Iga fondipere jaoks on teie stiilid alates Uberist (nende jaoks, mis on suuremad kui veebi jaoks sobivad elulõigud) kuni Tinyni (sobivad paremini mobiilseadme väiksema teksti jaoks).

Mõlemal fondiperel on iga stiil ühendatud, mis võimaldab teil projekti kallal töötades hõlpsalt kahe fondipere vahel vahetada.

Üks fondiliikide hõlpsaks muutmiseks praegusele projektile vastavaks lohistage lihtsalt kursor ühe tekstiploki ümber (võite valida kas kõik plokid või lihtsalt värvid, mida oma projektis kasutate).

Ärge jälle muretsege ühegi pealkirja valimise pärast (st. Fondiperekond nr 1 (must)), need kõik on lukustatud.

Tegelikult saate suumida otse välja, nii et kõik pered on teie ekraanil nähtavad (mugav, kui töötate väiksema ekraaniga) ja valige ikkagi tekstiplokid enesekindlalt, valimata tahtmatult muid pabertahvli elemente.

Allpool olevat pilti vaadates näete, et olen lohistanud kursori ülemise vasakpoolsest ülanurgast sisse, ilma et peaksin muretsema, kas valida mõni neist tüütutest (kuid muidugi käepärastest) pealkirjadest. Head päeva valimist!

Seejärel muutke inspektoripaneelil fondipere ja klõpsake muudatuste nägemiseks Synciconil.

Pange tähele: kõik värvi, fondi suuruse, kaalu ja joondamise muudatused salvestatakse, kui klõpsate värskenduse ikooni. Muutub ainult tegelik fondipere. Nii et ärge muretsege selle pärast, et olete enne sünkroonimise ikoonil klikkimist kaotanud kõik oma tehtud näpunäited.

Pange tähele ka seda, et visand võib tunduda reageerimata, kui muudate kõiki tekstistiile korraga. Andke sellele vaid hetk või kaks, kuni see teeb kõiki neid tekstiuuendusi.

Nüüd võite märgata, et kollane (hoiatus) värv ei ilmu tüpograafia valikutes. Seda tehti tahtlikult, kuna on äärmiselt haruldane, kui rakendate kujundusele kollast tüüpi. Värviplokid, jah, kuid tüpograafia ja võimalike hõlbustusprobleemide jaoks, mida see võib kaasa tuua, ei lisanud ma seda.

See ei tähenda, et te ei saaks seda ise vajadusel rakendada, kuid oma isikliku kogemuse põhjal olen harva või isegi kunagi kutsunud disainilahendusesse kollast tüpograafiat, nii et pole mõtet seda lisada.

Pidage meeles, et kiht- ja tekstistiilid on visandis 2 eraldi üksust ja värv, mille määrasite näiteks oma peamiseks põhivärviks, ei levi jaotises Tüpograafia pealkirjaga Esmane. Muudatuste nägemiseks peate kopeerima ja kleepima kogu väärtuse Hex ja seejärel Sünkrooni. See on just viis, kuidas kiht ja tekstistiilid visandis töötavad. Vabandust, et pettuda seal inimesed.

Varjud

Siin saate valida peenete, pehmete varjude hulgast, et projekti sisemisi elemente täiustada. Elemendi varju eemaldamiseks valige paneelil Jagatud stiilid suvand No Shadow.

Varjude mis tahes suvandis muudatuste tegemiseks saate redigeerida X-, Y-, Blurand Spread-väärtusi paneelil Varjud ja läbipaistmatuse muutuste korral klõpsake lihtsalt värvil ja kohandage seal alfa väärtust. Kui olete muudatused teinud, kuvatakse sünkroonimise ikoon, klõpsake muudatuste värskendamiseks sellel. Valmis ja tehtud!

Kui otsustate varje tugevust kohandada, klõpsake kindlasti pärast muudatuste tegemist sünkroonimise ikooni.

Varjukihi stiili kasutamiseks oma projektis looge lihtsalt kiht kiht, selleks võib olla konteiner või pilt ja valige siis inspektori paneelilt vari kihi stiilid, näiteks Vari> Vari 40%.

Kui otsustate, et vari lihtsalt ei sobi teie valitud elemendi jaoks, võite lihtsalt üle minna varjele> Varju kihi stiil puudub.

Lihtne, peale piserdamist!

Gradiendid

Mõelge veel ühe valikulise lisana Cabana kujundussüsteemi sisemistele gradientidele. Neid ei nõuta, projekt, kus töötate, ei pruugi vajada nende jaoks midagi, kuid nad on olemas, kui teil on kunagi vaja neile helistada. Proovin lihtsalt natuke aega kokku hoida, kui teil oleks neid projekti ajal vaja. Mõtle alati ette!

Mis tahes Gradientide muutmiseks Cabanas lihtsalt liikuge edasi ja valige kalle, mida soovite muuta (näiteks Purple Rain), kohandage seejärel inspektori gradiendi täitmist ja kui olete gradienttulemustega rahul. Nõustaja klõpsake oma kohandatud gradiendi lukustamiseks sünkroonimise ikoonil.

Kui soovite muuta ka kihistiili silti, järgige ülalnimetatud samme ja klõpsake sünkroonimise ikooni klõpsamise asemel rippmenüüst Loo uus kihistiil ja pange sellele nimi.

Kõigil gradientidel on nende suhtes kohaldatud 80% läbipaistmatus, nii et saate hõlpsalt edasi minna ja neid oma piltidele üle kanda, kuid palun kohandage läbipaistmatust oma vajadustele vastavaks.

🖼 Duotone pilt

Nüüd, nagu Gradients enne, võiksite vaadata Duotone Image stiile väikese valikulise lisana ja see pole tingimata vajalik projekti jaoks, milleks olete valmis minema, kuid nagu need Gradientsid, mida ma just mainisin, on nad olemas, kui vajate neid (jah. Duotone on endiselt trendis) ja säästab nende loomisega tehtavat lisatööd hiljem.

Juba olemasolevate Duotone piltide redigeerimiseks valige lihtsalt üks pilt (näiteks Sinine Kuu) ja seejärel kohandage inspektorit erinevate värvide segamise võimalustega. Siin saate valida selliste segamisvalikute hulgast nagu Ekraan, Korruta ja Heledam, et leida midagi, mis sobib hästi teie valitud värviväärtustega.

Võite valida ka ühe täitmise ja klõpsata ja lohistada, et inspektoris seda ümber korraldada, ja proovida erinevaid kombinatsioone, kuni olete lõpptulemusega rahul. Mine loodusesse!

Kui hakkate projektis oma eelistatud Duotone'i kasutama, sisestage lihtsalt kujuline kiht, valige vastav Duotone'i jagatud stiil ja sisestage oma valitud pilt (eelistatavalt mustvalge pilt, et efekt oleks paremini märgatav).

8-punktilised ruudukujulised juhikud

Lõpuks 8-punkti võrgusüsteemile, mille tegelik propageerija olen ja mida kasutan peaaegu kõigis oma projektides.

Miks? Noh, kuna projekti jaoks esteetiliselt meeldiva ja struktureeritud kompositsiooni loomine on iga kord keeruline, kui sellist ruudustussüsteemi pole olemas, ja pimedate lendamine pole kliendiprojekti kallal töötamise viis.

"Lähme siia 16pt ja lähme siia nüüd 15,75pt ja jätkake siis siin, hea mõõdupuuga 14,5pt".

Ei. Pole lahe!

Tugeva võrgusüsteemi, näiteks Cabana sees kasutatava 8 -ptise süsteemiga, võite tunda end kindlalt teadmises, et projekti projekti elemendid on üksteisega määratlenud järjepidevad vahesuhted, ja mitte ainult see, vaid see, et teie ise ja arendaja suudate töötada samast täpsustatud ruudustikusüsteemist alates projekteerimisest kuni arendamiseni ning vältida vahemaa ja joondamisega seotud probleeme kogu tootmise vältel. Rõõmsad inimesed kõikjal!

Cabana 8pt ruudustiku juhendite abil saate edasi minna ja sisestada jagatud stiilid projekti, neid grupeerida ja seejärel rühmas töötamise ajal vastavalt vajadusele näidata / peita. Kui teie ja teie seadmed kasutavad sellist tööriista nagu Zeplin, saate 8pt Share d -stiilid oma arendajale nähtavaks teha, et saaksite neid siis tootmises hõlpsalt kasutada.

Loodan, et see Cabana kasutamise kiire juhend aitas teil mingil viisil oma Design System'i teekonnaga alustada.

Ja kui sa oled üks nendest inimestest, kellel pole olnud mõnus sellist süsteemi nagu Cabana (tõesti?) Kasutada, võite haarata särava uue Cabana eksemplari otse allpool ...

Kas soovite visandite töövoogu kiiresti parandada? Haarake siin Cabana kujundussüsteemi koopia.

25% SOODSAMAA saamiseks kasutage pakkumise koodi MEDIUM25.

Täname, et lugesite artiklit

Marc

Päikeseliste päevade kujundaja, autor, isa ja väljavalitu