Vizuálny štýl: logo, farby, písmo a menu

Modul 4: Stránky, vzhľad a funkcie · Čas čítania: 8 minút

Cieľ lekcie: Po tejto lekcii dokážete v paneli Vizuálny štýl nastaviť názov a logo, favicon, štýl, dizajn menu, farby, písmo, tmavý režim a pohyb a skontrolujete, či je text na vašej stránke dobre čitateľný.

Kľúčové pojmy: vizuálny štýl, štýl (look), logo, grafická značka, slovná značka, favicon, lišta menu, hlavná farba, kontrast, kontrastný pomer, WCAG, webová licencia, tmavý režim, pohyb

Prečo je vizuálny štýl viac než len pekný vzhľad

Vizuálny štýl je pevná kombinácia loga, farieb a písma, podľa ktorej vás ľudia spoznajú. Na webovej stránke zabezpečuje rozpoznateľnosť (rovnaké farby na dodávke, cenovej ponuke aj na stránke) a zároveň musí zostať čitateľný: svetlosivý text na bielom pôsobí pokojne, no mnohí návštevníci ho čítajú zle, najmä na telefóne na slnku.

Všetko v paneli Vizuálny štýl je zadarmo a hneď sa zobrazí v náhľade. Až keď kliknete na Uložiť, vznikne nová verzia (lekcia 3.5). Ak sa chcete vrátiť, kliknite na Vrátiť späť alebo obnovte staršiu verziu.

Panel obsahuje tieto bloky: Štýl, Farby, Písma, Lišta menu, Názov a logo, Obrázky, Tvar a priestor, Písmo a veľkosti, Tmavý režim a Pohyb.

Názov, logo a favicon

V bloku Názov a logo je názov vašej stránky tak, ako sa zobrazí v hlavičke a v pätičke. Pod ním je logo:

• Nahrať vlastné logo: PNG s priehľadným pozadím, SVG, JPG alebo WebP, do 2 MB. V lište menu funguje najlepšie logo na šírku.
• Ak logo nemáte, nástroj vytvoril slovnú značku: váš názov vo vašom písme a vo vašich farbách. Keď ich zmeníte, prispôsobí sa automaticky.
• Nechať AI navrhnúť logo: stručne opíšete svoju firmu a atmosféru („maliarska firma na dedine, remeselná a spoľahlivá“) a kliknete na Navrhnúť tri logá. Dostanete tri grafické značky (symbol bez textu) vo vašich farbách, s vaším názvom vedľa nich vo vašom písme. Spolu to stojí 1 úpravu. Jednu si vyberte tlačidlom Použiť alebo napíšte, čo by mohlo byť lepšie („to prvé, ale oblejšie“), a kliknite na Navrhnúť tri nové logá; to je ďalšie kolo za 1 úpravu.
• Zobrazenie v menu a pätičke: Logo a názov, Iba logo alebo Iba názov a Veľkosť (Malé, Normálne, Veľké).

Nástroj vás upozorní, ak má logo tenké čiary alebo malý kontrast s lištou menu: v malej veľkosti v lište by sa mohlo stratiť.

Logo od AI si skontrolujte sami: nepodobá sa príliš logu inej firmy?

Favicon je ikonka na karte prehliadača a pri záložkách. Vyberte Automaticky: prvé písmeno vo vašich farbách, Vaše logo alebo Vlastný súbor (štvorcový, PNG, SVG alebo ICO, do 512 KB).

Štýl a lišta menu

Štýl (v nástroji aj look) jedným kliknutím určí písmo, tvary, tlačidlá, karty, menu a dekorácie. Je ich dvanásť, napríklad Svieži, Teplý, Firemný, Príroda, Ateliér a Noc. Vaše vlastné farby zostanú zachované, aj keď zmeníte štýl; ak chcete aj farby štýlu, kliknite na Použiť aj farby tohto štýlu. Štýl Noc je vždy tmavý.

V bloku Lišta menu vyberiete tvar lišty v hornej časti každej stránky z pätnástich dizajnov: na celú šírku, centrované, rozdelené, dva riadky, farebná lišta, orámované, pilulka, s hornou lištou, priehľadné, minimálne, plávajúce, rubriky, segment, celá obrazovka a bočné menu. Obsah menu (lekcia 4.1) zostáva rovnaký. Niekoľko bodov z vysvetlivky priamo v nástroji:

• Priehľadné vyzerá dobre iba vtedy, ak má každá stránka tmavú hero sekciu alebo hero sekciu s fotografiou.
• Minimálne zobrazí iba váš názov a jedno tlačidlo; odkazy na stránky sú potom v pätičke.
• S hornou lištou umiestni telefón a otváracie hodiny do úzkej lišty nad ňou. Je to telefónne číslo správne?

V nastavení Farba lišty menu vyberiete Automaticky (podľa štýlu), Biela, Svetlosivá, Tmavá alebo Zvýrazňujúca farba. O inú farbu požiadajte v chate.

Farby a kontrast

V bloku Farby nastavíte hlavnú farbu (tlačidlá, zvýraznenia), druhú farbu pre farebné prechody a pozadie (biele, krémové, chladné, sivé alebo odtieň vašej farby, prípadne vlastný výber). Pomocou Tlačidlá s farebným prechodom dostanú všetky hlavné tlačidlá prechod z jednej farby do druhej.

Tu prichádza na rad kontrast: rozdiel v jase medzi textom a pozadím. Vyjadruje sa ako kontrastný pomer, od 1:1 (žiadny rozdiel) po 21:1 (čierna na bielej). Medzinárodné pravidlá prístupných webových stránok WCAG od W3C vyžadujú na úrovni AA aspoň 4,5:1 pre bežný text a 3:1 pre veľký text (približne 18 bodov alebo 14 bodov tučne). Tlačidlá a ďalšie ovládacie prvky musia voči svojmu okoliu dosiahnuť aspoň 3:1.

Nástroj to stráži za vás. Ak vyberiete farbu, na ktorej sa text zle číta, upraví ju a oznámi, čo sa zmenilo, napríklad: „Farba textu ... sa zmenila na ..., pretože text by sa na nej inak zle čítal.“ Ak si chcete ponechať presne vlastné farby, zapnite Ponechať presne tieto farby: vaše farby zostanú a text na nich automaticky dostane čitateľnú farbu. Aj v sekciách, ktoré AI vytvorí s vlastným formátovaním, nástroj opraví farby textu, ktoré klesnú pod 4,5:1 (pri veľkom texte 3:1).

Čo nástroj nehodnotí: text vo fotografii alebo v logu a nadpis na rušnej fotografii. Tieto miesta si skontrolujte sami, na telefóne. Ak si nie ste istí farebnou dvojicou, zadajte oba farebné kódy do nástroja na kontrolu kontrastu (pozrite Čítajte ďalej).

Pasca: farba vizuálneho štýlu z tlačiarne alebo z dodávky (napríklad žiarivo žltá) sa len zriedka hodí ako farba textu. Používajte ju ako zvýraznenie alebo plochu a text nechajte tmavý.

Písmo a vlastné písmo

V bloku Písma vyberiete písmo pre Nadpisy a pre Bežný text. Písma sú uložené ako súbory na vašej vlastnej stránke; nevzniká žiadne pripojenie k cudzej službe s písmami. V bloku Písmo a veľkosti posuvníkmi nastavíte pre celú stránku: riadkovanie a rozostupy písmen textu a nadpisov, počet znakov na riadok, šírku obsahu a hrúbku nadpisov. Podľa štýlu vráti posuvník späť. Pri Veľkosť textu vyberiete Normálna, Veľká alebo Extra veľká; dá sa to aj v chate („zväčši písmo“).

Môžete použiť aj vlastné písmo: nahrajte ho v bloku Písma alebo cez kancelársku sponku v chate ako .woff2, .woff, .ttf alebo .otf, do 2 MB na súbor (viac rezov je povolených). Potom vyberiete, na čo ho použijete: nadpisy, text alebo oboje. Nič to nestojí. Písmo zo služby ako Adobe Fonts použiť nemožno.

Dôležité: nahrávajte iba písmo, ku ktorému máte webovú licenciu. Písmo je softvér s licenciou. Licencia na používanie v počítači (na tvorbu tlačovín) zďaleka nie vždy dovoľuje umiestniť súbor na webovú stránku, odkiaľ si ho stiahne každý návštevník. V licenčných podmienkach si overte, či je webové použitie povolené. Písma pod licenciou SIL Open Font License sa vkladať a šíriť smú.

Tmavý režim a pohyb

V bloku Tmavý režim vyberiete Vypnutý (vždy svetlý), Vždy tmavý alebo Podľa zariadenia. Pri poslednej možnosti uvidí návštevník, ktorý má telefón alebo počítač nastavený na tmavý režim, tmavú verziu vašich vlastných farieb. Pozadie, text a hlavnú farbu v tmavom režime si môžete vybrať sami. Tlačidlo, ktorým by si návštevníci režim prepli sami, neexistuje. Náhľad sa riadi vaším zariadením: ak chcete vidieť tmavú verziu, prepnite telefón alebo počítač na tmavý režim a skontrolujte pritom aj svoje logo.

V bloku Pohyb vyberiete Zapnutý, Pokojný alebo Vypnutý pre celú stránku a v prípade potreby výnimku pre jednotlivé stránky. Tu vyberiete aj Efekt myši na počítači (žiadny, magnet alebo svetelná škvrna). V náhľade je všetko statické; tlačidlom Prehrať animáciu si ju raz pozriete. Ak má návštevník v zariadení nastavený obmedzený pohyb, všetko zostane statické. Priveľa pohybu rozptyľuje; na stránke s množstvom textu je často lepšia voľba Pokojný alebo Vypnutý.

V nástroji: postup

1. Otvorte Vizuálny štýl, blok Názov a logo. Kliknite na Nahrať vlastné logo alebo na Nechať AI navrhnúť logo.
2. V časti Favicon vyberte svoje logo alebo automatické prvé písmeno.
3. V bloku Štýl vyskúšajte dva alebo tri štýly; pozrite sa aj na zobrazenie Mobil.
4. V bloku Lišta menu vyberte dizajn a farbu.
5. V bloku Farby nastavte hlavnú farbu. Prečítajte si upozornenia nástroja.
6. V blokoch Tmavý režim a Pohyb skontrolujte, čo chcete.
7. Kliknite na Uložiť a stránku znova zverejnite.

Zhrnutie

• Panel Vizuálny štýl je zadarmo; Uložiť vytvorí novú verziu.
• Logo od AI stojí 1 úpravu za tri návrhy; favicon vytvorí nástroj sám alebo nahráte vlastný.
• Dvanásť štýlov a pätnásť dizajnov menu; obsah menu zostáva rovnaký.
• WCAG vyžaduje kontrast aspoň 4,5:1 pre bežný text a 3:1 pre veľký text; nástroj to stráži, okrem fotografií a vášho loga.
• Vlastné písmo iba s webovou licenciou; tmavý režim a pohyb nastavte podľa toho, čo vaši návštevníci potrebujú.

Kvíz

Úloha

Úloha D4.2: Vizuálna identita a kontrast. Nastavte svoj vizuálny štýl a zmerajte kontrast najdôležitejších farebných dvojíc.

Kontrolný zoznam:

• [ ] logo nahrané alebo vybrané z návrhov AI;
• [ ] favicon nastavený a overený na karte prehliadača vašej zverejnenej stránky;
• [ ] štýl a dizajn menu vybrané, skontrolované v zobrazení Mobil;
• [ ] hlavná farba nastavená a upozornenia nástroja prečítané;
• [ ] kontrast farby textu na pozadí a textu tlačidla na farbe tlačidla zmeraný nástrojom na kontrolu kontrastu;
• [ ] tmavý režim a pohyb vybrané vedome;
• [ ] vizuálny štýl uložený a stránka znova zverejnená.

Otázky:

1. Aké kontrastné pomery ste namerali pre text na pozadí a pre text tlačidla na tlačidle a dosahujú 4,5:1?
2. Na ktorom mieste vašej stránky je text na fotografii a je na telefóne dobre čitateľný?
3. Používate vlastné písmo? Kde v licencii je uvedené, že webové použitie je povolené?

Po kliknutí na „hotovo“ uvidíte vzorovú odpoveď: Schildersbedrijf Example nameral pre tmavosivú na bielej 14,5:1 a pre biely text na zelenom tlačidle 5,1:1, oboje nad 4,5:1; nadpis na fotografii v hero sekcii sa čítal zle, preto bola vybraná tmavšia fotografia; vlastné písmo sa nepoužíva, takže licencia nie je potrebná.

Čítajte ďalej

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