Dizajn

Relume

Plán a wireframy webu z jednoduchého popisu.

Relume je nástroj, ktorý pomáha naplánovať web skôr, než začnete s dizajnom. Z jednoduchého popisu projektu vytvorí návrh štruktúry stránok, tzv. mapu webu, a k nej hrubé rozloženie jednotlivých stránok, takzvané wireframy. Súčasťou je knižnica pripravených blokov a komponentov, z ktorých sa dá skladať webový návrh. Cieľom je skrátiť úvodnú fázu, v ktorej sa tím ešte len snaží dohodnúť, čo na webe má byť.

Je určený webdizajnérom, freelancerom, štúdiám a marketingovým tímom, ktoré často začínajú nové weby a chcú sa vyhnúť opakovaniu rovnakých úvodných krokov. Pomôže aj ľuďom, ktorí si web objednávajú a potrebujú sa s dizajnérom zhodnúť na rozsahu.

Čo Relume rieši

Začiatok webového projektu býva chaotický. Klient má predstavu, dizajnér ďalšiu, vývojár tretiu. Pomerne často sa stráca čas pri otázke, ktoré stránky budú existovať, čo bude na každej a v akom poradí. Relume túto fázu zrýchľuje: dá vám konkrétny návrh, o ktorom sa dá diskutovať, kritizovať ho a upravovať.

Nástroj nenahrádza dizajnéra. Dodá štruktúru a hrubý návrh, ktorý je potrebné doladiť, rozšíriť o značku, obsah a vizuálnu identitu. Neskôr sa návrh dá preniesť do ďalších nástrojov, v ktorých sa tvorí detailný dizajn alebo hotový web. Zoznam podporovaných nástrojov a spôsob prenosu overte na oficiálnom webe.

Ako to funguje

Popíšete projekt: o aký typ webu ide, komu je určený a čo má dosiahnuť. Nástroj z toho vytvorí mapu webu, teda stromovú štruktúru stránok, ktorú môžete upravovať: presúvať, pridávať, odoberať. Potom pre jednotlivé stránky navrhne sekcie, napríklad úvodný banner, prehľad služieb, referencie či kontakt, a poskladá z nich wireframy.

Wireframe je zjednodušený náčrt stránky bez finálnych farieb a obrázkov. Slúži na dohodu o rozložení a obsahu, nie o vzhľade. Takýto návrh vás nenúti riešiť detaily príliš skoro.

Kedy sa hodí

  • Úvodná konzultácia s klientom, na ktorej chcete rýchlo ukázať návrh štruktúry webu.
  • Plánovanie nového webu firmy, ktorý má obsahovať viac služieb a podstránok.
  • Prepracovanie existujúceho webu, keď potrebujete zhodnotiť a usporiadať stránky nanovo.
  • Príprava podkladov pre vývojára alebo pre nástroj ako Webflow či Framer.
  • Rýchle porovnanie dvoch variantov štruktúry pred rozhodnutím.
  • Školský alebo interný projekt, kde sa učíte navrhovať weby od základov.

Ako začať krok za krokom

  1. Otvorte oficiálny web nástroja, vytvorte si konto a zistite, aké funkcie sú dostupné na začiatok.
  2. Pripravte si stručné zadanie: cieľ webu, cieľová skupina, hlavné služby alebo produkty a čo majú návštevníci urobiť.
  3. Zadajte popis a nechajte vygenerovať mapu webu.
  4. Prejdite navrhnuté stránky, odstráňte zbytočné a doplňte chýbajúce. Zamyslite sa nad poradím v navigácii.
  5. Vygenerujte wireframy a upravte sekcie na jednotlivých stránkach podľa obsahu, ktorý skutočne máte.
  6. Návrh prediskutujte s tímom alebo klientom a potom ho preneste do nástroja, v ktorom budete pokračovať.

Tipy pre lepšie výsledky

Čím lepšie zadanie, tým lepší výstup. Namiesto všeobecného "web pre firmu" napíšte, čo firma robí, komu predáva, aké služby ponúka a čo má návštevník na webe urobiť, napríklad zavolať či objednať. Konkrétnosť výrazne zlepšuje návrh.

Vychádzajte z reálneho obsahu. Wireframe s ideálnymi sekciami je k ničomu, ak nemáte texty ani fotografie, ktoré by ich naplnili. Pri plánovaní myslite na to, čo máte alebo dokážete pripraviť.

Ostaňte pri minime. Je lákavé nechať si vygenerovať veľa stránok, no pre malý podnik je lepšie mať päť dobrých než pätnásť prázdnych. Odstraňujte všetko, čo nemá jasný účel.

Zapojte klienta. Mapa webu je skvelý nástroj na rozhovor. Ukážte ju klientovi hneď a zistite, čo chýba. Je lacnejšie zmeniť štruktúru teraz než po dizajne.

Myslite na návštevníka. Zoradte stránky podľa toho, čo ľudia hľadajú, nie podľa toho, ako je organizovaná firma.

Obmedzenia a riziká

Návrh z nástroja je štatistický odhad toho, čo web daného typu zvyčajne obsahuje. Nepozná váš trh, vašich zákazníkov ani vašu konkurenciu, a môže navrhnúť sekcie, ktoré nedávajú zmysel. Každý návrh preto treba kriticky posúdiť.

Wireframy môžu pôsobiť podobne ako návrhy iných projektov. Ak chcete originálny web, musíte pridať vlastnú myšlienku, obsah a vizuálnu identitu.

Texty vygenerované nástrojom sú len zástupné. Nepoužívajte ich bez úprav, pretože sú všeobecné a môžu obsahovať tvrdenia, ktoré nie sú pravdivé o vašej firme.

Súkromie: do zadania nevkladajte dôverné informácie o klientovi, ktoré nechcete zdieľať s poskytovateľom služby. Pozrite si podmienky nakladania s údajmi na oficiálnom webe.

Závislosť od ekosystému: ak je dopĺňaný ďalší nástroj, skontrolujte, ako dobre sa návrh prenáša. Prenos nemusí byť bezstratový a niektoré úpravy bude treba spraviť ručne.

Pre koho nie je vhodný

Relume nie je nástroj na finálny vizuálny dizajn. Ak potrebujete návrh s farbami, písmom a ilustráciami, budete musieť pokračovať inde. Nie je ani pre ľudí, ktorí chcú hotový web na kliknutie; na to sú vhodnejšie Wix alebo Framer.

Zbytočný môže byť aj pri veľmi malých projektoch, ako je jednostránková vizitka, kde štruktúru zvládnete načrtnúť na papier za päť minút.

Zvážte aj to, že kvalita výsledku závisí od vášho zadania a od schopnosti návrh posúdiť. Bez základných znalostí o webe môže byť ťažké odlíšiť dobrý návrh od priemerného.

Alternatívy z katalógu

Na rýchle generovanie návrhov rozhraní z textu sa hodia Uizard, Visily alebo Stitch. Na detailný dizajn a prototypy je tu Figma, prípadne Penpot. Pre dokončenie hotového webu sú vhodné Webflow, Framer alebo Wix.

Časté otázky

Nahradí Relume webdizajnéra?

Nie. Rieši úvodnú fázu plánovania a hrubý náčrt. Vizuálny dizajn, obsah a doladenie ostávajú na ľuďoch.

Dá sa návrh preniesť do iného nástroja?

Nástroj ponúka spôsoby, ako návrh preniesť ďalej. Aktuálny zoznam a podmienky si overte na oficiálnom webe.

Hodí sa aj pre malý web?

Môže pomôcť, ale pri veľmi jednoduchých weboch je prínos menší. Najväčšiu hodnotu má pri weboch s viacerými stránkami.

Aké zadanie je najlepšie?

Konkrétne: účel webu, cieľová skupina, ponuka a požadovaná akcia návštevníka. Čím presnejšie, tým lepší výsledok.

Príklad: ako Relume použiť pri stretnutí s klientom

Predstavte si, že vás oslovila majiteľka malého účtovníckeho štúdia, ktorá chce nový web. Namiesto dlhého dotazníka si s ňou sadnete a spolu napíšete zadanie: štúdio ponúka vedenie účtovníctva, mzdy a poradenstvo, klientmi sú živnostníci a malé firmy a cieľom je, aby ľudia zavolali alebo vyplnili formulár. Nástroj z toho vytvorí návrh mapy webu s úvodom, službami, cenníkom, o nás, blogom a kontaktom.

Spoločne návrh prejdete. Klientka zistí, že jej chýba stránka s často kladenými otázkami, a že blog zatiaľ nechce. Úpravy urobíte priamo pri stole. Za pol hodiny máte dohodnutý rozsah, ktorý by inak zabral niekoľko e-mailov. Tento návrh potom slúži ako podklad pre ponuku, odhad práce a ako východisko pre dizajn.

Pozor, nemali by ste klientke sľúbiť, že vygenerovaný návrh je konečný. Je to len prvá verzia, ktorú treba overiť podľa skutočného obsahu a potrieb zákazníkov. Dobrým postupom je návrh po stretnutí ešte raz prejsť samostatne a pripraviť si otázky, na ktoré treba odpovede.

Otvoriť web nástroja (relume.io) ↗

Ďalšie nástroje v kategórii

Všetky →

Päť vecí o AI, ktoré treba vedieť. Každý piatok.

Bez spamu a bez hype. Odhlásenie na požiadanie cez kontakt.