Käyttämällä Atomic Design Modern Web Development
Jos minulla on jotain, mitä olen oppinut työskentelemään teknologiayrityksessä, sen tarkoituksena on rakentaa verkkosivusto - todella hämmästyttävä, kaunis ja toimiva sivusto - joukko erilaisia kykyjä ja elementtejä on yhdistettävä ja työskenneltävä harmoniassa. Joskus se voi tuntua toimivan Babel-tornin töissä: yksi henkilö kuulee heksakoodien paletin läpi, kaverit huoneen yli ryntävät aakkosetää eri koodausmerkeistä ja tilinhallinta on vieressäni puhelimeen selittää kuinka käyttää sisällönhallintajärjestelmää asiakkaalle, kun yritän kirjoittaa tämän artikkelin pelkkää englantia.
Kaikki nämä elementit tarvitsevat keinon tulla yhteen, jotta ei tapahdu kadofonia, ja on suhteellisen uusi konsepti, joka on todella auttanut meitä työskentelemään paremmin joukkueena: suunnittelijat, kehittäjät, testaajat ... kaikki.
Sitä kutsutaan Atomic Design .
Mikä on Atomic Design?
Atomic Designin komponentit ovat peräisin suunnittelijasta Brad Frost Kiehtova kemia; atomit ovat pienin yksikkö, liimautuvat molekyyleihin, jotka puolestaan muodostavat monimutkaisempia organismeja ja lopulta luo kaiken aineksen universumissa.
Joten, jos olemme kansainvälisessä avaruusasemassa tarkastelemalla koko projektia kokonaisuutena, tässä on valmistunut kotisivut viimeaikaiselle projektille, jota käytimme Atomic Designin, Route 93 Pizza Mill :
Route 93 Pizza: n kotisivu koostuu kaikista elementeistämme yhtenäisenä, toimivana verkkosivustona. Nyt, jos sijoitamme sivuston mikroskoopin alle, voimme nähdä sen rakeiset osat:
Atomit: Alla on atomien Route 93 Pizza Millin verkkosivuille. Atomit ovat perusrakennuslohkoja, kuten tunnisteita, tarrojen muotoja, painikkeita, väripaletteja ja fontteja. Vaikka itse eivät ole kovin hyödyllisiä, atomit ovat alustava viitekohta - luomuksesi alku.
Molekyylejä: molekyylejä, joissa atomeja valmistetaan, kun valmis verkkosivuston suunnittelu alkaa tuntua itsestään. Reitillä 93 olevissa molekyyleissä näet väripaletin, fontit ja ikonografian, jotka tulevat yhteen lomakekenttään, kuvakuvakkeisiin ja painikkeisiin. Ne ovat, kuten Frost sanoo, työkaluksi "tehdä yksi asia ja tehdä se hyvin."
Organismit: Kun saavutamme organismit, voimme luoda koko jalkaportin Route 93: lle. Se yhdistää kaikki edellä mainitut komponentit toimivaksi, esteettiseksi verkkosivustoksi.
Interface Inventory: nyt kun meillä on kaikki ainesosat, tarvitsemme konkreettisen valikon, josta järjestetään ne jotain sulavaa; asiakirja, joka sisältää kaikki edellä mainitut elementit luettavana, käyttökelpoisena resurssina - rajapinnan inventaariossa.
Jotkin organisaatiot kutsuvat tätä Pattern Library tai Style Guide ja käyttävät Interface Inventory -ohjelmaa nimenomaisesti viittaamaan tarkastukseen, jota he ovat tehneet olemassa olevalla verkkosivustolla, käytämme termiä Interface Inventory omille projekteillemme (sekä muiden sivustojen auditoinnit) osa jatkuvaa arviointiprosessia.
Koska Atomic Design-työnkulku muistuttaa jonkin verran kana- tai muna-tyyppistä dilemmaa, käyttöliittymän inventointi on tavallisesti muodoltaan hieman orgaanista verkkosivuston kotisivun ja toisen sivun luomisen jälkeen, mutta ei liian kauan sen jälkeen. Koska nämä kaksi alkusivua muuttuvat, suunnittelija varmistaa, että molemmat elementit ovat johdonmukaisia. Kaikkien sivujen jälkeen he voivat sitten vetää luettelon. Tämä tuottaa kanonista lähdettä siitä, miten visuaalisia tyylejä on sovellettava koko projektissa, kirjaimellinen yhteinen kieli englanninkielisenä, hex-koodit, painotyypit, pehmusteiden leveydet jne., Joihin kehittäjät ja koko tiimi voivat viitata.
Suunnittelemalla liitäntäkannan Atomic Design -prosessin avulla voimme aloittaa primitiiviset moduulit ja koota ne valmiisiin elementteihin. Tämä prosessi parantaa tehokkuutta, viestintä tiimin jäsenten keskuudessa ja tuottaa kauniimman sivuston.
Mikä Atomic Design tekee meille
Atomic Design auttaa meitä löytämään vankkoja "totuuksia" projektin suunnittelusta, jota olemme työskennelleet sekä luomassa yhteistä sanastoa sen taiteellisten ja teknisten näkökohtien välillä. Se kannustaa entistä vankempaan järjestelmään, joka parantaa UX: ää ja tarjoaa menetelmän, jotta suunnittelijat voivat noudattaa kehittäjien komponenttipohjaisia ohjeita säilyttääkseen luovuutensa.
Luonnollisesti kehittäjät koodaavat alusta ylöspäin, kun taas taiteilijan lähestymistapa alkaa yleensä hämärämmässä muodossa, joka sitten jähmettyy toimivaksi verkkosivuksi jonkin muovauksen jälkeen. Atomic Design rohkaisee ja vaatii suunnittelijoita työskentelemään myös alusta lähtien, jotta kaikki käyttöliittymän komponentit ovat johdonmukaisia ja tarkoituksenmukaisia mahdollisimman alhaisella tasolla.
Tämän yhteisen kielen luominen, jota edustaa Interface Inventory, varmistaa suunnittelijat ja kehittäjät eivät keksineet uusia ratkaisuja jo ratkaistuihin ongelmiin. Jos projektille lisätään esimerkiksi uusi yhteystietomuoto, tämän lomakkeen luomiseen tarvittavat tyylit ovat jo olemassa ja niitä voidaan helposti käyttää sivun rakentamiseen, koska se ei ole tarpeellista suunnittelijaa varten. Se ei välttämättä vie työtä pois suunnittelijaa, vaan sen ansiosta kehittäjät voivat helpommin rakentaa ratkaisuja sen sijaan, että suunnittelijat vaatisivat jokaisen sivun tai organismin mallintamista. Suunnittelijan rooli siirretään sitten jotain taiteelliseen suuntaan sen jälkeen, kun sivut on rakennettu. Nämä konkreettiset "totuudet" myös poistavat tarvetta käyttää suunnittelija tuomarina. Kysymyksiin, kuten "onko tämä suunnittelun valinnainen tarkoituksellinen?" Tai "mitä väriä käytämme tällä elementillä?" Sekä viime hetken muutokset tai lisäykset sivulle, vastaa Interface Inventory.
Yhteinen kieli toimii myös laadunvarmistuksessa. Kun testaat verkkosivun sisältöä ja toimintoja varten, vedän Liitäntäkokoelman yläreunaan näytöllä ohjeena. Vaikka ennen kaikkea on suunnittelija työkalu ja toiseksi kehittäjä työkalu, se mahdollistaa kaikkien tiimin osallistua luotettavasti keskusteluihin suunnittelusta ja johdonmukaisuudesta, sillä voimme varmistaa, että sivustot ovat moitteettomia ja valmiita luovuttamaan asiakkaalle.
johtopäätös
Jotta projektin asianmukainen toteuttaminen, erityisesti jotkut suurimmista, usein löydämme itsemme, viestintä on avainasemassa. jos huudat erilaisia ideoita huoneen yli toistensa suhteen, siitä ei ole mitään mahdollisuutta. Atomic Design auttaa toimimaan kääntäjänä näiden eri osastojen ja niiden "kielten" kanssa, jotka menevät heidän kanssaan ylläpitämään suunnittelun johdonmukaisuutta. Se muodostaa ryhmälle modulaarisen resurssin, mikä mahdollistaa johdonmukaisuuden ja johtaa tehokkaaseen kääntämiseen, vähemmän virheitä ja kiillotettua lopputuotteita.