Wireframe

Správa fokusu je praxe řízení toho, který prvek přijímá klávesový fokus ve webové aplikaci, zejména při dynamických změnách obsahu. Když se otevře modální okno, fokus by se měl přesunout do něj; když se zavře, fokus by se měl vrátit na spouštěcí prvek. Správná správa fokusu je nezbytná pro uživatele klávesnice a čteček obrazovky a zahrnuje techniky jako focus trapping, roving tabindex a programatické nastavení fokusu pomocí `element.focus()`.

Design tokeny jsou nejmenší jednotky designového systému — pojmenované hodnoty reprezentující barvy, rozestupy, typografii, zaoblení rohů a další vizuální vlastnosti. Fungují jako jediný zdroj pravdy, který lze převést do formátů specifických pro danou platformu (CSS proměnné, Swift konstanty, XML resources). Změnou hodnot tokenů na jednom místě lze aktualizovat vzhled celé aplikace napříč platformami najednou.

Figma je webový kolaborativní designový nástroj používaný pro tvorbu UI designů, prototypů a designových systémů. Její real-time editace pro více uživatelů, systém komponent, auto layout a dev mode z ní udělaly průmyslový standard pro produktový design. Vývojáři používají Figmu k prohlížení designů, extrakci CSS hodnot, exportu assetů a — prostřednictvím pluginů a API — k automatizaci procesu od designu ke kódu.

Tmavý režim je barevné schéma rozhraní, které používá světlý text a prvky na tmavém pozadí. Snižuje únavu očí při slabém osvětlení, může šetřit baterii na OLED displejích a stal se očekávanou funkcí moderních aplikací. Implementace obvykle využívá CSS custom properties nebo design tokeny, které přepínají mezi světlým a tmavým tématem, často s respektováním systémového nastavení uživatele pomocí media query `prefers-color-scheme`.

Mikrointerakce je malý, ohraničený moment v uživatelském rozhraní, který plní jeden úkol — animace tlačítka při kliknutí, přepínač, gesto potáhnutí pro obnovení nebo animace srdíčka u „lajku". Tyto drobné designové detaily poskytují zpětnou vazbu, vedou uživatele a dodávají rozhraní osobitost. Dobře navržené mikrointerakce dodávají produktu pocit propracovanosti a responzivity, aniž by uživatele zahlcovaly.

Afordance je designová vlastnost, která naznačuje, jak by se měl prvek používat — vystupující tlačítko vypadá klikatelně, úchyt vypadá přetahovatelně, podtržený text vypadá jako odkaz. V UI designu vnímané afordance vedou uživatele ke správným interakcím bez explicitních instrukcí. Když afordance chybí nebo jsou zavádějící (například text, který vypadá klikatelně, ale není), uživatelé zažívají zmatení a frustraci.