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) negaavní text ( světlý text na tmavém pozadí) 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