Unikátny web na jednom Dizajn systéme · dlhodobá spolupráca

Active24.cz

Jeden dizajnový systém pre celé portfólio hostingových značiek

Pre Active24, jednu z najväčších hostingových spoločností v Česku, sme vytvorili nový web postavený na dizajnovom systéme, ktorý sme navrhli pre celé portfólio značiek medzinárodnej hostingovej spoločnosti.

Jeden funkčný základ, konfigurovateľný dizajn pre každú značku. Informácie o produktoch sa synchronizujú na web priamo z centrálneho systému spoločnosti.

active24.cz

Ako projekt vznikol

Implementácia vznikla na základe dodaného dizajnu vo Figme, pôvodne pripraveného pre nový web inej značky skupiny. Ten projekt zostal dočasne pozastavený, no dizajn bol navrhnutý tak premyslene, že sa z neho dal odvodiť generický dizajnový systém pre všetky hostingové značky spoločnosti.

Celá myšlienka: dizajnový systém postavený na premenných naprieč komponentami, ktorý sa dá konfigurovať rovnako vo Figme ako v kóde. Každá značka tak získa unikátny vizuál na tom istom funkčnom základe, bez duplikovania kódu.

Active24.cz bol prvý web spustený do prevádzky na tomto základe. Podľa upraveného dizajnu sme preň dorobili projektové bloky na mieru a overili tak, že celý koncept funguje aj v ostrej prevádzke.

Myšlienka platformy

Dizajn vo Figmedizajnový systém postavený na premenných

premenné ↔ tokeny 1:1

Generická témajeden funkčný základ pre všetky značky

rebrand = konfigurácia

Weby značiekunikátny dizajn, spoločné funkcie

Ako to funguje

Web beží na WordPress multisite — jedna inštalácia obsluhuje viacero značiek a krajín. Redakčnou vrstvou je natívny blokový editor Gutenberg s desiatkami vlastných blokov a celý vizuál je odvodený zo stoviek dizajnových tokenov, ktoré zrkadlia premenné z Figmy.

Zdroj dizajnu

Figmadizajnový systém s premennými pre každú značku

470+ tokenov
zrkadlených 1:1

Platforma

WordPress multisitegenerická téma · 55 vlastných blokov · child témy značiek

živé ceny
cez API

Dáta

Centrálne systémy spoločnostiprodukty, ceny hostingov a domén, košík

prvý naživo

Značky

Active24.czactive24.czactive24.eu + ďalšie značky skupiny

Jeden funkčný základ, unikátny dizajn pre každú značku a informácie vždy aktuálne z centrálnych systémov.

Technické highlighty

Dizajnový systém ako vo Figme

Vizuál celého webu je odvodený zo 470+ dizajnových tokenov - farby, typografia, tlačidlá, komponenty. Jeden súbor s premennými prefarbí frontend, editor aj administráciu naraz. Rebrand pre novú značku je konfigurácia, nie prepisovanie webu: dizajn Active24 vznikol z generického základu, len zlomkom kódu navyše.

55 vlastných Gutenberg blokov

Redakcia skladá stránky z natívnych blokov - hero sekcie, produktové karty, porovnávacie tabuľky, FAQ či scroll-animácie. Bloky majú responzívne nastavenia pre 7 breakpointov priamo v editore, ktoré sa kompilujú na konrétne štýly v kóde. Žiadne nadbytočné CSS, žiadne rozbité stránky.

Živé informácie z centrálnych systémov

Ceny hostingov, serverov a stoviek domén sa neupravujú lokálne, ale sú na web naživo synchronizované z centrálnych API systémov. Konfigurátory prepočítavajú cenu okamžite, a prepočítavajú sa bez načítania stránky. Všetko je pritom rýchle a responzívne.

Jedna platforma, viac značiek a krajín

WordPress multisite so zdieľaným kódom, mediálnou knižnicou a prepojenými jazykovými verziami. Českú a európsku verziu Active24 obsluhuje ten istý kód s lokalizovaným obsahom a nová značka skupiny sa pridáva ako ďalšia konfigurácia tej istej platformy.

Redakcia v hlavnej úlohe, prevádzka bez kompromisov

Marketingový tím skladá kampaňové stránky sám - z blokov s nastaveniami pre každú veľkosť obrazovky, s A/B testovaním variantov stránok zabudovaným priamo v platforme. Pod kapotou sa o výkon stará viacúrovňové cachovanie, optimalizácia obrázkov a automatizované nasadzovanie s review prostrediami — web hostingovej spoločnosti si nemôže dovoliť výpadok.

Priebeh spolupráce

Implementáciu sme dodali na základe dizajnu vo Figme v úzkej spolupráci s interným tímom klienta. Od spustenia web dlhodobo rozvíjame. Pribúdajú kampaňové bloky na mieru, nové produktové stránky a platforma sa medzitým stala základom pre ďalšie weby klienta.

Dizajn dodaný vo FigmeAgilný vývojSpolupráca s interným tímomDlhodobý rozvoj a podpora

Výsledok

1.web skupiny spustený
na novom základe

55vlastných blokov
pre redakciu

470+dizajnových tokenov
zrkadlených z Figmy

2krajiny
z jedného kódu

Active24.cz overil celý koncept v ostrej prevádzke: unikátny dizajn značky na spoločnom funkčnom základe, informácie z centrálnych systémov a redakcia, ktorá si web spravuje sama. Platforma dnes slúži ako základ pre ďalšie weby kienta. Pridanie novej značky je otázka konfigurácie dizajnových parametrov, nie programovanie nového webu.

Stránka registrácie domén Active24 s overením dostupnosti domény — Registrácia domén s overením dostupnosti v reálnom čase.

Naše ďalšie projekty

Sharp Consumer Electronics

Jedna platforma. 12 európskych trhov. Tisíce produktov.

Prevzali sme pomalý produktový web značky Sharp a prestavali ho na rýchlu multisite platformu s takmer okamžitým synchronom dát z PIM cez Typesense.

Zobraziť štúdiu

Úvodná stránka webu Sharp Consumer Electronics

Across Connect

Online účet s mobilnou aplikáciou

Pre nášho klienta Across, ktorý sa venuje privátnemu investovaniu, sme vytvorili aplikáciu Across Connect.

Zobraziť štúdiu

Active24.cz

Ako projekt vznikol

Ako to funguje