Design system pro eshopy VACS

VACS trading
UX/UI designer, frontend developer
2019-2020

Co se dělalo

Design system pro sadu eshopů v několika designech a mnoha jazycích.


Jaký byl problém & co nás napadlo

V průběhu vyvíjení designu, kódu a eshopové implementace došlo k mnoha neduhům v rámci hektického vývoje.

Frontend se na mnoha místech stával nekonzistentní a v rámci komponent se objevilo mnoho redundance, čímž se náklady na úpravy zbytečně navyšovaly.


Má role

UX/UI designer, frontend developer.

Řešil jsem:

  1. Revizi všech UI prvků;
  2. výběr nástroje a styl design systemu;
  3. následnou implementaci.

Ideace

Již dříve jsem na projektu pracoval jako UX a UI designer s následným kódováním šablon v klasickém HTML (Jade/Pug) a CSS. Byl jsem si v průběhu vědom, že bude nutné v budoucnu udělat revizi. Chtěl jsem udělat design system, který bude mít vygenerovanou knihovnu, kdy použiju atomický přístup skladby komponent.

Vytipovali jsme si ze seznamu duplicitních komponent ty, které jsme chtěli dále používat. Dále postupně vytvářeli



Řešení & výsledek / design

Generátorem knihovny UI elementů a celého design systemu je Fractal. Pomocí templatovacího systému nunjucks jsou tvořeny HTML fragmenty na šabloně Bootstrap 4, ze kterých se pak skládají celky dle metodiky atomického designu (atoms, moleculs, organisms, templates, pages).

Já jsem navíc přidal tokeny. Výchozí axiomy design systemu jako jsou např.: barva, písmo, stíny, mezery,…

Aktuální progres je možné vidět zde: soulwasted.github.io/bags/
Jeden z mnoha eshopů např. zde: chci-vysavat.cz


Jakým problémům jsme čelili

Nejsem ryzí developer, proto rozjetí Fractalu nebo snadné. Správné verze node.js, NPM, nastavení cest a další ubraly z počátku mnoho času.

Dále vnořené JSONy ne vždy spolu komunikují a data nejsou generována správně. To je však problém pojetím definování komponent jako metakomponent.

Projekt je časově náročný. Jako one man show je rozhodně během na dlouhou trať.


Přínos pro klienta

Zákazník si sám může proklikávat jednotlivé elementy. Od jednoduchých prvků jako buttony, přes bloky, šablony až po celé stránky.

V případě kodéra a programátora je zachována modularita díky atomičnosti komponent. Tzn. jedna věc nebude vypadat na více místech pokaždé jinak.


Testimonial is comming.

Andrej Kašícký


Co mi projekt přinesl

Jsem schopný generovat design system pomocí Fractalu s atomickým přístupem.

Mimo naučení dalších technologií (nunjucks, json, nvm,…) vím, že je klienta nutné připravit na dlouhý proces, že programátor bude muset změnit mnoho komponent a vazby mezi Bootstrapem 3 a 4 ne vždy fungují. Stejně tak závislosti na konkrétních verzích jQuery knihoven. Kdy se jQuery stalo v našem projektu opravdovým vendor-lockem pro mnoho komponent.

< zpět na výpis projektů