Vizuální jazyk

Vzhled není „hezké barvičky“. Je to sada rozhodnutí, která se opakují na každé stránce. Když jsou vědomá a konzistentní, výsledek působí promyšleně. Když ne, vypadá to jako šablona.

Čtyři rozhodnutí

1. Typografie

   Písmo, velikosti, řádkování, šířka textového sloupce. Nejvíc ovlivňuje dojem a nejmíň se řeší.

2. Prostor

   Kolik je kolem věcí místa a jak je odstupňované. Druhá nejdůležitější věc.

3. Barva

   Kolik jich je a k čemu slouží. Méně je skoro vždycky víc.

4. Hierarchie

   Co je vidět první, druhé a třetí. Bez ní se stránka rozpadne na hromadu prvků.

Typografie

Nejrychlejší cesta ke zlepšení. Čtyři konkrétní věci:

1. Šířka textu

   Řádek delší než zhruba 75 znaků se špatně čte. Text roztažený přes celou širokou obrazovku je nejčastější chyba.

2. Řádkování

   U běžného textu 1,5 až 1,7. U nadpisů méně, zhruba 1,1 až 1,2.

3. Velikostní stupnice

   Ne náhodná čísla. Několik velikostí, které se opakují na celém webu.

4. Kontrast velikostí

   Nadpis, který je jen o kousek větší než text, vypadá nerozhodně. Buď výrazně větší, nebo odlišený jinak.

Prostor

Prostor dělá to, co lidé připisují „čistému designu“.

Barva

1. Jedna výrazná barva stačí

   Akcent na akce a důležité věci. Zbytek v neutrálních tónech.

2. Neutrální neznamená šedá

   Podklad s lehkým teplým nebo studeným nádechem působí líp než čistě bílá a čistě šedá.

3. Barva má význam, ne dekoraci

   Zelená potvrzuje, červená varuje, akcent vede k akci. Když je barevné všechno, neznamená nic.

4. Kontrast textu musí stačit

   Světle šedý text na bílé je nečitelný pro víc lidí, než si myslíš.

Poznáš výchozí nastavení

Věci, které prozradí, že vzhled nikdo nezadal:

• Modrá jako jediná barva.
• Karta kolem každé informace.
• Všude stejné zaoblení a stín.
• Emoji místo ikon.
• Přechod z fialové do modré.
• Text v odstavcích přes celou šířku obrazovky.

Zapiš si směr

Vizuální rozhodnutí patří do projektu stejně jako pravidla.

Chci pro tenhle projekt sepsat vizuální směr a uložit ho do DESIGN.md.

Vyzpovídej mě – ptej se po jedné otázce:
1. Jaký dojem má web budit? Dej mi tři protikladné dvojice na výběr
 (např. hravý/vážný, hutný/vzdušný, teplý/chladný).
2. Na koho to mluví?
3. Znám nějaký web, jehož vzhled se mi líbí, a čím?

Pak z toho udělej konkrétní pravidla:
- Písma a velikostní stupnice.
- Odstupňování prostoru (konkrétní hodnoty).
- Barvy a k čemu která slouží.
- Zaoblení, stíny, rámečky – kolik toho je.
- Čeho se v tomhle projektu vyvarovat.

Piš konkrétně, ne obecně. „Vzdušné rozvržení“ je k ničemu,
„vnější odsazení sekcí 96 px, mezi odstavci 16 px“ je použitelné.