Obrazový bod (pixel) je základní stavební jednotka digitálního obrazu. I když se může zdát zanedbatelný, hraje zásadní roli v tom, jak designéři a vývojáři vytvářejí srozumitelná a funkční uživatelská rozhraní napříč zařízeními.
Na moderních obrazovkách už obrazový bod není tím, čím býval. Jeden takzvaný CSS pixel je logická jednotka, ne ta fyzická. Jeden CSS pixel odpovídá ⅟₉₆ palce. Díky displejům s vysokým rozlišením, jako je retina nebo 4K, může jeden CSS pixel odpovídat čtyřem i více hardwarovým pixelům. Tento princip zajišťuje, že prvek navržený o velikosti 44 × 44 pixelů bude na různých zařízeních působit přibližně stejně velký.
To ale není všechno. Pokud neporozumíte tomu, jak se pixely chovají, snadno vytvoříte rozmazané ikony, těžko čitelné texty nebo rozbité rozvržení. Kdo ale pixelům porozumí, dokáže vytvořit rozhraní, která jsou ostrá, srozumitelná a rychlá. Ať už jde o jemné dolaďování ikon na mřížku nebo o dodávání obrázků v různých rozlišeních podle potřeby.
Vývojáři by měli myslet v takzvaných nezávislých pixelech – v jednotkách dp, aby návrhy fungovaly na různých typech zařízení. Density-independent pixel odpovídá ⅟₁₆₀ palce. Designéři by zase měli chápat hustotu pixelů (DPI), aby mohli přesně zarovnat prvky a předešli vizuálním chybám.
Pixely nejsou jen technickým detailem. Když se k nim přistupuje správně, uživatel si jich nevšimne – protože všechno funguje tak, jak má.