Luonnosohjelma

Pikaopas Cabana-suunnittelujärjestelmään

Opi parantamaan helposti Sketch-suunnittelun työnkulkua täällä, heti!

Paluumatkalla marraskuussa 2017 (vihje jonkin verran outoa musiikkia ja hämärtyvä näyttö häipyi) Päätin aloittaa rakentamisen Design System / Sketch Starter File -nimisen nimeltä Cabana. Voit lukea alkuperäisen artikkelini tästä.

Olen luonut siitä lähtien kohtuullisen määrän artikkeleita, joista osa käsittelee yksityiskohtaisesti kuinka olen rakentanut järjestelmän ja kuinka voit työskennellä suunnittelujärjestelmän kanssa valmiina…

  • Suunnittelujärjestelmän luominen luonnosksi
  • Luominen luonnospiirrossuunnittelujärjestelmällä

Mutta tiedät mitä (ja vaikka Cabanan sisällä olevat ohjeet ovatkin itsessään melko yksityiskohtaisia), en olisi antanut Cabanan käyttäjille tarkempia ohjeita…

... mutta juuri sitä aion tehdä täällä, ja antaa sinulle ohjeet yksityiskohtaisemmin, jotta voit siirtyä Cabanaan ja sanoa ”Kuuma diggity hitto, olen Cabana Design System Pro” vain odottaa, kunnes muu joukkue hanki pala minua, ylennystä täältä tulen ”, tai mahdollisesti jotain hieman hillitympää kuin se?

Tämän artikkelin avulla haluan, että pystyt luopumaan paitsi luottamuksesta käyttää Cabana-suunnittelujärjestelmää päivittäisessä työnkulussa, mutta myös ymmärryksessä siitä, kuinka hyödyllistä työnkulullesi Cabana-kaltainen järjestelmä voi olla.

Ennen kuin aloitamme, tartu itsellesi kahvia, kopio Cabanasta ja anna minun näyttää sinulle, kuinka tämä pieni ilon suunnittelujärjestelmä toteutetaan käytännössä.

Ensin ensin

  • Ota täältä kopio Cabanasta
  • Asenna sekä Poppins- että Open Sans-fontit
  • Palauta Sketch-kopio
  • Tehdään tämä!

Kun avaat Cabanan ensimmäisen kerran, saat 4 sivua vääriä hienoja vaikutelmia…

  • Ole hyvä ja aloita tästä
  • Tyyliopas
  • komponentit
  • Suunnittelujärjestelmän esittely
  • Symbolit

Keskitytään tietysti ensin Aloita tästä -sivulle. Onko täydellisessä mielessä oikea?

Aloita tästä

Tällä sivulla tapahtuu suurin osa suunnittelujärjestelmän taikuudesta. Ooh La La!

Täältä löydät 3 erillistä piirrostaulua…

  • värit
  • Typografia
  • Eri

Pohjavärit

Katsotaanpa, kuinka mukautetaan perusvärit Cabanan sisällä?

Keskitymme täällä pääväriin ja näytän sinulle, kuinka helppoa on tehdä vain yksi säätö tällä sivulla ja saada se leviämään koko järjestelmään. Se on jotain luonnos / suunnittelujärjestelmän noituutta täällä!

Vedä vain kohdistin ensisijaisen värin lohkon ympärille. Tämä puolestaan ​​valitsee sekä täyttö- että reunusvärin. Älä ole huolissasi siitä, että pienet etiketit valitaan, kaikki otsikot ja etiketit ovat lukittuina, niitä ei voi valita eikä niitä siirretä minnekään!

Päivitä sitten inspektorista Täytä ja reunus -väri jotain, joka sopii paremmin käsillä olevaan projektiisi, ja napsauta sitten uusien tyylien Synkronointi-kuvaketta, jotta muutokset otetaan käyttöön.

Jos siirryt nopeasti toiselle sivulle, esimerkiksi Symbolit tai Komponentit, näet tämän yksinkertaisen värisäädön kaikessa levinneessä kunniassaan.

Tällainen aikaa säästävä tekisi varmasti Takaisin tulevaisuuteen Doc Brown -huutauksen ”Suuri luonne!”.

Cabana DS: n (Design System) sisällä on myös seuraavat värit, jotka auttavat sinua alusta alkaen…

  • toissijainen
  • Tertiäärinen
  • Musta
  • Harmaa
  • Vaalean harmaa
  • Menestys
  • Varoitus
  • Virhe

Muiden käytettävissä olevien värien kanssa voit käyttää vain mitä tarvitaan kyseessä olevaan projektiin ja jättää loput sellaisenaan. Ei ole ongelma. Harvoin käytän esimerkiksi kolmannen asteen väriä, mutta se on vain siellä, jolloin projekti voi pyytää sitä, ja takaat, jos sitä ei ollut siellä, seuraava projekti vaatii sitä! Tiedätkö miten menee?

Värikerrokset

Väripeittokuvat ovat yksinkertaisesti olemassa johdonmukaisiksi tuotemerkkien ja luettavuuden kannalta koko projektin ajan. Valitsemalla vaihtoehdot Ensisijainen, Toissijainen ja Musta.

Jotta päällekkäisyys, esimerkiksi ensisijainen peittokuva, paikallaan, sinun täytyy vain hypätä ylöspäin tarkastajalle ja valita ensisijaiselle perusvärillesi tällä hetkellä asettama Hex (#) -arvo ja sen jälkeen valitun peittolevyn avulla tässä Hex Value ja napsauta Synkronointi-kuvaketta. Valmista!

Olen jopa hypännyt esittelykuvaan, jotta voit saada karkean kuvan siitä, kuinka valitsemasi väri näyttää päällekkäin. Mukauta tarvittaessa opasiteetti ja muista synkronoida tekemäsi muutokset.

Voit jatkaa ja toistaa samanlaisen prosessin toissijaisille ja mustille värikerroksille tarvittaessa.

Typografia

Älä anna sen edessä olevan monen fonttien lähettää sinulle käynnissä Photoshop-kopion. Ole rauhallinen ja kuuntele. Lupaan, että kaikki menee hyvin :)

Cabana-suunnittelujärjestelmä käyttää tällä hetkellä 2 kirjasinperhettä; Poppins, otsikoita, painikkeita jne. Varten

… Ja avoimet Sans-rungot, lyijy jne.…

Niitä kutsutaan nimellä Font Family # 1 (Poppins) ja Font Family # 2 (Open Sans).

Tämän avulla voit helposti muuttaa kirjasinperheitä projektiin sopivammiksi ilman, että sinun tarvitsee käydä läpi tekstityylisi ja muuttaa fonttiperheen nimiä.

Kullakin kirjasinperheelläsi on tyylejä, jotka vaihtelevat Uberista (Web-käyttöön sopivimmista kuin elämänotsikoista) aina Pieniin (sopivat paremmin mobiililaitteen pienempään tekstiin).

Molemmissa kirjasinperheissä on liitetty jokainen tyyli, joka antaa sinulle vapauden vaihtaa helposti kahden kirjasinperheen välillä projektia työskennellessäsi.

Voit muuttaa jonkin kirjasinperheistä helposti sopivaksi nykyiseen projektiisi vetämällä kohdistinta jonkin tekstilohkon ympärille (voit joko valita kaikki lohkot tai vain värit, joita käytät projektissasi).

Älä taaskään ole huolissasi minkä tahansa nimikkeen valinnasta (eli Font Family # 1 (Black)), ne kaikki on lukittu.

Itse asiassa voit zoomata oikein, joten kaikki Perheet ovat näkyvissä ruudulla (kätevä, jos työskentelet pienemmällä näytöllä) ja valita silti varmasti tekstilohkot ilman, että valitset vahingossa muita elementtejä Artboardissa.

Jos katsot alla olevaa kuvaa, huomaat, että olen vetänyt osoittimeni taitelaudan vasemmasta yläkulmasta huolehtimatta siitä, että valitsen minkä tahansa niistä ärsyttävistä (mutta kätevistä viitteistä tietenkin) nimikkeistä. Hyvää päivänvalintaa!

Vaihda sitten Tarkastaja-paneelista kirjasinperhe ja napsauta Synciconia nähdäksesi muutokset.

Huomaa: Kaikki väri-, fonttikoon, painon ja kohdistuksen säädöt tallennetaan, kun napsautat Päivitä-kuvaketta. Vain todellinen kirjasinperhe muuttuu. Joten älä huolehdi siitä, että menetät mahdolliset tekemäsi hienosäädöt ennen kuin napsautat Synkronointi-kuvaketta.

Huomaa myös, että luonnos voi vaikuttaa reagoimatta, jos muutat kaikkia tekstityylejä kerralla. Anna sille hetki tai kaksi, kun se tekee kaikki nämä tekstipäivitykset.

Nyt voit huomata, että keltainen (varoitus) väri ei näytä tyypografia-asetuksissa. Tämä tehtiin tarkoituksella, koska minusta on erittäin harvinaista, että käytät keltaista tyyppiä malliin. Värilliset lohkot, kyllä, mutta typografiaa ja sen mahdollisia saavutettavuusongelmia varten en sisällyttänyt sitä.

Tämä ei tarkoita sitä, ettet voinut soveltaa sitä itse tarvittaessa, mutta oman henkilökohtaisen kokemukseni perusteella olen harvoin, jos koskaan, vaatinut keltaista typografiaa suunnitteluun, joten sitä ei ole mitään syytä sisällyttää siihen.

Muista, että kerros- ja tekstityylit ovat kaksi erillistä kokonaisuutta luonnoksen sisällä ja esimerkiksi ensisijaiseksi perusväriksi määrittämäsi väri ei leviä tyypografiassa ensisijaisen otsikon kanssa. Sinun täytyy kopioida ja liittää Hex-arvo ja sitten Synkronoida nähdäksesi muutokset. Tämä on vain tapa, jolla kerros ja tekstityylit toimivat Sketchissä. Anteeksi pettymys siellä ihmiset.

Varjot

Täällä voit valita hienovaraisista, pehmeistä varjoista, jotka parantavat elementtejä projektin sisällä. Voit poistaa varjon elementistä valitsemalla Jaettu tyylit -paneelista Ei varjo -vaihtoehtoa.

Jos haluat tehdä säätöjä mihin tahansa varjoasetukseen, voit muokata X-, Y-, Blurand Spread -arvoja Varjot-paneelissa. Opasiteetin muutosten yhteydessä napsauta väriä ja säädä alfa-arvoa siellä. Kun olet tehnyt muutokset, synkronointi-kuvake tulee näkyviin, napsauta tätä päivittääksesi muutokset. Valmis ja valmis!

Jos päätät tehdä muutoksia varjon vahvuuteen, muista napsauttaa vain Synkronointi-kuvaketta, kun muutokset on tehty.

Jos haluat käyttää varjokerrosta tyyliä projektissa, luo vain muotokerros, joka voi olla säilö tai kuva, ja valitse sitten Tarkastaja-paneelista varjokerrostyylit, esimerkiksi Varjo> Varjo 40%.

Jos päätät, että varjo vain ei ole oikein valitsemallesi elementille, voit vaihtaa vaihtoehdon Varjo> Ei varjokerrosta tyyliin.

Yksinkertainen sprinkleillä päällä!

Kaltevuudet

Ajattele Cabana Design -järjestelmän sisällä olevia kaltevuuksia toisena lisävarusteena. Heitä ei vaadita, työskentelemässäsi projektissa ei ehkä tarvita mitään heille, mutta he ovat siellä, jos sinun on koskaan pitänyt kutsua heitä. Yritän vain säästää vähän aikaa, jos tarvitset niitä koskaan projektissa. Ajattelin aina eteenpäin!

Jos haluat muuttaa mitä tahansa Cabanan sisällä olevista kaltevuuksista, siirry vain eteenpäin ja valitse muutettava kaltevuus (esimerkiksi Violetti sade), säädä sitten tarkastajan täyttöastetta ja kun olet tyytyväinen gradientin tuloksiin. Ohjattu toiminto, napsauta Synkronointi-kuvaketta lukitaksesi mukautetun gradientin.

Jos haluat muuttaa myös tasotyylin otsikkoa, noudata yllä mainittuja vaiheita ja napsauta sen sijaan Synkronointi-kuvaketta valitsemalla avattavasta Luo uusi tasotyyli ja nimeä vastaavasti.

Kaikissa liukuväreissä on 80%: n opasiteetti, jotta voit siirtyä eteenpäin ja peittää ne kuvillasi, mutta mukauta mukavasti opasiteetti tarpeitasi vastaavaksi.

Uot Duotone-kuva

Nyt, kuten Gradientit aiemmin, voit tarkastella Duotone Image -tyylejä pienenä valinnaisena lisätyönä, jota ei välttämättä tarvita projektiisi, johon olet valmis menemään, mutta kuten juuri mainitsemani Gradientit, ne ovat siellä, jos tarvitset ne (Kyllä. Duotone on edelleen On-Trend) ja säästää ylimääräistä työtä niiden luomiseksi myöhemmin.

Jos haluat muokata jo saatavilla olevia Duotone-kuvia, valitse vain yksi (esimerkiksi Sinikuu) ja tarkista sitten Tarkastajasta eri värien sekoitusvaihtoehdot. Täältä voit valita sekoitusvaihtoehdoista, kuten Näyttö, Kerrota ja Vaalentaa, löytääksesi jotain, joka sekoittuu hyvin valitsemiesi väriarvojen kanssa.

Voit myös valita yhden Täytöt ja napsauttaa ja vetää järjestääksesi sen Tarkastajassa, ja kokeilla erilaisia ​​yhdistelmiä, kunnes olet tyytyväinen lopputulokseen. Mene villiin sekoitukseen!

Kun alat käyttää haluamaasi Duotonea projektissa, aseta vain muotokerros, valitse sopiva Duotone Shared Style ja aseta sitten valitsemasi kuva (mieluiten mustavalkoinen kuva, jotta efekti olisi paremmin havaittavissa).

8 pisteruudukon oppaat

Viimeiseksi 8-pisteiseen verkkoon, jota olen todellinen kannattaja ja jota käytän melkein kaikissa projekteissani.

Miksi? No, koska esteettisesti miellyttävän ja jäsennellyn koostumuksen luominen projektille joka kerta, on vaikea tehdä ilman tällaista ruudukkojärjestelmää, ja 'sokea sokea' ei ole tapa tehdä asioita työskennellessään asiakasprojektin parissa.

"Mennään tänne 16pt, ja mennään, mennään täällä 15,75pt: n kanssa, ja jatka sitten, 14,5pt täällä, jotta voisit mitata".

Ei. Ei siistiä!

Vahvan ruudukkojärjestelmän, kuten Cabanan sisällä käytetyn 8pt: n, avulla voit tuntea olosi turvalliseksi tietäessäsi, että projektisi elementteillä on määritellyt, johdonmukaiset etäisyyssuhteet toisiinsa, paitsi että myös itse ja kehittäjä kykenevät työskennellä samasta määritetystä ruudukkojärjestelmästä suunnittelusta kehitykseen ja välttää etäisyys- ja kohdistusongelmat tuotannon ajan. Hyvää ihmiset ympäri!

Cabanan 8pt-ruudukko-oppailla voit siirtyä eteenpäin ja lisätä jaetut tyylit projektiin, ryhmitellä ne ja näyttää tai piilottaa ryhmän tarvittaessa työskennellessäsi. Jos itse ja laitteesi käyttävät työkalua, kuten Zeplin, voit tehdä 8pt Share d -tyylit näkyväksi kehittäjällesi, jotta voit sitten helposti viitata niihin tuotannossa.

Toivon, että tämä Pikaohje Cabanan käyttämiseen auttoi sinua pääsemään jollain tavalla suunnittelujärjestelmän matkalle.

Ja jos satut olemaan yksi niistä ihmisistä, jolla ei ole ollut iloa käyttää sellaista järjestelmää kuten Cabana (todella?), Voit tarttua kiiltävän uuden kopion Cabanasta heti alapuolelle…

Haluatko parantaa nopeasti suunnittelun työnkulkua Sketchissä? Ota kopio Cabana-suunnittelujärjestelmästä täältä.

Käytä tarjouskoodia MEDIUM25 saadaksesi 25% POIS.

Kiitos artikkelin lukemisesta

Marc

Suunnittelija, kirjailija, aurinkoisten päivien isä ja rakastaja