Základy vizuálního designu webových stránek

Transkript

1 MASARYKOVA UNIVERZITA FILOZOFICKÁ FAKULTA Ústav české literatury a knihovnictví Kabinet informačních studií a knihovnictví Základy vizuálního designu webových stránek Diplomová práce Autor: Markéta Havlásková Vedoucí práce: PhDr. Petr Škyřík Brno 2008

2 Bibliografický záznam Havlásková, Markéta. Základy vizuálního designu webových stránek. Brno: Masarykova univerzita, Filozofická fakulta, Ústav české literatury a knihovnictví, Kabinet informačních studií a knihovnictví, s. Vedoucí diplomové práce PhDr. Petr Škyřík. Anotace Diplomová práce Základy vizuálního designu webových stránek stručným způsobem shrnuje témata, která jsou podstatná pro problematiku úpravy vzhledu webových prezentací takovým způsobem, aby sloužily jako efektivní prostředek vizuální komunikace. Zaměřuje se především na určení základních vizuálních prvků a částí tvořících webovou stránku a podrobnou charakteristiku těchto prvků. Autor definuje tři základní požadavky, které klademe na vzhled webových stránek. Praktická část následně shrnuje konkrétní doporučení týkající se vizuální přívětivosti, použitelnosti a přístupnosti jednotlivých prvků. Annotation Diploma thesis Web Sites Visual Design Basics visual communication designing for web. First part of thesis identify web site s basics visual elements and parts, after focused on this elements colors, types and images in more details. Author defined three fundamental aspect of web sites visual appearance visual comfortability, usability and accessibility. Second part of work summarized advisement for usable, accesible and visual comfortable web site visual design.

3 Klíčová slova grafický design, principy grafického designu, teorie barev, typografie, vizuální design, vizuální komunikace, vizuální prvky www stránky, webdesign Keywords accessibility, color theory, graphic design, typography, usability, visual communication, visual design, visual design principles, web sites visual design elements, webdesign

4 Prohlášení Prohlašuji, že jsem předkládanou práci zpracovala samostatně a použila jen uvedené prameny a literaturu. Současně dávám svolení k tomu, aby tato diplomová práce byla umístěna v Ústřední knihovně FF MU a používána ke studijním účelům. V Brně dne 20. června 2008 Markéta Havlásková

5 Poděkování Na tomto místě bych ráda poděkovala vedoucímu práce PhDr. Petru Škyříkovi za jeho kritické připomínky a vstřícný přístup.

6 1 Obsah Úvod... 4 Vymezení tématu práce... 6 I. Teoretická část Úvod do vizuálního designu Vizuální vnímání Vnímání barev Vnímání tvarů Vnímání pohybu WWW stránky z vizuálního hlediska Technologie webu Základní vizuální prvky www stránek Části www stránky Základní typy stránek v rámci jednoho webu Základy vizuálního designu webových stránek prvky, prostor a principy Přístupy k designu webů Barvy Tvorba barev v počítači Co je to barva? Určení barvy Barevný kruh Dělení barev na pestré a nepestré Dělení barev na základě jejich působení na emoce Významy a působení jednotlivých barevných odstínů Základní barevná schémata Barvy na webu Tvary Tvorba tvarů v počítači Bitmapová grafika Vektorová grafika Písmo Abeceda Konstrukce písma Řezy písem Základní rodiny písem Metody zvýraznění určitých částí textu Velikost písma Práce s textem Písmo na webu Obrázky Typy obrázků na webu Navigační obrázky Obsah

7 Tlačítka Ikony Logotyp Ilustrační obrázky Animace Formáty obrázků Rozvržení webové stránky Prostor Vnímání stránky uživatelem Kompoziční pravidla Kompoziční pravidla využívající zlatého řezu Zlatý řez Pravidlo tří Kompoziční pravidla využívající geometrického středu Principy grafického designu Jednota Zvýraznění Rovnováha Nejčastější rozvržení www stránky Požadavky kladené na webové stránky Vizuální přívětivost Použitelnost Přístupnost II. Praktická část Obsah 1 Výběr barevnosti a práce s barvami Doporučení k výběru a práci s barvami na webu Volba základní barvy pro web Volba doplňujících barev Další doporučení Použitelnost barev Přístupnost barev Barvoslepost Konkrétní doporučení pro přístupnost barev Výběr fontu a práce s textem Doporučení k výběru fontů a práci s textem na webu Výběr fontu Metody zvýraznění textu Práce s odstavcem Zarovnání odstavce Barva písma a pozadí Hypertext Další doporučení Použitelnost písma Čitelnost Výsledky testování čitelnosti na webu Konkrétní doporučení použitelnosti písma Přístupnost písma

8 3 3 Výběr a práce s obrázky Doporučení k výběru a práci s obrázky na webu Navigační obrázky Tlačítka Ikony Logotyp Ilustrační obrázky Animace Použitelnost obrázků Přístupnost obrázků Rozvržení a práce s prvky Konkrétní doporučení k rozvržení práci s prvky Úvodní stránka Domovská stránka Rozvržení prostoru stránky Vizuální hierarchie Vyváženost stránky Obsahové stránky Použitelnost rozvržení Přístupnost rozvržení Závěr Použité zdroje Seznam obrázků Obsah

9 4 Úvod Na úvod nezbývá než zopakovat, že Internet se v posledních letech stal jedním z nejdůležitějších médií dneška. Slouží pro účely komerční, vědecké, vzdělávací, zábavní, prezentují se na něm firmy, organizace i jednotlivci. Stalo se již téměř pravidlem, že ve chvíli, kdy chceme o někom či o něčem získat nějaké informace, hledáme v první řadě právě v prostředí Internetu. S trochou nadsázky můžeme říci, že ten, kdo dnes není k nalezení na Internetu, jako by ani nebyl, takováto osoba či společnost se stává do jité míry neviditelnou. A právě www stránky jsou hlavním dokumentem webu, médiem pomocí kterého na Internetu komunikujeme a prezentujeme se jím světu. Web je mnohdy tím prvním dokumentem, jehož prostřednictvím se s námi potencionální klient, zákazník či zaměstnavatel seznamuje a na jehož základě si o nás utváří určitou představu. A jelikož na www stránce je sdělení zakódováno ve zrakem vnímatelné podobě, vzniká tato představa právě na základě vzhledu tohoto dokumentu. Ať už vytváříme stránky za jakýmkoliv účelem, především si přejeme, aby byl náš web uživateli navštěvován a aby v nich vzbuzoval příjemný dojem. Bylo by naivní domnívat se, že uživatele našich stránek zaujmeme pouze jejich obsahem. Bohužel, v současné době žijeme v prostředí, kde i ten nejkvalitnější výrobek může obstát pouze ve chvíli, kdy je opatřen vhodným obalem, tedy když je vizuálně atraktivní. Úvod A i ve chvíli, kdy takové věci, jako snahu zaujmout či líbit se považujeme za nepodstatné, si musíme uvědomit, že www stránky jsou prostředky masové komunikace. A komunikujeme li, většinou chceme komunikovat úspěšně a publikujeme li, toužíme být čteni. V případě nepřímé komunikace, kterou bezesporu komunikace prostřednictvím webu je, tedy musíme zajistit, aby byl čtenář schopen přenášené sdělení úspěšně dekódovat a přijmout. A jelikož je komunikace www stránkou druhem komunikace vizuální, úspěšnost přijetí sdělení můžeme ve velké míře ovlivnit právě vizuálním designem www stránky. Pokud totiž budeme zcela ignorovat základní typografické zásady, kompoziční zásady a percepční schopnosti příjemce, stane se náš web pro ostatní zcela nesrozumitelný. Jelikož tvůrcem www stránky se může stát opravdu každý, můžeme říci, že by bylo vhodné, aby měl každý alespoň základní povědomí o základech vizuálního designu www stránek. Tyto znalosti, které přirozeně spadají do problematiky vizuální gramotnosti a tedy částečně i gramotnosti informační, by se tedy podle mého mínění měly stát součástí vzdělání, stejně

10 5 tak jako se v minulosti už na základní škole vyučovaly zásady úpravy vzhledu rukopisných dokumentů. Bohužel tomu tak není, a tak se pak v důsledku nedostatečné informovanosti v oblasti vizuálního designu velice často na Internetu setkáváme se stránkami, které jsou vizuálně nepříjemné či přímo nečitelné. Problematika vizuálního designu webových prezentací je důležitá i pro knihovníky. Za prvé, vedoucí pracovníci knihoven jsou obvykle ty osoby, které zodpovídají za vzhled a úpravu webu prezentujícího jejich knihovnu. Za druhé, tvorba efektivních sdělení vizuální komunikace, tedy i www stránek, je součástí vizuální gramotnosti, kterou v současné době, kdy převážná většina médií komunikuje na vizuální bázi, můžeme považovat za součást gramotnosti informační. Víme, že jednou z úloh knihovníků a informačních pracovníku je být i šiřiteli informační gramotnosti. A ve chvíli, kdy si uvědomíme, že díky novým médiím se stírá rozdíl mezi konzumenty a producenty informací, pochopíme, že je podstatné umět nejen informace získávat, ale i vědět co dodržovat při jejich produkci a šíření. Bohužel, momentálně je pozornost knihovníků zaměřena spíše na problematiku získávání informací než na otázky spojené s jejich publikováním. 1 Ale neusnadníme snad tím, že řekneme tvůrci, jak má upravit produkované sdělení tak aby bylo přehledné a srozumitelné, příjemci tohoto sdělení snadné přijetí (či odmítnutí) informací v něm obsažených? Není tedy v zájmu knihovníků propagovat na veřejnosti, stejně tak, jak se děje například v podobném případě citační etiky, i zásady správného a efektivního publikování na Internetu? Úvod Cílem práce je tedy shrnout a představit základní zásady, týkající se úpravy vzhledu www prezentací. Budu se soustřeďovat zejména na charakteristiku jednotlivých prvků, ze kterých je stránka z vizuálního hlediska tvořena, a na způsoby, jakými s těmito prvky pracovat, čím se řídit při jejich výběru a jaké principy dodržovat při jejich umisťování do prostoru stránky. 11 Toto můžeme tvrdit ve chvíli, kdy si prostudujeme cíle projektů informační gramotnosti IFLA či IVIF IVIG: Odborná komise pro informační vzdělávání a informační gramotnost na vysokých školách [online]. 2007, [cit ]. Dostupné na www: < IFLANET: Information Literacy Section [online]. IFLA, 2000 [cit ]. Dostupné na www: <

11 6 Vymezení tématu práce V práci se pokusím o shrnutí základních témat týkajících se oblasti vizuálního designu webových stránek. Zaměřím.se pouze na vizuální stránku webových stránek, tedy na to, co uživatel ve výsledku na obrazovce vidí. Jednotlivé technologie stojící za tvorbou tohoto výsledného vzhledu budou zmiňovány pouze okrajově jen tehdy, kdy je důležité brát je v potaz při výběru jednotlivých prvků pro www stránku. Nelze říci, že téma vizuální úpravy webu je látkou novou a dosud nezpracovanou. Otázce vizuálního designu www stránek se věnuje řada publikací. Většina těchto publikací pochází od autorů ze dvou oborů z oblasti webdesignu a z oblasti grafického designu. Můžeme tedy říci, že existují dva odlišné přístupy k této problematice, každý z nich má své výhody a nevýhody. Publikace, jejichž autory jsou webdesignéři, se často příliš soustřeďují na technologie, které slouží k vytváření webových stránek. Často zde tedy nalezneme podobné postupy, jak vytvořit sadu animovaných ikon, aniž by se pisatel zabýval tím, zda je vhodné takovéto prvky na stránky vůbec umísťovat. Pokud se tyto publikace věnují uživateli, setkáme se spíše s komerčním přístupem, tedy s radami, jak uživatele co nejvíce zaujmout. Na druhou stranu, tyto publikace obsahují i řadu doporučení, jak zajistit, aby se uživatel na naší stránce dobře orientoval. Vymezení tématu práce Oproti tomu, díla grafických designérů jsou obvykle zaměřena na doporučení, jak dosáhnout maximálního estetického účinku. Grafickým designérům ale občas stránky slouží spíše jako prostředek seberealizace a koncový uživatel je zcela ponechán stranou. Jejich stránky jsou však většinou opravdu vizuálně atraktivní. Zde nebude na stránky pohlíženo ani jako na komerční prezentaci, která má prezentovanému zajistit konkurenční výhodu, ani jako na objekt uměleckého vyjádření, ale především jako na prostředek komunikace, který má vyhovovat především svému příjemci. V následující práci se tedy pokusím o shrnutí zásad, které při praktické aplikaci povedou k vytvoření jak vizuálně působivé a z grafického hlediska s právně vytvořené, tak k uživateli vstřícné webové prezentace.

12 7 I. Teoretická část Práce se věnuje problematice vizuálního designu www stránek. Webová stránka je zde chápána především jako prostředek nepřímé masové komunikace, jehož cílem je předání sdělení uživateli. Vizuální design nám pomůže upravit stránky takovým způsobem, aby na uživatele působila příjemným dojmem a abychom usnadnili předání sdělení na ní obsažené. Chceme li definovat zásady pro tvorbu www stránek, které působí příjemně a zároveň bude jejich vzhled funkční při předání sdělení, musíme vhodně spojit podstatné poznatky z oblasti grafického designu, webdesignu, dotknout se problematiky vizuálního vnímání a otázek použitelnosti a přístupnosti www stránek. Jelikož je to téma poměrně obsáhle, zařadila jsem do následujícího textu jen ty části, které považuji za opravdové základy vizuálního designu. Nejprve si stručně charakterizujeme samotný vizuální design. Zaměříme se zejména na definování základních prvků, s kterými při vytváření vizuálně vnímatelného sdělení pracujeme a na principy, které při práci s prvky využíváme. V této části se opřeme především o teorie pocházející z oboru grafického designu. Poté si ve stručnosti zmíníme o procesu vizuálního vnímání, z poměrně obsáhlé problematiky vybereme pouze ty části, které se přímo vztahují k otázkám vizuálního designu. I. Teoretická část Dále je nutné poznat náš prostředek komunikace, tedy webovou stránku. Pro lepší pochopení charakteru webové stránky budou v úvodu stručně zmíněny i technologie, které stojí za tvorbou webu, dále se budeme zabývat stránkami už jen pouze z vizuálního hlediska, tedy tím, co konkrétně uživatel uvidí na monitoru svého počítače. Určíme si tedy jednotlivé vizuální prvky stránky, které jsou analogické k základním prvkům grafického designu, poté přejdeme na otázky funkčního rozčlenění stránky do jednotlivých oblastí a nakonec se budeme věnovat hlavním typům stránek, na které můžeme v rámci struktury webu narazit. Následně se budeme věnovat hlavnímu rozboru jednotlivých vizuálních prvků www stránky a prostoru, do kterého tyto prvky umísťujeme. Zmíněny budou i základní principy, které nám pomohou umístit jednotlivé prvky do plochy www stránky tak, abychom vytvořili vizuálně co nejpříjemnější sdělení. O jednotlivých prvcích a principech budeme hovořit nejprve obecně, pak zmíníme konkrétní fakta vztahující se k jejich použití v prostředí Internetu. V závěru teoretické části si definujeme tři základní požadavky, které by měly stránky splňovat ve chvíli, kdy chceme, aby s nimi byli uživatelé opravdu spokojeni. Konkrétním doporučením ohledně tvorby webů pak bude věnována následující praktická část.

13 8 Na první pohled by se mohlo zdát, že některá témata rozebíraná v teoretické části práce se od konkrétní problematiky vzhledu webových stránek příliš vzdalují, poměrně velká část je věnována například základům typografie či symbolice barev. Domnívám se ale, že právě tyto vědomosti jsou základem vizuálního designu, stejně tak jako je abeceda základem čtení. Známe li tyto základy, jsme kdykoliv schopni vytvářet efektivní a příjemné objekty vizuální komunikace, aniž bychom se vystavovali nebezpečí, že vytvoříme web, který bude na uživatele působit nepříjemně nebo bude pro jeho návštěvníky zcela nesrozumitelný. I. Teoretická část

14 9 1 Úvod do vizuálního designu Pohlédneme li na www stránky obecně se zaměřením na jejich funkci v lidské společnosti, uvědomíme si, že se v podstatě jedná o médium sociální komunikace. Sama komunikace je pak sociální proces, při němž komunikátor vytváří sdělení (komuniké), jež je následně zakódováno a prostřednictvím určitého média doručeno ke komunikátorovi, který se jej snaží opět dekódovat a pochopit jeho obsah. 2 V případě komunikace vizuální je pak sdělení zakódováno ve formě zrakem rozlišitelných struktur. V kontextu lidské společnosti je tohoto druhou obvykle používáno ke komunikaci nepřímé, převážně skupinové či masové. Podmínkou nepřímé komunikace je zakódování sdělení do nějaké objektivní, přenositelné podoby. Vizuální design pak můžeme chápat jako proces vytváření objektu určeného k přenosu sdělení vizuální cestou. Toto sdělení může mít jak informační, tak emotivní obsah. Pro naše účely je podstatná především problematika plošného vizuálního designu, tedy otázka umísťování jednotlivých základních vizuálních prvků sdělení do vymezeného dvojrozměrného prostoru. Abychom mohli o designu hovořit, musíme si nejprve definovat právě ony základní vizuální prvky, ze kterých je každý plošný objekt složen. Úvod do vizuálního designu Základní prvky vizuálního designu Opřeme li se o tradiční teorie grafického designu, můžeme zrakem vnímatelné struktury, z nichž je dvojrozměrné vizuální sdělení komponováno, dělit na dva základní druhy: 3 Tvary Barvy. Tyto struktury obvykle označujeme jako základní grafické prvky nebo základní prvky grafického designu, případně základní vizuální prvky. Samozřejmě, toto dělení je pouze teoretické, v reálu můžeme barvu od tvaru oddělit pouze těžko, neboť tam, kde je barva automaticky vzniká i tvar a naopak. 2 Nakonečný, Milan. Sociální psychologie. 1. vyd. Praha: Academia, s. ISBN Skaalid, Bonnie. Classic Graphic Design Theory [online]. Web University of Saskatchewan, c1999 [cit ]. Dostupné na www: <

15 10 Tvary si z hlediska zprostředkování významu můžeme dále rozdělit na dva základní druhy: Verbální v tomto případě jsou do podoby zrakem vnímatelných struktur zakódovány prvky verbálního jazyka. Tyto tvary pak nazýváme znaky písma. Význam jednotlivých písmových znaků je pak dán na základě společenské konvence. Neverbální ostatní druhy tvarů. Takovéto tvary nejčastěji označujeme jako obrázky. Sdělení v nich obsažené není tak jednoznačně čitelné jako v případě tvarů písma. Na pomezí mezi těmito dvěma skupinami leží tvary, jimž byl v určité společnosti přiřazen konkrétní význam. K tomuto druhu tvarů patří takzvané ikony a symboly. Konkrétní sdělní vizuální komunikace je vytvářeno umisťováním těchto prvků do daného prostoru. Někteří grafičtí designéři považují i tento prostor za jeden ze základních prvků, my tak však činit nebudeme. Principy vizuálního designu 4 Aby bylo možno předat sdělení efektivním způsobem, nemůžeme prvky do daného prostoru umísťovat náhodně, ale musíme dodržet určitá pravidla, která nám pomohou vytvořit jasný, logicky organizovaný a vizuálně příjemný celek. Za základní můžeme považovat požadavky na to, aby byl konečný produkt plošného vizuálního designu vyvážený a byla v něm ustanovena vizuální hierarchie. Úvod do vizuálního designu Můžeme říci, že každý prvek v plošném prostoru má určitou vizuální váhu. Chceme li dodržet na stránce rovnováhou, musíme jednotlivé prvky v prostoru celé stránky rozmístit takovým způsobem, aby byl celek v rovnováze. Tuto vizuální váhu můžeme do jisté míry přirovnat k váze fyzické. Ve chvíli, kdy máme v jedné části stránky vizuálně těžší prvky než ve druhé, stránka vzbuzuje dojem, že se naklání či je tažena jedním směrem. Tato nerovnováha pak v divákovi vzbuzuje nepříjemný pocit napětí. Vizuální hierarchie nám pomůže organizovat objekty na stránce takovým způsobem, aby toto uspořádání odráželo jejich vzájemné vztahy. Vizuální hierarchii ustanovíme prostřednictvím jednoty a zvýraznění. 4 Přehled principů grafického designu sestaven na základě Skaalid, Bonnie. Classic Graphic Design Theory [online]. Web University of Saskatchewan, c1999 [cit ]. Dostupné na www: < McClurg-Genevese, Joshua David. The Principles of Design [online]. Digital Web Magazine, 2005 [cit ]. Dostupné na www: <

16 11 Jednota nám pomáhá ustanovit vztah mezi jednotlivými prvky stránky takovým způsobem, že prvky, které spolu logicky souvisejí, jsou svázány v opticky jednotném celku. Zvýraznění nám umožňuje přitáhnout pozornost diváka k nejdůležitějším částem sdělení Za základní principy vizuálního designu tedy můžeme považovat rovnováhu, jednotu a zvýraznění. Pod každým z těchto pravidel je v oblasti grafického designu shromážděna řada konkrétních doporučení, jak prostřednictvím práce s prvky dosáhnout požadovaného efektu, tedy jak prvky sjednotit, vyvážit nebo zvýraznit. Tyto doporučení z velké míry těží ze zákonů vizuálního vnímání definovaných gestaltickou psychologií. Shrneme li si tedy uvedené, tak webová stránka je zprostředkovatelem nepřímé komunikace. Její tvůrce či tvůrci pak prostřednictvím média Internetu a počítače komunikují s příjemcem, kterým může být v tomto případě každý uživatel Internetu. Sdělení na webové stránce je zakódováno ve formě zrakem rozlišitelných struktur, které vznikají sestavením základních grafických prvků do příjemci srozumitelných celků. Aby výsledek působil na uživatele příjemným dojmem a aby byl schopen přijmout sdělení na stránce obsažené, musíme dodržovat principy vyváženosti a vizuální hierarchie. Úvod do vizuálního designu Obrázek 1: Vizuální komunikace prostřednictvím www stránek Pro komunikaci prostřednictvím www stránky se jeví jako nejefektivnější použít vhodné kombinace verbálních a neverbálních prvků, neboť v takovéto podobě je pak sdělení pro

17 12 příjemce nejsnáze pochopitelné. Nejúčelnější je tedy použít textu, který je pomocí grafických prostředků smysluplně strukturován a doplněn vhodnými ilustračními obrázky. 5 Abychom ale mohli vizuální cestou komunikovat skutečně srozumitelně a efektivně, nemůžeme se zaměřit pouze na tvorbu samotného sdělení, ale musíme se zajímat i o možnosti a limity média tedy počítače a o způsob, kterým uživatel vizuálně přijaté vjemy zpracovává a organizuje. Samozřejmě, na úspěšnost komunikace pomocí webových stránek má vliv nejenom vzhled, ale i obsah prezentovaného textu. My se zde však této problematice nebudeme věnovat, neboť logicky nespadá do oblasti zájmu vizuálního designu. Po tom, co bylo napsáno v úvodu, kde byl vizuální design www stránek propagován jako součást informační gramotnosti, může vyvstat otázka, jaký je vztah mezi vizuální komunikací a informační gramotností. Pro vyjasnění si řekněme, že každá komunikace je záměrným šířením konkrétní informace a každé šíření informací v lidské společnosti je komunikací. Cílem komunikace je pak předání sdělení, cílem informační gramotnosti je schopnost uspokojit informační potřebu. 6 Informační potřeba konkrétního lidského jedince je vždy uspokojována nějakou z forem sociální komunikace. Snažíme li se komunikovat efektivně, usnadňujeme někomu uspokojení jeho informační potřeby. Základy vizuálního designu 5 Elliot, Deni. - Lester, Paul Martin. Visual Communication and an Ethic for Images [online]. Web sites of Paul Martin Lester, 2002 [cit ]. Dostupné na www: < 6 Landová, Hana. Informační gramotnost - náš problém(?). Ikaros [online]. 2002, roč. 6, č. 8 [cit ]. ISSN Dostupné na www: <

18 13 2 Vizuální vnímání Jak již bylo řečeno, pro to, abychom mohli vytvořit skutečně funkční prostředek vizuální komunikace, musíme chápat, jakým způsobem bude uživatel vnímat prvky, které do prostoru umístíme. Zabýváme li se tedy o oblast vizuálního designu, musíme si říci i několik slov o vizuálním vnímání. Vnímání obecně je proces přijímání a zpracování fyzikálních podnětů z vnějšího prostředí pomocí smyslových orgánů. Při vnímání vizuálním jsou prostřednictvím zrakového orgánu přijímány signály v podobě světla a na základě jejich zpracování si vytváříme obraz svého okolí. Psychologové rozdělují proces vizuálního vnímání do dvou fází. První z nich je takzvané čití, při kterém smyslové receptory umístěné ve smyslových orgánech detekují fyzikální podněty z vnějšího prostředí a převádí je na neuronové impulsy. Tato část vnímání se odehrává v periferních oblastech lidského těla. Druhým, následným procesem, je pak samotné vnímání, při němž dochází ke zpracování a interpretaci přijatých vjemů. Tento proces se odehrává přímo v lidském mozku a jeho výsledkem je rekonstrukce obrazu okolí pozorovatele. 7 Pro naše potřeby si ovšem celý proces zjednodušíme a pojem vnímání použijeme jako zastřešující termín pro oba procesy. Vizuální vnímání Zjednodušeně řečeno, při vizuálním vnímání primárně registrujeme jednotlivé barvy, ty potom v mozku skládáme do tvarů a po vyhodnocení několika po sobě jdoucích obrazů nakonec vyhodnotíme, zda se objekt pohybuje či ne. V následující kapitole si tedy pouze ve stručnosti představíme několik aspektů z oblasti příjmu a zpracování zrakových vjemů, vybereme pouze ty témata, která jsou relevantní pro oblast vizuálního designu. V návaznosti na primární dělení základních grafických prvků si i zde můžeme rozdělit celý proces vizuálního vnímání na vnímání tvarů a vnímání barev, dále ještě zmíníme vnímání pohybu, neboť v současné době se na webových stránkách hojně vyskytují i animace. 7 Wade, Carole Tavris, Carol. Psychology. 3rd ed. New York HarperCollins College, c s. ISBN

19 Vnímání barev Ačkoli si to zpravidla neuvědomujeme, barva není ve skutečnosti jednou z vlastností objektů kolem nás. Jedná se o pouhé vysvětlení lidského mozku, které vzniká na základě zpracování vlnové délky světla přijatého světločivými receptory v lidském oku. Barvy, tak jak je známe, jsou v podstatě jen záležitostí lidskou, neboť každý živočišný druh zpracovává světlo jiným způsobem. Lidské oko vnímá barvy již na fyziologické úrovni. Barevné vidění zprostředkovává jeden ze dvou druhů smyslových receptorů nacházejících se na sítnici lidského oka, takzvané čípky. V lidském oku se nachází tři typy těchto receptorů, přičemž každý z nich je citlivý na jinou část viditelného barevného spektra. Vlnění nm registrují modré čípky, zelené a rozsah O nm červené, přičemž každý z těchto čípků je nejcitlivější na prostřední hodnotu. Tento rozsah nezahrnuje celou šíři světelného vlnění, člověk tedy vidí pouze část světla. 8 Zelené a červené čípky jsou si navzájem hodně podobné, většina savců je dokonce vůbec nemá a místo nich vlastní pouze jeden čípek žlutý. Modré čípky se tedy od červených a zelených výrazným způsobem odlišují. 9 Obrázek 2: citlivost jednotlivých čípků v rámci spektra Vizuální vnímání Proces vnímání barvy pak probíhá tím způsobem, že dopadne li na sítnici například světlo o vlnové délce 450 nm, je jím drážděn první typ receptorů a člověk vidí modrou. Spektrální citlivosti jednotlivých receptorů se překrývají, pokud tedy budeme receptory dráždit hraniční 8 Wade, Carole Tavris, Carol. Psychology. 3rd ed. New York HarperCollins College, c s. ISBN Vidí zvířata tak jako my? [online]. Psychologický ústav Akademie věd České republiky, c2008 [cit ]. Dostupné na www: <

20 15 vlnovou délkou, například 500 nm, získáme odezvu z modrých i zelených receptorů. Výsledkem pak bude vjem modrozelené, tedy tyrkysové barvy. 10 To, jakou barvu budeme ve výsledku vnímat, ale ovlivňuje celá řada faktorů. Nyní si některé z nich uvedeme. Prvním z nich je samotné rozmístění čípků v lidském oku. Ty totiž nejsou na sítnici rozloženy rovnoměrně, ale v místě nejostřejšího vidění, takzvané žluté skvrně, jsou na sebe poměrně hustě namačkány, směrem k okrajům sítnice postupně řídnou. V oblasti žluté skvrny je mnohem vyšší koncentrace receptorů zpracovávajících zelenou a červenou barvu, v ostatních částech oka převládají čípky modré. To by znamenalo, že v hlavní části obrazu jsme citlivější na zelenou, červenou a žlutou barvu, kdežto periferním viděním reagujeme spíše na modrou. Také to znamená, že barvy větších ploch, jejichž obraz není promítán pouze do oblasti žluté skvrny, vidíme trochu jinak, než plošky malé. 11 Dále má na výsledný barevný vjem vliv i náš předpoklad. Abychom neviděli každých pár vteřin předmět jako jinak barevný, uplatňuje se při vnímání barev mechanismus percepční konstanty, díky němuž vnímáme konkrétní předmět jako stejně barevný, i když se okolní podmínky mění. Při určování této barvy jsme ale z velké míry ovlivněni i předpokladem, který je založen především na naší předchozí zkušenosti. Například máme tendenci i mírně naoranžovělé jablko považovat za červené, i když pomeranč se stejnou barvou vnímáme jako oranžový. Je ovšem otázkou, zda vnímáme jablko skutečně jako červenější, nebo zda v tomto případě podléháme pouze sociální konvenci, která nám radí označit jablko přídavným jménem červené. 12 Vizuální vnímání Obrázek 3: Ovlivnění vjemu barvy předpokladem 10 Dzík, Petr. Teorie barevného vidění. Pladix: foto-on-line [online] [cit ]. ISSN Dostupné na www: < 11 Barevné vidění: druhý pohled. [online] Paldix: foto-on-line [cit ]. ISSN Dostupné na www: < 12 Wade, Carole Tavris, Carol. Psychology. 3rd ed. New York HarperCollins College, c s. ISBN