Konzistentní velikosti avatarů — budování harmonického designového systému

Praktický průvodce tím, jak udržovat konzistentní velikosti avatarů na celé platformě — od velkých profilových obrázků až po malé ikony v seznamech a komentářích.

10 min čtení Pokročilý Březen 2026

Proč je velikost avataru důležitá

Avatary jsou jedním z nejčastěji se vyskytujících prvků na webových platformách. Vidíte je na každém místě — v seznamech uživatelů, v komentářích, v navigačních lištách, v notifikacích. A právě proto je jejich konzistentní velikost tak kritická.

Když se velikosti avatarů neustále mění, uživatelé to vnímají jako chybu nebo špatný design. Vytváří se dojem nejednotnosti. To není jen estetická věc — když design není konzistentní, lidi si připadají zmateni.

Dobrý designový systém s pevnými velikostmi avatarů se pozná ihned. Vše vypadá promyšlené, ucelené, profesionální. A to je přesně to, co chcete, aby si lidé o vaší aplikaci mysleli.

Jak postavit skálu velikostí

Nejjednodušší přístup? Začněte s jednou základní velikostí — řekněme 40 pixelů. To je výchozí velikost, kterou budete používat ve většině míst. Pak z ní odvoďte ostatní velikosti.

Vynásobte základní velikost 1,5 nebo 2 pro větší varianty. Vydělte 0,75 pro menší verze. Tímto způsobem vytvoříte harmonickou skálu, která se vnímá jako součást jednoho designového systému. Nebudete mít náhodné velikosti jako 38px, 42px a 44px — budete mít 24px, 40px, 64px a 104px. Každá velikost má svůj účel.

Praktická skála: 24px (malé), 40px (základní), 64px (střední), 104px (velká), 160px (extra velká)

Kde se jednotlivé velikosti používají

Každá velikost má své místo. Malé 24px avatary? Ty jsou perfektní pro seznamy osob, kde je prostor omezený. Často je vidíte v seznamech účastníků nebo v řádcích tabulky.

Základní 40px je nejčastěji používaná. Používá se v komentářích, v osobních kartách, v seznamech. Je to velikost, která stále zachovává detaily, ale nezbírá moc místa.

Střední 64px vidíte v místech, kde chcete avatar zdůraznit — v popupech s informacemi o uživateli, v moderních designech sdílení. A velké 104px a 160px? Ty jsou vyhrazené pro hlavičky profilů, kde chcete, aby uživatel viděl svůj obrázek hned na první pohled.

Poznámka: Tato příručka obsahuje obecné doporučení na základě osvědčených postupů v designu uživatelských komponent. Konkrétní velikosti a přesné implementace se budou lišit v závislosti na vašich specifických potřebách, technologických omezeních a cílové skupině uživatelů. Vždy testujte s reálnými uživateli a přizpůsobujte design podle jejich zpětné vazby.

Responzivní design a avatary

Na mobilních zařízeních máte méně místa. Nesnažte se tam cpát velké avatary. Místo toho zmenšete všechny velikosti o jednu úroveň. Na mobilech tedy použijete 16px, 24px, 40px a 64px místo vašich běžných 24px, 40px, 64px a 104px.

CSS media queries vám pomůžou. Prostě nadefinujete nové CSS proměnné pro mobily a všechny komponenty se automaticky přizpůsobí. Žádné kódování v JavaScriptu, žádné podmínky — jen čistý CSS.

Desktop: 24px, 40px, 64px, 104px, 160px
Tablet: 20px, 36px, 56px, 88px, 140px
Mobil: 16px, 24px, 40px, 64px