Jak si ulehčit práci s chystáním ikon pro UI

Určitě každý z vás v minulosti pracoval na projektu, který vyžadoval použití ikon. Ikony slouží pro snadnější orientaci a hledání a třídění informací v UI. Vizuální prvky totiž naše oči rozpoznávají mnohem rychleji a lépe než psaný text. Ať už si ikony navrhujete sami nebo používáte již hotový set, potřebujete je opticky přizpůsobit zbytku designového konceptu.

Při návrhu ikon musíte řešit každý detail

Při návrhu nebo výběru ikon musíte být pečliví. Vaším cílem je vytvořit jednotný a dobře vypadající set, který bude zapadat do vašeho designového konceptu. Existuje řada parametrů, které musíte u přípravy ikon pohlídat.

Celkový styl ikon

První, co byste u ikon měli řešit, je, jak bude ikona působit jako celek a jestli zapadá do vašeho designového konceptu. Z vizuální identity (značky) nebo ze zadání projektu byste měli vědět, jak co nejlépe uživatelské rozhraní navrhnout tak, aby sdělovalo tu správnou myšlenku. Měly by ikony působit spíše hravě nebo naopak seriózně?

Abstraktnost ikon

Každá ikona může být navržena v různé míře abstraktnosti. Některé ikony mohou být detailnější a některé mohou být tvořeny pouze z jednoduchých tvarů. Styl a abstraktnost ikon vybírejte opět podle vnímání značky a cílové skupiny. Mladší generace zvládnou rozluštit jednodušší a abstraktnější ikony, ale ty starší mohou mít problém.

Tloušťka čar ikon nebo jejich celková tučnost

Důležité při výběru ikon je, aby byly vůči ostatním prvkům uživatelského rozhraní ve vizuální rovnováze. Měli byste se zaměřit na zvolenou typografii. Pokud budete pracovat s tučnějšími písmy nebo prvky, zvolíte pravděpodobně i tlustší varianty ikon a naopak. To však není pravidlo. Ikonám můžete nastavit tlustější čáry nebo je rovnou vyplnit.

Zakulacení rohů

Vyjdete-li opět z celkového vizuálního stylu, měli byste se zaměřit, jestli v rámci designového konceptu pracujete se zakulacenými rohy prvků nebo naopak používáte ostré rohy. Pokud boxům, fotografiím a dalším prvkům UI nastavujete zakulacení rohů, měli byste ho promítnout i do návrhu a stylu ikon.

Stejná velikost ikon a optické vyrovnání

Pokud použijete ikony ze stejného setu, pravděpodobně tento problém řešit nebudete. Ale pokud ikony skládáte z různých setů nebo si je navrhujete sami, je potřeba, aby byly všechny vůči sobě opticky stejně velké a zarovnané na střed. Pokud si vyskládáte ikony vedle sebe do mřížky, žádná z nich nesmí být opticky větší nebo menší a všechny se musí zdát, že leží na pomyslném středu.

Jednotnost ikon

V případě, že si ikony vybíráte nebo navrhujete sami, musíte zaručit, že každá ikona bude navržena se stejnými parametry. V rámci setu bude každá ikona stejně velká, bude tvořena stejnými tloušťkami čar, budou použity stejné poloměry zakulacení rohů a bude navržena ve stejném duchu a abstraktnosti jako ostatní.

Jak vybrat správný styl ikon

Pokud dostáváte do ruky projekt, který má definovanou vizuální identitu, bude pro vás výběr ikon lehčí. Můžete se podívat do manuálu značky, omrknete používanou typografii, barvy, styl a zjistíte, jakou náladu má značka vyvolávat a pro koho je určena. Snadno pak vyberete i styl ikon.

Pokud je návrh čistě na vás a projekt nemá přesně dané hranice, budete se muset na těmito otázkami zamyslet sami. Kdo budou uživatelé? Jaká je cílová skupina uživatelů? Kdo si bude uživatelské rozhraní prohlížet? Mladí nebo staří lidé? Slouží projekt k vážné propagaci nebo má v uživateli vyvolat hravou náladu?

Vždy doporučuji začít typografií. Výběr správného písma je základ. Design je totiž především o typografii a sdělování informací psaným textem. Proto začněte vždy u ní. Ikony pouze doplňují a dělají návrh atraktivnějším, přehlednějším a uživatelé díky nim zpracovávají informace mnohem lépe. Proto se vždy zaměřte na typografii a dle ní a dalších použitých prvků v UI vyberte i vhodný styl ikon.

Co když mám přípravu ikon za sebou a změní se designový koncept?

Vybrali jste si písmo a máte rozpracovaných několik obrazovek UI. Co když se rozhodnete vy nebo zadavatel projektu, že chcete pozměnit styl designu? Co když budete muset vyměnit písmo za jiné? Předpokládejme, že tak musíte učinit.

Změníte-li během návrhu písmo, zamyslete se, zda je potřeba změnit i styl ikon, které jste už použili. Celý návrh musí ladit pěkně dohromady. Pokud po koncepčních změnách ikony nesedí, musíte je upravit nebo vybrat jiné. A to je otravná práce navíc.

A nepřišla tato veškerá práce s chystáním ikon nazmar? Pravděpodobně ano. Proto si ukažme, jak zefektivnit práci a těmto situacím se v budoucnu vyhnout.

Jak zefektivnit a zrychlit pracovní postup s ikonami

Při návrhu se snažím vždy snížit pracovní chybovost a ušetřit se co nejvíce problémů. Ukážu vám, jak byste mohli postupovat, když chystáte projekt s ikonami.

1) Vyberte si typografii

Typografie je základ všeho. Dejte si na ní záležet a snažte se o finální výběr písma ještě před začátkem návrhu.

2) Promyslete si celkový designový směr

V jakém duchu se design bude nést? Budete pracovat s fotografiemi nebo ilustracemi? Jaké barvy budete používat? S jakými dalšími prvky budete pracovat? Budete používat spíš hranaté nebo kulaté prvky?

Je jasné, že designový koncept se bude v průběhu návrhu vyvíjet, ale je dobré mít již na začátku co nejjasnější představu.

3) Používejte vzorovou ikonu

Jste v designovém procesu a dostali jste se do místa, kde je poprvé načase použít ikonu. Moje rada zní: Zatím ji nenavrhujte a ani neztrácejte čas hledáním hotového setu. Zbytečně se zbrzdíte a budete dělat práci navíc. Pokud totiž designový koncept v budoucnu změníte, budete muset tuto práci dělat znovu.

Je lepší, když si vytvoříte jednu vzorovou ikonu, která bude mít roli zástupné ikony. Při jejím návrhu je lepší použít abstraktní tvary, aby ikona nedávala smysl a nemátla vás. Pokud by byla příliš konkrétní a vyjadřovala by nějakou informaci, už by vás nutila nad ní přemýšlet. Použijte třeba náhodné seskupení čar nebo jakýkoliv znak dle libosti. Vzorovou ikonu navrhněte vizuálně tak, aby seděla do aktuálního designového konceptu. Zvolte správnou tloušťku čar a zakulacení rohů.

4) Ze vzorové ikony udělejte symbol/komponentu

Pro návrh UI doporučuji použít nástroje k tomu určené jako jsou Sketch, Figma nebo Adobe XD. Ty umožňují vytvářet komponenty. V některých programech se jim říká symboly. Jde o totéž.

Komponenta je znovu použitelný prvek, který navrhnete jednou a používáte ho v designu na vícero místech. Pokud tuto komponentu změníte, promítne se změna prvku na všech místech v designu, kde je komponenta použita. Komponenty typicky používáte pro navigace a hlavičky, tlačítka nebo právě ikony.

Každou ikonu je dobré nachystat do samotného plátna. Plátno pro ikonu by mělo být tak velké, jak jsou složité ikony. Pokud víte, že bude ikona obsahovat více detailů, udělejte plátno větší. Díky většímu množství pixelů budete schopni nakreslit ikonu s více čarami. Velikost plátna doporučuji volit po 8px skocích (16 px, 24 px, 32 px, …).

Nachystejte si tedy plátno a do něj navrhněte vzorovou zástupnou ikonu. Poté z tohoto plátna vytvořte komponentu, kterou budete používat v rámci celého UI.

5) Navrhujte a průběžně upravujte komponentu ikony

Bez toho aniž byste se zabývali návrhem a výběrem ikon můžete v klidu navrhovat uživatelské rozhraní. Když potřebujete použít ikonu, použijete komponentu se zástupnou vzorovou ikonou. Ihned uvidíte, jestli stylem zapadá do zbytku designu. Pokud se vám vzorová ikona do návrhu nehodí, upravte ji a tím se změní na každém místě v designu.

6) Když je návrh hotový, vytvořte reálné ikony

Až v momentě, kdy jste si návrhem jisti a zadavatel ho také schválil, můžete se pustit do tvorby nebo výběru finálních konkrétních ikon. Už máte odladěnou vzorovou ikonu a podle jejího stylu můžete navrhnout ty reálné.

Tato bezvýznamná vzorová ikona vám říká, jak by ikony měly vypadat vizuálně, tedy jak by měly být tučné a zaoblené. Ještě je ale potřeba se ujasnit v tom, co chcete ikonami říct a pro jaké uživatele je navrhujete. Zvolte tedy správný jazyk, styl a vhodnou abstraktnost ikon.

7) Vyměňte zástupné ikony za reálné

Až budete mít vytvořený a nachystaný set ikon, vraťte se zpět do návrhu UI a dosaďte je místo těch zástupných.

Díky tomuto postupu navrhnete ikony pouze jednou na první dobrou a už nemusíte ztrácet čas neustálými úpravami. Váš proces bude opět o něco efektivnější.