5 sammu kujundussüsteemi loomiseks

Ülevaade sellest, kuidas me Sketchis oma disainisüsteemi koostasime

Conestoga kolledži Dooni ülikoolilinnaku disainifondide stuudio

Projekteerimissüsteemidest on saanud mis tahes disaini- ja arendusmeeskonnas põhiväärtus. Tehnikaettevõtete, nagu Google (Materjal), AirBnB, Uber ja Facebook, juurutamisel on neil oluline eesmärk: pakkuda digitaalsele kujundusele ühtne tugipunkt, sealhulgas juhised, komponendid ja koodilõigud. Need pole mõeldud ainult tehnoloogiaettevõtetele ja rakendustele - lisaks pakuvad nad kõiki digitaalse kohalolekuga organisatsioone. Selles postituses näitame teile samm-sammult, kuidas me oma kujundussüsteemi lõime ja kuidas me teeme. Projekteerimissüsteemi loomisel viidatakse näitena meie tooteahelale ja oleme valinud visandit komponentide ehitamise ja kataloogimise kujundamise tööriistaks Sketch.

Circuit'i universaalmenüü

About Circuit ja meie disainiprobleemid, väljakutsed ja eesmärgid

Circuit on ümbritsev sisuplatvorm, mida kasutatakse virtuaaltuuride ja uskumatute sisuelamuste loomiseks. Alates turuletoomisest oleme keskendunud kasutajakogemuse parandamisele, täiustades ja lisades uusi funktsioone. Toode on lühikese ajaga jõudnud kaugele, kuid meie teekaardil on veel palju ära teha. Kuna tootedisainist sai arenduse kõrval põhifunktsioon, leidsime end ikka ja jälle samu tõkkeid löömas:

  1. Uute funktsioonide kasutamist erinevatel ekraanisuurustel ning klientide brändivärvide, logode ja piltide kiiret kaasamist oli keeruline kiiresti kavandada ja prototüüpida.
  2. Meie meeskonna kasvades oli rohkem juhtumeid, kus disainilahendused ei olnud sünkroonis ja disainerid töötasid vananenud palettidega või alustasid nullist.

Püüdes oma disainiprotsessi sujuvamaks muuta, otsustasime võtta vastu disainisüsteemi.

Mis on disainisüsteem ja kuidas see aitab?

Kujundussüsteem (või disainikogu) on juhiste, stiilijuhendite ja korduvkasutatavate komponentide kogum, mis võimaldavad kiiret maketide loomist ja funktsioonide kiiremat väljaehitamist. See võib vastata konkreetsetele küsimustele alates sellest, milliseid fonte ja värve veebisaitidel kasutatakse, kuni nuppude ja paneelide kuvamiseni.

Pärast meie disainisüsteemi juurutamist on makettide loomine ja disainidega katsetamine ülikiire. Saame kujundada mitmesuguseid ekraanisuurusi, mis aitab meil UI-ga paremaid otsuseid teha. Saame hõlpsasti tagasi minna ja muuta teksti, suurust, pilte ja stiili lennult. See on olnud suurepärane ekraanide kohandamiseks klientidele kuvamiseks ja tagasiside saamiseks. Samuti võime lisada oma veebidisainiprotsessi struktuuri ning aidata tuvastada ja sujuvamaks muuta meie praegust veebisaiti, rakendust või toodet nii, et kõik oleksid samal lehel. Lõpuks on see disainerite ja arendajate juhendamisel üks tõeallikas. Ilma põhjalikku dokumentatsiooni kirjutamata suudame ühe faili saabuvale disainerile üle anda ja vältida segadust stiilidetailide osas.

Projekteerimissüsteemi plusside ja miinuste tabel (diagramm on tehtud meie disainisüsteemiga!)

Kujundussüsteemi loomine pole lihtne ülesanne ja nõuab pidevat tööd, et jääda oma reaalajas veebisaidiga vastavusse. Kuid see on kindlasti pingutamist väärt.

Kuidas kujundada ja korraldada kujundussüsteemi

Siin on sammud, mida järgisime oma disainisüsteemi loomiseks. Valisime oma raamatukogu loomiseks eskiisi ja mõned soovitused on spetsiifilised selle funktsionaalsuse osas, kuid kontseptsioonid, mida me katame, on universaalsed. Muud tööriistad, mida saate kasutada, hõlmavad Figma, Adobe Xd ja Adobe Illustrator.

Lõpptulemus võiks välja näha umbes selline.

1. samm - kontrollige oma veebisaiti või rakendust ja koostage loend

Alustamiseks on vaja kujundust; see võib olla makett, reaalajas leht või rakendus. Meie puhul oli meil reaalajas veebiriba ning visandis komponentide ja sümbolite kollektsioon. Paljud disainifaili komponendid olid aegunud või ei kasutanud seda kunagi reaalajas tootmiskeskkonnas.

Järgmisena koostage nimekiri kõigist teie komponentidest ja pange tähele erinevaid olekuid, milles need võivad olla (jõude, hõljutage, klõpsitud, keelatud, vaikimisi jne). Meie loend koosnes fontidest, värvidest, tüpograafiast, ikoonidest ja pikast loendist komponentidest, näiteks avatarid, nupud, kaardid, jalus, navigeerimine, edenemisribad jne.

2. samm - korraldage lehed

Aatomikujunduse meetod (vasakul) ja mustrilehe meetod (paremal)

Sõltumata valitud tarkvarast kasutate tõenäoliselt oma raamatukogu sisu korraldamiseks lehti. Seda saab teha kahel viisil. Esimene neist on Brad Frosti koostatud aatomikujunduse metoodika, kus elemendid on modelleeritud vastavalt 5 hierarhilisele rühmitusele: aatomid, molekulid, organismid, mallid, lehed. Teine meetod, mida me nimetame mustrilehtedeks, tutvustab seotud komponente oma lehtedele nagu värvid, tüüp, ikoonid, avatarid, nupud jne. Võrdluseks - see on tasane struktuur, millel pole palju heirarhiat ja mis muudab selle sirgjoonelisemaks tulevatele disaineritele konkreetsete tükkide leidmiseks, kuid puudub aatomika metoodika struktureeritud „ehitusplokk”.

Kuidas me oma kujundussüsteemi korraldame?

Struktureerisime oma süsteemi aatomiprintsiipide järgi, ehkki lihtsustasime seda märkimisväärselt. Lõpuks saime 5 põhilehte:

Juhendite leht kirjaliku dokumentatsiooni jaoks, et selgitada projekteerimissüsteemi standardeid ja eesmärke.

Liivakasti leht, mis on meie disaini keskkond. Kasutame seda uute funktsioonide ja kujunduse katsetamiseks. Kui funktsioon on heaks kiidetud, ehitatud, testitud ja tootmisele reklaamitud, värskendame disaini ja reklaamime selle tuumikkogu.

Sümbolite leht, mis sisaldab kõiki meie aatomeid, molekule ja organisme, alates lihtsatest nuppudest ja ikoonidest kuni komposiitkomponentideni, rühmitatuna ja järjestatud tähestiku järgi. Tegime seda nii, et komponendid on kiiresti üles leitavad ja saame kiirelt lehel liikuda läbi kõigi artboardside. Suuremate kujundusraamatukogude puhul ei pruugi see töötada, kuid praegu sobib see meie vajadustega hästi.

Valmis sümbolite leht

Stiilijuhend, mis on ühildatud kujundusüksuste, nagu font, tüpograafia ja ikoonid, komponendid, mallid ja lehed, kollektsioon. Oleme sümbolid sellel lehel pesitsenud ja kogu stiilijuhendi on lihtne eksportida PDF-dokumendina, kui peame selle disainerile või arendajale üle andma.

Üks Stiilijuhendi lehtedest

Lõpuks muudatuste logi, et jälgida olulisemaid muudatusi, loojaid ja väljalaskeid, kui kujundusraamatukogu aja jooksul areneb.

Üldiselt on see teie eelistus ja kujundussüsteemi korraldamise viis peaks vastama teie toote ja meeskonna vajadustele.

3. samm - kihtide ja tekstistiilide loomine (jätke see samm vahele, kui teil pole visandit)

Kihi- ja tekstistiilid on suurepärased, kuna need võimaldavad hiljem stiilidega seotud kujundeid ja teksti alistada.

Kihistiilid võimaldavad meil salvestada objektide atribuute nagu täitmine, äärised, varjud, joondamine jne. Ning võimaldab meil neid järjekindlalt teistele objektidele rakendada.

Ahela kihtide stiilid

Kihtstiili lisamine: valige objekt ja klõpsake objekti atribuutide salvestamiseks välimuse all oleval atribuudil „Kihtideta stiil” ja „Loo uus kihistiil”.

Kihtide stiilide nimetamine: see, kuidas oma stiile nimetate, määrab, kuidas need menüüs kuvatakse (ülal). Kui leiate, et stiilini jõudmine võtab liiga kaua aega või on seda keeruline leida, saate seda stiiliakendes alati muuta. Kiht> Kihistiilide korraldamine. Meie kihtstiile nimetasime järgmiselt:

Vooluring / värv / primaarne / sinine / keskmine

Teksti stiilid võimaldavad meil salvestada teksti atribuudid, sealhulgas fondi suurus, font, joondus jne, ja võimaldab meil hiljem sümbolites kasutatavat teksti kiiresti sisestada või muuta. Tõenäoliselt soovite siin oma stiilid korraldada vastavalt oma veebilehtede teksti semantilisele klassifikatsioonile, st H1, H2, H3, keha ja nii edasi.

Ahela tekstistiilid

Teksti stiili lisamine: valige oma tekst ja klõpsake ilmuvas atribuutide paneelil nuppu „No Text Style” ja seejärel „Create new Text Style”.

Teksti stiilide nimetamine: sarnane kihtide stiilide nimetamisega. Rühmitasime oma stiilid H1, H2, H3,… lõikude ja kõigi komponentide järgi, mis seda vajasid, vastavalt oma tekstistiilile.

Kihtstiile saate rakendada ka tekstistiilidele. Siit saate teada:
Valige tekst> Kiht> Teisendamine kontuurideks, siis peaksite saama oma kihtide stiile lisada teksti nagu iga tavalise kuju. Kui teil on aga palju teksti, võib selle liiga tegemine visandit joosta või muuta selle uskumatult lagiliseks.

4. samm - looge sümbolid / komponendid

See on lõbus osa. Pöörake erilist tähelepanu vahekaugustele, suurusele ja kujule ning vajadusel pidage meeles, et rakendage komponentide üksikutele osadele teksti- ja kihistiile, mis võimaldab hiljem osadest mööda minna. Eesmärk on lõpuks saada täielik sümbolite ja komponentide kollektsioon.

Sümboli loomine: visandis grupeerige oma elemendid ja vajutage ülaosas navis nuppu „Loo sümbol”. Alustage väikestest sammudest, näiteks nuppude, avataride ja ikoonidega, ning liikuge seejärel komposiitkomponentide ehitamiseni.

Pange sümbolile nimi: see määrab, kuidas need ilmuvad sisestusmenüüsse. Nööbi jaoks nimetasime nad selliseks:

Nupp / vaikimisi / jõude
Nupp / vaikimisi / hõljutage kursorit
Nupp / vaikimisi / keelatud

Nimetage ja järjestage oma sümbolil olevad kihid: See on väga oluline, kuna just nii nad ilmuvad alistumisel. Mõelge ise, kas tellimus on mõttekas ja kas seda nimetatakse ja tellitakse, kuidas keegi teine ​​seda eeldaks?

Kaardikomponendi alistamine

Muidugi ei saa te alati neid tellida viisil, mida on mõistlik ületamisest leida, sest kihid määravad ikkagi, milline element peal on, kuid sümbolite loomisel tasub seda siiski meeles pidada.

Pesastatud sümbolid: sümbolites olevad sümbolid. Kasutades liitsümbolite loomiseks väiksemaid sümboleid, saate muudatusi teha ühes kohas ja lasta neil kõigil oma kujundustel kõigil esinemisjuhtudel kajastuda. Näiteks kui muudate nupu öelda nupu omadusi, muutuvad ka kõik nupud kogu teie maketis.

Testige alati uut sümbolit!

Mõõtege oma sümbolit: reageeriv disain on nüüd tavaline tava. Oma sümboli esmakordsel loomisel võite leida, et elemendid ei pruugi olla nii skaleeritud, nagu võiksite oodata. Atribuutide paneeli suuruse muutmise aknas saate määrata, kuidas asjad skaleeruvad. Hiirt hõljutades eelvaate kohal näete, kuidas see suureneb.

Pange tähele, et skaala suurendamine on lihtsam kui mahu vähendamine, kuna mõnikord muutuvad asjad pisut keerukaks. Nii et kui te pole kindel, alustage väikesest!

Mallide ja lehtede loomine - kui teil on sümbolikogu, võite alustada mallide ja lehtede loomist tervete ekraanide kiirete maketide loomiseks. Samuti on hea mõte hakata oma sümboleid koguma stiilijuhendiks, et neid korraldada ja esitleda.

Mobiiliekraani makett, mis näitab ülekirjutuste rakendamist

5. samm - projekteerimissüsteemi käimasolevad värskendused

Te ei saa kunagi teada, kui hästi teie süsteem töötab, kuni kasutate seda mõningate maketide loomiseks. Siis võib juhtuda, et peate tagasi minema ja oma sümboleid kohandama, kuna need ei asu täpselt nii, nagu soovite, või leidsite, et mõne kihistiili rakendamine oli liiga tüütu ning stiilile pääsemiseks oleks pigem vähem klikke. .

Ja see on okei! Pidage meeles, et kujundussüsteem on elav raamatukogu ja seda tuleb pidevalt uuendada.

Siin on mõned näpunäited ekstra kohta, mis aitavad teil süsteemi hallata:

  • Looge andmekaustad, et lisada oma piltide kogu ülekirjutustega. Pidage meeles, et kausta teisaldamisel peate selle uuesti ühendama. Visand> Eelistused> Andmed / teek.
  • Teekide värskendamine teistes dokumentides - paremas ülanurgas teatised → Värskenda teeki (kõigepealt tuleb teek salvestada ja sulgeda)
  • Sketch API on ametlik värskendatud allikas faktide kontrollimiseks, kuna kolmandate osapoolte veebisaitidel on mõnikord vananenud teavet.
  • SketchApi allikad on kasulik koht eskiisi jaoks tasuta vara hankimiseks

Pistikprogrammid muudavad teie kujundussüsteemi kasutamise ja korraldamise palju lihtsamaks. Mõned neist, mida me praegu armastame:

  1. Sketch Runner - kasutage klaviatuuri sümbolite kiireks sisestamiseks!
  2. Symbol Organizer - muutke oma sümbolite leht kenaks ja korraldage nii, nagu soovite.
  3. Unsplash It - lisage fotosid Unsplashist.

Loodame, et sellest artiklist on abi, et näidata, kuidas saate oma töövooge disainikogu abil sujuvamaks muuta. Head loomist!