Kako koristimo dizajn temeljen na komponentama

Heavyweight je studio za digitalni dizajn u Amsterdamu za ciljane startupove, tvrtke i agencije. Pišemo o svojim iskustvima dizajniranja aplikacija, web stranica, platformi i sustava.

O komponentnom dizajnu često se govori u okviru velikih, složenih projekata. U ovom ćemo članku pokazati da može biti korisno i za manje projekte i timove. U velikoj težini koristimo komponente temeljene na komponentama za svaki projekt - veliki ili mali.

Prije svega, kapu smo usmjerili prema Bradu Frostu, koji je knjigu Atomic Design doslovno napisao. Upoznao nas je sa idejom da zapravo ne dizajniramo web stranice ili ekrane aplikacija, već zapravo dizajniramo dizajnerske sustave.

Međutim, otkrili smo da metaforičnost Atomskog dizajna uzrokuje zabune među našim klijentima. Pogotovo apstraktne konvencije o imenovanju mogu biti pomalo zastrašujuće. Stoga smo i sami definirali sebe; Dizajn koji se temelji na komponentama, veliko se zadužuje kod drugih sjajnih dizajnera - naravno.

Zaronimo u: Što je to?

U osnovi, komponentni dizajn je praksa dijeljenja korisničkog sučelja na manje, upravljive dijelove s jasnim imenima. Svaki od tih dijelova spada u jednu od šest različitih skupina.

1. Identitet

Prva od ovih šest skupina je identitet. Ovdje definiramo osnovne elemente brenda projekta. Svi tipovi slova, tipografija, primarna i sekundarna boja detaljno su specificirani. Nakon toga oni se koriste u cijelom projektu.

2. Elementi

Druga skupina definira najmanje dijelove projekta za višekratnu upotrebu: elemente. Nekoliko poznatih primjera elemenata su stvari poput: gumba, veza, ulaza, padajućih pada itd. Svaki od njih je definiran, zajedno sa svim njihovim stanjima; poput gumba za kretanje, fokus i onemogućene tipke. Naša mantra je: Odredite jednom, ponovo upotrijebite tijekom cijelog projekta.

3. Komponente

Treći dio je povećavanja, treća grupa su Komponente. Prilikom dizajniranja aplikacija i web dizajna, većina blokova na zaslonu su Komponente. Komponenta može biti sve što koristi barem nekoliko Elemenata. Stvari poput karata, herosa i navigacijskih izbornika tradicionalni su primjeri komponenti. Međutim, oni ne moraju izgledati modularno.

Pri dizajniranju komponenti također izrađujemo verzije istih za svaku veličinu projekta (ili točke prekida), koje reagira na projekt, odmah. Na ovaj se način nikad ne moramo vraćati na zaslone koje smo osmislili prije nekoliko tjedana i nakon toga ih prilagoditi pametnom telefonu. Odgovarajući ciljevi unaprijed se dogovaraju s klijentom i svaka je komponenta dizajnirana u skladu s tim.

4. Skladbe

Nastavljajući se opet u mjerilu, četvrta je skupina sastav. Sastav je dio koji u sebi ima više komponenti. Oni definiraju kako bi se komponente unutar nje trebale ponašati.

Ispod je primjer jednostavnog izgleda stupca. Ovo je vrlo jednostavan sastav. Ona samo definira neki bijeli prostor oko sastava, naslov i kako se komponente unutar trebaju petljati. Kikiriki!

5. Izgled

Peta skupina, Layout, apstraktnija je kolekcija principa dizajna. Ovdje su definirane količine slobodnog prostora, rešetki i omotača. Definirajući ih na ovaj način, drugi dizajneri lako mogu ući u projekt i koristiti postojeće stilove i smjernice.

6. Stranice

Posljednja skupina su stvarne Stranice (ili ekrani) projekta. Svaka se stranica sastoji od rasporeda sastavaka i komponenata.

Sve čudne iznimke definirane su na razini stranice. Recimo da stranica kontakta treba imati plavu pozadinu, jer to kažu i naši prijatelji iz odjela za marketing ... To dodajemo samo na razini stranice.

Primjer

Pogledajmo vrlo jednostavan primjer dizajna temeljenog na komponentama.

Recimo da prodajemo ulaznice za neki događaj. Na raspolaganju su tri različite karte. Svaka od ulaznica predstavljena je na isti način, s ograničenim brojem elemenata u sebi - u ovom slučaju tipkom i nekim tekstom. To znači da ulaznica treba biti predstavljena kao komponenta: ulaznica-komponenta.

Recimo da tri karte na našoj početnoj stranici želimo predstaviti u jednostavnom izgledu s tri stupca. Ovdje smo odlučili dizajnirati Sastav: Sastavnice ulaznica. Ovaj sastav određuje da svaki od komponenti ulaznica mora imati nešto prostora između sebe i naslov iznad njih.

Dva dana nakon pokretanja projekta, klijent želi dodati malo teksta u karte, rekavši da su rasprodate. To znači da moramo samo ažurirati Ticket-Component i poslati ih programerima. Brzo kao kriket!

Pročitajte više: Kako dizajniramo složene sustave pomoću komponentnog dizajna.

Skica

Nije tajna da je Sketch brzo postao aplikacija za UI i UX dizajn. Korištenje Sketch-ovih stilova teksta, simbola i grafičkih ploča omogućilo nam je da bez problema prilagodimo svoj tijek rada temeljen na komponentama. Razvili smo divan predložak Sketch u koji su ugrađeni svi ti principi, tako da brzo možemo brzo pokrenuti projekt.

Potrošnja malo više vremena na definiranje svih vaših stilova teksta ukupno štedi mnogo vremena.

Završavati

Ukratko, Komponentni dizajn omogućava nam brzi dizajn mnogih zaslona koji su jednostavni za održavanje i ažuriranje s novim značajkama. Više dizajnera može raditi na istom projektu u skladu, jer je sve jasno definirano.

Ako ste uživali u tome, razmislite o dijeljenju ovog članka - on stvarno pomaže!

Slijedite naše dizajne temeljene na komponentama na Dribbbleu.
Inspiracija i iza kulisa na Instagramu i Twitteru.

Mislite li da je takav pristup dizajnu prikladan za vašu sljedeću aplikaciju, web stranicu ili složeni sustav? Razgovarajmo o tome na kavi u Amsterdamu.