Uvod u atomski dizajn za web dizajnere

Atomi nisu samo HTML elementi, nego i također pripadajućim stilovima: fontovi, boje, dimenzije i druga pravila CSS stila. S Bradovim vlastitim riječima, atomima “pokazati sve osnovne stilove na prvi pogled”.

Atomi - primjer

Evo primjera s naše web-lokacije. Naslovi preporučenih postova mogu biti odgovorni jedan tip atoma; oni koriste isti HTML i CSS kod i može biti lako se razlikuju od ostatka sadržaja.

Imajte na umu da Hongkiat.com nije osmišljen s obzirom na atomski dizajn, ovdje se koristi samo u svrhu demonstracije.

Suština atomskog dizajna je u tome dizajnirajte korisničko sučelje odozdo prema gore pomoću ovih pet faza, ne identificirati komponente atomskog dizajna nakon toga.

2. Molekule

molekula formiran je skupina atoma. Molekule čine sljedeću fazu u hijerarhiji atomskog dizajna. Razmislite o jednostavnijim elementima korisničkog sučelja koji su već izrađene su od više od jednog HTML elementa, kao što je obrazac za pretraživanje ili preporučeni post na bočnoj traci.

Biti organiziran u molekulu daje svrhu na svaki atom. U većoj skupini (molekuli) atomi moraju podrška i dopuna međusobno, moraju dobro rade zajedno kako bi se stvorio upotrebljiv dizajn.

Na primjer, naslov (jedan atom) mora dobiti više naglaska (veći fontovi, veća težina, itd.) nego ime autora (drugi atom) u preporučenom post bloku. Na taj način dva atoma su “značilo” do raditi kao tim da biste dobili najbolji rezultat.

Molekule - primjer

Koristeći naš prethodni primjer, možete vidjeti da se u Hongkiatovoj bočnoj traci jedan blok preporučenog posta može vidjeti kao molekula. Preporučena molekula je post izgrađena od tri atoma: minijaturu, naslov i atom imena autora.

3. Organizmi

Organizmi se sastoje od a skupina molekula, atoma (i ponekad drugi organizmi). U web dizajnu, organizmi su složenije UI komponente koji predstavljaju definitivnim odjeljcima stranice, kao što su zaglavlje, podnožje ili bočna traka.

Organizmi mogu biti sastavljeni od različite vrste molekula, na primjer, bočna traka može se sastojati od trake za pretraživanje i različitih vrsta widgeta ili od ista se molekula ponavlja nekoliko puta, na primjer, pregršt povezanih blokova koji se nalaze jedan iza drugog. I to može biti kombinacija ove dvije.

Organizmi - primjer

Na Hongkiatovoj web-stranici, bočna traka može biti organizam. Sastoji se od a traka za pretraživanje (jedna vrsta molekule, prikazana samo jednom) i nekoliko preporučenih postova (druga vrsta molekula, prikazana mnogo puta).

Međutim, organizam bočne trake može se također smatrati sastavom a molekula (traka za pretraživanje) i drugi organizam (preporučeni post widget s nekoliko preporučenih postova). Atomski dizajn je fleksibilan model, pravila nisu vrlo stroga, pa u ovom slučaju možemo definirati isti građevni blok i kao molekulu i kao organizam.

4. Predlošci

Sljedeća faza u hijerarhiji atomskog dizajna je predlošci. Kao što možete vidjeti, to je vrijeme atomskog dizajna prestaje koristiti analogiju kemije. Brad se suzdržava od terminologije u ovom trenutku dok misli da je to manje razumljivo za klijente i druge dionike, a to su u biti dvije posljednje faze (predlošci i stranice) koje dizajneri trebaju prodati.

Predlošci su izgrađene od organizama. Oni su objekti na razini stranice ali bez konačnog sadržaja. Svrha predložaka je da predstavljaju strukturu temeljnog sadržaja.

Predlošci prikazuju kako se različiti atomi, molekule, organizmi “funkcioniraju zajedno u kontekstu izgleda”. Oni u osnovi predstavljaju kostur stranice.

Predlošci - primjer

Na primjer, razmislite o početna stranica s slikama rezerviranog mjesta i blokovima teksta lorem ipsum.

U nastavku možete vidjeti primjer iz knjige Atomic Design. To je predložak početne stranice časopisa TimeInc. Atomi, molekule i organizmi su na svom mjestu, ali samo sa shematskim sadržajem.

5. Stranice

stranice predstavljaju posljednju fazu hijerarhije atomskog dizajna. Stranice su “određenih primjeraka predložaka”. U fazi stranice dobivaju se predlošci popunjen pravim sadržajem (kopiranje, mikrokopiranje, slike, videozapisi itd.), kao što će se pojaviti u stvarnom korisničkom sučelju.

Stranice omogućuju dizajnerima da vide kako krajnje korisničko iskustvo će izgledati, do testirajte dizajn sa stvarnim korisnicima i na izmjerite koliko dobro djeluje u smislu upotrebljivosti, pretvorbe, pristupačnosti i drugih mjernih podataka.

Varijacije stranica i predloška

Drugi cilj stupnja stranice je napraviti varijacije predložaka moguće. Kada govorimo o varijacijama predložaka, govorimo o osnovama predložak je isti ali naseljavanje sadržaj je (malo) različit. Na primjer, ako želite prikazati drugačiji sadržaj različitim grupama korisnika (npr. Za posjetitelje nasuprot prijavljenim korisnicima) ili kada je jedan naslov mnogo dulji od ostalih.

Korištenje varijacija predložaka ključno je ako želimo stvoriti dosljedni i otporni korisnička sučelja. Manje komponente (atomi, molekule, organizmi) moraju biti dobro funkcioniraju u različitim scenarijima.

Na primjer, gumb mora izgledati s mogućnošću klikanja bez obzira na okolne elemente. Ako ne izgleda djelotvorno u određenoj varijaciji, trebate redizajnirati atom do nje odgovara svim slučajevima uporabe.

Stranice - primjer

U nastavku možete vidjeti fazu stranice prethodnog predloška početne stranice usluge TimeInc. Izgleda drugačije, ha? Ovo je pravedno jedna varijanta predloška, iako. Da biste imali učinkovit UI, dizajnerski tim mora dobro razmisliti što se može promijeniti u stvarnom mjestu. Zatim, moraju testirati i dizajn za tu varijaciju predloška (stranicu).