Atomski dizajn: 10 razloga zbog kojih biste ga trebali koristiti

Atomski dizajn
(Slika zaslužna: Jim McCauley)

Vjerojatno ste čuli za Atomic Design ako ste neko vrijeme bili u zajednici za razvojne programere. Atomski dizajn je metodologija nadahnuta kemijom. Baš kao što je sva materija sačinjena od atoma koji se kombiniraju i tvore molekule, koje zauzvrat čine složenije organizme, Atomic Design uključuje razbijanje web stranice na njene osnovne komponente, a zatim od nje rad na stvaranju stranice.

Korištenje atomskog dizajna ima mnogo prednosti; čitajte dalje kako biste otkrili 10 razloga zašto će vam to olakšati život.



kako koristiti telefon kao tablet za crtanje

Ako želite općeniti savjet za izradu web stranica, pogledajte naš post o tome kako stvoriti savršen izgled web stranice , plus naš omiljeni graditelji web stranica .



01. Komponente možete miješati i podudarati

Razbijanjem komponenata na osnovne atome lako je vidjeti koji se dijelovi mjesta mogu ponovno upotrijebiti i kako se mogu miješati i uskladiti kako bi se stvorile druge molekule, pa čak i organizmi.

Atomski dizajn: elementi



Ovih pet osnovnih elemenata može se remiksirati kako bi se stvorio niz stranica

Na primjer, recimo da web mjesto sadrži samo pet atoma: malu sliku, veliku sliku, odlomak, stavku popisa i vezu. Mogli biste stvoriti vrlo korisnu web stranicu dupliciranjem i kombiniranjem tih atoma kako biste stvorili molekule.

02. Stvaranje vodiča za stil je jednostavno

Ako je web mjesto kreirano u skladu s načelima atomskog dizajna od početka, svi atomi i molekule stvoreni prije izrade web mjesta mogu poslužiti kao osnovni vodič za stil. Čak i za web lokacije koje nisu izgrađene atomski, nije teško ekstrapolirati osnovne komponente i sastaviti ih kako bi se stvorilo više stranica. Imajte na umu, međutim, da je uvijek najbolje web mjesto stvoriti atomski od početka, umjesto da kasnije pokušavate na stranici uvesti principe atomskog dizajna.

kako promijeniti veličinu umjetničke ploče u

03. Lako razumljiv izgled

Kôd atomski dizajnirane web stranice obično je puno lakše pročitati nego onaj stvoren na tradicionalniji način. To vrijedi ne samo za vrijeme stvaranja, već i za budućnost kada se web-mjesto traži radi reference ili malih podešavanja.



Zbog dokumentacije o tome koje se atomske molekule i organizmi koriste i gdje je lako vidjeti što svaki dio koda predstavlja. Još jedan bonus ovoga je što olakšava objašnjenje baze kodova novom programeru.

04. Kodeks je dosljedniji

Atomski dizajn: Laboratorij uzoraka

Pattern Lab zbirka je alata koji olakšavaju atomski dizajn

S atomskim dizajnom koristite predefinirane atome za izradu izgleda web mjesta, lako je vidjeti koje se komponente koriste za različite dijelove web mjesta. To smanjuje vjerojatnost pisanja dvostrukog koda.

Na primjer, ako netko kreira web stranicu bez upotrebe atomskog dizajna i ako joj je potreban, recimo, crveni gumb, morat će pregledati cijelu web stranicu kako bi pokušao pronaći postojeću. Da to postoji, morali bi kopirati i zalijepiti taj kôd u novu instancu. Da nema crvenih gumba, morali bi stvoriti novi. Međutim, s atomskim dizajnom lako se možete vratiti na popis atoma i pronaći upravo taj crveni gumb.

To postaje puno lakši proces kada je uključena biblioteka Pattern Lab. Laboratorij uzoraka zbirka je alata koji olakšavaju atomski dizajn. U našem primjeru pružit će traku za pretraživanje atoma, što olakšava traženje i pronalaženje upravo tog crvenog gumba.

05. Bez fokusiranja na dizajne savršene za piksele

Kako je ideja atomskog dizajna koristiti atome kao gradivne blokove za izradu web mjesta, manje je vjerojatno da će web programer stvoriti mnogo atoma za sličnu stvar. Umjesto toga, mogu jednostavno pregledati popis postojećih atoma i po potrebi ih doraditi kako bi stvorili nove atome.

Sjajan primjer za to bili bi naslovi na web mjestu. Recimo da autor ima popis naslova korištenih za web mjesto, sve u crnoj boji: glavno zaglavlje, podzaglavlje i naslov odlomka. Oni već neko vrijeme nisu radili na web mjestu i moraju se vratiti na njih kako bi dodali novi plavi naslov. Mogli bi pogledati naslove koji već postoje i prilagoditi jedan od njih kako bi dobili željeni rezultat.

06. Brže izrađivanje prototipa

Imati popis atoma prije početka stvaranja web mjesta znači da možete brzo i jednostavno ismijati stranice - sve što je potrebno jest odabrati i kombinirati potrebne elemente za stranicu. Zatim se maketa može prilagoditi i doraditi za konačno mjesto.

kako stvoriti kinografski snimak u photoshopu cc

07. Jednostavnije ažuriranje i uklanjanje dijelova web mjesta

Kako se istodobno mijenja samo jedan atom, molekula ili organizam, lako je osigurati da se bilo kakva ažuriranja komponente prenose u sve ostale slučajeve na web mjestu. Slično tome, neželjene komponente mogu se lako ukloniti.

08. Modularnija struktura datoteka

Iako je Atomic Design vrlo raširen kada je riječ o označavanju (HTML), vjerujem da se ove tehnike mogu koristiti i za CSS, JavaScript ili bilo koje druge jezike koji se koriste za izradu web stranice kako bi cjelokupni kôd postao modularniji i ponovni.

I sam koristim atomski CSS za web stranice koje izrađujem i našao sam velike koristi ovom pristupu. Međutim, vjerujem da bi s dolaskom stvari poput HTML komponenata imalo smisla odvojiti CSS i JavaScript specifične za atom u vlastitu mapu zajedno s HTML-om, pa ako nešto treba ažurirati ili izbrisati, točno znate kamo ići i što promijeniti.

09. Sveukupno manje komponenata

Ako kreator ima popis atoma, molekula i organizama koji su mu predstavljeni prije početka stvaranja web mjesta, vjerojatnije je da će koristiti ono što već postoji nego stvoriti nove komponente za male varijacije.

Ako je za dizajn potreban naslov s veličinom fonta 4,5em, ali već postoji naslov veličine 4em s popisa atoma, vjerojatnije je da će kreator odabrati 4em od stvaranja potpuno novog naslova. To će rezultirati manjim korištenjem atoma, što čini čistiju i vitkiju web stranicu.

najbolje olovke za skiciranje i crtanje

10. Istražite Pattern Lab

Atomski dizajn: Laboratorij uzoraka

Pattern Lab statički je generator web stranica, također od Brada Frosta

Ovo zapravo nije prednost Atomskog dizajna, već izvrstan alat koji je stvorio Brad Frost (koji je skovao izraz Atomski dizajn) i Dave Olsen za pomoć u procesu. To je u biti statički generator web stranice koji koristi brkove za predloške i JavaScript preglednik za interaktivnost. Stvoren je s naglaskom na dizajn za mobilne uređaje s opcijama za promjenu veličine stranica, dodavanje komentara u odjeljke web mjesta i isječke koda.

Izvorna verzija napisana je na PHP-u, ali postoje dvije verzije čvora: jedna za gutljaj i druga za Grunt. Toplo preporučujem da se zezate s demonstracijom na Laboratorij uzoraka web mjestu kako biste bolje razumjeli kako to funkcionira i Atomski dizajn općenito.

Želite znati više? Pročitajte originalni post Brada Frosta o Atomski dizajn .

Povezani članci: