Afordance

Atomický design je metodologie Brada Frosta pro tvorbu designových systémů rozdělením rozhraní do pěti hierarchických úrovní: atomy (základní HTML elementy), molekuly (jednoduché skupiny komponent), organismy (složité UI sekce), šablony (rozvržení na úrovni stránky) a stránky (konkrétní instance se skutečným obsahem). Tento přístup poskytuje konzistentní mentální model pro organizaci knihoven komponent v React, React Native nebo Flutter projektech a zajišťuje systematickou škálovatelnost UI.

Skeleton obrazovka je zástupné rozhraní, které napodobuje rozložení stránky pomocí jednoduchých tvarů a animovaných přechodů, zatímco se načítá obsah. Na rozdíl od spinnerů dávají skeletony uživateli okamžitý přehled o struktuře stránky a snižují vnímanou dobu načítání. Běžně se používají v aplikacích jako Facebook, YouTube nebo LinkedIn pro plynulejší přechod mezi načítáním a zobrazeným obsahem.

Media queries jsou funkce CSS, která umožňuje podmíněně aplikovat styly na základě vlastností zařízení, jako je šířka viewportu, výška, orientace, preference barevného schématu nebo omezení pohybu. Jsou základem responzivního webového designu a umožňují různá rozvržení pro mobily, tablety a desktopy. Moderní media queries také podporují detekci uživatelských preferencí pomocí `prefers-color-scheme` a `prefers-reduced-motion` pro přístupnější zážitky.

Kognitivní zátěž označuje množství mentálního úsilí potřebného k používání rozhraní. V UX designu snížení kognitivní zátěže znamená zjednodušení voleb, minimalizaci rušivých elementů a postupné předkládání informací, aby uživatelé nebyli zahlceni. Techniky jako konzistentní rozložení, jasná vizuální hierarchie, známé vzory a rozumné výchozí hodnoty pomáhají udržet kognitivní zátěž zvládnutelnou a umožňují uživatelům soustředit se na své skutečné úkoly.

Knihovna komponent je sada předpřipravených, znovupoužitelných UI prvků — tlačítek, vstupních polí, modálních oken, karet — připravených pro konzistentní použití napříč projekty. Knihovny jako Material UI, Chakra UI nebo Radix poskytují přístupné, tématicky upravitelné stavební bloky, díky kterým vývojáři nemusí znovu vynalézat běžné vzory. Dobře udržovaná knihovna komponent výrazně zkracuje dobu vývoje a zajišťuje vizuální konzistenci aplikace.

Sémantické HTML znamená používání HTML elementů, které jasně popisují svůj význam a účel, jako jsou `<article>`, `<nav>`, `<header>` a `<section>`, namísto generických `<div>` tagů. Tento přístup zlepšuje přístupnost pro čtečky obrazovky, pomáhá vyhledávačům lépe pochopit strukturu stránky a činí kód čitelnějším pro ostatní vývojáře. Je považován za základní osvědčený postup v moderním webovém vývoji.