Lekce 2.1

UX/UI principy

Typografie, barva, mezery, hierarchie a zarovnání jako stavební kameny rozhraní. Na závěr oprava stránky, která funguje, ale nevypadá.

Cvičení 1

Oprava

Co si vyzkoušíte

Opravíte stránku, na které je špatně skoro všechno, o čem byla řeč. Ve výchozím stavu máte index.html a style.css stránky kina Sever s hlavičkou, programem na týden, přihlášením k newsletteru a patičkou. Měnit můžete styly i HTML, včetně textů. Co přesně je špatně, nikde napsané není, to zjistíte sami.

Zadání

  1. Otevřete stránku v prohlížeči a udělejte test přimhouřených očí. Zapište si do komentáře na začátek style.css, čeho si všimnete jako prvního a čeho byste si všimnout měli.
  2. Projděte stránku a sepište do stejného komentáře všechny chyby, které najdete. U každé uveďte, kterého principu z výkladu se týká. Najdete jich aspoň deset.
  3. Zaveďte na :root typografickou škálu z výkladu a nahraďte jí všechny velikosti písma. Nadpis první úrovně má být největší text na stránce.
  4. Vyberte jednu rodinu písma, nanejvýš dvě, a nastavte řádkování odstavců a nadpisů. Odstavec v úvodu omezte na rozumnou délku řádku.
  5. Navrhněte paletu podle pravidla 60-30-10 a zapište ji do tokenů. Všechny barvy ve stylech nahraďte tokeny, akcentovou barvu nechte jen tomu, na co se má kliknout.
  6. Ověřte ve výběru barvy kontrast všech textů. Kde nesplňuje 4,5:1, barvu upravte.
  7. Zaveďte tokeny mezer v násobcích 8 a nahraďte jimi všechny margin, padding a gap. Dejte pozor, aby byly mezery uvnitř skupin menší než mezi nimi, hlavně ve formuláři newsletteru.
  8. Postavte hlavičku, všechny sekce, karty i patičku na jednu levou hranu a srovnejte zarovnání textu.
  9. Sjednoťte odkazy „koupit vstupenku“ a tlačítko formuláře do jedné třídy .button s variantou pro hlavní akci. Na kartě filmu si oko má všimnout nejdřív názvu a času promítání a hned potom tlačítka.
  10. Nechte štítek jen u jednoho filmu, který kino doporučuje, a zvýrazněte celou jeho kartu. Ostatní štítky smažte.
  11. Projděte texty na stránce a upravte ty, které stránce nepomáhají: nadpis, který křičí, slova, která se u každé ceny zbytečně opakují, a tlačítko formuláře, které neříká, co udělá.
  12. Zopakujte test přimhouřených očí a porovnejte výsledek se svými poznámkami z prvního kroku.

Bonus

  1. Rozložte karty filmů do mřížky, která se v širokém okně vejde vedle sebe a v úzkém zalomí pod sebe, bez jediné media query.
  2. Nechte nadpis první úrovně růst s šířkou okna přes clamp(). Ověřte v zobrazení pro mobil, že se název kina vejde na jeden řádek.
  3. Přidejte tmavou variantu stránky tím, že v @media (prefers-color-scheme: dark) přepíšete jen tokeny barev na :root.