Vizuální styl: logo, barvy, písmo a menu

Modul 4: Stránky, vzhled a funkce · Doba čtení: 8 minut

Cíl lekce: Po této lekci umíte v panelu Vizuální styl nastavit název a logo, favicon, styl, vzhled menu, barvy, písma, tmavý režim a pohyb a zkontrolujete, zda je text na Vašem webu dobře čitelný.

Klíčové pojmy: vizuální styl, styl (look), logo, obrazová značka, slovní značka, favicon, lišta menu, hlavní barva, kontrast, kontrastní poměr, WCAG, webová licence, tmavý režim, pohyb

Proč je vizuální styl víc než jen hezký vzhled

Vizuální styl je pevná kombinace loga, barev a písma, podle které Vás lidé poznají. Na webu zajišťuje rozpoznatelnost (stejné barvy na dodávce, v nabídce i na webu) a musí zůstat čitelný: světle šedý text na bílém působí klidně, ale mnoho návštěvníků ho čte špatně, zvlášť na telefonu na slunci.

Vše v panelu Vizuální styl je zdarma a hned se zobrazí v náhledu. Teprve když kliknete na Uložit, vznikne nová verze (lekce 3.5). Chcete-li se vrátit, klikněte na Vrátit zpět nebo obnovte starší verzi.

Panel má tyto bloky: Styl, Barvy, Písma, Lišta menu, Název a logo, Obrázky, Tvar a rozestupy, Písmo a rozměry, Tmavý režim a Pohyb.

Název, logo a favicon

V bloku Název a logo je název Vašeho webu, tak jak se zobrazí v záhlaví a v patičce. Pod ním je logo:

• Nahrát vlastní logo: PNG s průhledným pozadím, SVG, JPG nebo WebP, do 2 MB. V liště menu funguje nejlépe logo na šířku.
• Pokud logo nemáte, editor vytvořil slovní značku: Váš název ve Vašem písmu a Vašich barvách. Když je změníte, přizpůsobí se sama.
• Nechat AI navrhnout logo: krátce popíšete svou firmu a atmosféru („malířská firma na vesnici, řemeslná a spolehlivá“) a kliknete na Navrhnout tři loga. Dostanete tři obrazové značky (symbol bez textu) ve Vašich barvách, vedle nich Váš název ve Vašem písmu. Dohromady to stojí 1 úpravu. Jedno vyberete tlačítkem Použít, nebo napíšete, co je třeba zlepšit („to první, ale kulatější“), a kliknete na Navrhnout tři nová loga; to je další kolo za 1 úpravu.
• Zobrazení v menu a patičce: Logo a název, Pouze logo nebo Pouze název a k tomu Velikost (Malé, Normální, Velké).

Editor Vás upozorní, pokud má logo tenké linky nebo malý kontrast s lištou menu: v malé velikosti v liště by se pak mohlo ztratit.

Logo od AI si sami zkontrolujte: nepodobá se příliš logu jiné firmy?

Favicon je ikonka na kartě prohlížeče a u záložek. Zvolte Automaticky: počáteční písmeno ve Vašich barvách, Vaše logo nebo Vlastní soubor (čtvercový, PNG, SVG nebo ICO, do 512 KB).

Styl a lišta menu

Styl (v editoru také look) jedním kliknutím určí písmo, tvary, tlačítka, karty, menu a dekorace. Stylů je dvanáct, například Svěží, Teplý, Firemní, Příroda, Ateliér a Noc. Vaše vlastní barvy při změně stylu zůstanou; pokud chcete i barvy daného stylu, klikněte na Použít i barvy tohoto stylu. Styl Noc je vždy tmavý.

V bloku Lišta menu volíte podobu lišty v horní části každé stránky z patnácti návrhů: plná šířka, na střed, rozdělená, dva řádky, barevná lišta, orámovaná, pilulka, s horní lištou, průhledná, minimální, plovoucí, rubriky, segment, celá obrazovka a boční menu. Obsah menu (lekce 4.1) zůstává stejný. Několik upozornění z vysvětlivek přímo v editoru:

• Průhledné vypadá dobře jen tehdy, když má každá stránka tmavý úvodní blok nebo úvodní blok s fotografií.
• Minimální zobrazí jen Váš název a jedno tlačítko; odkazy na stránky jsou pak v patičce.
• S horní lištou umístí telefon a otevírací dobu do úzké lišty nad menu. Je to telefonní číslo správné?

U položky Barva lišty menu zvolíte Automaticky (podle stylu), Bílá, Světle šedá, Tmavá nebo Zvýrazňující barva. O jinou barvu požádejte v chatu.

Barvy a kontrast

V bloku Barvy nastavíte hlavní barvu (tlačítka, zvýraznění), druhou barvu pro barevné přechody a pozadí (bílá, krémová, chladná, šedá nebo odstín Vaší barvy, případně vlastní volba). S volbou Tlačítka s barevným přechodem dostanou všechna hlavní tlačítka přechod z jedné barvy do druhé.

Tady přichází na řadu kontrast: rozdíl v jasu mezi textem a pozadím. Vyjadřujeme ho jako kontrastní poměr, od 1:1 (žádný rozdíl) po 21:1 (černá na bílé). Mezinárodní směrnice pro přístupné weby, WCAG od W3C, vyžaduje na úrovni AA alespoň 4,5:1 pro běžný text a 3:1 pro velký text (přibližně 18 bodů, nebo 14 bodů tučně). Tlačítka a další ovládací prvky musí vůči svému okolí dosáhnout alespoň 3:1.

Editor to za Vás hlídá. Zvolíte-li barvu, na které se text špatně čte, upraví ji a oznámí, co se změnilo, například: „Barva textu ... se změnila na ..., protože jinak se na ní text špatně čte.“ Pokud si chcete ponechat přesně své barvy, zapněte Zachovat přesně tyto barvy: Vaše barvy zůstanou a text na nich automaticky dostane čitelnou barvu. I v sekcích, které AI vytvoří s vlastním formátováním, editor opraví barvy textu, které klesnou pod 4,5:1 (u velkého textu 3:1).

Co editor neposuzuje: text ve fotografii nebo ve Vašem logu a nadpis přes rušnou fotografii. Na ta místa se podívejte sami, na telefonu. Pokud si nejste jisti nějakou dvojicí barev, zadejte oba barevné kódy do nástroje pro kontrolu kontrastu (viz Další čtení).

Past: firemní barva z tiskárny nebo z polepu dodávky (například jasně žlutá) se jako barva textu hodí jen zřídka. Používejte ji jako zvýraznění nebo barevnou plochu a text nechte tmavý.

Písmo a vlastní font

V bloku Písma zvolíte písmo pro Nadpisy a písmo pro Běžný text. Písma jsou uložena jako soubory na Vašem vlastním webu; nevzniká žádné spojení s cizí službou pro písma. V bloku Písmo a rozměry nastavíte posuvníky pro celý web: řádkování a mezery mezi písmeny u textu a nadpisů, počet znaků na řádek, šířku obsahu a tloušťku nadpisů. Podle stylu vrátí posuvník do výchozí polohy. U položky Velikost textu zvolíte Normální, Velká nebo Extra velká; jde to i v chatu („zvětšete písmo“).

Můžete použít i vlastní písmo: nahrajte ho v bloku Písma nebo přes kancelářskou sponku v chatu, jako .woff2, .woff, .ttf nebo .otf, do 2 MB na soubor (lze i více řezů). Pak zvolíte, k čemu ho použít: nadpisy, text nebo obojí. Nic to nestojí. Písmo ze služby jako Adobe Fonts použít nelze.

Důležité: nahrávejte jen písmo, ke kterému máte webovou licenci. Písmo je software s licencí. Licence pro použití na Vašem počítači (pro tvorbu tiskovin) zdaleka ne vždy dovoluje umístit soubor na web, kde si ho stáhne každý návštěvník. Podívejte se do licenčních podmínek, zda je použití na webu povoleno. Písma pod licencí SIL Open Font License se vkládat a šířit smějí.

Tmavý režim a pohyb

V bloku Tmavý režim zvolíte Vypnuto (vždy světlý), Vždy tmavý nebo Podle zařízení. U poslední možnosti uvidí návštěvník, který má telefon nebo počítač nastavený na tmavý režim, tmavou verzi Vašich vlastních barev. Pozadí, text a hlavní barvu v tmavém režimu si můžete zvolit sami. Tlačítko, kterým by si návštěvníci režim přepínali sami, neexistuje. Náhled se řídí Vaším zařízením: přepněte svůj telefon nebo počítač na tmavý režim, abyste tmavou verzi viděli, a zkontrolujte přitom i své logo.

V bloku Pohyb zvolíte pro celý web Zapnuto, Klidný nebo Vypnuto, případně výjimku pro jednotlivou stránku. Zde vyberete i Efekt myši na počítači (žádný, magnet nebo světelná skvrna). V náhledu je vše v klidu; tlačítkem Přehrát animaci si pohyb jednou přehrajete. Pokud má návštěvník ve svém zařízení nastaveno omezení pohybu, zůstane vše v klidu. Příliš mnoho pohybu rozptyluje; na stránce s velkým množstvím textu je často lepší Klidný nebo Vypnuto.

V editoru: jak na to

1. Otevřete Vizuální styl, blok Název a logo. Klikněte na Nahrát vlastní logo nebo na Nechat AI navrhnout logo.
2. U položky Favicon zvolte své logo nebo automatické počáteční písmeno.
3. V bloku Styl vyzkoušejte dva nebo tři styly; podívejte se i na zobrazení Mobil.
4. V bloku Lišta menu zvolte návrh a barvu.
5. V bloku Barvy nastavte hlavní barvu. Přečtěte si upozornění editoru.
6. V blocích Tmavý režim a Pohyb zkontrolujte, co chcete.
7. Klikněte na Uložit a web znovu zveřejněte.

Shrnutí

• Panel Vizuální styl je zdarma; Uložit vytvoří novou verzi.
• Logo od AI stojí 1 úpravu za tři návrhy; favicon vytvoří editor sám, nebo nahrajete vlastní.
• Dvanáct stylů a patnáct návrhů menu; obsah menu zůstává stejný.
• WCAG vyžaduje kontrast alespoň 4,5:1 pro běžný text a 3:1 pro velký text; editor to hlídá, kromě fotografií a Vašeho loga.
• Vlastní písmo jen s webovou licencí; tmavý režim a pohyb nastavte podle toho, co Vaši návštěvníci potřebují.

Kvíz

Úkol

Úkol D4.2: Vaše firemní styl a kontrast. Nastavte svůj vizuální styl a změřte kontrast nejdůležitějších dvojic barev.

Kontrolní seznam:

• [ ] logo nahráno nebo vybráno z návrhů AI;
• [ ] favicon nastaven a ověřen na kartě prohlížeče Vašeho zveřejněného webu;
• [ ] styl a návrh menu zvoleny, zkontrolovány v zobrazení Mobil;
• [ ] hlavní barva nastavena a upozornění editoru přečtena;
• [ ] kontrast barvy textu vůči pozadí a textu tlačítka vůči barvě tlačítka změřen nástrojem pro kontrolu kontrastu;
• [ ] tmavý režim a pohyb vědomě zvoleny;
• [ ] vizuální styl uložen a web znovu zveřejněn.

Otázky:

1. Jaké kontrastní poměry jste naměřili u textu na pozadí a u textu tlačítka na tlačítku a dosahují 4,5:1?
2. Na kterém místě Vašeho webu je text přes fotografii a je na telefonu dobře čitelný?
3. Používáte vlastní písmo? Kde v licenci stojí, že je použití na webu povoleno?

Po kliknutí na „hotovo“ uvidíte vzorovou odpověď: Schildersbedrijf Example naměřil u tmavě šedé na bílé 14,5:1 a u bílého textu na zeleném tlačítku 5,1:1, obojí nad 4,5:1; nadpis přes úvodní fotografii se četl špatně, proto zvolil tmavší fotografii; vlastní písmo nepoužívá, takže licenci nepotřebuje.

Další čtení

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, anglicky): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, anglicky): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, anglicky): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, oficiální text (anglicky): https://openfontlicense.org/open-font-license-official-text/