Design System: mint az ikeás bútor és a szerelési útmutató

Az már szinte köztudott, hogy az olyan cégek, mint az Airbnb, az Uber vagy az IBM megváltoztatták a digitális termékek tervezésének módját. Az viszont nem feltétlenül közismert, hogy egyik legmeghatározóbb eszközük ehhez a design system. De mi az, és egyáltalán szükséged van rá?

Nem tudom pontosan itthon mennyiben jelenik meg a hpye, de az angol nyelvű designer közösségekben egy-két éve a design systems kérdés rendszeresen téma. Miután a mi csapatunk is szállít időnként design systemet, gondoltam hasznos lehet megosztani ennek a rendszernek az előnyeit.

Mivel én valahol old-school UX-es vagyok – az a fajta, aki leginkább csak a drótvázig szállít, habár ezen én is éppen változtatni próbálok UI design felé – így elsősorban holisztikusan tudom ennek a rendszernek az előnyeit ismertetni, de főleg ez is a cikk célja.

Mi az a design system?

A design system kapcsán sokféle definíció él, de általánosságban elmondható, hogy egymáshoz kapcsolódó design elemek és gyakorlatok koherensen szervezett halmaza.

Az egyik nagy részét a patternek, az ismétlődő design elemek képezik, amelyek kombinálásával végül létrehozzuk az interfészt, ide tartoznak például a gombok, interakciók, szövegmezők, ikonok, színek, vagy a tipográfia.

A design system másik fontos része a guide, ami abban segít, hogy miként kell használni ezeket a design patterneket a gyakorlatban.

Még egyszerűbben a design system olyan, mint az ikeás bútor: benne vannak az elemek és a használati utasítás is. Ugyan elvben a használati útmutató nélkül is van rá esély, hogy összerakd a bútort, de elég nehéz dolgod lesz, és a végeredmény minősége is kétséges.

Amikor megjelent a web, a weboldalak struktúráját erősen a print ihlette, ez pedig azt eredményezi, hogy a mai napig gyakran oldalakban gondolkodunk. Pedig valójában nem oldalakat kell terveznünk, hanem komponenseket kell elrendeznünk. A webdesign munka erről szól, s a design systems egy erre adott helyes válasz.

Egy nagyon jó és okkal gyakran hivatkozott design system példa a Google Material Designja:

Ez a fajta design system egy referencia siteon érhető el aminek számos előnye van, de nyilván ez már legprofesszionálisabb szintet jelenti.

A design system ugyanaz, mint a style guide?

Könnyen össze lehet téveszteni a design systemet a style guideal, és néha össze is szokták.

A style guide a brand gyakorlati alkalmazásáról szól, arra ad útmutatót, hogyan kell a márka vizuális elemeit – logót, színeket – használni, és esetenként a tone of voicet is tartalmazza. Tipikus outputja egy branding projekteknek, és néha publikus anyag.

Ezzel szemben a design system elsősorban belső használatra, a cég UI és UX designerei számára készül, és megkönnyíti számukra a design koncepció következetes alkalmazását a digitális termékekben.

Például egy UX/product designer számára működhet úgy, hogy a kutatás után kialakított drótváz alapján a design system segítségével össze tudja rakni a prototípust a rendszer blokkjaiból, anélkül, hogy a design atomi szintű elemeivel foglalkoznia kellene, így könnyen és gyorsan iterálhat.

A design systems előnyei

Minden bizonnyal nem lehet véletlen, hogy tech ipar jelenlegi vezető vállalatai, mint például a Google, Uber vagy IBM masszív design systemeket építettek fel.

De először nézzük a fő előnyt a felhasználó szempontjából, ami lényegében egy konzisztensebb élmény. Ahogyan az emberek navigálnak a termék egyik oldaláról a másikra, vagy egyik termékből a másikba igen nagyra értékelik, ha az élmény mindenütt hasonló lesz.

Minden egyes alkalommal, ha felhasználónak újra kell tanulnia egy interfész elem működését, nagyon bosszús lesz. Ha például a termékeben három helyen lehet dátumot választani és mindhárom máshogy néz ki, az a felhasználónak eléggé rosszul fog esni.

Ha viszont a dátumválasztó mindenütt ugyanolyan, akkor a felhasználó könnyebben és gyorsabban fogja használni, ami nemcsak neki, hanem végső soron a biznisznek is jó lesz.

Szóval a design systems a felhasználó szempontjából is igen előnyös, de mégis a legtöbbet a cégek a belső működésük tekintetében profitálhatnak belőlük. A design team például gyorsabban és jobb minőségben tud dolgozni, mert a rendszer lecsökkenti a felesleges köröket. Nem kell ugyanazt a komponenst tizenötödjére is kitalálni. Azaz a design system abban segít, ami a cégnek az egyik legfontosabb: időt és pénzt takarít meg.

Ugyancsak elég nagy előny, hogy a design systems megteremti a közös nyelvet, ugyanis nélküle sajnos elég gyakori, hogy a design, a fejlesztés, és a product team ugyanazt a komponenst máshogyan hívja. Ha van egy design system, akkor rendelkezésre áll az a referencia pont, amit minden team használhat, és az újonnan érkezők is könnyen képbe kerülhetnek.

Hogyan kell strukturálni?

Ahány ház annyi szokás, ahány designer annyiféle rendszer. Így sztenderd felépítése nincs is a design systemeknek, de valószínűleg az alapséma nagyon hasonló mindenütt, például ahogyan az Atomic Design nevű elegáns modellben megjelenik. Hogy megértsük ezt a rendszert kanyarodjunk vissza az általános iskolai kémiához.

A legfontosabb alapismeret, hogy mindent a világon atomok alkotnak. Az atomok pedig különféle kombinációkban molekulákba rendeződnek, és ezekből jönnek létre a viszonylag összetett organizmusok.

Az atomic design szerint lényegében bármilyen interfészt le tudunk bontani atomi szintű elemekre, például labelekre, inputokra, gombokra. A modell szerint a UI-t összességében atomok, molekulák, templatek és oldalak alkotják.

Az atomok az alapvető blokkok a UI-ban, például a labelek, input mezők, gombok, tipográfia, képek, tehát a UI nyersanyagai.

A molekulák atomok blokkjaiból állnak, valamilyen konkrét cél érdekében. Például egy label, egy input és egy gomb közösen alkothatnak egy keresőmezőt.

Az organizmusok már viszonylag összetettebb UI komponensek, amelyek molekulákból és/vagy atomokból és/vagy más organizmusokból állnak. Tehát az interfész különálló részeit alkotják:

Ez a fejléc organizmus egy kereső mező molekulából, logó atomból és elsődleges navigációs molekulából áll

A következő szint a template, ami organizmusok kombinációja egy layouton.

Legvégül jutunk el a page szintre, ami lényegében valódi tartalmakkal benépesített templateket jelent. Nyilvánvalóan ez egy nagyon fontos pont, hiszen az oldallal fog találkozni végül a felhasználó.

Az atomic design tehát egy hasznos design és fejlesztési metódus, bár elsősorban egy mentális modell, ami design systemek esetén és a gyakorlati UI design során is remekül használható.

Hogyan kezdj hozzá egy design sytstem projekthez?

A kiszervezett design projekteknél – vállalat + besszállító cég/grafikus felállásban – általában a grafikai tervezés egyik minimum kimenete egy UI kit kell, hogy legyen. A kulcsképernyők megtervezése és jóváhagyása után válogatják le a designerek az elemeket, és ez képezi az alapját a design sytsemnek. Azaz már “csak” a gudieot kell kidolgozni, hogy rendszerről beszéljünk.

Egy in-house design csapat esetében viszont célszerű messzebbről indítani a projektet. A jelenlegi állapotot feltérképezése egy jó alapot adhat, ehhez van két egyszerű gyakorlat.

A CSS stats segítségével le lehet gyűjteni egy oldal összes CSS elemét. Érdemes ezt megejteni a saját oldalra is és hamar ki fog esni, ha oldal tele van felesleges stílusok tömegével.

A másik jó kezdés a interface inventory lehet. Némileg hasonló művelet mint a kontent inventory, csak a UI-ra, azaz screenshotok formájában összegyűjtjük a UI elemeket. Egy redesign projekt előtt például hasznos lehet, ha egy régi nagy weboldalról van szó, akkor nagyon szépen ki fogja adni az inkonzisztens elemek sokaságát. Ez pedig rámutat a jelenlegi UI struktúra hiányosságára és igazolhatja a design system szükségességét.

Referenciák

Az Atomic Design írója, Brad frost készített egy rövid kurzust a design sytstemekről.

A Figma egy külön weboldalt indított a témáról, számos forrással.

Ingyenesen letölthető az InVision egyébként eléggé részletes kézikönyve a design systemekről.

Számos design system egy helyen a GitHubon.

Habár inkább nyomtatott stlye guide gyűjtemény, zseniális inspiráció lehet ez az oldal, ahonnan amerikai klasszikus standards manualok, mint például a NASA design kézikönyvének újranyomtatása rendelhető meg.

Boros Norbert

Strategic Design Consultant | Executive Consultant | Facilitator

Cikkeimben elsődlegesen a designt mint szemléletmódot, különösképpen az emberközpontúságot igyekszem átadni.

Vélemény, hozzászólás?