Vodič za skice

Stvaranje s dizajnerskim sustavom u skici: prvi dio [Vodič]

Izgradnja i rad sa sustavom dizajna u Sketch-u

Ž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 da biste ostvarili 25% popusta.

Vidio sam obilje tutorijala koji prikazuju elemente koji ulaze u izgradnju dizajnerskog sustava na nacrtu, ali ne mnogo, ako ih ima, koji bi vam zapravo pokazao onaj blistav, svjež kao sustav tratinčice koji ste upravo stvorili u praksi.

To je ono što želim učiniti s ovom Tutorial serijom. Pokazuju vam ne samo kako stvoriti elemente koji grade Dizajnerski sustav, već vam prikazuju i kako dizajnirati iOS aplikaciju za više ekrana pomoću sustava koji ste upravo stvorili, kao i pokazati kako sam konstruirao vlastiti sustav i misaoni procesi i odluke iza toga.

Navigacija u seriji -

  • Prvi dio
  • Drugi dio
  • Treći dio
  • Četvrti dio
  • Peti dio
  • Šesti dio
  • Dio sedmi
  • Dio osmi
  • Deveti dio

Pogled kroz dizajn sustav

U redu. Prije nego što prvo krenemo u dizajniranje naše sveobuhvatne, plešuće, srednje stilizirane iOS aplikacije (tko je rekao klon?), Dopustite da vam dam kratak pregled datoteke skice Design System (Cabana-Lite) koju mi Pozvat ću vas u kasnijim dijelovima ove serije Vodiča.

Unutar formata (pokretača) bit će 3 stranice ...

  • Sustav dizajna (postavljanje)
  • simboli
  • Format

Uzmimo s vrha ...

Sustav dizajna (postavljanje)

Evo gdje se čarolije događaju ljudi! Polazište odakle možete kontrolirati barem 90% stilova koji će se pojaviti na projektu na kojem radite.

Ovdje prilagodite elemente, primjerice vaše osnovne boje ili tipografiju, a ove će se promjene širiti u vašem dizajnu.

Promjene koje ovdje unesete odrazit će se unutar vaših stranica Symbols (koje ćemo ukratko dotaknuti), kao i, naravno, filtriranje u Artboards na kojima trenutno radite.

Unutar ove stranice su 2 ploče s umjetničkim pločama…

  • Boje + prekrivanja + duoton
  • Tipografija (mi ćemo dodirnuti ovu ploču u drugom dijelu)

Boje + prekrivanja + duoton

Pomoću ove ploče uvidjet ćete da sam zajedno organizirao svu imovinu koja se odnosi na boju, kao što su osnovne boje, prekrivanja i efekti slike (u ovom slučaju Duotone efekt).

Sada sam u svom sustavu dizajna Cabana napravio malo više odvajanja, gdje Boja ploče s bojama sadrži samo osnovne boje i prekrivanja boja, a elementi poput Duotona odvojeni su u drugi Artboard s oznakom Razno, koji također uključuje elemente poput gradijenata, i Box Shadows. Ali u svrhu ovog Vodiča, pokušavam stvari učiniti malo kompaktnijima za vas. Sve dobro?

Osnovne boje

Za ovu seriju udžbenika vidjet ćete da postoje samo 4 osnovne boje koje će nam trebati pri dizajniranju iOS aplikacije. Naravno, ako gradite svoj vlastiti sustav i da pokrijete sve osnove kada radite na velikom projektu, bilo bi pametno stvoriti osnovne boje (a ovo su samo prijedlozi) ...

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

Navedeni popis možete prilagoditi nečemu što želite. Uklonite tercijar i dodajte, na primjer, drugu nijansu sive da biste imali nešto za što mislite da će odgovarati mnogim projektima na koje biste mogli primijeniti svoj vlastiti sustav.

U redu. Vratite se onim Baznim bojama i dopustite mi da vam dam nekoliko savjeta o tome kako sam postavio Osnovne boje pomoću slojeva slojeva u svom vlastitom sustavu.

Fokusirajući se prvo na primarnu boju, a posebno na stil obruba, jednostavno sam stvorio Pravokutnik (R) 200x200, uklonio ispunu, dao joj je 1px Border s mojom odabranom hex vrijednošću, s polumjerom 4.

Tada sam jednostavno stvorio novi stil sloja ...

… I označio je Granicu / Primarno…

Za primarno punjenje još jednom sam stvorio Pravokutnik (R) 200x200, primijenio odabranu Hex vrijednost i dao joj polumjer 4.

Zatim je kreirao novi stil sloja i označio ga Fill / Primary.

Zatim sam oba elementa (Pravokutnika) poravnao jedan prema drugom. Zašto možete pitati?

To mi je omogućilo da i ja radim sa ovakvim dizajnerskim sustavom da lako promijenim slojeve obruba i popunjavanja slojeva boja u jednom čistom pregledu.

Zauzima manje zaslona s nekretninama i omogućuje vam više od bilo čega, brže izmjene od Elementa A ovdje i Elementa B.

Nakon toga sam zaključao naslove (tj. Primarni, crni, sivi itd.) Nakon što sam na mjestu stavio sve svoje osnovne boje i prateće slojeve slojeva.

Tada znam da imam svoje naslove na mjestu radi lakšeg snalaženja i mogu povući pokazivač okolo, na primjer, boja boja, odabrati je, po potrebi prilagoditi svoj stil sloja, bez probijanja znoja ili bez izraza skica bol odlaska "Ne!" Ne! Ne! Nisam imao namjeru odabrati taj element ". Da, svi smo bili tamo?

Zatim bih ponovio postupak koji sam upravo spomenuo za sve svoje ostale osnovne boje (crna, siva itd.) I tako zaključao one stilove obruba / primarnog i ispunjavanja / primarnog sloja.

Prekrivanja u boji

Pomoću prekrivanja u boji, i opet u svrhu ovog vodiča, upravo sam postavio jedan overlay. Crno, da budemo precizni.

To se može lako nanijeti preko bilo koje slike kako bi se postigao kontrast, a njegova šesterokutna vrijednost preuzeta je iz crne osnovne boje za jednolikost.

Kao što sam već spomenuo s Osnovnim bojama, prilikom izrade punog masnoća nemojte držati Mayo, Dizajnerski sustav kojem stvarno želite težiti (opet samo prijedlog) Preklapanja da bi se slagala sa sljedećim osnovnim bojama ...

  • osnovni
  • sporedan
  • Crna (koju koristimo u ovom Vodiču)

Dopustite mi da vam dam nekoliko uputa o načinu postavljanja prekrivanja boja, još jednom pomoću slojeva slojeva, u svoj vlastiti sustav dizajna.

Usredotočit ću se na prekrivač crne boje koji ćemo koristiti kasnije u vodiču.

Tako sam jednostavno stvorio Pravokutnik (R) 432x248 (sad ovo može biti bilo koje mjerenje koje želite, ovo je samo ono za što sam se slučajno opredijelio), s polumjerom 4 (opet osobna preferencija, samo je estetski izgledalo bolje), zalijepljeno u Šesterokutna vrijednost crne osnovne boje koju sam prethodno stvorio i spustio neprozirnost na 60%.

Tada sam stvorio novi stil sloja i označio ga Overlay / Black.

Sad sam ga mogao ostaviti tamo. Ali mislio sam da je pametno to učiniti, također uzimajući u obzir da će se ovom prekrivaču 99% vremena pojaviti preko slike, dodati mali referentni pregled uz novi stil sloja prekrivanja. To je samo značilo da mogu bolje procijeniti kako će Overlay funkcionirati kad, kao što sam spomenula, sjedi na slici u mom dizajnu i dopušta mi da ugađam možda neprozirnost dok nisam zadovoljan rezultatom.

Dopustite da vam pokažem kako sam to postavio na svoje mjesto ...

Prvo sam nacrtao pravokutnik (R) s istim dimenzijama kao i prekrivanje boje koje sam prethodno stvorio, a zatim sam mu jednostavno ispunio sliku.

Tada sam stvorio novi pravokutnik (R), potpuno istih dimenzija, stavio ga iznad slike, a zatim primijenio stil prekrivanja / crnog sloja koji sam prethodno stvorio.

Kao što sam već spomenuo, sada sam imao prilično solidnu referentnu točku kako će izgledati moj prekrivač kada se koristi protiv slike i podešavati se u skladu s tim dok nisam bio zadovoljan rezultatom.

dvobojni

Napokon, za Duotone sliku ćemo se usredotočiti samo na jedan stil ovog vodiča, ali u Cabana Design System stvorio sam oko 9 varijanti stila.

Da, nešto poput Duotonea ili Gradients može biti tamo isključivo radi slatkiša za oči, a zapravo nije nužni element vašeg vlastitog dizajnerskog sustava, kao što su Base Colour ili Box Shadows, ali ja sam ih ubacio jer, pa zašto ne hey? Nikad ne znate kada vas projekt može pozvati.

U redu. Prije nego što završimo s ovim dijelom, dopusti mi da vam pokažem kako sam brzo stvorio jednu od slika Duotonea unutar vlastitog sustava i datoteke (starter) datoteke. Nazovimo ovo vrstom bonus vrsta :)

Kao što sam prethodno učinio s referencom slike prekrivanja, stvorio sam pravokutnik (R) i primijenio ispunjavanje slike.

Tada je slučaj bio dodavanje nekoliko dodatnih ispunjavanja boja elementima i podešavanje modusa Blending dok nisam imao nešto što bi moglo proći kao "Duotone". Što je u slučaju primjera uključeno u početnu datoteku imalo nešto slično ovom (cura glazba) ...

  • # 041674 & Svijetli
  • # 1EDE81 i množi

Tada sam jednostavno povukao da preuredim ispune u Inspektora sve dok ne budem imao nešto slično:

A onda mu je dao referencu ime kerrr-aaazzyy (tj. Zeleni goblin). Da moja pamet ne poznaje granice!

U redu. To zaključuje prvi dio ove serije udžbenika. Molim vas, pridružite mi se ovdje za drugi dio, gdje ću se dotaknuti elementa tipografije dizajnerskog sustava koji je kasnije korišten u udžbeniku, kao i nekih neprocjenjivih savjeta i savjeta kako sastaviti ovaj odjeljak mog vlastitog dizajnerskog sustava.

Skočite na drugi dio ovdje ...

Želite poboljšati svoj tijek rada s potpuno opremljenim sustavom dizajna? 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 Hash Browns