Atomic Design: 10 syytä, miksi sinun pitäisi käyttää sitä

Atomic Design
(Kuvan luotto: Jim McCauley)

Olet todennäköisesti kuullut Atomic Designista, jos olet ollut etupään kehitysyhteisössä jonkin aikaa. Atomic Design on kemian innoittama menetelmä. Aivan kuten kaikki aine koostuu atomista, jotka yhdistyvät muodostaen molekyylejä, jotka puolestaan ​​muodostavat monimutkaisempia organismeja, Atomic Design sisältää verkkosivuston hajottamisen sen peruskomponenteiksi ja sitten työskentelemisen sieltä sivuston luomiseksi.

Atomic Designin käytöstä on monia etuja; Lue lisää ja löydä 10 syytä, miksi se tekee elämästäsi helpompaa.



Jos haluat yleisiä neuvoja verkkosivustojen luomisesta, katso artikkelimme siitä, miten luoda täydellinen verkkosivujen asettelu , plus suosikkimme verkkosivujen rakentajat .



01. Voit sekoittaa komponentteja

Hajottamalla komponentit perusatomeiksi on helppo nähdä, mitkä alueen osat voidaan käyttää uudelleen ja kuinka ne voidaan sekoittaa ja sovittaa muiden molekyylien ja jopa organismien muodostamiseksi.

Atomic Design: elementit



Nämä viisi peruselementtiä voidaan sekoittaa uudelleen, jotta voidaan luoda sivualue

Oletetaan esimerkiksi, että sivustossa on vain viisi atomia: pieni kuva, iso kuva, kappale, luettelokohde ja linkki. Voit luoda erittäin käyttökelpoisen verkkosivun kopioimalla ja yhdistämällä näitä atomeja molekyylien muodostamiseksi.

02. Tyylioppaan luominen on helppoa

Jos sivusto luodaan Atomic Design -periaatteiden mukaan alusta alkaen, kaikki atomit ja molekyylit, jotka on luotu ennen sivuston rakentamista, voivat toimia tyylin perusoppaana. Jopa sivustoille, joita ei ole rakennettu atomisesti, ei ole vaikeaa ekstrapoloida peruskomponentteja ja koota ne yhteen rakentamaan lisää sivuja. Muista kuitenkin, että on aina parasta luoda sivusto atomisesti alusta alkaen sen sijaan, että yrität tuoda Atomic Design -periaatteita sivustolle myöhemmin.

03. Helppo ymmärtää asettelua

Atomisuunnitellun verkkosivuston koodi on tyypillisesti paljon helpompi lukea kuin perinteisempi tapa. Tämä pätee paitsi luomisen aikana, myös tulevaisuudessa, kun sivustoa tarkastellaan uudelleen viitteeksi tai pieniksi muutoksiksi.



Asiakirjojen takia, mitä atomeja molekyylejä ja organismeja käytetään ja missä, on helppo nähdä, mitä koodin kukin osa edustaa. Toinen bonus tästä on se, että se helpottaa koodikannan selittämistä uudelle kehittäjälle.

kuinka käyttää Photoshopin värikorvaustyökalua

04. Koodi on johdonmukaisempi

Atomic Design: Kuviolaboratorio

Pattern Lab on kokoelma työkaluja, jotka tekevät Atomic Designista helpompaa

Atomic Design -sovelluksessa käytät ennalta määriteltyjä atomeja sivuston ulkoasun luomiseen, on helppo nähdä, mitä komponentteja sivuston eri osissa käytetään. Tämä vähentää kaksoiskoodin kirjoittamisen todennäköisyyttä.

Esimerkiksi, jos joku luo sivuston käyttämättä Atomic Designia ja tarvitsee esimerkiksi punaisen painikkeen, hänen on etsittävä koko sivusto ja yritettävä löytää olemassa oleva. Jos näin oli, heidän on kopioitava ja liitettävä koodi uuteen ilmentymään. Jos punaisia ​​painikkeita ei ole, heidän on luotava uusi. Atomic Designilla on kuitenkin helppo palata atomiluettelon läpi ja löytää tarkka punainen painike.

Tästä tulee paljon helpompi prosessi, kun Pattern Lab -kirjasto on mukana. Kuviolaboratorio on kokoelma työkaluja, jotka tekevät Atomic Designista helpompaa. Esimerkissämme se tarjoaisi hakupalkin atomille, mikä helpottaisi tarkan punaisen painikkeen etsimistä ja löytämistä.

05. Ei keskittyä kuvapisteiden täydellisiin malleihin

Koska Atomic Designin idea on käyttää atomeja rakennuspalikoina sivuston luomiseen, on vähemmän todennäköistä, että verkkokehittäjä luo monia atomeja samanlaiseen asiaan. Sen sijaan he voivat yksinkertaisesti selata olemassa olevien atomien luetteloa ja säätää niitä uusien atomien luomiseksi tarvittaessa.

Hieno esimerkki tästä olisi sivuston otsikot. Oletetaan, että sisällöntuottajalla on luettelo sivustolle käytetyistä otsikoista, musta: pääotsikko, alaotsikko ja kappaleen otsikko. He eivät ole työskennelleet sivustossa vähään aikaan, ja heidän on palattava sivustolle lisäämään uusi sininen otsikko. He voivat tarkastella jo olemassa olevia otsikoita ja mukauttaa yhden niistä saadakseen haluamansa tuloksen.

06. Nopeampi prototyyppien valmistus

Atomiluettelon käyttäminen ennen sivuston luomista tarkoittaa, että voit pilkata sivuja nopeasti ja helposti - sinun tarvitsee vain valita ja yhdistää sivulle tarvittavat elementit. Mockup voidaan sitten räätälöidä ja jalostaa lopullista paikkaa varten.

07. Sivuston osien päivittäminen ja poistaminen on helpompaa

Koska vain yhtä atomia, molekyyliä tai organismia muutetaan kerralla, on helppo varmistaa, että kaikki komponentin päivitykset välitetään kaikkiin muihin esiintymiin sivuston kautta. Samoin ei-toivotut komponentit voidaan helposti poistaa.

08. Modulaarisempi tiedostorakenne

Vaikka Atomic Design on hyvin yleistä merkinnöissä (HTML), uskon, että näitä tekniikoita voidaan käyttää myös CSS: ssä, JavaScriptissä tai muissa kielissä, joita käytetään sivuston luomiseen yleisen koodin modulaarisen ja uudelleenkäytettävyyden parantamiseksi.

Itse käytän atomic CSS: ää luomissani verkkosivustoissa ja olen löytänyt suuria etuja tälle lähestymistavalle. Uskon kuitenkin, että HTML-komponenttien kaltaisten asioiden saapuessa olisi järkevää erottaa atomille ominainen CSS ja JavaScript omaan kansioonsa HTML: n kanssa, joten jos jotain tarvitsee päivittää tai poistaa, tiedät tarkalleen minne mennä ja mitä muuttua.

09. Vähemmän komponentteja

Jos tekijällä on luettelo atomista, molekyyleistä ja organismeista, jotka heille esitetään ennen sivuston luomista, he käyttävät todennäköisemmin jo olemassa olevaa kuin luovat uusia komponentteja pienille muunnelmille.

miten kaikista kuvistani tehdään yksityisiä Facebookissa

Jos suunnittelulle tarvitaan otsikko, jonka kirjasinkoko on 4,5em, mutta atomien luettelosta on jo olemassa 4em-kokoinen otsikko, on todennäköisempää, että luoja valitsee 4em-nimikkeen kuin luodaan kokonaan uusi otsikko. Tämä johtaa siihen, että kaikkia atomeja käytetään vähemmän, mikä tekee puhtaammasta ja kevyemmästä verkkosivustosta.

10. Tutki kuviolaboratoriota

Atomic Design: Kuviolaboratorio

Pattern Lab on staattinen sivustogeneraattori, myös Brad Frostilta

Tämä ei todellakaan ole niin suuri hyöty Atomic Designista, mutta loistava työkalu Brad Frost (joka keksi termin Atomic Design) ja Dave Olsen auttaa prosessissa. Se on lähinnä staattinen sivustogeneraattori, joka käyttää viiksiä malleissa ja JavaScript-katseluohjelmaa vuorovaikutteisuudessa. Se on luotu ensin mobiililaitteille-suunnittelussa ja vaihtoehtoja sivujen koon muuttamiseen, kommenttien lisäämiseen sivuston osioihin ja koodinpätkiin.

Alkuperäinen versio on kirjoitettu PHP: llä, mutta solmuversioita on kaksi: yksi kulmalle ja toinen Gruntille. Suosittelen lämpimästi sekoittamista demon kanssa Kuviolaboratorio antaa sinulle paremman käsityksen sen toiminnasta ja Atomic Designista yleensä.

Haluatko tietää enemmän? Lue Brad Frostin alkuperäinen viesti Atomic Design .

Aiheeseen liittyvät artikkelit: