Shrnutí
UI je to, co na stránce vidíme. Dobré rozhraní stojí na několika pevně zvolených hodnotách místo desítek náhodných: typografické škále, malé paletě a mezerách v násobcích jedné jednotky. Uklizeně působí, když prvky stojí na společných hranách a stejné věci vypadají pokaždé stejně.
| Princip | V jedné větě |
|---|---|
| Typografická škála | velikosti písma vzniknou ze základu a poměru, třeba 16 px a 1,25 |
| Škála na mobilu | velké stupně rostou s oknem přes clamp(), běžný text zůstává |
| Řádkování | odstavec zhruba 1,5, nadpis 1,2, píše se bez jednotky |
| Délka řádku | 45 až 75 znaků, v CSS max-width: 65ch |
| Párování písem | jedna rodina, nanejvýš dvě a zřetelně odlišné |
| Paleta | hlavní, neutrální a sémantické barvy, každá v několika odstínech |
| OKLCH | odstíny vznikají změnou světlosti, stejná světlost znamená stejně světlou barvu |
| 60-30-10 | dominantní, doplňková a akcentová barva; akcentu je nejméně |
| Kontrast | běžný text aspoň 4,5:1, velký 3:1 |
| Mezery | násobky 8, uvnitř skupiny menší než mezi skupinami |
| Hierarchie | velikost, tloušťka, barva, poloha a prázdné místo; zvýraznění jen málokde |
| Zarovnání | prvky stojí na společných hranách, delší text zarovnaný vlevo |
| Konzistence | stejná věc vypadá všude stejně, rozdíl mezi prvky má důvod |
Umím?
- Vysvětlím rozdíl mezi UI a UX.
-
Sestavím typografickou škálu ze základní velikosti a poměru a nechám její velké stupně růst přes
clamp(). -
Nastavím řádkování a délku řádku a vím, proč se
line-heightpíše bez jednotky. - Vyberu k sobě dvě písma, nebo zdůvodním, proč stačí jedno.
-
Navrhnu paletu podle pravidla 60-30-10 a odvodím k barvě odstíny v
oklch(). - Změřím ve vývojářských nástrojích kontrast textu a poznám, jestli stačí.
- Nastavím mezery v násobcích 8 tak, aby bylo vidět, co k sobě patří.
- Ověřím hierarchii stránky testem přimhouřených očí.
- Postavím stránku na společné hraně a najdu prvek, který z ní uhýbá.