Text a barva Další důležité prvky webové stránky
Text • srdcem i duší webové stránky • text na webu podléhá pravidlům hodně odlišným od pravidel pro Ask – není pevně daná šířka a délka stránky – nemožná absolutní kontrola nad rozvržením • změna velikosA obrazovky uživatele • defaultní nastavení fontů v OS, prohlížeči
– dynamičnost webového média je nejvíce zřejmá právě u toku textu 2
Kontrola nad textem • 100% kontrola je možná pouze pomocí grafického textu – zpomalení načítání – problém se zobrazením při vyšším rozlišení – nemožnost změny velikosA textu – obQžná aktualizace – omezený přístup nevizuálních prohlížečů – vyhledávače ignorují grafický obsah – vhodné použít maximálně u tlačítek 3
Kontrola nad textem (2) • stahovatelné písmo − umožňuje zobrazit text fontem, který nemá uživatel nainstalovaný – soubor s písmem je uložen na serveru − při zobrazení stránky se automaAcky stáhne s webovou stránkou – téměř úplná kontrola nad textem @font-face { font-family: neural; font-style: normal; font-weight: normal; src: url("fonty/zvlastnifont.eot"); } h1 {font-family: neural, cursive;} 4
Text jako kompoziční prvek • s písmeny se nakládá jako s tvary • řádek/věta je grafický vzor tvořený ze slov, která jsou tvary vzniklými z písmen • řádky/věty utvářejí grafické vzory složené z odstavců – tvarů – tónová hodnota tvaru (odstavce) závisí na písmu, mezerách mezi řádky a písmeny – tvary v grafických vzorech nevypadají jako samostatné, ale spíše se podobají texturám 5
6
7
Fonty • patkové (serif) − z konců tahů písmen vyčnívají patky (pomáhají vést oko při čtení) • bezpatkové (sans-‐serif) − konce tahů nejsou nijak zvýrazněné (jednoduchá kresba) • kurzíva − tahy písmen vypadají jako u psacího písma • ozdobné písmo − často složité a nepravidelné 8
Fonty (2) • proporcionální − každé písmeno zabírá jen tolik prostoru, kolik opravdu potřebuje – efekAvnější využiQ prostoru – lepší čitelnost textu – vhodné pro většinu textu
• neproporcionální − všechna písmena mají stejnou šířku – vhodné pro prezentaci zdrojových kódů, technických dat nebo zdůraznění frází 9
Kresba písma a obsah sdělení
10
Styly pro zvýraznění textu • řez písma (Tučné, Kurzíva, KAPITÁLKY) světlý ttext ext nna a ttmavém mavém pozadí ozadí) • negaAvní text (světlý – může být obQžnější pro čtení: text se jeví menší, pozadí jej může přebít – nevhodné u velmi úzkých typů písem
• velká písmena (VERZÁLKY) – hůře čitelný: méně odlišné formy písmen – ekvivalent vykřikování
• velikost písma 11
Rozvržení textu • zarovnání – do bloku − kompaktní vzhled odstavce, nevhodné u úzkých bloků textu (vznikají tzv. řeky = bílá místa poutající nežádoucí pozornost) – doleva – nepravidelný pravý okraj (poutající pozornost) => méně vhodný u širšího bloku textu – doprava, na střed − k upoutání pozornosA, hůře čitelný – asymetrické (náhodné) − k upoutání pozornosA, nevhodné u větších textových celků 12
Rozvržení textu (2) • délka řádku − 50 až 70 znaků nebo 7 až 15 slov – opAmální délka řádku v pc (pica) = dvojnásobek velikosA fontu v pt (bod) – oko se může zaměřit na oblast cca 4 palce širokou bez otočení hlavou => 24 pc při fontu 12 pt
• mezery mezi řádky (proložení) – 1,2 až 1,5 násobek velikosA písma – vzdálenost okrajů textového bloku od hranice (orámování) bloku větší než řádkový proklad 13
Rozvržení textu (3) • mezery mezi slovy – v nadpisech i v textu pokud možno zachovat malé mezery – šířka malého “l” – menší než vzdálenost textu od ohraničení bloku
• mezery mezi znaky (prostrkání) – výraznější úpravy (zúžení/rozšíření mezer) se používají spíše u nadpisů – nevhodné upravovat u textu s malým písmem 14
Mezery a vzdálenost od okraje
15
Bílé místo • v rámci mezí zajišťuje lepší čitelnost stránky (i v Aštěných médiích) – umožní odpočinek oka čtenáře – může přesměrovat pozornost (zdůraznění určitých čásQ textu) – stránky zaměřené na navigaci potřebují méně volného prostoru než stránky zaměřené na obsah
16
Hierarchie písma • ke zlepšení uspořádání stránky – usnadnění orientace při skenování stránek • vyjádření úrovní důležitosA textu – nadpisy a podnadpisy – velikost, styl (ohraničení), barva, umístění (vzdálenost od okolí) • zobrazují strukturu stránky • ještě relaAvně snadno se lze orientovat ve 3–4 úrovních
– sekce a odstavce – ohraničení, odsazení, velká počáteční písmena 17
Hierarchie písma (2) • počet fontů – dostatečně zřejmý kontrast – 3 fonty: navigace, text, popisky a nadpisy
• kontrast s pozadím – pomocí barvy, tónové hodnoty – menší kontrast –> menší důležitost textu
18
Hierarchie: font a volný prostor
19
Tabulky • • • •
k prezentování informací v uspořádané podobě konzistentní zarovnání v každém sloupci střídání barev pozadí řádků zřetelné oddělení speciálních čásQ – záhlaví – mělo by být v každé tabulce – případně poslední řádek, první a poslední sloupec
• informace v tabulce jsou důležitější než její vzhled 20
Detaily textu • typografické zásady – dodržitelné: česká diakriAka + uvozovky, dva druhy pomlček, výpustky, mezery mezi odstavci/nadpisy, odsazení prvního řádku, odstranění jednoznakových předložek z konců řádků – nedodržitelné: dělení slov (sazba do bloku – řeky)
• použiQ speciálních znaků – podpora symbolu v použitém fontu – správné definování znakové sady stránky 21
Vzhled textu pro web • sloupce – nevhodné, pokud pokračují nahoře a nejsou celé vidět na jedné obrazovce • použiQ fontu pro snadné čtení – malý text – lépe čitelné je bezpatkové písmo – velmi malý text (8 px i méně) – tzv. pixelový font
22
Barva • nejen k ozvláštnění vzhledu, ale také kvůli upozornění na informace, zvýšení použitelnosA (zvýraznění struktury stránky), posílení idenAty webu nebo firmy nebo k vyvolání neuvědomělých pocitů • zamýšlený efekt na uživatele vždy nemusí vyjít – reprodukce barev není úplně přesná – kulturní významnost určité barvy nemusí být správně pochopena 23
Reprodukce barev – vidění • simultánní kontrast
• Machovy pruhy
24
25
Zrakové vady • slabozrakost – snížení zrakové ostrosA • barvoslepost – porucha barvocitu (funkce jednotlivých druhů sítnicových čípků) – částečná barvoslepost – porucha vnímání určité barvy – extrémní případ: úplná barvoslepost – vnímání jen 2 barev (žlutá = teplé a modrá = studené) – zhoršení vnímání (anomálie) – nejčastěji u zelené (deuteranomálie) a červené (protanomálie) – neschopnost vnímání (dichromazie – funkční jen 2 typy čípků) – u zelené (deuteranopie) 26
27
28
29
Reprodukce barev – technika • barevné schopnosA monitorů se liší – musí se počítat s méně běžnými standardy • tzv. bezpečné barvy – bez problémů by je měl zobrazit jakýkoli prohlížeč běžící pod jakýmkoliv OS zobrazujícím alespoň 256 barev – paleta bezpečných barev má 216 položek – použiQ jiné barvy může vést k barevnému posunu nebo tzv. ditheringu (vykreslení požadované barvy použiQm dostupných barev v blízkém okolí) 30
Paleta bezpečných barev • každá barevná složka je k dispozici v šesA úrovních sytosA (0%, 20%, 40%, 60%, 80% a 100%), které se vzájemně míchají – 216 možných kombinací – úrovně barevných složek jsou reprezentovány hodnotami v šestnáctkové soustavě: 00, 33, 66, 99, cc a ff
• dnes již díky velkému rozšíření kvalitních zobrazovacích zařízení téměř není potřeba 31
Dithering • barvy z palety bezpečných barev – podpora true color i 256 barev
• barvy mimo paletu bezpečných barev – podpora true color (24-‐bit)
– podpora jen 256 barev (8-‐bit)
32
Bezpečné barvy – smíšené barvy • prolomení hranice omezení na 216 barev • používání předpřipravených vzorků složených z bezpečných barev (řízený dithering) –> iluze jiné barvy – vzorky snadno oklamou lidské oko (integrační schopnost sítnice)
33
Vnímání barev • použité barvy okamžitě vyvolávají pocity a nálady pozorovatelů – mnoho barev je často spojováno jak s poziAvními, tak i s negaAvními vjemy – velmi závisí na jasu a/nebo sytosA barvy a na použitých obklopujících barvách
• různé skupiny lidí (náboženské, etnické apod.) mohou vnímat stejnou barvu různě 34
Modrá • voda, nebe, oceán • důvěryhodnost, spolehlivost, stabilita, finanční rozvážnost, • mír, klid, bezstarostnost, zdvořilost, • mužnost • také smutek • univerzálně oblíbená, hlavně u finančních insAtucí 35
Zelená příroda, ekologie, zdraví, hojení čerstvost, klid, mír, čistota peníze, bohatství, hojnost, úroda, presAž nezkušenost (“zelenáč”), žárlivost, chamAvost, sliz, marťani • insAtucionalita – armáda, policie • oblíbená (hned za modrou) • uvolňuje napěQ • • • •
36
Žlutá • slunce, záře, opAmismus, energie, teplo, světlo • radost, štěsQ, pohodlí, slib poziAvní budoucnosA • inteligence, kreaAvní myšlenky, osvěta • zpomalení, línost • také žárlivost, výstraha, nebezpečí • akAvuje paměť, povzbuzuje komunikaci 37
Oranžová • teplo, oheň, vitalita, bujnost, bohatství, blaho, pohodlí, veselost • neklid, podvádění, mírně agresivní • podzim, Halloween, zábava, společenskost, • děAnskost, neznalost, ignorance • povzbuzuje chuť k jídlu • vnímaná nejkontroverzněji ze všech barev 38
Červená • • • • • • • •
síla, odvážnost, prosperita, sebevědomí láska, ženskost, vášeň, vzrušení, nadšení agrese, oheň, vztek, hněv důležitost, bystrost, pronikavost varování, stop, nebezpečí, chyba, krev ochrana před obavami, úzkosQ nejvíce individuálních asociací ze všech barev sAmuluje zvýšení tepu, tlaku 39
Růžová • kvěAny, ženskost, smyslnost, jemnost, romanAka, štěsQ • rozkoš, vzrušení, vášeň • mládí, stydlivost, senAmentalita • naděje (boj proA rakovině prsu) • cukrová vata, zábava, veselí, bezstarostnost • eliminace agrese a náladovosA (ve vězeňských celách) 40
Fialová (purpurová) královská barva, majestát, luxus pocit tajemna, magie, duchovna, povznesení vášeň, komplikovanost levandule, nostalgie, senAmentalita, melancholičnost, smutek • povzbuzuje kreaAvitu – oblíbená u kreaAvních a excentrických osob a dospívajících dívek • uklidňuje mysl a nervy • • • •
41
Hnědá • • • • • •
země, příroda, přirozenost stabilita, spolehlivost, jednoduchost teplo, vlídnost, užitečnost podzim špína smysl pro upravenost, systemaAčnost
42
Bílá čistota, nevinnost, ušlechAlost, panenská zima, chlad, nevlídnost, nemilosrdnost přímočarost, jednoduchost, naivita nevěsta, doktor, vědec, učitel vnímána jako oslnivá, výjimečná – okamžitě upoutává pozornost • podporuje jasnou mysl, odstranění překážek • evokuje čerstvé začátky • • • • •
43
Šedá • nadčasová, prakAcká – kombinovatelná s jakoukoliv barvou • dlouhodobě oblíbená jako barva oblečení • spolehlivost, serióznost, stabilita • stáří, nefunkčnost, neakAvita • zataženo, deprese, ztráta
44
Černá • • • • • • •
zlo, neštěsQ, žal, smrt, smutek, bolest noc, chlad, strach, prázdnota, marnost duchovno, tajemno, hloubka, vážnost autorita, síla, moc, drama, napěQ osobitost, komplikovanost elegantní, dodává luxusní a drahý vzhled oblíbená na oblečení – zešQhluje 45
PoužiQ barev • grafický manuál – základní kámen corporate idenAty (jednotný vizuální styl) – souhrn definic, pravidel a doporučení jak nakládat s jednotlivými částmi corporate idenAty – mimo jiné obsahuje specifikaci barevného schématu (závazná pro použiQ barev na webu společnosA) – další prvky: podoba loga, výběr fontů, apod.
46
PoužiQ barev (2) • výběr barev – málo barev, malé rozdíly mezi barvami – nuda – mnoho odlišných barev – chaos, horší vnímání – barevné schéma – princip volby kombinace barev • monochromaAcké • analogické • komplementární, rozdělené komplementární a posunuté komplementární • trojné • čtverné 47
Barevné schéma • h|p://colorschemedesigner.com/ • teplé a studené barvy – nejobecnější rozdělení – teplé: zelenožlutá, žlutá, oranžová, červená – studené: fialová, modrá, azurová, zelená
• v extrémním případě mohou barvoslepí vnímat jen 2 barvy – teplé se transformují na žlutou – studené se transformují na modrou 48
MonochromaAcké • 1 odsQn + černá a bílá – 1 odsQn s různou sytosQ/jasem = více barev
• jednotný a většinou harmonický účinek – i v poměrně agresivních odsQnech – závisí na tonálním rozsahu • užší = větší klid • širší = vyšší kontrast –> živější
49
MonochromaAcké (2) normální vidění
deuteranomálie
deuteranopie
50
Analogické • podobné barvy – 2 bezprostředně sousedící na barevném kruhu – alternaAvně: 1 odsQn + 2 bezprostředně sousedící na barevném kruhu (vlevo a vpravo)
• většinou působí jednotně teple/studeně – hranice teplých/studených
• vypadá elegantně a čistě • jedna z barev bývá dominantní 51
Analogické (2) normální vidění
deuteranopie
protanopie
52
Komplementární • doplňkové – odsQny ležící naproA sobě na barevném kruhu – rozdělené komplementární – místo jednoho z proAlehlých jsou k němu analogické odsQny – posunuté komplementární – odsQny naproA sobě a analogické odsQny jednoho z nich
• vždy teplé i studené barvy • dodává různorodost, energii, neklid 53
Komplementární (2) • rozdělené komplementární – “měkký” kontrast – silný vizuální kontrast (jako u čistě doplňkového), méně napěQ – oku příjemnější, poskytuje větší prostor pro vyvážení teplých a studených barev normální vidění
deuteranopie
54
Komplementární (3) • posunuté komplementární – “osamocená” barva je jen doplňující (přidává paletě napěQ), v přehnané míře působí příliš agresivně – v detailech a pro podtržení hlavních barev může být účinná a elegantní
55
Trojné • tři odsQny tvořící na barevném kruhu vrcholy rovnostranného trojuhelníka • poskytuje velký prostor pro vytváření kontrastů, zvýraznění a vyvážení teplých a studených barev • "vibrující", plné energie a neustálé akAvity
56
Trojné (2) normální vidění
protanopie
deuteranopie
57
Čtverné • 2 páry doplňkových odsQnů – “dvojkontrast” – mnoho možnosQ pro variace – jedna z barev by měla být dominantní – menší vzdálenost párů = menší napěQ – speciální varianta – čtvercové schéma – velmi agresivní schéma – vyžaduje velmi dobré naplánování a citlivý přístup k vzájemným vazbám jedotlivých barev 58
Čtverné (2) • 2 páry sousedících odsQnů
normální vidění
deuteranopie
59
Čtverné (3) • čtvercové schéma normální vidění
tritanopie
60
Rozporné barvy • nelze mezi nimi najít žádný zřetelný vztah – jsou od sebe velmi vzdáleny, ale netvoří žádné z prezentovaných schémat • k upoutání pozornosA a překvapení – šokující, nervní a křiklavá sada barev • nevhodné u většiny webů – tam, kde nejsou cílem vypjaté emoce
61
Barvy a použitelnost • nejčastější chyby – nízký kontrast mezi textem a pozadím (problém s podobným jasem a sytosQ při různých odsQnech u barvoslepých) – malý bílý text na černém pozadí – příliš mnoho odlišných barev – příliš velké plochy sytých barev
• modré prvky – uživatel na ně bude chQt kliknout • fialové prvky – uživatel je pravděpodobně vynechá • nejjednodušší (nejbezpečnější) je použít monochromaAcké barevné schéma 62
Literatura • Bonneville, D. How to Choose a Typeface. 2011. URL: h|p://www.smashingmagazine.com/ 2011/03/24/how-‐to-‐choose-‐a-‐typeface/ • Powel, T. A. Web design – kompletní průvodce. 2004. ISBN 80-‐7226-‐949-‐6. • Hashimoto, A. Velká kniha digitální grafiky a designu. 2008. ISBN 978-‐80-‐251-‐2166-‐5. • Smith, K. Color: Meaning, Symbolism and Psychology. 2010. URL: h|p://www.squidoo.com/ colorexpert 63
