Vodič za skice

Kako stvoriti sustav dizajna u skici (prvi dio)

Dopustite da vam pokažem temelje koje je potrebno postaviti da biste započeli s izgradnjom moćnog dizajnerskog sustava

Želite dramatično poboljšati svoj tijek rada s mojim sustavom Premium Design for Sketch? Primjerak Cabane možete preuzeti ovdje.

Upotrijebite kôd ponude MEDIUM25 za ostvarenje 25% popusta.

Polaganje temelja

U redu. Nedavno sam pokušao s izradom Sustava dizajna na Sketch-u. Bilo je puno vremena. Bilo je ugodno. Povremeno je bilo frustrirajuće, ali dečko drago mi je što sam to učinio.

Sad već uspostavljen sustav dizajna (koji se usput zove Cabana) povećao mi je radni tijek deset puta i dao mi snažne temelje za izgradnju na prvom mjestu, kada zaronim u bilo koji projekt.

Inspirirani drugim sustavima na koje sam naišao, bio sam zadivljen uštedom vremena što bi nešto poput sustava moglo unijeti u moj svakodnevni tijek rada. Možda sam se malo rasprsnuo u svom posljednjem postu, ali stvarno je to povećalo brzinu mog radnog tijeka, a to je bezveze da ga nisam unosio u svoj tijek rada u ranijoj fazi. Ker-raaazzzy!

Sada, kao što je običaj, postoje vaši Nayayeri koji vrište s krovova: „Ali morate promijeniti 4 poništavanja simbola samo da biste dodali gumb. Jednostavno se s tim ne slažem “, a sklon sam složiti se s njima ……… .. do određene točke.

Kada prvi put počnete raditi s novim sustavom u Sketchu, možda ćete se naći (u prvih nekoliko prolazaka) malo ometenima, jer je drugačiji način pristupa projektu unutar Sketcha i nešto malo drugačije od vas “ na to se možda naviknem

Ali iskreno, vjerujte mi kad kažem, nakon što bacate one kotače za dizajn Design System-a (za koje obećavam da vam neće trebati dugo), naći ćete se kako radite na auto-pilotu, brzo se krećete kroz projekt, i to će izgledaju kao druga priroda za vas.

Volim to nazvati "Sketch Zen Cruise Control".

Vjeruj mi. Jednom kada ste u svoj život uveli sustav dizajna u ovaj Xmas, više se ne želite vratiti na svoj stari način dizajna u Sketch-u ...

  • Otvori skicu
  • Zuriti u prazan ekran (nazivam ga "sindrom praznog zaslona")
  • Zgrabite neke ikone odnekud
  • Prođite rigorozni proces stvaranja simbola nakon simbola
  • Postavite slojeve slojeva, pa još nekoliko, a zatim još nekoliko
  • Tada zapravo započeti prokleti početak projekta!
  • Pogledajte sat i idite "O, kamo je sve to vrijeme otišlo. Vrijeme je za uspavanu zemlju. "

U redu. Ajmo na to i dopustite mi da vam pokažem temelje koje treba postaviti da biste započeli s izgradnjom uzvišene strukture fenomenalnog naziva Sketch Design System ...

Započnite s tim bojama ...

Neka vam bude jednostavna glupa kobasica (KISYSS)

S Cabanom i s bilo kojim sustavom koji stvorite trebate koristiti najniži broj boja kad je to moguće. Odobreno je da možete koristiti nijanse i sjenila, ali za stvarne osnovne boje stvari držite na minimumu. Ako se previše razlikujete od previše kuhara / fontova koji pokvareju juhu, isto se može dogoditi i s bojama ako poludite.

Svrha stvaranja dizajnerskog sustava u prvom redu je imati rafiniranu biblioteku elemenata i stilova koji stvari čine mnogo čvršćim tijekom rada na bilo kojem projektu. Točka referencije koja vas drži dalje od mračne strane rada s 12 različitih boja i mnoštvom malo različitih veličina fonta od jednog do drugog zaslona. Bio sam kriv za to u prošlosti. Mislim da svi imamo.

Tako sam se kod Cabane držao univerzalne strukture boja primarnih, sekundarnih i tercijarnih. Ni više, ni manje ni više dovoljno za prilagodbu različitim projektima kada je potrebno.

I naravno obavezne crne, dvije nijanse sive, bijele i bijele s 50% neprozirnošću da djeluju kao prekrivač za elemente poput ikona.

Tada su zadane boje crvena, zelena i žuta za uspjeh, upozorenja i obavijesti o pogrešci one kao boja pozadine za značke obavijesti, tekst na obrascu ili obrubni na tekstnom polju.

Priprema pozor sad!

Svakoj od svojih osnovnih boja dodijelila sam boju popunjavanja i obruba (1 px) iste hex vrijednosti, a zatim kreirala zasebne zajedničke stilove za svaku (tj. Ispuni / primarno, a zatim granica / primarno).

Potom sam odabranim Pravokutnikom (primijenjen Fill Shared Style) umnožirao ovaj oblik, stavio ga na vrh originala i zatim primijenio prethodno podijeljeni stil graničnika.

To bi mi u budućnosti omogućilo da brzo odaberem oba oblika (sa primijenjenim stilovima popunjavanja i obruba) i izvršim odgovarajuće promjene stila odjednom.

Jednom kad bih stavila osnovne boje, tada bih jednostavno mogla uzeti neke od tih boja, tj. Primarno, sekundarno, crno, i stvorite jednostavno prekrivanje boja pri 60% neprozirnosti koja se može primijeniti na bilo koje slike u projektu, a ovo je bilo jednostavno kao uzimanje Hex vrijednosti iz mojih osnovnih boja, primjenjujući je sa 60% neprozirnošću. i stvaranje novog zajedničkog stila, tj. Prekrivanje / Primarni.

… A sada za tipografiju…

Kada stvarate Cabanu, to stvarno vrijedi za bilo koji projekt na kojem radite. Pridržavajte se pravila 2 porodice fontova (max). Jedan za naslove, a drugi za primjerak tijela. Postoje slučajevi kada 'tog trećeg člana obitelji možete pozvati, ali morate mu dati stolac do vrata.

Poppins i Open Sans odabrao sam zbog činjenice da se međusobno stvarno dobro nadopunjuju kao osnovne (početne) porodice fontova.

Zapravo nema ispravnog ili pogrešnog načina da se ovo postavi u početku jer ćete prilagoditi tipografiju trenutačnom projektu, ali na primjer početno prototipiranje dobro funkcionira u svrhe koje služe (naslovi, tijelo) i uzimate stražnje sjedalo bez previše ometanja. Osjećam da ako ste započeli sa, primjerice, serijskim fontom poput Merriweather-a, oni vas odvlače od isključenja ako je vaš jedini cilj bio korištenje sustava poput Cabane u čisto prototipske svrhe.

Počevši od porodice fontova Poppins. Počeo sam sa stilom slova Uber. Ovo nije stil fonta koji će se koristiti najviše od dostupnih, ali iz iskustva znam da kada sam testirao druge sustave dizajna u prošlosti, njihov najveći font nije bio dovoljno velikodušan u veličini, a posebno kada želite stvoriti proizvode i za mobilne i za web. Zato sam stavio Uber na zdravu veličinu fonta 111pt

Potom sam prošao kroz uobičajene osumnjičene za tipografiju (H1 do H5) koristeći modularno skaliranje, s veličinom teksta tijela postavljenom na 18pt i koristeći omjer 1,2.

Tijelo koje sam postavila na zdravijih 18pt samo da bih poboljšala čitljivost ako bih se ja ili bilo tko drugi odlučio za tamno sivu ili sličnu kopiju tijela.

Kao i naslovi i stilovi tijela, dodala sam stilove za Lead, Small, Caption i Tiny. Pridržavajući se zadanog razmaka znakova za sve gore spomenute osim poglavlja.

Stvorio sam redovitu i podebljivu težinu za svaki od stilova (Uber, Hero, H1, H2, tijelo itd.) Vidio sam sustave prije nego što sam se opredijelio za laganu težinu umjesto Regular (ili čak samo Bold za naslove, bez mogućnosti Regular), ali nije svaka obitelj fontova velikodušna s utezima i stilovima, a oslanjanje na laganu težinu slova kada je riječ o zamjeni obitelji fontova može vam stvoriti više posla u Sketch-u, pa sam to pokušao izbjeći s običnim starim Regularnim i smjelim. Sretni medij mislim!

Ponovio sam taj postupak za font Open Sans (Familija fontova # 2) i osigurao za obje porodice fontova da sam također stvorio Stil teksta za Lijevo, Središte i Desno (Da, rijetko koristimo tekst s poravnanjem udesno, ali uključio sam ga kao sigurnosna mreža)…

Jednom kada sam imao crne verzije obje familije fontova (Poppins & Open Sans) sa svim tekstovima koji su u stilu teksta i kada ste spremni, tada sam krenuo u kreiranje varijanti boja svakog od njih.

Tako sam koristeći hex vrijednosti koje sam prethodno postavio, kopirao sam ih i stvorio nove stilove teksta sa sljedećim bojama ...

  • siva
  • Svijetlo siva
  • bijela
  • osnovni
  • Crveno (pogreška)
  • Zelena (uspjeh)

raznovrstan

sjene

U raznim dijelovima Sustava dizajna usredotočio sam se na Box Shadows prije svega za elemente. Sposobnost brzog stvaranja oblika u Sketch-u i dodijeliti mu sjenu različitih snaga u roku od nekoliko sekundi masovno je smanjila vrijeme koje je obično bilo potrebno za stvaranje sjene u Sketch Inspectoru.

Gradienti i duoton

U redu. Doduše, s gradijentima ste mogli vidjeti da sam bio u svojevrsnoj misiji. Ne ulazimo u cijelu raspravu o Gradientu. Još uvijek imaju svoju uporabu i mogu se koristiti do velikog učinka ako se koriste umjereno, tako da sam se odlučio uključiti u sustav.

Ista vrsta obrazloženja vrijedi za Duotone efekt koji sam umetnuo u Sustav. Da, oba elementa možda izgledaju suvišno sustavu dizajna, a početne faze bi se mogle jednostavno stvoriti samo bojama i tipografijom, ali dodala sam da imaju zgodan dodatak za spremanje dodatnih koraka u kasnijoj fazi dizajna.

Sustav rešetke od 8pt

Bio sam masovno nadahnut mrežnim sustavom od 8pt, i da, u prošlosti sam se držao vlastitog sustava (vrsta), ali još uvijek se mogao znatno razlikovati od projekta do projekta. Sa postavljenim mrežnim sustavom od 8pt bio sam u mogućnosti da veličinu i razmaknute elemente na stranici u koracima od 8 (8, 16, 24, 32 i tako dalje). Kad sam započeo s konstruiranjem svojih simbola i komponenti u sljedećoj fazi, stavio sam ovaj mrežni sustav u vrlo dobru praksu, i to ću vam detaljno pokazati u drugom dijelu ovog članka.

Prije nego što sam se služio nečim poput 8pt Grid sustava oslanjao sam se na kombinaciju mog oka i dobar alat za ocjenu mjera. Ja bih se naravno pridržavao određenog oblika konzistentnosti, ali na kraju tijekom mnogih stranica ili ekrana dizajna, a bez referentne točke imate kašiku za mjerenje razmaka. 20px ovdje, 15px tamo, 30px ovdje.

Mjerenja koja se pomalo razlikuju između ekrana. X element 20px iz Y elementa na jednom zaslonu, ali Y element 22px iz Z elementa na sljedećem zaslonu. Ova vrsta neiskrenosti na kraju se sačinjava i korisniku olakšava iskustvo.

Otkrio sam dodavanjem nečega poput 8pt Grid System u Cabana, uspio sam unijeti puno više dosljednosti tijekom čitavog projekta, a također imam i jaču referentnu točku za programere koje mogu slijediti u kasnijim fazama projekta.

Zbog toga sam s Cabanom išao sa sistemom 8pt Grid kako bih poravnao i izmjerio jastuke na mnogim elementima kako bih jednostavno postigao dosljednost. To vas čini puno sretnijima i jasnijima, vi programeri imate jednostavnu referentnu točku, a krajnji korisnik to može podsvjesno osjetiti.

Nadamo se da ćete ovim kratkim, ali informativnim člankom uspjeti steći razumijevanje osnovnih elemenata potrebnih za formiranje temelja sjajnog dizajnerskog sustava.

Jednom kada se osnovni elementi, kao što su boja i vrsta, postave na svoje mjesto, tada možete krenuti naprijed stvarajući brojne simbole, ugniježđene simbole i komponente koji će izraditi čvrst sustav dizajna.

Pridružite mi se za 2. dio (koji možete provjeriti ovdje)

Ne želite sami izgraditi dizajn sustava? Primjerak Cabane možete preuzeti ovdje.

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

Hvala što ste pročitali članak,

voćna pulpa

Dizajner, autor, otac i zaljubljenik u MacPaint