Jak vytvořit konzistentní systém ikon, který jasně komunikuje bez textu
Dobrý design ikon není jen o tom, jak vypadají. Je to o tom, aby všechny ikony ve vašem systému fungovaly spolu jako jednotný celek. Když uživatel vidí jednu ikonu, měl by automaticky pochopit, co očekávat od ostatních. To znamená vybrat si správnou tloušťku čar, velikost mřížky a zachovat vizuální konzistenci napříč desítkami či stovkami symbolů. Jsme tu proto, aby vám to vysvětlili — od základních principů až po praktické tipy pro vaše vlastní design systémy.
Ikony nejsou jen dekorace. Jsou to komunikační prvky, které musí fungovat na různých velikostech, v různých stavech a pro různé typy uživatelů. Když jste si připraveni na tuto zodpovědnost, můžete vytvořit něco opravdu hodnotného — systém, který všichni ve vašem týmu budou chtít používat.
Mřížka určuje všechno. Naučte se, proč se 16px, 24px a 32px používají nejčastěji a jak se rozhodnout pro váš projekt.
Ikona v klidu je jen polovina příběhu. Zkuste si vytvořit všechny stavy bez toho, aby to vypadalo chaoticky.
Tloušťka čáry změní dojem z vaší ikony. Praktický průvodce pro výběr správné váhy pro různé kontexty.
Jak se postarat o to, aby všechny ikony v knihovně se 200+ symboly vypadaly jako jeden celek, ne jako haos.
Rozhodněte se, s jakou mřížkou budete pracovat. 24px je obvyklá volba pro web, ale můžete začít i s 16px pro jednoduché ikony. Nejdůležitější je, aby vaše volba byla konzistentní.
Pro Web obvykle funguje 1.5px až 2px. Zkuste si několik variant a vyberte si tu, která vám vyhovuje. Pamatujte, že tenčí čáry vypadají elegantněji, ale dickhí čáry jsou čitelnější v malých velikostech.
Začněte s nejčastěji používanými ikonami — menu, zavřít, hledat, uživatel, nastavení. Zajistěte, aby byly všechny navzájem konzistentní v chování, rozměru a stylu.
Rozhodněte se, jak se budou ikony chovat při hoveru, když jsou aktivní nebo zakázané. Budou se barvit? Budou se měnit? Zajistěte, aby byla změna jasná, ale ne příliš dramatická.
