Jak vybrat správnou barevnou paletu pro váš web
Barvy nejsou jen estetika. Ovlivňují, jak se návštěvníci cítí a jak se chují na vašem webu. Tady je jak na to.
Přečíst článekWireframing — než začnete s designem
Skici vám ušetří čas a pomohou vám vidět problémy dřív. Tady je co potřebujete vědět.
Co je wireframing a proč vůbec začínat?
Wireframing je v podstatě technická kresba vašeho webu. Není to design s barvami a typografií — je to návrhový dokument, který ukazuje strukturu. Čáry, obdélníky, text placeholder. Nic víc, nic míň.
Když začnete skicovat, vidíte problémy, které vám jinak ujdou. Kde by mělo být tlačítko? Je navigace intuitivní? Jsou všechny informace, které uživatel potřebuje, na správném místě? Tyto otázky se řeší lépe na papíru nebo v jednoduchém digitálním nástroji než v Figmě s všemi efekty.
Proč je wireframing důležitý?
Není to jen další krok v procesu. Je to moment, kdy se všechno objasní.
Ušetří čas na designu
Když řešíte strukturu bez barev a efektů, pracujete 3x rychleji. Máte jasný plán, kterého se pak budete držet v designu.
Komunikace s týmem je jednodušší
Wireframe je univerzální jazyk. Vývojář, copywriter i klient mu rozumí. Není tam barvivka, která by všechny zmátla.
Vidíte problémy dřív
Chybí CTA tlačítko? Je formulář příliš dlouhý? Navíc neintuitivní navigace? Na wireframu se to vidí okamžitě.
Základ pro responzivitu
Když plánujete na wireframu, přemýšlíte o mobilu a desktopu zároveň. Design, který navazuje, je pak lépe připravený.
Jak na wireframing krok za krokem
Není to složité. Tady je jednoduchý proces, který funguje.
01
Definujte cíl a obsah
Víte, co má web dělat? Jaké informace musí obsahovat? Napište si seznam všeho, co tam má být. Bez editování, bez cenzury — jen vypsat co je kde.
02
Skicujte na papíru
Vezměte si papír a tužku. Rýsujte čáry, obdélníčky, text. Kde by měla být navigace? Jaké jsou hlavní sekce? Nesnažte se to dělat dokonalé. Hrubá skica je nejrychlejší.
03
Přenesťe to digitálně
Figma, Adobe XD, Balsamiq — není důležité co. Vezměte svou papírovou skicu a nakreslete ji znovu. Tentokrát trochu přesněji, ale pořád bez designu.
04
Otestujte s týmem
Ukažte to vývojáři. Ukažte to copywriterovi. Ptejte se jestli je to pro ně jasné. Jsou tam otázky? Teď je správný čas je řešit.
05
Iterujte a vylepšujte
Změňte, co není jasné. Přesunťte prvky. Upravte pořadí. Wireframe se vyvíjí. To je normální a správné. Až budete spokojení všichni, můžete začít s designem.
Jaké nástroje používat?
Tady je věc — nástroj není tak důležitý jako proces. Můžete začít papírem a tužkou. Opravdu. Papír je nejrychlejší, protože se nemusíte zabývat technickými věcmi.
Když chcete digitálně, máte pár možností. Figma je dnes standard — je tam všechno co potřebujete a není drahá. Adobe XD je také dobrá volba, pokud máte předplatné. Pro jednoduchost a rychlost si vezměte Balsamiq — je to přímo navrženo na wireframy.
Papír a tužka
Nejrychlejší, bez rozptylujících efektů
Figma
Moderní, kolaborativní, bezplatný plán existuje
Balsamiq
Jednoduchý, je to právě na wireframy
Adobe XD
Silný, integrovaný s ostatními Adobe produkty
Praktické tipy pro lepší wireframy
Přemýšlejte mobilem jako první
Navrhnete-li pro mobil, desktop bude snadný. Opak není vždy pravda. Zkuste si nejdřív navrhnout pro malou obrazovku — constraints vás přinutí myslet lépe.
Označujte prvky jasně
Napište si co je kde. “Logo” tady, “hlavní navigace” tady, “formulář kontaktu” tady. Nechejte poznámky. Bez nich si pak nepamatujete co jste mysleli.
Nebojte se iterovat
Váš první wireframe nebude dokonalý. Vůbec to nemusí být. Vyzkoušejte jiný layout, jiný tok. To je právě cíl wireframu — experimentovat levně.
Udržujte to jednoduché
Nekreslujte detaily. Nekreslujte barvy. Nekreslujte ikony. Čáry, obdélníčky, text. To je všechno co potřebujete. Komplexita přijde v dalších fázích.
Použijte grid nebo vodítka
Není to o tom aby to vypadalo pěkně, ale aby to bylo konzistentní. Pomocí gridu (např. 12-sloupcový) si usnadníte pozdější práci s designem.
Myslete na hierarchii
Co je nejdůležitější? Nadpis, tlačítko, nebo obrázek? Umístěte to tak aby to bylo jasné. Velikost a umístění dělají všechno.
“Wireframing je rozdíl mezi návrhem, který funguje a návrhem, který jenom vypadá pěkně. Bez wireframu se pak v designu řeší věci, které měly být vyřešené dřív.”
— Zkušenost z praxe
Začněte dnes
Wireframing vypadá jako další úkol, ale je to opak. Je to krok, který vám ušetří spoustu času a hlavně spoustu zbytečné přepracování v designu. Vezměte si papír a tužku. Nakreslete základní strukturu. Vidíte jaké to je jednoduché?
Pak si vezměte Figmu nebo libovolný nástroj a digital wireframe. Pokud máte tým, ukažte jim to. Zeptejte se jestli vidí stejně jako vy. Iterujte dokud nejste spokojení. Až pak se pustíte do designu — a zjistíte že to jde mnohem rychleji, protože víte přesně co děláte.
Poznámka
Tento článek je informativní příspěvek o wireframingu v designu. Cílem je poskytnout přehled o procesu a osvědčených postupech. Každý projekt je unikátní a výběr nástrojů a procesů závisí na konkrétních potřebách vašeho týmu a projektu. Zkušenosti se mohou lišit podle kontextu a zkušeností jednotlivých návrhářů.
