Visily je nástroj na rýchle vytváranie wireframov a prototypov aplikácií a webov. Wireframe je zjednodušený náčrt obrazovky, ktorý ukazuje rozloženie prvkov bez zameriavania sa na finálny vzhľad. Visily sa snaží tento krok urobiť dostupný aj ľuďom, ktorí nie sú dizajnéri, a to pomocou hotových komponentov a funkcií s umelou inteligenciou.
Tento článok vysvetľuje, kedy sa Visily oplatí, ako ho použiť a čo od neho nečakať. Podmienky a funkcie sa môžu zmeniť, preto ich skontrolujte na oficiálnom webe.
Wireframe ako prvý krok
Mnohé projekty sa skomplikujú tým, že sa o vzhľade produktu začne diskutovať až po zložitej práci. Wireframe tomu predchádza. Ukáže, aké obrazovky budú existovať, čo na nich bude a ako sa medzi nimi používateľ pohybuje, a to bez ohľadu na farby a ilustrácie.
Visily je určený pre produktových manažérov, analytikov, zakladateľov a dizajnérov, ktorí chcú tento krok urobiť rýchlo. Hodí sa tímom, ktoré sa potrebujú dohodnúť na štruktúre skôr, než sa začne vizuálny dizajn alebo programovanie.
Nie je to nástroj na finálnu kresbu značky, ale na vecnú diskusiu o rozložení a toku používateľa.
Ako nástroj pracuje
V editore skladáte obrazovky z hotových prvkov, ako sú navigácia, tabuľky, formuláre, karty či tlačidlá. Tie môžete presúvať a upravovať. Navyše sú k dispozícii funkcie s umelou inteligenciou, ktoré všeobecne dokážu:
- vytvoriť obrazovku z textového popisu,
- previesť náčrt alebo snímku obrazovky na upraviteľný návrh,
- ponúknuť rozloženie pre typické typy stránok, napríklad prihlásenie či prehľad,
- prepojiť obrazovky do klikateľného prototypu.
Rozsah funkcií sa mení, preto aktuálnu ponuku preverte na oficiálnom webe.
Súčasťou je zdieľanie. Návrh môžete poslať kolegom alebo klientom, ktorí do neho pridajú komentáre. Takto sa spätná väzba nestratí v e-mailoch.
Kedy sa Visily hodí
- Prvý návrh internej aplikácie. Napríklad prehľad zákaziníkov a formulár na pridanie nového záznamu.
- Podklad pre výberové konanie dodávateľa. Wireframe ukáže, čo presne potrebujete.
- Spoločná diskusia v tíme. Vidíte, čo kto myslí pod pojmom prehľad.
- Test s používateľmi. Klikateľný prototyp si môžu vyskúšať ľudia z cieľovej skupiny.
- Školenie a výučba. Študenti sa učia navrhovať rozhrania bez nutnosti ovládať zložité nástroje.
- Rýchle skúmanie variantov. Tri rôzne usporiadania úvodnej stránky za jedno popoludnie.
Ako začať
- Zaregistrujte sa na oficiálnom webe a vytvorte projekt.
- Napíšte, čo bude produkt robiť, kto ho bude používať a aké obrazovky potrebujete. Dajte si záležať na stručnom a presnom popise.
- Prezrite si vygenerované obrazovky a odstráňte prvky, ktoré nepotrebujete.
- Doplňte skutočné názvy polí, tlačidiel a popisov.
- Prepojte obrazovky tak, aby ste prešli hlavný scenár, napríklad od prihlásenia po vytvorenie záznamu.
- Zdieľajte prototyp a zbierajte komentáre.
- Z komentárov spravte zoznam zmien a upravte návrh.
Tipy pre lepšie výsledky
- Najprv zapíšte hlavné úlohy používateľa, až potom navrhujte obrazovky.
- Držte sa jednoduchosti. Wireframe má byť zrozumiteľný, nie ozdobný.
- Používajte skutočný obsah, nie odseky zástupného textu. Zistíte, či sa vám zmestí.
- Dbajte na stavy obrazoviek: prázdny zoznam, chyba, načítavanie a úspešné uloženie.
- Prototyp ukážte človeku, ktorý produkt nevidel, a pozorujte, kde váha.
- Neprijímajte vygenerované rozloženie bez preskúmania. Skontrolujte poradie prvkov a logiku.
- Zachovajte konzistenciu, napríklad rovnaké názvy akcií na všetkých obrazovkách.
Obmedzenia a riziká
Visily je nástroj na koncepty. Vygenerované obrazovky nemusia zodpovedať požiadavkám prístupnosti alebo zvyklostiam vašej cieľovej skupiny. Používateľské testovanie nenahradí.
Ako pri každom cloudovom nástroji, citlivé návrhy a interné procesy ukladáte na servery tretej strany. Pred nahraním dôverných materiálov si prečítajte podmienky ochrany údajov.
Nástroj je pohodlný pri jednoduchších projektoch, ale pri rozsiahlych systémoch s veľkým počtom obrazoviek a komponentov môže byť organizácia náročnejšia. Pri nahrávaní cudzích snímok dbajte, aby ste nekopírovali chránený dizajn.
Pre koho nie je vhodný
Ak potrebujete detailný vizuálny dizajn s vlastným dizajnovým systémom, vhodnejšia je Figma alebo Penpot. Ak je cieľom zverejnený web, pozrite sa na Framer. Ak hľadáte nástroj na plagáty a príspevky na sociálne siete, siahnite po Canve.
Alternatívy
- Uizard ponúka podobný prístup, návrh z textu alebo náčrtu.
- Stitch od Googlu generuje návrhy rozhraní z popisu.
- Figma je vhodná, keď potrebujete prejsť od wireframu k finálnemu dizajnu.
Príklad: wireframe internej aplikácie
Predstavte si, že malá firma chce nahradiť tabuľku so zákazníkmi jednoduchou webovou aplikáciou. Postup vo Visily môže vyzerať takto.
Zoznam obrazoviek
Najprv si zapíšete, čo potrebujete: prihlásenie, zoznam zákazníkov s vyhľadávaním, detail zákazníka a formulár na pridanie nového záznamu. Štyri obrazovky stačia na to, aby si tím vedel predstaviť celok.
Rozloženie a obsah
Pri zozname rozhodnete, ktoré stĺpce sú dôležité: meno, firma, telefón, posledný kontakt. Pri formulári určíte povinné polia a čo sa stane po uložení. Takéto drobnosti sa pri slovnom zadaní často vynechajú a neskôr spôsobia spor.
Test s kolegom
Dáte prototyp kolegovi z obchodu a poviete mu, aby pridal nového zákazníka. Ak sa zasekne, vidíte, kde je rozloženie nejasné. Takto zistíte problémy ešte predtým, než niekto napíše riadok kódu.
Ako Visily zapadá do širšieho procesu
Wireframe je len jeden zo stupňov. Typická cesta vedie od nápadu cez hrubý náčrt, wireframe, vizuálny dizajn a vývoj až po testovanie. Visily pokrýva skorú časť, kde sa rozhoduje o štruktúre. Neskôr je rozumné preniesť výsledok do nástroja na vizuálny dizajn alebo priamo odovzdať vývojárom ako podklad.
Praktická rada: nenechajte sa zlákať zdokonaľovaním wireframu. Ak ste na tretej verzii a stále meníte rozstupy, vyrazte medzi používateľov. Hodnota wireframu je v rýchlej spätnej väzbe, nie v dokonalosti.
Čo si pripraviť pred prvým použitím
Ušetríte si čas, ak už pred otvorením nástroja viete odpovedať na niekoľko otázok. Kto bude produkt používať a v akej situácii? Aké tri najdôležitejšie úlohy má zvládnuť? Z akých údajov sa obrazovky skladajú? Ak máte existujúcu tabuľku alebo starý systém, odfoťte si jeho obrazovku a zapíšte, čo vás na ňom obťažuje. Tieto poznámky sa vám hodia pri písaní popisu pre umelú inteligenciu aj pri neskoršom hodnotení výsledku.
Časté otázky
Čo je rozdiel medzi wireframom a prototypom?
Wireframe je statický náčrt rozloženia. Prototyp je prepojenie obrazoviek, v ktorom sa dá klikať a vyskúšať si správanie.
Je potrebná znalosť dizajnu?
Nie je nevyhnutná. Pomôže však základné porozumenie tomu, ako ľudia používajú aplikácie.
Môžem návrh odovzdať vývojárom?
Áno ako podklad na diskusiu a špecifikáciu. Presné možnosti exportu preverte na oficiálnom webe.
Nahradí Visily dizajnéra?
Nie. Urýchli prvé kroky, ale rozhodnutia o použiteľnosti a značke vyžadujú ľudský úsudok.