Komplétní průvodce tvorbou avatarů na webu
Od výběru správné velikosti až po zpracování iniciál a stavových indikátorů — vše, co potřebujete vědět o navrhování avatar komponent, které fungují v praxi.
Přečíst článekSpecialista na design avatar komponent a profilových obrázků pro webové platformy. Za 14 let praxe vedl desítky projektů zaměřených na konzistenci UI, přístupnost a uživatelský prožitek.
Specialista na vytváření avatar komponent, které fungují konzistentně a intuitivně v jakémkoli prostředí.
Návrh různých tvarů avatar rámců — od klasických kruhů po moderní zaoblené čtverce. Každý tvar má své místo v designu a my víme, kdy který použít.
Když chybí fotografie, iniciály jsou záchranou. Navrhujeme systém barev a typografie, který funguje a vypadá profesionálně bez jakékoli fotografie.
Zelená, žlutá, šedá — malé puntíky sdělují hodně. Navrhujeme stavové indikátory, které jsou viditelné a jasné, aniž by rušily design.
16px v seznamu, 32px v komentářích, 64px v profilu. Vytváříme měřítka, která fungují a usnadňují práci vývojářům i designérům.
Avatar komponenty nejsou osamocené prvky — jsou součástí větších systémů. Učíme týmy vytvářet konsistentní a škálovatelné řešení.
Kontrast, alt texty, stavové indikátory pro uživatele se zrakovým postižením. Avatary musí fungovat pro všechny, a my se tím zabýváme vážně.
Petr se do digitálního designu dostal v roce 2010 během studií na Vysoké škole uměleckoprůmyslové v Praze. Fascinoval ho svět uživatelských rozhraní a komplexnost vytváření konzistentních systémů. V průběhu studia se zaměřil na interaktivní média a postupně si uvědomil, že detaily rozhodují — a to jsou právě ty prvky, na které se často zapomíná.
Po absolvování VŠUP v Praze začal pracovat ve startup prostředí, kde se podílel na vytváření design systémů pro rychle rostoucí aplikace. Tam se setkáním s problémem, který se zdál jednoduchý — jak mají vypadat avatary uživatelů? Během let však zjistil, že to vůbec není jednoduché. Avatar komponenty se používají všude — v seznamech, v komentářích, v navigaci, na kartách. Malá změna se rozmnožuje na tisíce míst a může zkazit celý design.
Postupem času se Petr zaměřil specificky na problematiku avatar komponent. Nebylo to jen tak — trávil tisíce hodin testováním s reálnými uživateli, experimentováním s různými tvary, velikostmi a barvami. Zajímal ho nejen design, ale také to, jak budou avatary fungovat v praxi. Jak se bude škálovat iniciála při zmenšení na 16 pixelů? Jak bude vypadat stavový indikátor v nočním režimu? Jsou ty otázky nudné? Ano. Jsou důležité? Absolutně.
Za svou kariéru vedl desítky projektů pro velké sociální sítě a firemní platformy. Vytvořil metodiku pro testování avatar designu s tisíci uživateli a přispěl k vývoji standardů, které dnes používá průmysl. Jeho přístup je jednoduchý — kombinuje vědecký základ s praktickými zkušenostmi z reálných projektů. Věří, že malé detaily jako stavové indikátory či zástupné iniciály výrazně ovlivňují uživatelský prožitek a zaslouží si stejnou pozornost jako velké prvky rozhraní.
V AvatarHub s.r.o. nyní vede iniciativy zaměřené na vzdělávání vývojářů a designérů. Učí je, jak správně navrhnout a implementovat avatar komponenty. Poskytuje konzultace pro firmy, které se chystají stavět své design systémy. A samozřejmě — pořád experimentuje, testuje a hledá lepší způsoby, jak řešit zdánlivě jednoduché problémy.
Lidé jsou vizuální tvorové. Když vidíte obrázek člověka, mozek se na něj automaticky zaměří. Avatar je první věc, kterou si všimnete v seznamu komentářů nebo v komunikační aplikaci. Pokud je avatar matoucí, příliš malý nebo nekvalitní, celý design pádá. Pokud je avatar pěkný a jasný, uživatel má pocit, že aplikace je profesionální a důvěryhodná. Je to skoro magické, jak moc ovlivní jeden malý obrázek.
Vídám to pořád. Především: příliš malé iniciály, které nejsou čitelné. Stavové indikátory, které se ztrácejí na pozadí. Nekonzistentní velikosti — v jednom místě je avatar 32px, v druhém 48px, nikdo neví, co je správně. Nebo fotografie, která je rozmazaná, protože se špatně škáluje. A často chybí alt texty, což znamená, že screen readery neumí vysvětlit, kdo je na obrázku. Malé věci, ale dělají velký rozdíl.
To je krásná otázka, protože se zdá jednoduchá, ale opravdu není. Chcete barvit podle prvního písmena jména? Podle ID uživatele? Barvit náhodně? Všechny přístupy mají pro a proti. Já preferuji systém, kde každé písmeno má svojí barvu — A je červená, B je oranžová, atd. Proč? Protože je to konzistentní, lehce si to zapamatujete a přispívá to k vizuální kontinuitě. Ale musíte dbát na kontrast — pokud je iniciála bílá na béžové, nebude vidět. Takže testujeme, testujeme a zase testujeme.
Nočný režim je opravdu důležitý a spousta designérů na něj zapomíná. Barva, která vypadá skvělě ve světlém režimu, se v nočním režimu může ztratit. Stavový indikátor, který byl viditelný na bílém pozadí, se může splynout s tmavým pozadím. Řešení? Testujeme oboje. Barvíme tak, aby kontrast fungoval v obou režimech. Někdy to znamená, že iniciály nejsou přesně stejné v obou režimech — a to je v pořádku, pokud je výsledek čitelný a hezký.
V moderních design systémech obvykle vidíme: 16px pro velmi malé seznamy (kde je prostor omezený), 24px pro normální seznamy, 32px pro komentáře a profily, 48px pro větší profily, 64px a větší pro hero sekce nebo nastavení uživatele. Ale tady je trik — nejedná se jen o velikost obrázku. Musíte měnit velikost iniciál, stavových indikátorů a všeho ostatního proporcionálně. Avatar 16px nemůže mít stavový indikátor velký 4px, to by nebyl vidět. Takže vytváříme škály — a všechny prvky se mění dohromady.
Kruh. Není na tom nic překvapujícího, ale kruh prostě funguje. Je přirozený, oči se k němu přitahují a ví, kde hledat tvář. Zaoblené čtverce jsou skvělé pro moderní design, ale kruh má něco zvláštního. Když jsem začínal, všechny aplikace používaly čtvercové avatary. Pak jsem viděl, jak Apple a Google přešly na kruhy, a všechno se změnilo. Dnes používám kruhy jako výchozí bod a jen když je to opravdu potřeba, zkouším něco jiného.
Přístupnost není dodatek — je to součást designu od začátku. Konkrétně: všechny fotografie musí mít alt text, který popisuje osobu. Stavové indikátory musí mít dostatečný kontrast, aby je viděli i lidé se slabým viděním. Pokud používáte barvy na stavové indikátory (zelená pro online), musíte je doplnit i textem nebo ikonou, aby to fungovalo pro lidi s barevnou slepotou. A pokud jsou avatary součástí nějakého interaktivního prvku, musí být klávesnicově dostupné. Není to těžké, ale vyžaduje to vědomí a plánování.
Jeden tip: vytvořte si seznam všech míst, kde se avatary v aplikaci zobrazují. Prohlédněte si jich na mobilu, tabletu i desktopu. Podívejte se na ně v nočním režimu. Zkoušejte je s dlouhými jmény a jednopísmenými jmény. Pokud něco není čitelné nebo vypadá divně, předělá to. A prosím, neignorujte iniciály — ta nejmenší a nejsnadnější část vašeho designu je často nejdůležitější.
Bakalářský studijní program: Digitální design a interaktivní média
Magisterský studijní program: User Experience Design
Certifikace: User Experience Professional (UXP)
StartupHub Prague — Design systémy a komponenty pro mobilní aplikace
SocialFlow Europe — Vedení designérských týmů, avatar komponenty pro sociální sítě
TechCorp International — Vytváření standardů pro design systémy, mentoring týmů
AvatarHub s.r.o. — Vedení týmu, vzdělávání, výzkum avatar komponent
Czech Design Association — Nejlepší design systém roku
Přednáška: “Avatar Components: Beyond the Basics”
Digital Design Community Awards — Vzdělávání a vedení talentů
Přístup, který vedl ke stovkám úspěšných projektů a milionům spokojených uživatelů
Není to přehnané. Avatar komponenty se jeví jako malá věc, ale jsou všude. Když navrhuješ jeden pixel zle, ten pixel se zmnoží na tisíce míst. Petr trávil celé dny testováním marginů, velikostí a barev. Není to nudné — je to obsese. A to je přesně to, co je potřeba.
Není možné myslet za všechny. Petr organizuje testovací seance s desítkami uživatelů. Starší ženy, mladí muži, lidé se slabým viděním, lidé na mobilu v tramvaji — všichni se podílejí. Zjistit, co vidí a co ne, je neocenitelné. Teoretické znalosti jsou užitečné, ale realita je důležitější.
Nemůžete navrhovat avatary v izolaci. Musíte myslet na design systém — jak se avatar chová s ostatními komponentami, jak se škáluje, jak se mění. Petr vždycky myslí na větší obraz. Jeden avatar je důležitý, ale konzistentní systém je pozoruhodný.
Přístupnost není dodatek, který se přidá na konci. Je to součást DNA designu. Pokud avatar není čitelný pro osobu se zrakovým postižením, není to dobrý design — je to špatný design. Petr to bere velmi vážně a učí ostatní totéž.
Znalosti, které si Petr za 14 let vytvořil, nejsou jen jeho. Chce je sdílet s dalšími designéry a vývojáři. Píše články, vede workshopy, odpovídá na otázky. Věří, že když se všichni naučíme lépe navrhovat avatary, svět bude lepší.
Podrobnější průzkum do světa avatar komponent a design systémů
Od výběru správné velikosti až po zpracování iniciál a stavových indikátorů — vše, co potřebujete vědět o navrhování avatar komponent, které fungují v praxi.
Přečíst článekKdy se objeví fotografie, kdy se zobrazí iniciály, a jak zajistit, aby iniciály vypadaly profesionálně bez jakékoli fotografie. Podrobný průvodce barvami a typografií.
Přečíst článekZelená, žlutá, šedá — jak správně navrhnout stavové indikátory, aby byly viditelné, jasné a přístupné všem uživatelům bez ohledu na barvovidnost.
Přečíst článekJak vytvořit měřítko velikostí avatarů, které funguje od 16px do 128px, a jak zajistit, aby všechny komponenty (iniciály, indikátory, border) škálovat proporcionálně.
Přečíst článekProcházejte články Petra Novotného, zkoumejte case studies a najděte inspiraci pro své vlastní avatar komponenty. Nebo se podívejte na práci, kterou dělá tým AvatarHub.