5 koraka za stvaranje dizajnerskog sustava

Uvidi u to kako smo napravili naš dizajn sustava na Sketch-u

Conestoga College Doon Campus Design Foundation Foundation

Dizajnerski sustavi postali su osnovna prednost svakog dizajnerskog i razvojnog tima. Pionirani u tehnološkim tvrtkama poput Googlea (Materijal), AirBnB, Uber i Facebook, služe važnoj svrsi: pružiti jedinstveno referentno mjesto za digitalni dizajn, uključujući smjernice, komponente i isječke koda. Nisu samo za tehnološke kompanije i aplikacije - drugo, služe svakoj organizaciji s digitalnom prisutnošću. U ovom postu prikazat ćemo vam korak po korak kako smo stvorili naš sustav dizajna i odluke koje smo donijeli na putu. Navest ćemo naš krug proizvoda kao primjer za izradu našeg dizajnerskog sustava, a Sketch smo odabrali kao alat za dizajn kako biste sastavili i katalizirali komponente.

Univerzalni izbornik kruga

O krugu i našim dizajnerskim problemima, izazovima i ciljevima

Krug je imerzivna platforma sadržaja koja se koristi za stvaranje virtualnih turneja i nevjerojatnih doživljaja. Od pokretanja usluge usredotočili smo se na poboljšanje korisničkog iskustva usavršavanjem i dodavanjem novih značajki. Proizvod je u kratkom vremenu jako napredovao, ali još je puno toga za postizanje na našem mapu puta. Kako je dizajn proizvoda postao ključna funkcija usporedo s razvojem, našli smo se kako iste udarce iznova i iznova pogađamo:

  1. Bilo je teško brzo dizajnirati i prototipirati nove značajke, na raznim veličinama zaslona, ​​i ugrađivati ​​boje, logotipe i slike klijenta u pokretu.
  2. Kako je naš tim rastao, bilo je više slučajeva da se dizajni ne usklađuju i dizajneri koji rade s zastarjelim paletama ili počinju od nule.

U nastojanju da pojednostavimo naš proces dizajniranja, odlučili smo usvojiti sustav dizajna.

Što je dizajnerski sustav i kako pomaže?

Sustav dizajna (ili biblioteka dizajna) skup je smjernica, vodiča za stil i komponenata za višekratnu upotrebu koji omogućuju brzo stvaranje make-up-a i podržavaju brže sastavljanje značajki. Može odgovoriti na određena pitanja od fontova i boja koji se koriste na web stranicama, do načina na koji se prikazuju gumbi i ploče.

Nakon uvođenja našeg dizajnerskog sustava, kreiranje maketa i eksperimentiranje s dizajnom vrlo je brzo. U mogućnosti smo dizajnirati raspon veličina zaslona koji nam pomažu u donošenju boljih odluka o korisničkom sučelju. U toku se lako možemo vratiti i promijeniti tekst, veličinu, slike i stilove. Ovo je izvrsno za prilagođavanje ekrana kako bi se prikazali klijenti i dobili povratne informacije. Također možemo dodati strukturu našem procesu web dizajna te pomoći u prepoznavanju i pojednostavljenju naše trenutne web stranice, aplikacije ili proizvoda tako da se svi nalaze na istoj stranici. Napokon, to je jedinstveni izvor istine za informiranje dizajnera i programera. Bez pisanja opsežne dokumentacije, u mogućnosti smo predati jednu datoteku dolaznom dizajneru i izbjeći zabunu oko bilo kakvih detalja o stilovima.

Tablica prednosti i nedostataka dizajnerskog sustava (grafikon izrađen s našim dizajnerskim sustavom!)

Izgraditi sustav dizajna nije lak zadatak i zahtijeva stalan rad kako biste bili usklađeni s web stranicom uživo. Međutim, to se definitivno isplati potruditi.

Kako stvoriti i organizirati sustav dizajna

Evo koraka koje smo slijedili za stvaranje našeg dizajnerskog sustava. Odabrali smo Sketch za stvaranje naše biblioteke, a neke će preporuke biti specifične za njegovu funkcionalnost, ali koncepti koje pokrivamo su univerzalni. Ostali alati koje možete koristiti uključuju Figma, Adobe Xd i Adobe Illustrator.

Krajnji bi rezultat mogao izgledati ovako.

Korak 1 - Provjerite svoju web lokaciju ili aplikaciju i napravite popis

Za početak vam je potreban dizajn; to može biti maketa, stranica uživo ili aplikacija. U našem slučaju imali smo live webapp i kolekciju komponenata i simbola u Sketch-u. Mnoge su komponente u dizajnerskoj datoteci zastarjele ili se nikad nisu našle u okruženju uživo.

Zatim sastavite popis svih komponenti koje imate i zabilježite različita stanja u kojima bi se mogla nalaziti (u praznom hodu, zadržavanje miša, klikanje, isključenje, zadano itd.). Naš se popis sastojao od fontova, boja, tipografije, ikona i dugog popisa komponenti poput avatara, gumba, kartica, podnožja, navigacije, trake napretka itd.

Korak 2 - Organizirajte stranice

Metoda atomskog dizajna (lijevo) i metoda stranice uzorak (desno)

Bez obzira na softver koji ste odabrali, stranice ćete vjerojatno koristiti za organiziranje sadržaja svoje knjižnice. Postoje dva načina da to učinite. Prva je metodologija atomskog dizajna Brada Frosta gdje su elementi modelirani prema 5 hijerarhijskih skupina: Atomi, Molekule, Organizmi, Predlošci, Stranice. Druga metoda, koju nazivamo uzorkom stranice, prikazuje povezane komponente na vlastitim stranicama kao što su boje, vrsta, ikone, avatari, gumbi i sl. Za usporedbu, ravna je struktura bez puno heirarhije koja može učiniti jednostavnijim za dolazeći dizajneri koji bi pronašli određene komade, ali nedostaje strukturirani tijek „atomskog bloka“ Atomske metodologije.

Kako organiziramo naš sustav dizajna

Naš sustav strukturirali smo slijedeći atomske principe iako su ga značajno pojednostavili. Završili smo s 5 glavnih stranica:

Stranica sa smjernicama za pisanu dokumentaciju za objašnjenje standarda i ciljeva dizajnerskog sustava.

Stranica s pijeskom koja je dizajn 'naše okruženje'. To koristimo za eksperimentiranje novih značajki i dizajna. Nakon što se značajka odobri, izgradi, testira i promovira u proizvodnji, ažuriramo dizajn i promoviramo ga u jezgru biblioteke.

Stranica Simboli koja sadrži sve naše atome, molekule i organizme, od jednostavnih gumba i ikona do složenih komponenti, grupiranih i organiziranih po abecednom redu. To smo učinili tako da se komponente brzo pronalaze i brzo se možemo kretati po stranici kroz sve ploče umjetnina. Ovo možda neće raditi za veće dizajnerske knjižnice, ali za sada je to u redu za naše potrebe.

Gotova stranica Simboli

Vodič za stil koji je objedinjena kolekcija predmeta dizajna kao što su font, tipografija i ikone, komponente, predloške i stranice. Umetali smo simbole u grupe na ovoj stranici i lako je izvesti cijeli vodič za stil kao PDF dokument kada ga trebamo predati dizajneru ili programeru.

Jedna od stranica Vodiča za stil

Konačno, dnevnik promjena za praćenje velikih promjena, stvaralaca i izdanja kako se knjižnica dizajna s vremenom razvija.

Općenito, vaša je želja, a način organiziranja vašeg dizajnerskog sustava trebao bi odgovarati potrebama vašeg proizvoda i tima.

Korak 3 - Stvaranje stilova slojeva i stilova teksta (preskočite ovaj korak ako nemate Skicu)

Stilovi sloja i teksta sjajni su jer vam omogućuju nadjačavanje oblika i teksta koji ste kasnije dodali stilovima.

Slojevi slojeva omogućuju nam spremanje objekata kao što su ispunjavanje, obrubi, sjene, poravnavanje itd. I omogućava nam da ih dosljedno primjenjujemo na druge objekte.

Stilovi slojeva kruga

Dodavanje stila sloja: odaberite svoj objekt i na ploči s svojstvima ispod izgleda pritisnite "No Layer Style" i "Create new Layer Style" da biste spremili svojstva objekta.

Imenovanje stilova slojeva: kako ćete imenovati svoje stilove, utvrdit će se kako se pojavljuju u izborniku (gore). Ako ustanovite da vam do stila treba predugo ili je teško pronaći ga uvijek možete promijeniti u prozoru stilova. Sloj> Organizirajte stilove slojeva. Evo kako smo imenovali naše slojeve slojeva:

Kruga / boja / Primarni / plava / Srednje

Stilovi teksta omogućuju nam spremanje svojstava teksta, uključujući veličinu fonta, font, poravnanje itd. I omogućava nam brži unos ili promjenu teksta koji se kasnije koristi u simbolima. Ovdje ćete vjerojatno želite organizirati svoje stilove prema semantičkim klasifikacijama teksta na vašim web stranicama, tj. H1, H2, H3, tijelu i tako dalje.

Stilovi teksta kruga

Dodavanje stila teksta: odaberite svoj tekst i na ploči s svojstvima ispod izgleda pritisnite "No Text Style", a zatim "Create new Text Style".

Imenovanje stilova teksta: Slično stilovima imenovanja slojeva. Naše stilove grupirali smo prema stavcima H1, H2, H3,…, i bilo kojim komponentama koje trebaju vlastiti stil teksta.

Na stilove teksta možete primijeniti i slojeve slojeva. Evo kako:
Odaberite tekst> Sloj> Pretvori u obrise, trebali biste biti u mogućnosti dodati slojeve slojeva u tekst kao u bilo kojem normalnom obliku. Međutim, ako imate puno teksta, ako to previše učinite, možete srušiti Sketch ili učiniti ga nevjerojatno laganim.

Korak 4 - Stvorite simbole / komponente

Ovo je zabavni dio. Obratite posebnu pozornost na razmak, veličinu, oblike, a ako je primjenjivo, ne zaboravite primijeniti stilove teksta i slojeva na pojedine dijelove dijelova, to će kasnije omogućiti prevladavanje dijelova. Cilj je završiti sa potpunom kolekcijom simbola i komponenata.

Napravite simbol: U Sketchu grupirajte svoje elemente i pritisnite "Create Symbol" u gornjem nav. Započnite s malim definiranjem stvari poput gumba, avatara i ikona, a zatim prijeđite na izgradnju složenih komponenti.

Dodijelite naziv simbolu: time ćete odrediti kako će se pojaviti u izborniku za umetanje. Za gumb nazvali smo ih takvim:

Tipka / default / praznom hodu
Tipka / default / Hover
Tipka / default / Onemogućeno

Navedite i naredite slojeve u vašem simbolu: Ovo je vrlo važno jer će se oni tako pojaviti u poništavanju. Zamislite sami ako naredba ima smisla i je li imenovana i naređena kako bi je netko drugi očekivao?

Nadjačajna ploča komponente kartice

Naravno, ne možete ih uvijek naručiti na način koji je razumljivo pronaći u poništavanju jer slojevi i dalje određuju koji je element na vrhu, ali to je dobro imati na umu dok stvarate svoje simbole.

Uneseni simboli: Simboli unutar simbola. Upotrebom manjih simbola za izradu složenih simbola možete izvršiti promjenu na jednom mjestu i prikazivati ​​ga u svim slučajevima tijekom svih vaših dizajna. Na primjer, ako promijenite svojstva recimo gumba, promijenit će se i svi gumbi u vašem modelu.

Uvijek promijenite novi simbol za testiranje!

Smanjite svoj simbol: заразni je dizajn uobičajena praksa. Kad prvi put stvorite svoj simbol, otkrijete da elementi možda neće razmjeravati kako biste očekivali. Možete odrediti kako se stvari skaliraju u prozoru za promjenu veličine na ploči s svojstvima. Zadržite mišem iznad pregleda, pokazat će vam kako se povećava.

Napominjemo, lakše je povećati vrijednost nego smanjiti vrijednost jer ponekad stvari postanu malo neugodne. Dakle, ako niste sigurni, počnite s malim!

Stvaranje predložaka i stranica - Nakon što imate kolekciju simbola, možete početi stvarati predloške i stranice za stvaranje brzih maketa cijelih zaslona. Također je dobra ideja započeti skupljati svoje simbole u vodiču za stil kako biste ih organizirali i predstavili.

Skica mobilnog zaslona koja prikazuje kako se primjenjuju poništavanja

Korak 5 - U tijeku su ažuriranja dizajnerskog sustava

Nikad nećete znati koliko dobro funkcionira vaš sustav dok ga ne upotrijebite za stvaranje nekih maketa. Tada ćete možda otkriti da ćete se morati vratiti i prilagoditi svoje simbole jer se oni ne skaliraju točno onako kako ste htjeli ili ste shvatili da je previše naporno primijeniti neke slojeve slojeva i radije će imati manje klikova da biste došli do stila ,

I to je u redu! Zapamtite da je sustav dizajna živa knjižnica i da će ga trebati stalno ažurirati.

Evo nekoliko dodatnih savjeta za Sketch koji će vam pomoći pri upravljanju sustavom:

  • Stvorite mape podataka da biste dodali svoju knjižnicu slika u poništavanju. Imajte na umu da, ako pomaknete mapu, morat ćete je ponovo povezati. Skica> Postavke> Podaci / knjižnica.
  • Ažuriranje knjižnice u drugim dokumentima - gornja desna obavijest → Ažuriraj biblioteku (prvo je potrebno spremiti i zatvoriti knjižnicu)
  • Sketch API je službeni, ažurirani izvor za dvostruku provjeru činjenica, jer web stranice trećih strana ponekad imaju zastarjele podatke.
  • Izvori SketchApp korisno su mjesto za dobivanje besplatnih sredstava za skicu

Dodaci olakšavaju upotrebu i dizajniranje sustava dizajna. Nekoliko koje trenutno volimo:

  1. Sketch Runner - koristite tipkovnicu za brzo umetanje simbola!
  2. Organizator simbola - učinite stranicu svojih simbola lijepom i organizovanom onako kako želite.
  3. Unsplash It - dodajte fotografije iz Unsplash.

Nadamo se da je ovaj članak bio od pomoći kako biste pokazali kako možete pojednostaviti svoj tijek rada knjižnicom dizajna. Sretno stvara!