Ako najvhodnejšie riešenie sa nám v tomto kontexte osvedčil Webflow. Vo Webflow som už vytvoril viacero webových stránok a z technického hľadiska dokáže pokryť väčšinu potrieb menších aj stredných klientov. Problém však nastáva v momente, keď klient očakáva custom dizajn, no zároveň nie je priestor na plnohodnotný dizajnový proces zahŕňajúci detailné wireframy a následné high fidelity prototypy.

Cieľom tejto prípadovej štúdie je ukázať, ako som sa pokúsil tento problém vyriešiť a ako som dokázal výrazne skrátiť čas strávený na tvorbe layoutov bez toho, aby tým utrpela kvalita výsledku.

Aké bolo zadanie

Celý proces najlepšie ilustrujem na projekte pre spoločnosť SULKO. Ide o jedného z najväčších českých výrobcov okien, dverí a fasádnych systémov. Klient potreboval nový web, ktorý by si dokázal kompletne spravovať interne. Vývoj vlastného CMS systému však neprichádzal do úvahy z dôvodu vysokých nákladov.

Zadanie spočívalo najmä v migrácii existujúceho webu na nový systém a zároveň v čiastočnom redizajne webových stránok. V tejto prípadovej štúdii sa sústredím konkrétne na fázu návrhu layoutov a na to, ako som tento proces urýchlil v prostredí Figmy aj Webflow.

Aký bol problém

Do procesu boli zo strany klienta zapojené aj dve externé tretie strany. Jedna riešila novú brand stratégiu a druhá pracovala na novej vizuálnej identite. Rozhodli sme sa tieto subjekty zapojiť do tvorby UI už od úplného začiatku, aby mali prehľad o všetkých rozhodnutiach a mohli do procesu aktívne vstupovať.

To však znamenalo veľké množstvo dlhých meetingov a opakovaných iterácií. Niektoré veci sme prerábali viackrát, než sme pôvodne plánovali. Spätne to však hodnotím ako správne rozhodnutie, pretože výsledok bol vďaka tomu konzistentnejší.

Ďalším zásadným faktorom bol klientov požiadavok na zmluvu, v ktorej mal mať vizuálne zadefinovaný kompletný obsah webu. To znamenalo, že každá stránka musela mať jasne popísanú štruktúru, layout, vizuálny návrh aj správanie jednotlivých prvkov. Aj vďaka tomu, bolo potrebné "rozkresliť" web do maximálneho možného detailu.

Celý projekt prebiehal v horizonte štyroch mesiacov. Na prvý pohľad sa to môže zdať ako dostatočný čas, no v realite išlo o veľmi intenzívne týždňové šprinty, kde sa paralelne riešila stratégia značky, vizuálna identita aj samotný web. Rýchlosť a efektivita boli kľúčové.

Ako som ten problém riešil

Pri sledovaní nových nástrojov v kontexte AI boomu som narazil na nástroj Relume. Relume sa síce prezentuje ako AI site builder, no pri jeho testovaní som zistil, že jeho najväčšia pridaná hodnota spočíva v rozsiahlej knižnici tisícok hotových layoutov pre rôzne typy stránok.

Tieto layouty sú dostupné pre Figmu, Webflow aj React, čo z neho robí veľmi flexibilný nástroj. Scope riešenia bol vďaka tomu pomerne jednoduchý. Najskôr som vychádzal z pôvodného webu, čo bola jedna z požiadaviek zadania. Rozpísal som jednotlivé stránky, ich sekcie, obsah a správanie.

Následne som prešiel k tvorbe layoutov. V Relume som pre každú sekciu vybral layout, ktorý bol obsahovo najbližšie klientovým potrebám. Samozrejme bolo nutné robiť manuálne úpravy, no základná kostra bola hotová veľmi rýchlo. Veľkou výhodou bolo, že som vedel klientovi v krátkom čase ukázať aj responzívne správanie stránok a interakcie, keďže každý layout je možné detailne inspectnúť.

Po schválení základných layoutov som aplikoval vizuálnu identitu na low fidelity návrhy. Keďže všetko fungovalo na princípe komponentov a štýlov, preštýlovanie bolo relatívne rýchle. Spomalenie nastalo až v momentoch, keď bolo potrebné pri niektorých sekciách odísť od klasických layoutových vzorcov.

Finálna fáza prebiehala už priamo vo Webflow. Aj tu sa Relume ukázalo ako veľmi užitočné, keďže poskytuje duplikát ich styleguidu. Všetky základné komponenty sú prepojené na premenné a triedy v štruktúre Client First, čo výrazne uľahčuje samotnú implementáciu.

Čo som si z toho odniesol

Táto skúsenosť mi opäť potvrdila, aké dôležité je nevymýšľať koleso odznova. Používanie existujúcich a overených layoutových vzorcov dokáže ušetriť veľké množstvo času bez negatívneho dopadu na kvalitu.

Zároveň som si uvedomil, aké kľúčové je počkať na finálnu vizuálnu identitu. Jeden z prvých high fidelity konceptov vychádzal zo starej identity, ktorá nefungovala dobre v online prostredí, najmä kvôli fontu a gradientom. Našťastie som v správny moment dostal draft novej identity a mohol som návrhy upraviť.

Zámerne som tiež nevyužil generatívnu AI funkcionalitu Relume na tvorbu sitemap. Spätne to hodnotím ako správne rozhodnutie. Hoci sa to na prvý pohľad môže zdať ako nevyužitý potenciál, v praxi by mi to pravdepodobne prinieslo viac manuálnej práce navyše. Relume zatiaľ podľa mojich skúseností nie je v bode, kde by dokázalo zmysluplne generovať informačnú štruktúru webu.

‍