Projeku izstrāde, pielietojot Atomic Design principu
Digitālo projektu izstrādē nav nekas sāpīgāks kā komunikācijas trūkums ar kādu no iesaistītajām pusēm vai tas, ka kāds izstrādes darbos ir divus, trīs soļus tālāk nekā kolēģis, tāpēc tieši Atomic Design pieeja varētu būt tā eļļa jūsu komandas motoram, lai visi virzuļi strādātu bez liekas berzes.
Vēl kāpēc vēlos skaidrot šo konceptu, ir tā neprecīzais pielietojums praksē, kas radies ne tikai izstrādātāju vainas dēļ, bet arī klientu/uzdevuma devēju dēļ.
Vārdu salikums Atomic Design pirmo reizi tika manīts šajā Bred Frost prezentācijā, 2013. gadā, kas, pēc interneta trendu apgriezieniem mērot, tikpat labi varēja būt 1889. Lai gan gudrais cepumiņš Breds šo konceptu skaidroja metaforās par ķīmiju, molekulām un atomiem, vecie dizaineri to sauc par dizaina sistēmām, un tās savu aktualitāti nav zaudējušas vēl līdz šodienai.
Atomic Design ir weblapas izstrādes prakse, kuras procesā tiek radīti visi lapas vizuālie elementi. Visbiežāk šo principu pielieto web,UI un UX dizaineri, taču tos kā atskaites punktus ir ērti pielietot arī klientiem un projektu vadītājiem, jo, izmantojot šo praksi, weblapas izstrāde tiek dalīta fāzēs:
Atomi
Sagatavo vismazākās vienības - linki, krāsas, pogas, virsraksti utt.
Molekulas
Sakārto šīs vienības formā - paragrāfiem dod virsrakstus, ievades laukiem leibeļus utt.
Organismi
Šajā fāzē rodas kājenes, galvenes, navigācijas joslas, sānu joslas un citi satura bloki.
Sagatave
Kad satura turētāju daļiņas gatavas, šajā fāzē tās tiek loģiski saliktas un apvienotas ar izvēlēto dizainu.
Lapa
Šajā fāzē notiek tāds kā sitemap manifests, kurā skaidri iezīmējas tas, kā izskatīsies pirmā lapa, kontaktu lapa, galerija un no kādiem elementiem tā sastāvēs.
Sauc, kā vēlies, ...
bet tas, ko Breds pauda vēl bez asprātīgiem ķīmijas pun'iem, bija sava veida darba ētika un (web)dizaina darbu produktīvāka izstrāde - kurā brīdī tiek implementēti kādi dizaina elementi un satura sastāvdaļas, kā arī gluda pāreja no dizaina failiem uz kodu. Te arī rodas biežie pārpratumi:
Kurā brīdī tiek izstrādāti wireframe? Sagataves fāzē?
Nē, wireframe izstrāde iziet cauri šai pašai sistēmai, sākot ar pirmo fāzi un turpinot līdz pēdējai. Vizuālais dizains tiek implementēts uz esošiem wireframe un arī tiek pakļauts šim pašam Atomic Design principam.
Kāda ir atšķirība starp Sagatavi un Lapu?
Sagatave ir (web)lapu kopuma sastāvdaļa. Piemēram, lapas (sagataves) "Uzņēmums" un "Akcijas" ir Rīgas Miesnieka weblapas sastāvdaļas.
Vai šī ideja attiecas tikai uz dizaineriem un UX, UI izstrādi?
Nē, pie tam, šis koncepts veidots no izstrādātāju, Front-End programmētāju skatapunkta - dizaina sistēma ir būvēta pēc front-end framework (Bootstrap, Foundation utt.) principiem. Frontenderiem šis nav nekas jauns, un dažs labs varētu brīnīties, kā vispār dizaini tika zīmēti līdz šim. Projektu vadītājiem, pasūtītājiem un citiem vagariem šis process pēc Organisma fāzes ir labs atskaites punkts.
Atomi un molekulas ir iesācējiem, es projektus sāku ar organismiem.
Šis ir garām, un ar šādu pieeju web projekts ir jau nolemts pretrunām un nepilnībām. Viens no Atomic Design stūrakmeņiem ir vieglā pāreja no dizaina skicēm, kas programmētājiem nerada liekus jautājumus.
Dizaineri Jāni, vai pārkrāsosi visas pogas rozā Pages fāzē?
...
Pages ir fāze, kur dizaineri koncentrējās uz lapu struktūru un saturu, un šādas korekcijas vēlams iesniegt līdz iepriekšminētajam etapam, BET(!) šīs dizaina sistēmas skaistums ir tajā, ka viss ir labi sakārtots, un, ja Jānis ir izstrādājis dizainu pats, tad grūtākais šajā uzdevumā ir izdomāt, par ko papurpināt, kamēr krāsa tiek mainīta.
Savukārt, ja projekts jau ir kodēšanas fāzē (iespējams, ka pēc dizaineru Templates fāzes frontenderi var jau sākt savu darbu pie projekta), kodētājam šadas izmaiņas veikt ir vieglāk: