Gondolkodj modulárisan, cselekedj helyben

Az atomic design és a full stack design system

Brad Frost az Atomic Design módszertan megalkotásával egy olyan struktúrát hozott létre, ami hiánypótló volt a digitális termékek világában.

A módszertan lényege az egységekből való építkezés. A természetben lévő atomok molekulákat alkotnak, a molekulák organizmusokat (és így tovább)🌿. Ha ezt a logikát átültetjük a design világába, akkor olyan struktúrált könyvtárakat építhetünk, melyek elemeit kombinálva később könnyedén átalakíthatjuk vagy továbbgondolhatjuk a terméket.

Ezt a módszertant Emmet Connolly gondolta tovább a The full stack design system című cikkében. A cikk lényegét a következőképpen tudnám összefoglalni:

Hiába van téglánk és cementünk, tervrajz nélkül nem tudunk házat építeni.

Hiába építünk fel egy struktúrált UI könyvtárat, útmutatások nélkül tetszőleges elemeket kombinálva valószínűleg elég torz eredményt fogunk kapni. A design területén nincs egy egységes, elterjedt nyelv, amit minden hozzáértő ugyanúgy tud olvasni (mint pl. egy ház tervrajzát). Ez valószínűleg nem is fog megvalósulni. Ehelyett viszont létrehozhatunk olyan keretrendszereket, melyek definiálják a terméket és a későbbiek során is hozzányúlhatunk. Connolly szerint ehhez ki kell egészítenünk a meglévő UI könyvtárunkat pár elemmel:

• Közös mentális modell
• Közös nyelvezet
• Megosztott design források
• Megosztott kód komponensek

A könyvtárunk mellett szükség van a termék struktúrájának pontos leírására (minden funkciójának pontos leírásával együtt☝️), amit a fejlesztők ugyanúgy értenek, mint a designerek és az ügyfelek.

Fontos, hogy egy megnevezett objektum alatt mindenki ugyanazt a dolgot értse. Ezen a téren egyébként a két nagy mobil platform sem konzisztens egymással. Pl. amit a Human Interface Guidelines Tab bar-nak nevez, azt a Material Design Bottom navigationnek. Viszont mivel a két rendszer elemei (szerencsés esetben😬) sosem találkoznak, így ezek az elnevezésbeli különbségek semmilyen problémát nem okoznak számunkra.

Illetve fennt leírtak mellett fontos, hogy minden résztvevő hozzáférjen a forrásfájlokhoz. Esetünkben a sketch-fájlokhoz. Amikben minden objektumot szépen szimbólummá alakítottunk. 😌

Mikor nálunk, a Made by Zwoelf-nél egy ilyen moduláris UI rendszert terveztünk az OTP Bank számára, figyeltünk rá, hogy ne csak egy könyvtárat adjunk át, hanem definiáltuk az alapvetéseket is a különböző elemek használatával kapcsolatban. Ez azért volt fontos, mert ezt a UI keretrendszert idővel az OTP több termékéhez is felhasználta, így később olyan résztvevők is megértették, akik nem voltak jelen a létrejötténél.

Moduláris gondolkodás

A fentiekben leírt rendszerek, az Atomic Design és a Full stack design system alapvetően komplexebb problémákra szolgálnak válaszul. A moduláris gondolkodás azonban kissebb alkalmazások vagy honlapok esetében is alkalmazható. A lényeg, hogy ne az egyes oldalak elemeit próbáljuk megtervezni egymás után, hanem az egész alkalmazáson átívelő patterneket tervezzünk. Vagy akár az alkalmazásunkon túlmutató keretrendszert. És mindig használjunk szimbólumokat a munkánk megkönnyítésére. ✨

Ezen mentalitás legnagyobb előnye, hogy végeredményként egy konzisztens alkalmazást kapunk és később könnyen módosíthatjuk a létrehozott patterneinket.