Zástupné iniciály — jednoduchý design, velký dopad
Jak navrhovat elegantní zástupné symboly s iniciálami, které vypadají profesionálně a fungují na všech velikostech.
Číst článekKomplétní průvodce tvorbou avatarů na webu
Vše co potřebujete vědět o tom, jak vytvářet a spravovat profilové obrázky — od základních principů až po pokročilé techniky optimalizace.
Proč jsou avatary důležité
Avatary nejsou jen malé obrázky. Jsou to klíčové vizuální prvky, které zpersonalizují digitální zkušenost a budují vztah mezi uživatelem a platformou. Když uživatel vidí svůj avatar, rozpoznává ho. Ví, že je to on. To je mocné.
Na dobře navržené platformě se avatary objevují všude — v komentářích, v seznamech účastníků, v notifikacích. Každý avatar musí být čitelný v různých velikostech. Musí se načítat rychle. A musí vypadat konzistentně s ostatními prvky designu. Není to jednoduché, ale dá se to zvládnout.
8
standardních velikostí
3
typů obrázků
5
stavů a variant
Základní principy designu avatarů
Dobrý avatar začíná jednoduchou otázkou: Jak bude vypadat v 24 pixelech? Pokud vypadá blbě v nejmenší velikosti, pak není dobrý. Detaily, které vypadají skvěle v 256 pixelech, se v 24 pixelech ztratí. Proto začíname vždycky malým.
Kruhové avatary jsou standard. Jsou intuitivní a bezpečné — nemusíte se bát neobvyklých tvarů. Ale v poslední době se objevují zaoblené čtverce. Dávají více prostoru pro obsah, zvlášť pro text nebo složitější grafiku. Oba tvary jsou OK, jen si vyberte jeden a zůstaňte u něj.
Kontrast je klíčový. Avatar se musí lišit od pozadí. Pokud je pozadí tmavé, měl by být avatar světlejší. A když není dostupný obrázek uživatele? Pak jsou zde iniciály nebo ikony. Ty musí být čitelné ve všech velikostech.
Poznámka k designu
Tato příručka je zaměřena na vzdělávání a informace. Konkrétní implementace se bude lišit v závislosti na vašem stack technologií, frameworku a konkrétních požadavcích projektu. Postupy popsané zde se osvědčily v praxi, ale nejsou jediným správným řešením.
Zástupné iniciály a barvy
Když uživatel nemá fotku, iniciály zachraňují situaci. Dvě písmena — jméno a příjmení. Jednoduché a účinné. Ale iniciály bez barvy? To vypadá nudně. Přiřadíte barvu na základě abecedy. Všichni uživatelé se jménem začínajícím na A dostanou červenou. B dostane modrou. A tak dál.
Paleta barev by měla mít 6 až 8 barev. Více znamená více paměti. Méně znamená více střetů — příliš mnoho iniciál stejné barvy. Barvy musí být dost jasné, aby se na nich vidělo bílé nebo černé písmo. Zkontrolujte kontrast. WCAG AA je minimum — 4,5:1 pro normální text.
Font pro iniciály musí být bez patkový. Sans-serif je ideální. Vyberte si jednu rodinu a zůstaňte u ní. Arial, Helvetica, nebo systémový font — všechny fungují. Důležité je, aby iniciály byly čitelné.
Stavové indikátory a animace
Zelená tečka znamená online. Červená znamená offline. Žlutá znamená pryč. Tečka je malá, ale důležitá. Měla by být v rohu avataru — nejčastěji v pravém dolním rohu. Měla by mít tenký rámeček v barvě pozadí, aby se oddělila od avataru.
Velikost tečky? Třetina až čtvrtina velikosti avataru. Pokud je avatar 32 pixelů, tečka je asi 8-10 pixelů. Pozicování musí být přesné. Jeden pixel může dělat rozdíl. Testujte v různých velikostech a na různých pozadích.
Animace? Buďte opatrní. Pulzující tečka je v pořádku. Ale neměla by pulzovat příliš často — maximálně jednou za 2 sekundy. Animace by neměla rozptylovat. Je to jen indikátor, ne hlavní prvek.
Konzistentní velikosti a design systém
Konzistence je všechno. Avatar o 24 pixelech v hlavičce, 32 pixelů v seznamu, 40 pixelů v komentáři. To vypadá chaoticky. Stanovte si velikosti a zůstaňte u nich. Osm je magické číslo — 16, 24, 32, 40, 48, 56, 64, 128 pixelů. Všechny jsou odvozeny ze základní velikosti 8 pixelů.
BorderRadius také musí být konzistentní. Pokud používáte kruh, je to snadné — 50%. Pokud používáte zaoblený čtverec, použijte 4 pixely nebo 6 pixelů. Nic mezi tím. A shadow? Nepoužívejte shadow na avatarech. Nebo používejte tenký, 1-2 pixely. Nic dramatického.
Vytvořte dokumentaci. Napište, jak se avatar chová v různých stavech. Jaký je border, jaký je spacing, jak se mění při najíždění myší. Bez dokumentace každý designer dělá něco jiného.
Závěr
Avatary se zdají jednoduché, ale skrývají spoustu detailů. Kruh nebo čtverec? Iniciály nebo ikony? Barvy nebo monochrom? Každá rozhodnutí ovlivňuje celkový dojem z aplikace. Dobré avatary jsou téměř neviditelné — uživatelé si jich ani nevšimnou. Ale špatné avatary? Ty jsou vidět všude.
Začněte malým. Otestujte v nejmenší velikosti. Zkontrolujte kontrast. Napište dokumentaci. A pak — zůstaňte konzistentní. To je všechno, co potřebujete. Není to věda. Je to jen design.
Související články
