Wireframing v Figmě — od skici k interaktivnímu prototypu
Návod jak vytvořit wireframy, které se dají přeměnit na pracovní prototyp bez přepisu. Jsou to ty nejzákladnější kroky, kterými začíná každý dobrý projekt.
Čtěte průvodce
Základy UI a UX designu pro komerční webové stránky
Praktické návody na mapování cesty uživatele, wireframing a prototypování v Figmě, vytváření vizuální hierarchie a konverzní design pro české publicum.
12
Průvodců
50+
Metod
100%
Praktických
Naše téma
Co se naučíte
Každý průvodce obsahuje konkrétní techniky, které můžete aplikovat hned příští den na svém projektu.
Mapování cesty uživatele
Naučte se, jak pochopit, co chce váš uživatel. Není to složité — stačí poslouchat a poznamenat si, kde se frustrují.
Wireframing a prototypování
Od skici na papíru až po interaktivní prototyp v Figmě. Kroky, které se dají hned zopakovat bez přepisu kódu.
Vizuální hierarchie
Návštěvník má pár sekund. Jak se ujistit, že vidí nejdůležitější prvek jako první? Jednoduché techniky pro všechny.
Konverzní design
Nejedná se o prodej — jde o to, aby návštěvník udělal to, co od něj chcete. Design, který funguje na českou publiku.
Mobilní design
Většina návštěv přijde z mobilu. Jak udělat design, který funguje na všech zařízeních bez kompromisů.
Přístupnost
Přístupný design není přidavka — je to základní povinnost. Návody na to, jak to udělat správně bez složitosti.
Návody a články
Základy UI a UX designu pro komerční webové stránky
Praktické průvodce, které můžete číst v libovolném pořadí. Každý je samostatný, ale dohromady vytváří kompletní obrázek.
Mapování cesty uživatele — jak pochopit vaši publiku
Metodologie, kterou používáme k tomu, abychom věděli, co uživatel potřebuje. Není to složité — stačí poslouchat a poznamenat si, kde se frustrují.
Čtěte průvodce
Vizuální hierarchie — proč pořadí prvků rozhoduje
Návštěvník má pár sekund. Jak se ujistit, že vidí nejdůležitější prvek jako první? Jednoduché techniky, které každý může zvládnout.
Čtěte průvodce
Zpětná vazba
Co si o nás myslí ostatní
“Když jsem se začal věnovat designu, vůbec jsem nevěděl, kde začít. Tyto průvodce mi pomohly pochopit, proč se věci dělají tak, jak se dělají. Nejlepší je, že to není teorii — jsou to skutečné příklady, které se dají hned použít.”
— Petr, 28
“Pracuju jako projektmanager a design mě nikdy není zajímal. Ale po přečtení článku o mapování cesty uživatele jsem pochopil, že to není jen o krásných barvách. Teď můžu lépe komunikovat s našimi designery.”
— Alena, 35
“Jsem si jistá, že bych se toho všeho mohla naučit z videa na YouTube, ale tady je všechno seřazené a vysvětlené tak, aby to mělo smysl. Textové průvodce jsou pro mě praktičtější než videa — můžu si to vrátit a znova si přečíst, když si nejsem jistá.”
— Martina, 32
Jak to funguje
Váš postup od začátku do konce
Každý projekt je jiný, ale tyto kroky jsou vždy stejné. Postupujte v tempu, které vám vyhovuje.
01
Pochopte svého uživatele
Začněte s mapováním cesty uživatele. Zjistěte, kdo je váš uživatel, co chce a kde se frustuje. Není potřeba nic složitého — stačí poslouchat.
02
Vytvořte wireframy
Nejdřív na papíru, pak v Figmě. Wireframy nejsou o krásných věcech — jsou o tom, aby struktura měla smysl. Zůstaňte jednoduší.
03
Postavte vizuální hierarchii
Rozhodněte, co je nejdůležitější. Pak udělujte všechno ostatní podřízeno tomuto. Typografie, barvy a velikost prvků — všechno má účel.
04
Testujte a opakujte
Nic není dokonalé napoprvé. Zeptejte se uživatelů, co si myslí. Změňte to, co nefunguje. Potom znova.
Otázky
Nejčastější dotazy
Potřebuji předchozí zkušenost s designem?
Absolutně ne. Všechny průvodce jsou napsané pro lidi, kteří nemají žádné předchozí znalosti. Pokud můžete používat počítač a máte zájem se učit, zvládnete to.
Jak dlouho trvá přečíst všechny průvodce?
Závisí na vás. Některé průvodce si přečtete za 20 minut, jiné vám zaberou hodinu. Nejedná se o závod — jde o to, abyste tomu porozuměli. Můžete si je číst v libovolném pořadí.
Mohu použít tipy z průvodců na svém projektu?
To je přesně důvod, proč existují. Každý průvodce je napsaný s myšlenkou na praktické použití. Vezměte si tipy a aplikujte je na svém projektu hned zítra.
Jsou průvodce zdarma?
Všechny články jsou zdarma a dostupné pro všechny. Věříme, že dobrý design by měl být přístupný všem, bez ohledu na rozpočet.
Jak se mohu zeptat, když nerozumím něco?
Máme formulář kontaktu. Napište nám, co vás zajímá, a pokusíme se vám pomoci nebo napsat průvodce na dané téma. Váš feedback nám pomáhá být lepší.
Jsou průvodce aktuální?
Ano. Design se mění, ale základní principy ne. Figma se aktualizuje, ale principy wireframingu jsou stejné. Aktualizujeme průvodce podle toho, jak se věci mění.
O nás
Proč jsme to napsali
Dlouho jsme pozorovali, jak se lidi snaží porozumět designu a neví, kde začít. Není tu nic zlého — design se vyučuje špatně. Buď vám někdo řekne “to je art” a nechá vás samotné, nebo vám dá tak moc informací, že neviíte, kde začít.
Rozhodli jsme se napsat něco jiného. Průvodce, který není akademický ani nebyteň jednoduchý. Něco, co si můžete přečíst během oběda a aplikovat na svém projektu během odpoledne.
Každý průvodce je napsaný tak, aby měl smysl. Žádná teorie bez praktického příkladu. Žádný příklad bez vysvětlení, proč to funguje. A hlavně — všechno je napsáno pro českou publiku s českými příklady.
Praktické
Ne teorii, ale kroky, které můžete udělat hned.
Jednoduché
Bez zbytečné složitosti nebo vysokého tónu.
České
Příklady a pojmy, které znáte z vlastní zkušenosti.
Jste připraveni začít?
Vyberte si kterýkoli průvodce a začněte se učit. Jsou zdarma, bez registrace a bez ničeho, co vás bude obtěžovat. Stačí si přečíst.