1 MASARYKOVA UNIVERZITA Pedagogická fakulta Katedra technické a informační výchovy MODERNÍ WEBDESIGN S VYUŢITÍM ADOBE PHOTOSHOP Bakalářská práce Vedou...
MASARYKOVA UNIVERZITA Pedagogická fakulta Katedra technické a informační výchovy
MODERNÍ WEBDESIGN S VYUŢITÍM ADOBE PHOTOSHOP Bakalářská práce
Vedoucí bakalářské práce:
Vypracoval:
Ing. Martin Dosedla, Ph.D.
Petr Horáček Brno 2015
Prohlášení Prohlašuji, že jsem bakalářskou práci vypracoval samostatně, s využitím pouze citovaných literárních pramenů, dalších informací a zdrojů v souladu s Disciplinárním řádem pro studenty Pedagogické fakulty Masarykovy univerzity a se zákonem č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon), ve znění pozdějších předpisů.
V Brně dne 30. března 2015
_______________________ Podpis Autora
Poděkování Chtěl bych poděkovat Ing. Martinu Dosedlovi za pomoc při vedení mé bakalářské práce. Děkuji především za věcné připomínky, vstřícnost při konzultacích a rady při tvorbě této práce.
Anotace Hlavním zaměřením této bakalářské práce je návrh grafického designu webových stránek v současné době. První část práce je teoretická a popisuje postupný vývoj webdesign během let. Představuje jednotlivé pojmy webového designu a srovnává používané nástroje. Druhá část je tvořena praktickým návodem, jak vytvořit vlastní webový návrh a jsou v ní aplikovány získané informace z teoretické části. Praktická část je tvořena formou jednotlivých kroků, které jsou doplněny o obrázkové ilustrace.
Annotation The main focus of this bachelor’s thesis is a graphic design of websites used today. The first part is theoretical and it describes the gradual evolution of webdesign throughout years. It presents individual terms of webdesign and compares the instruments used in this field. The second part is a practical guide on how to create cystom webdesign and the information gained in theoretical part are applied here. The practical part consists of individual steps which are supported by pictorial illustrations.
Klíčová slova Webdesign, historie webdesignu, počítačová grafika, rastrová grafika, vektorová grafika, responzivní webdesign, rozložení webu, tutoriál
Keywords Webdesign, history of webdesign, computer graphics, raster graphics, vector graphics, responsive webdesign, web layout, tutoriál
Obsah 1. Webdesign .................................................................................................................... 7 1.1 Vývoj webdesignu .................................................................................................. 8 1.2 Co je webdesign? .................................................................................................. 10 1.3 Využití webdesignu na základní škole.................................................................. 11 1.4 Design webu pro různá zařízení............................................................................ 12 2. Kompozice webové stránky ........................................................................................ 18 2.1 Kompozice a struktura webu ................................................................................ 18 2.2. Použití barev na webu .......................................................................................... 25 2.3 Design prvků ......................................................................................................... 33 3. Obsah webové stránky ................................................................................................ 36 3.1 Webová typografie ................................................................................................ 36 3.2 Webové ilustrace................................................................................................... 43 3.3 Doplňující obsah webové stránky ......................................................................... 49 4. Nástroje pro tvorbu webové grafiky ........................................................................... 54 4.1 Rastrová a vektorová grafika ................................................................................ 54 4.2 Rozdělení nástrojů ................................................................................................ 56 5. Návrh designu webové stránky ................................................................................... 60 5.1 Zpracování tutoriálu .............................................................................................. 60 5.2 Využití tutoriálu .................................................................................................... 61 5.3 Zadání projektu ..................................................................................................... 62 6. Závěr ........................................................................................................................... 65 7. Seznam literatury ........................................................................................................ 66 8. Přílohy ......................................................................................................................... 72
5
Úvod Tématem této práce je webdesign v dnešní době. Je to velmi aktuální téma, s kterým se v praxi setkává téměř každý člověk v dnešní společnosti. Vezmeme-li v potaz, že od roku 1993 (CERN, 2013), kdy se objevila první webová stránka, přibylo více než 3 miliardy uživatelů internetu (Internetlivestats.com, 2015). Z toho plyne, že se toto téma dotýká téměř poloviny všech lidí na světě. Cílem práce je vysvětlit základní pojmy související s tvorbou webové grafiky a webdesignu, poskytnou stručnou historii vývinu designu za posledních dvacet let a popsat nástroje, které slouží k tvorbě grafiky. Hlavním cílem je potom aplikovat tyto znalosti na tvorbu vlastního návrhu webového designu, který bude vytvořen pomocí popsaných nástrojů. Práce zjišťuje současný stav webové grafiky, jak vypadala grafika na webu v minulosti a jaký je její stav dnes. V první kapitole je nejprve vysvětlen pojem webdesign a je zde krátký náhled do minulosti návrhu webu, která se za dvacet let své existence značně změnila. Poslední část kapitoly se věnuje využití webdesignu v mobilních zařízeních. Následující blok je rozdělen do dvou celků. Jeden popisuje základy každého webu, jako jsou struktura, kompozice či zvolené barvy a druhý se věnuje obsahu webové stránky, který je tvořen textem či grafickými ilustracemi. Je zde vysvětlena důležitost jednotlivých prvků, a také jejich využití, jež souvisí s myšlenkou práce. Součástí bloku je také popsání chyb, kterých se při tvorbě webu lidé dopouští, a kterým by se měli vyvarovat. V poslední kapitole teoretické části jsou popsány nástroje, které slouží právě k návrhu a realizaci grafiky na webu. Rozděleny jsou podle toho, na jaký druh grafiky se zaměřují, tedy jestli na rastrovou nebo vektorovou. Jsou vybrány nejpoužívanější aplikace a vytvořeno srovnání, které by čtenáři mohlo pomoci při volbě vhodného nástroje pro tvorbu designu. Praktická část je tvořena grafickým návrhem webové stránky, který využívá informace z teoretické části. V Příloze 1 je vytvořen tutoriál, který popisuje návrh vzhledu webu od úplného počátku až do konce. Podle tohoto tutoriálu by měl být běžný uživatel, který již má nějaké základy při tvorbě grafiky, schopen vytvořit svůj vlastní návrh webového designu. 6
1. Webdesign Je zajímavé sledovat, jakým způsobem se webdesign vyvíjí a postupně přizpůsobuje potřebám uživatelů. V dnešní době je úprava webové stránky stejně důležitá jako její obsah. Když si řidič pořizuje automobil, tak klade důraz na vlastnosti auta, stejně na jeho vzhled a pohodlí. A podobně by to mělo být i u webových prezentací. Je důležité se zaměřovat na kvalitu obsahu, ale také na jeho uspořádání a vzhled, jelikož právě design našich stránek je to, co čtenáře naláká a teprve obsah webu má za cíl je na místě udržet. Jedná se o vizitku jedince či společnosti, jelikož v dnešní době je běžné, že po prvním kontaktu s firmou se uživatelé podívají na internetové stránky společnosti a právě případná nekvalita stránek může zájemce velice rychle odradit. „Podle studie Stanfordovy univerzity z roku 2002 jde o „přitažlivost celkového vizuálního designu stránek, včetně rozvržení prvků, typografie, velikosti písma a barevného schématu,“ (Fogg a kol., 2002) Vzhled a dojem stránek ovlivnily úsudek týkající se důvěryhodnosti webu mnohem více, než další faktory, jako je struktura, užitečnost informací, tón obsahu a známost značky!“ (Anderson, 2012, s. 39) Současně je třeba dbát na již zmíněné pohodlí uživatele. Co je platné, když je web krásný, ale není vhodně uspořádaný, uživatel na něm nemůže nalézt potřebné informace, nebo mu právě kvůli grafickým úpravám nefunguje na jeho zařízení část webu. Může se také stát, že zbytečná grafika web oproti konkurenci zpomaluje. Statistika dokazuje, že pokud se stránka nenačte do čtyř vteřin, tak web ztrácí až 25% potenciálních návštěvníků (Kissmetrics, 2011). Proto je důležité nalézt vyrovnanost mezi krásnou a složitou grafickou úpravou a rychlou korektní funkčností stránky. V dnešní době je také často třeba počítat s uživateli, kteří nevstupují na web klasickým způsobem přes počítač, ale využívají k prohlížení obsahu nekonečnou řadu mobilních zařízení, ať se jedná o tablety, telefony, chytré televize nebo třeba čtečky textu. Těchto uživatelů každým rokem rapidně přibývá, a proto bude v budoucnu třeba přizpůsobovat web právě jejich potřebám, které se mohou odvíjet právě od rychlosti mobilního připojení, velikosti obrazovky, nebo způsobu ovládání. Mělo by se předcházet situacím, kdy si designér například vymyslí na stránky menu, které po najetí kurzoru nabídne další možnosti, ale vzhledem ke způsobu ovládání mobilních zařízení 7
je například na tabletu toto menu nepoužitelné a kazí uživateli pohodlí a snižuje tím návštěvnost z těchto zařízení.
1.1 Vývoj webdesignu Internet vznikl před více než padesáti lety (Nethistory, 2005) jako armádní komunikační kanál, který je decentralizovaný, a tedy těžko zničitelný. Ovšem teprve s nástupem „World Wide Webu― a prvních webových prohlížečů začal internet tak jak ho zná většina lidi dnes. Společnost CERN vytvořila v roce 1991 první webovou stránku (CERN, 1998), která byla velice jednoduchá a skládala se pouze z několika řádků textu a odkazů. Jelikož byl internet v té době velice omezený a samotná rychlost připojení se pohybovala pouze v jednotkách kilobitů za sekundu, nebyla v podstatě možnost stránky vzhledově upravovat natož vytvářet grafiku, jaká je přístupná v dnešní době.
Teprve
v roce 1993, spolu s vytvořením prohlížeče Mosaic (Marc Andreessen), se začaly na stránky dostávat obrázky, které do té doby musely být stahovány zvlášť. Díky tomu bylo možné vytvářet první graficky upravené stránky.
Obrázek 1 - První webová stránka (Cern.ch, 2015)
Od poloviny devadesátých let tak vznikaly stránky, které byly tvořeny tabulkami (Rachel Carlson, 2011), do kterých vývojáři vkládali malé obrázky, které dohromady tvořily vzhled celé stránky. Jelikož v té době prakticky neexistovaly služby pro vyhledávání (Google, Altavista, Bing atd.), úspěšnost stránek nezávisela na tom, jak relevantní informace poskytují, ale jak vypadají oproti konkurenci. Jelikož nebylo 8
mnoho možností jak grafiku realizovat, bylo možné pozorovat různě barevné a animované texty, které měly lákat nové lidi. Weby tak často vypadaly jako barevné palety, což způsobovalo nemožnost jejich čtení po delší dobu. Na rozdíl od dnešní doby se například typografie nezdála být důležitou součástí designu, a proto bylo možné nalézt na stránkách texty, které se, na jedné zobrazené stránce, lišily tloušťkou, barvou či fontem. Současně se na stránkách začala objevovat první počítadla návštěvníků, začal se také objevovat Javascript, ale prozatím nezískal dostatečnou popularitu, která však přišla později. Ke konci dvacátého století služba GeoCities spustila službu pro běžné uživatele, ve které jim poskytla prostor na webu pro vytvoření vlastních stránek „měst― (city). Toto umožnilo vznik stránek, na kterých se objevovaly první flashové animace, hudba v pozadí webové stránky a se vznikem PHP3 a vyhledávacími službami se začal webdesign skutečně měnit. Například Google však už v té době dokázal, že jednoduchost v designu je nadčasová, což dokazuje jejich logo, které se až na detaily od roku 1998 (Google, 2015) prakticky nezměnilo.
Obrázek 2 - Příklad webu z 90. let (Bypeople.com, 2011)
Opravdový obrat ale přišel teprve na přelomu tisíciletí (Rachel Carlson, 2011) a to s nástupem kaskádových stylů (dále CSS), které zjednodušovaly vývojářům činnost. 9
Najednou díky nim bylo možné oddělit design stránek od jejich obsahu a nebylo tak třeba psát kód pro jednotlivé stránky zvlášť. O velké rozšíření CSS se zasloužil Microsoft se svým Internet Explorerem, který podporoval naprostou většinu těchto stylů. Zároveň se začal prosazovat zmíněný Javascript, který umožňoval vytvářet nová navigační a rozkládací menu či formuláře, aniž by k tomu bylo třeba využívat Flash. Pro zobrazení obsahu již také nebylo třeba obnovovat stránku a tak naráz skončila éra tabulkových a „zastaralých― webů. Web se dostal do nové doby, která je zároveň definovaná tím, že dostupný obsah je především tvořen uživateli internetu. Služby jako Facebook či Youtube by bez příspěvků jejich uživatelů již dávno zanikly. S tímto bylo také třeba upravit webové rozhraní tak, aby uživatelům vyhovovalo. Velice rychle se opustila cesta výrazných a kontrastujících barev, které nahradily měkké, ale atraktivní kombinace, na webech se objevovaly nové prvky a originalitě a grafické úpravě se meze nekladly. V posledních pěti letech se však internet stal tak dostupným, že každé dítě na základní škole s ním má své zkušenosti. A jelikož se začaly dostávat do popředí spousty mobilních zařízení, tak se musel začít upravovat i web. Začalo se zjednodušovat, weby se dají ovládat jednoduchými navigačními prvky. Objevily se první responzivní weby, které upravují svůj vzhled a obsah podle toho, na jakém zařízení jsou prohlíženy. Do popředí se dostal plochý design, který se vyznačuje svojí elegantností a ve kterém chybí výrazné barevné přechody, jakými se vyznačovaly předchozí roky. Tyto a další trendy jsou popsány v následujících kapitolách, které se věnují dnešnímu webdesignu.
1.2 Co je webdesign? Předchozí kapitola ve stručnosti popsala, jak se webdesign vyvíjel v průběhu posledních dvaceti let. Ale nedává odpověď na to, co je to vlastně webdesign. Webdesign je v principu o sbírání nápadů a jejich následném uvedení na web v takové podobě, která naláká uživatele. Kombinuje v sobě prvky od layoutu stránky, navigace, výběru fontů, obrázků či barev, které by dohromady měly tvořit atraktivní a přitom uživatelsky přístupný web. Věnuje se každému detailu při návrhu vzhledu, nevyjímaje jednotlivé oddělující čáry, kontrast barev, nebo textury v pozadí jednotlivých prvků. Do webdesignu spadá všechno od grafického návrhu, přes použití HTML a kaskádových 10
stylů až psaní skriptů či marketing. Tato práce však nahlíží na webdesign pouze z pohledu grafického vzhledu a ostatní elementy pouze okrajově zmiňuje.
1.3 Vyuţití webdesignu na základní škole Vybrané téma by se dalo využít ve zjednodušené formě na základní škole, s předpokladem, že by měli studenti možnost pokračovat v podobném odvětví při dalším studiu. Bohužel se jedná o velmi mladé téma a proto je zatím minimum středních škol, které nabízí možnost zvolit si webdesign jako studijní obor. Obor Grafika a webdesign se vyučuje například na SPŠ elektrotechnická a VOŠ Pardubice (Seznamskol, 2014) nebo v podobě Multimédia a webdesign na Soukromá střední odborná škola Hranice, s.r.o (Seznamskol, 2014). Přitom Rámcový vzdělávací program pro základní vzdělávání (dále RVP) přímo uvádí, že by se žáci v rámci nadstandardního studia mohli vzdělávat v oblasti webových prohlížečů a samotná tvorba webových stránek by vedla k rozvíjení klíčových kompetencí, především potom k „samostatnému rozhodování při hledání optimálních řešení nebo využívání možností počítače k prezentaci výsledků své práce― (Jeřábek, 2005, s. 27). Zároveň využití grafických editorů spadá do učiva 2. stupně Základní školy, jejichž činnost by si žáci osvojili právě při prezentaci vlastních děl. Výuka grafiky a potažmo základy webdesignu na Základní škole však mohou narážet hned na několik překážek. Jednou z těchto překážek může být finanční hledisko, které se odvíjí od pořízení dostatečného množství hardwarového a softwarového vybavení pro potřeby studentů. Pořídit vhodný software pro školy nemusí být v jejich finančních možnostech. Zde se však nabízí využití programů, které jsou nabízeny a šířeny jako freeware. Do této kategorie spadá například PhotoFiltre, který zároveň není tak komplexní jako například další zdarma stažitelný program GIMP či komerčně prodávaný Adobe Photoshop. I Photoshop se však dá pořídit za zvýhodněné ceny určené právě pro základní a střední školy. Dalším velkým problémem je potom časová dotace hodin informatiky na základních školách. Výuka jedné hodiny týdně, není dostatečná na kvalitní vysvětlení základů ovládání grafických programů, během níž by zároveň studenti měli vytvářet a prezentovat vlastní díla. Kromě výše popsaných překážek se poté mohou objevit i jiné problémy, jež nelze dopředu předpokládat. Například nemožnost učitele instalovat na počítače nové 11
programy může do značné míry omezit jeho možnosti v rámci výuky předmětu a samotného výběru vhodného nástroje pro tuto výuku (Strnad, 2013). Přes všechny tyto překážky je však třeba zdůraznit, že web je součástí života velké části populace a žáci by měli mít možnost se alespoň v omezené míře seznámit s tím, jakým způsobem se vytváří. Zároveň je zde velký potenciál pro podporu kreativity žáků a jejich vzájemné spolupráce při vytváření společných projektů, které by mohly být součástí výuky informační výchovy na Základních školách.
1.4 Design webu pro různá zařízení Poslední odbočkou v kapitole věnované webdesignu je část o návrhu designu pro zařízení s různými parametry. Těmito parametry jsou potom především rozlišení, velikost obrazovky a rychlost internetového připojení. Jedná se především o velkou řadu mobilních zařízení, která se na trhu objevila během posledních let. Cílem této podkapitoly není vysvětlit postup návrhu vzhledu pro každé zařízení nebo uzpůsobení webu například pro dotyková zařízení. Jde spíše o to přiblížit čtenáři důležitost přizpůsobení designu mobilním zařízením v dnešním rychle se vyvíjejícím světě. „Zatímco se objevují stále nová zařízení, staré přístroje a prohlížeče zůstávají stále v činnosti. Technologie se může vyvíjet velkou rychlostí, to však neznamená, že s ní soused odnaproti bude držet krok.“ – (Kadlec, 2013, s. 2, vlastní překlad) Velkým problémem rychle se vyvíjejících technologií se tak stává právě samotná změna, která přichází s každým nově představeným kusem hardwaru. I dříve musel designér počítat s různě velkými monitory uživatelů a uzpůsobovat web výsledným požadavkům, ale teprve s nástupem mobilních zařízení nastal problém, kdy každé zařízení má naprosto odlišnou velikost displeje a zároveň různě vysoké rozlišení. Je tak třeba zvolit jednu z cest při návrhu nového webu. Vytvořit oddělené webové stránky pro mobilní zařízení a klasické počítače, vytvořit jeden responzivní web, který jednotlivé prvky stránky automaticky přizpůsobí používanému zařízení, nebo udělat pouze klasické stránky a doufat, že to uživatelé s mobilními přístroji nějak zvládnou. Poslední cesta však je spíše cestou do pekla, jelikož ze statistik vyplývá, že mobilní zařízení získávají velikou popularitu právě v přístupu k internetu (O’Toole, 2014). Samotný klasický web se na mobilním zařízení potom sice dá používat, ale především z pohledu jednotlivých ovládacích prvků se nejedná o ideální řešení. Zároveň je třeba si uvědomit, 12
že uživatel nepoužívá často pouze jedno zařízení, ale s jedním přístrojem bude na web přistupovat doma a s druhým například na cestách a pokud mu web na cestách nenabídne stejnou kvalitu jako na počítači, je menší pravděpodobnost, že se na něj bude chtít vrátit.
Parametry přístrojů Je tedy vidět, že se s mobilními přístroji musí počítat a s tím nastupuje otázka parametrů a vzniklých podmínek při používání různých zařízení. Prvním parametrem je zmíněné rozlišení displeje. Po příchodu mobilních zařízení přestalo platit, že každá další obrazovka bude mít větší rozlišení než ta předchozí a v dnešní době existují více než dvě desítky běžně užívaných rozlišení a z tabulky vyplývá, že neexistuje jeden jasně daný standard. Rozlišení obrazovky
Samostatným parametrem je potom rychlost připojení k internetu. Je pravda, že v dnešní době existuje řada kvalitních poskytovatelů internetového připojení, v oblasti
13
mobilního připojení však může docházet k velkým propadům v rychlostech a počtu dat, které může zařízení stáhnout. „Jeden návštěvník může být na vysokorychlostním kabelovém připojení, zatímco druhý se může připojovat pomocí mobilní sítě EDGE s velmi pomalou rychlostí a strašlivou odezvou.“ – (Kadlec, 2013, s. 6, vlastní překlad) Také na tyto uživatele je možné v rámci designu myslet a nečerpat jejich mobilní data nadbytečnou grafikou či jinými detaily, bez kterých by se uživatel na svém zařízení obešel. Přesto lze na webu otevřít stránky, které jsou doplněné takovou hromadou ilustrací, že se web hýbe pomalu i na stolním počítači. Podpora jednotlivých standardů mobilních či jiných prohlížečů závisí zcela na majiteli webu. Ten se musí rozhodnout, zda se mu vyplatí investovat do podpory veškerých prohlížečů, které často nedodržují zaběhnuté standardy. Problémem je, že tyto prohlížeče stalé vznikají a nejsou tak pouze vzpomínkou na minulost. Když se potom dají faktory jako velikost obrazovky zařízení a druh prohlížeče dohromady, vzniká řada variací, se kterými musí tvůrce webu následně počítat
Oddělený mobilní web S příchodem mobilních zařízení schopných prohlížet web vznikla potřeba vytvářet stránky, které se na těchto zařízeních budou správně zobrazovat. Stávající webové stránky neposkytovaly optimální prožitek a začaly tak vznikat oddělené mobilní stránky jako alternativa ke klasickým stránkám, které zná každý ze svého domácího počítače. V principu to znamená, že u každého uživatele je nejprve identifikováno jeho zařízení a podle toho je přesměrován na mobilní nebo klasickou verzi webu (Osterhout, 2014). Díky tomu bylo možné pohodlně přistupovat na web z mobilního zařízení bez omezení pro uživatele. Tento přístup má svoje výhody, ale pojí se s ním také několik omezení či nevýhod. Díky tomu, že jsou obě verze webu oddělené, tak může být každá stránka přímo optimalizovaná pro zařízení, na které je určená. Mobilní verze tak může obsahovat méně, či menší obrázky, které zkrátí dobu načítání, zatímco klasická verze může využít velké obrazovky a předpokladu kvalitnějšího internetového připojení. U odděleného mobilního webu potom není třeba řešit zpětnou kompatibilitu se zastaralými prohlížeči,
14
které často nepodporují nové technologie, které se dnes běžně používají (Olson, 2013). Existují však i problémy, které s oddělenými stránkami nastupují. „V poslední době není pro společnost neobvyklé mít stolní verzi webu, verzi pro tablety, pro mobilní zařízení s dotykovým ovládáním a jednodušší mobilní stránku pro zařízení bez podpory dotykového ovládání – to znamená čtyři různé stránky pro jednu společnost.“ – (Kadlec, 2013, s. 10, vlastní překlad) Je potom otázka, zda na všechny verze stránky umísťovat stejný obsah nebo ho odlišovat, zároveň je třeba propojit uživatele z jednotlivých verzí webu a oddělené stránky také znamenají znásobenou práci v úpravě designu či kódu stránky.
Responzivní web Alternativou k odděleným mobilním stránkám je o něco novější způsob a to responzivní design. Rozdílem oproti předchozímu způsobu je, že je vytvořena pouze jedna stránka se stejným HTML kódem a jsou pouze generovány jiné kaskádové styly podle typu zařízení. Myšlenkou responzivního webu tak není vytvořit mobilní nebo klasický web, ale vytvořit určitý prožitek, který může být navíc umocněn různým ovládáním zařízení nebo například velikostí obrazovky (Kadlec, 2013, s. 16).
Velkou výhodou je, že není třeba zpracovávat několik různých obsahů pro web ani vytvářet dva různé designy, jelikož se web sám přizpůsobí používanému zařízení. Použití responzivního designu je Googlem doporučený způsob, neznamená to však, že by Google znevýhodňoval jiné způsoby tvorby. Je však třeba web správně nastavit (Developers.google.com, 2014). U tvorby responzivního webu je také třeba kompletně předělat kód původní stránky. Proto je možné říci, že tvorba oddělených stránek může být v některých případech vhodnější alternativou. Například existuje-li již klasická verze webu, tak vytvořením mobilní verze lze ušetřit část práce či peněz. Mezi nevýhody se dá zařadit umísťování reklamních bannerů do responzivního designu, jelikož mají často pevně danou velikost a nejsou tak vhodné k použití. Podobně na tom je umísťování obrázků na web. Obrázek vhodný pro velký monitor nemusí být vhodný pro displej malého telefonu. Například je zbytečné načítat obrázek velký 600px na displeji zařízení, které má šířku displeje pouze 400px. Těmto problémům je třeba věnovat pozornost, jelikož rychlejší načítání webu může markantně zvýšit jeho návštěvnost. Příkladem je například portál Shopzilla, kterému v roce 2009 po zrychlení stránek přibylo 25% návštěvníků (Scribd.com, 2009). Pokud je to možné, je také vhodné používat vektorové obrázky, které jsou lépe uzpůsobeny ke změnám velikostí. Responzivní design také vyžaduje větší optimalizaci, především vzhledem k použití ve starších prohlížečích, které řadu dnes běžných technologií nepodporují. S velikostí obsahu na webu potom souvisí následující odstavec, který se věnuje druhům používaných layoutů při tvorbě designu. Problémy při tvorbě totiž mohou způsobovat například použité reklamy, které musí být na webu použity, ale často nejsou upraveny k použití v rámci responzivního designu. „V její excelentní knize Flexible Webd Design, Zoe Mickley Gillenwater definovala čtyři typy layoutů: s fixní šířkou, fluidní, elastické a hybridní“ (Kadlec, 2013, s. 23, vlastní překlad) Podle názvu prvního typu rozložení se dá odvodit, o jaký typ layoutu se jedná. V tomto typu je jasně nastavena pixelová šířka stránky a designér má díky tomu velkou svobodu při tvorbě grafiky, protože stejně jako při vytváření plakátů či obrázků má jasně definovanou plochu, na které se má pohybovat. Nejčastěji používaná varianta je s šířkou 960px, jež je dělitelná čísly 3, 4, 5, 6, 8, 10, 12, 15 a je tak vhodná pro návrhy založené na mřížce (grid-based anglicky). Problémy se však objevují právě při různě velkých 16
obrazovkách, především na těch s menším rozlišením, než je nastavená šířka stránky. Dalším problémem jsou použité prohlížeče, kdy některé počítají šířku stránky včetně skrolovací lišty a jiné bez ní. Jiné problémy může způsobit i samotný uživatel, který může mít nainstalované doplňky či postranní panely, které dále zmenšují šířku stránky. Celkově je tento druh layoutu prozatím nejpoužívanější variantou na webu. (Kadlec, 2013, s. 23-25) Druhou možností je vytvářet fluidní layout, který má nastavenou velikost jednotlivých prvků v procentech a jednotlivé prvky stránky jako navigace, postranní panel hlavní obsah či mezery mezi těmito prvky se přizpůsobují podle velikosti použité obrazovky. Má-li tedy použitá obrazovka šířku 1920px a nastavíte šířku panelu na 30%, bude jeho šířka 576px, zatímco na obrazovce s šířkou 1270px bude pouze 381px široký. Nestane se tak, že by stránka měla vyšší rozlišení než displej a přesahovala by tak za jeho okraj jako v předešlém případě. Problém ovšem může nastat, pokud do toho designu umístíte prvky, které mají svoji šířku pevně definovanou. Elastický layout je založen na podobném principu jako ten fluidní, velikost prvků se však neudává v procentech, ale v em jednotkách. Ty se přímo vztahují k velikosti použitého fontu. Použijete-li tedy písmo o velikosti 16px, pak 1em odpovídá této velikosti. Analogicky potom 2em odpovídá 32px, nebo se dá vyjádřit velikost pomocí čísla s desetinou čárkou, například 0,7em. I u tohoto způsobu se mohou objevovat problémy, především potom, kdy koncový uživatel změní velikost písma. K poměru ke změněné velikosti se upraví prvky, které používají em jednotky. (Kadlec, 2013, s. 26) „Finální možností je hybridní layout, který kombinuje dvě nebo více předchozích možností.“ (Kadlec, 2013, s. 26, vlastní překlad) V principu jde o to, že na stránku můžete umístit prvky s pevnou velikostí, a zbytek obsahu nastavíte procenty. Například postranní panel tak může mít pevnou šířku a obsahová část se bude přizpůsobovat v závislosti na jeho velikosti. Závěrem je možné pouze říct, že volba responzivního webu či oddělených stránek vždy stojí na zadavateli, který se musí rozhodnout, jaký způsob se mu více vyplatí a zda uživatelé nově upravený obsah ocení a využijí. Stejně tak nelze jednoznačně doporučit jeden druh rozložení stránky, jelikož každá možnost má své výhody, ale i nevýhody.
17
2. Kompozice webové stránky 2.1 Kompozice a struktura webu Vytvoření kvalitní struktury a kompozice je jedním ze základních a důležitých bodů při navrhování nového webu. Je jedno, zda se jedná o osobní nebo firemní web, jestli má návštěvníky pobavit nebo vzdělat. Vždy je třeba na začátku vytvořit konkrétní strukturu, ze které se bude vycházet, a která se bude zaplňovat obsahem a grafikou. Ještě předtím, než ale grafik vytvoří samotný návrh, je vhodné se podívat na zadání práce a požadavky klienta. Je potřeba zjistit zaměření webu, pro koho je určen, jestli se jedná o firemní nebo osobní web případně jaký obsah na něm bude zveřejněn. Čím více informací designér před začátkem práce dostane, tím spíše může být zadavatel s výsledkem spokojen. Jakmile jsou tyto požadavky jasně dané, je možné přistoupit k samotnému návrhu. Už z nadpisu vyplývá, čemu se tato kapitola věnuje, tedy samotnému návrhu rozložení webové stránky. Jsou zde popsány jednotlivé prvky, které se na webu objevují, od loga a navigace až po zápatí stránek. Jejich využití a rozmístění na stránce tak, aby byly pohodlně přístupné pro uživatele. Designér si musí uvědomit, že sice vytváří návrh jako určité „umělecké dílo―, ale že někdo další bude toto dílo využívat a proto by mělo být dobře použitelné a čtenář by měl strávit více času nad obsahem stránek, než nad hledáním jednotlivých navigačních prvků.
Kompozice Stejně jako při pořizování fotografií či tvorbě dokumentů, tak i při tvorbě webových stránek existují pravidla kompozice. Využitím těchto pravidel lze návštěvníka webu nasměrovat na důležitou oblast a vylepšit jeho zážitek. Pomocí pravidel kompozice se na vymezeném prostoru mohou rozmísťovat texty, grafika, ovládací prvky nebo ilustrace stránek. Kompozice udává vzájemné umístění prvků, kterým je možné ovlivnit, kam se čtenář podívá nejdřív a je tak možné mu předkládat důležité informace a ovládací prvky ve zvoleném pořadí (Krčmář, 2006, s. 50). Existuje několik způsobů a teorií, jak vytvořit kompozici stránky. Pro tuto tvorbu lze využít například teorii zlatého řezu, podobně jako u fotografií, nebo vytvořit návrh pomocí takzvané Z šablony.
18
Zlatý řez byl využíván po dlouhou dobu v architektuře, designu i umění. Na lidské oko působí poměr tvořený zlatým řezem velice příjemně a přitažlivě, což je důvod, proč se ho v dnešní době využívá při pořizování fotografií. Bylo vypočítáno, že ideální poměr zlatého řezu udává číslo 1,618~, které vychází z Fibonacciho posloupnosti (Fractalfoundation.org, 2013). Ve webdesignu se toho dá využít k tvorbě poměrů mezi jednotlivými oddíly stránky. V praxi to znamená, že vhodnou velikost jednoho sloupce stránky lze odvodit od celkové velikosti oddílu viz obrázek.
Obrázek 4 Vyuţití zlatého řezu (Remick, 2008)
Webdesign, stejně jako umění, však většinou není o počítání pixelů a zlatý řez umělci často využívají nevědomky. Zjednodušeně lze toto pravidlo uplatnit tvorbou webu pomocí třetin, tedy rozdělením stránky na třetiny a následným umístěním sloupců podle rozdělené mřížky. Nevýhody této kompozice se mohou projevovat, pokud se šablona webu přizpůsobuje poměru obrazovky a poměry mezi prvky se tak automaticky mění. Jinou možností je zmiňovaná Z šablona, ve které se důležité prvky umísťují podle toho, jak lidské oko nahlíží na stránky. Člověk se nejprve podívá do levého horního rohu stránky a skončí v pravém dolním rohu. Právě z tohoto je odvozen název kompozice, který je orientován do písmene Z nebo také do písmene F (1stwebdesigner, 2015).
Další možností je uzpůsobovat web přímo podle návštěvníků. Toho lze dosáhnout využitím takzvaných tepelných map (heatmap, 2015) nebo eye trackingem. Tedy přímým zjišťováním, na které oblasti stránky se uživatelé webu zaměřují a důležitý obsah do těchto oblastí umísťovat. Pomocí těchto nástrojů lze zjistit, která část obsahu návštěvníky zajímá, co na webu ignorují a podle toho následně web upravovat. Je však třeba nejprve provést průzkum, který slouží k získání dat, než je možno výsledky na webu aplikovat. Nelze jednoznačně určit, která kompozice je nejlepší, designér může k těmto kompozicím dojít intuitivně, případně může využít jiných existujících dělení.
Jednotlivé prvky webu Předchozí oddíl se věnoval webu jako celku z pohledu kompozice. Následující část se zaměřuje na jednotlivé části webu a prvky, které tuto kompozici tvoří. Jedná se o hlavní části stránky, které jsou umístěny právě do výsledné kompozice. Těmi hlavními prvky jsou záhlaví webu, navigace, hlavní obsahová část a zápatí stránky. Tyto prvky potom mohou být doplněny například o vyhledávací či informační panely.
Záhlaví stránky Záhlaví, nebo také hlavička, je část obsahu webu, která slouží k jasné identifikaci stránek. Nachází se na naprostém vrcholu webových stránek a obvykle obsahuje prvky, které jasně představují zaměření webu, případně název firmy. Těmito prvky je myšleno především logo, název webu nebo firmy provozující web, případně krátký slogan popisující činnost. Logo by mělo určitým způsobem reprezentovat web a zároveň by mělo být originální, aby bylo jasně rozpoznatelné a lidé si ho mohli spojit právě s webem nebo s firmou, které patří. Stejné logo se potom může použít na vizitkách, případně v hlavičce dokumentů firmy. Umísťuje se často v levém horním rohu a mělo by odkazovat na úvodní stránku webu a sloužící stejně jako tlačítko „Domů― v navigaci. Logo potom bývá doplněno názvem či rychlým popisem, jež by měly uživatele zaujmout a stručně informovat o zaměření webu. Celé záhlaví webu by potom mělo mít sjednocující podobu a mělo by tedy být na všech listech webu stejné.
Navigace Vyjma samotného obsahu webu je navigace pravděpodobně nejdůležitějším prvkem pro návštěvníka webu. Existuje spousta druhů a grafických úprav navigací, ale každá by měla dodržovat jistá pravidla (Krčmář, 2006, s. 46), která slouží k přehlednosti a orientaci na webu. Navigace by měla být jasně viditelná a uživatel by ji měl mít vždy pohodlně přístupnou. Je proto vhodné ji umísťovat právě do míst, která vychází ze zlatého řezu nebo Z struktury. Zde se potom dělí navigace na horizontální a vertikální. První zmíněná se umísťuje na vrchol stránky, případně pod něj. Vertikální navigace se potom objevuje především v levém postranním panelu, případně v tom pravém. Jednotlivé druhy navigací jsou popsány níže. Se zmíněnou přístupností potom souvisí pravidlo, že by se navigace neměla hýbat z místa. Je nepřípustné, aby se navigace na stránce pohybovala, nebo dokonce měnila jednotlivé obsažené prvky. Vedlo by to akorát ke zmatení uživatele a znepříjemnění jeho zážitku na stránce. Navigace by měla 21
také obsahovat odkaz na domovskou stránku webu. Uživatel by měl mít vždy jasně vyznačenou možnost, jak se vrátit na začátek jeho prohlížení a odkaz skrývající pod logem webu nemusí být dostačující. U složitějších webů je vhodné navigaci doplnit o Drobečkovou navigaci (anglicky Breadcrumb Navigation) (Adaptic, 2010), jež pomáhá uživateli zorientovat se ve struktuře webu a především s nárůstem obsahu na webu se může stát nepostradatelnou. Samozřejmostí by potom měla být logická struktura prvků navigace, tedy od obecných a jasně srozumitelných hesel po ty konkrétní.
Struktura navigace Uživatelé se mohou na Vaše stránky dostat různými způsoby, ať už pomocí vyhledávacích enginů nebo přímým odkazem. Pointa ovšem je, že ne vždy se objeví přímo na domovské stránce Vašeho webu. Je také možnost, že na webu využíváte více než jeden druh navigace. Tyto navigace, pokud odkazují na stejné informace, by spolu měly úzce souviset a měly by mít jasně danou strukturu. Především potom, když použijete jednu navigaci k nalezení tématu na stránce a druhou potom k orientaci v daném tématu. Nesmí se stát, že každá navigace bude odkazovat stejnými názvy na různé stránky, případně že jedna navigace nebude souviset s předchozí. Vytvořte si proto nejprve jasnou hierarchii odkazů, která půjde od obecných témat k těm konkrétnějším podle toho, jak předpokládáte, že se uživatelé budou na Vašem webu pohybovat. Názvy témat by potom měly být jasně vypovídající a dostatečně popisné. Přesto by však neměla Vaše navigace obsahovat nadměrné množství podkategorií, kterými by se uživatel musel složitě proklikávat.
Druhy navigace Jak již bylo zmíněno, existuje celá řada grafických úprav navigací. Ty se dají rozdělit do dvou hlavních tříd a to na horizontální a vertikální navigaci (About, 2008). Tyto třídy se potom mohou vzájemně doplňovat a kombinovat. Horizontální navigace, tvořena vodorovným textem, by měla obsahovat pouze několik hlavních sekcí webu. Jedná se o často používanou variantu, kterou lze najít například na webech firem, jako jsou Google či Apple. Grafické úpravy této navigace může být docíleno čistým HTML kódem doplněným a kaskádové styly, nebo přímo grafikou vytvořenou v některém grafickém editoru. Hlavní prvky horizontální navigace mohou být doplněny rozbalovacími menu, která obsahují odkazy na konkrétní podsekce stránek. Velmi populární jsou rozbalovací menu, která se otevřou po přejetí myší bez nutnosti kliknout levým tlačítkem. S tímto se však pojí problém, který vzniká u dotykových displejů, 22
které ve velké většině nemají možnost pouze přejet nad prvkem podobně jako myší na počítači. S tímto problémem však počítá například technologie společnosti Samsung Air View (Samsung, 2014), která tuto funkci podporuje a telefon spolupracuje i s prstem či perem, které se displeje přímo nedotýkají. Alternativou je nastavit rozbalovací menu na kliknutí místo na přejetí kurzorem. Horizontální navigace také může být přímo součástí hlavičky webu. Příkladem může být Facebook, který kombinuje v jednom oddílu jak logo společnosti, tak hlavní nabídku a vyhledávací panel. Druhou třídou je potom vertikální navigace. Již z názvu je jasné, že se jedná o svislou navigaci zpravidla umístěnou na levé straně webu, i když se s ní lze setkat i na druhé straně stránky. Tato navigace je využívána často pro odkazování listů s delšími názvy respektive listů odkazujících na podsekce k hlavním sekcím umístěným v horizontální navigaci. Názorným příkladem vertikální navigace může být například web Google Ventures (Google, 2014), který má velice elegantní svislé menu. Jednotlivé navigační prvky je potom možné doplnit drobnou grafikou ve formě ikon, které reprezentují jednotlivé prvky navigace. Tyto ikony by měly být vytvořeny tak, aby si byl podobný jejich styl, který by měl korespondovat s celkovým designem webu.
Hlavní obsah I když jsou záhlaví a navigace důležitými prvky webu, tak hlavním důvodem, kvůli kterému uživatelé navštěvují web, je jeho obsah. Zde by se měla spojit forma s obsahem. Kvalitní text by měl být podporován stejně kvalitní úpravou, která pomůže uživateli v jeho snadnějším zpracování. Výběr vhodného písma, jeho následné formátování a úpravy popisuje kapitola webové typografie dále v textu. Text by vždy měl být v dostatečném kontrastu s pozadím tak, aby byl dobře čitelný, pozadí textu by nemělo mít výraznou barvu, aby neodrazovalo od čtení a odsazení samotného textu od okraje oddílu by mělo být vždy větší, než jsou mezery mezi jednotlivými slovy.
Zápatí Většina webových stránek v určitém místě končí a na tomto místě je vhodné umístit zápatí, které uživatele jasně upozorní na to, že se dostal na úplný závěr stránky. Záhlaví neboli patička se nachází v dolní části stránky a může obsahovat řadu odkazů, užitečných informací nebo doplňující grafiky. Zpravidla zde bývá umístěn copyright autora stránek, případně použitý systém, na kterém web běží. V rámci odkazů se zde umísťuje zjednodušená struktura stránek a také dnes velmi populární odkazy na sociální 23
sítě spojené s danými stránkami, mezi něž patří například Facebook, Twitter nebo Google+. Velmi často patička obsahuje kontakt na majitele, který potom návštěvník nemusí hledat schovaný v některé podsekci webu. Součástí zápatí mohou být také odkazy na RSS kanál, mapa stránky nebo stáří webu, které udává, jak aktuální stránky jsou.
Doplňující prvky Výše popsané části webu patří k základním prvkům, které se v různých podobách objeví na většině webových stránek. Tyto prvky potom mohou být doplněny například o vyhledávací panel, který však nemá předem definovanou polohu. Ne že by se pohyboval po stránce, ale lze jej na webech nalézt v různých podobách jak v horizontální tak vertikální navigaci, někde dokonce v samotné hlavičce webu. Především u komplexnějších webových projektů se potom jedná o důležitou součást designu, která pomáhá uživateli získat požadovaný obsah a zvyšuje tak atraktivitu pro uživatele. Vyhledávací pole by mělo být dobře viditelné, aby ho uživatel nemusel složitě hledat. Často se také na stránkách objevují oddíly poskytující užitečné informace, nebo nezbytná a všudypřítomná reklama, která má na webu také své místo. Posledním zmíněným prvkem budou prázdná místa stránky, která bývají v literatuře (Beaird, 2010, s. 27) řazená právě do prvků stránek. Prázdná místa jsou plochy stránky, kde není umístěn žádný text či ilustrace. Mezi tato místa se dá řadit i odsazení textu či jednotlivých bloků stránek. Web není vždy třeba zaplnit od záhlaví až po zápatí obsahem a naopak správným využitím „bílých míst― lze vytvořit moderní a vzdušný design, který nepůsobí přeplněně.
24
Obrázek 7 - příklad rozloţení prvků webu
2.2. Pouţití barev na webu Volba barvy pro web je velice důležitou součástí tvorby atraktivních stránek a vlivu barev na psychologii člověka se zabývá mnoho publikací. Velkým problémem pro designéra stránek může být, že každé zařízení zobrazuje barvy jiným způsobem. Jinak mohou být barvy zobrazeny na nejnovějších monitorech, které jsou schopny zobrazit miliony odstínů barev, a jinak se bude web zobrazovat na starém zažloutlém monitoru. Zároveň si každý bude prohlížet web při jiných světelných podmínkách nebo může trpět vadou oka, která mu znemožňuje správné vnímání barev. V praxi se potom může stát, že si web bude prohlížet člověk na svém mobilním zařízení, při plném slunečním svitu a jeho vnímání barev bude jiné než u designéra, který web navrhoval při kvalitních světelných podmínkách. Proto je lepší si prohlédnout barvy na více zařízeních a na různých místech, aby se předešlo velkým rozdílům v odstínech barev a stejně tak může být vhodné vybírat barvy tak, aby byly přístupné pro co nejvíce lidí.
Psychologie barev Jak již bylo napsáno, na vliv barev na lidskou psychiku se zaměřuje celá řada literatury. Stejně tak se na něj zaměřují prodejci jídla, kteří zjišťují, na jaké barevné kombinaci bude porce vypadat největší, nebo majitelé webových portálů, kteří chtějí dopředu vědět, která z barev přitáhne na jejich stránky více návštěvníků a přiměje je utratit na stránkách peníze. Psychologie barev však není exaktní věda a na každého mohou barvy působit jinak a působení na lidi často nebylo vědeckým výzkumem ověřeno. Na druhou stranu však pro výzkum barev bylo vytvořeno více studií, než na jakýkoliv jiný 25
designový prvek (Dawson, 2012, s. 148). Výzkumy se zaměřují na ovlivňování lidského chování pomocí barev, na optické iluze vytvářené pomocí barev, teplotou barev nebo na trendy využití barev na webu. Pomocí správné volby barvy je designér schopen navodit u uživatele pocit tepla, nebo může nenápadně upozornit na důležité prvky stránky. Proto je třeba volit barevnost podle zaměření webu. Červená barva například zvyšuje krevní tlak a je považována za barvu, která úzce souvisí s láskou a urychluje metabolismus (Beaird, 2010, s. 50). Stěny natřené na červeno mohou u lidí vyvolávat agresivitu, tento efekt však nemá oranžová barva, která stejně jako červená podporuje metabolismus a je považována za méně formální barvu, což jí činí méně vhodnou třeba pro loga velkých korporací. Dále jsou zde barvy jako žlutá nebo zelená, kdy jedna působí jako výstražná a informativní barva, která se používá například u taxi služeb, nebo pro označení elektrického vedení varovnými značkami a druhá je naopak uklidňující barvou, která je spojena s přírodou. Důležité je však také správné využití kombinací jednotlivých barev. Zatímco černý text na zeleném pozadí může působit uklidňujícím dojmem, jasně zelená na černé může lidské oko naopak dráždit. Existují také protiklady k účinkům jednotlivých barev, zatímco červená a oranžová mohou vyvolávat pocit hladu, modrá má účinek přesně opačný, jelikož působí uklidňujícím dojmem a potlačuje pocit hladu. Samostatnou kapitolou potom je černá a bílá barva. Tyto barvy mají často předem předpokládaný význam. Když se řekne zlo, tak se člověku často jako první vybaví černá barva a stejně tak myslíme na bílou ve vazbě s čistotou. V reklamách díky tomu vidíme jako symbol čistoty bílé prostěradlo nebo nevěstu v bílých svatebních šatech, jelikož je v naší kultuře silně zakořeněno, co bílá barva vyvolává. Na webu mohou být tyto asociace často potlačeny, jelikož je bílá používána obvykle jako podkladová barva pro text, přesto tyto spojitosti stále existují. Černá však nemusí souviset pouze s negativními prvky, může také značit moc nebo eleganci. Vnímání barev se liší jak člověk od člověka, tak i různé kultury vnímají barvy různými způsoby. Stejně tak jsou rozdíly mezi vnímáním barev z pohledu mužů a žen. (Beaird, 2010, s. 50-52)
26
Obrázek 8 - příklad výstraţné barvy (wpclipart.com, 2015)
Z tabulky 1 vyplývá, že muži i ženy vnímají barvy jednoznačně jinak, a proto by měl být tento faktor brán do úvahy při volbě barev. Když bude web zaměřen spíše pro ženskou polovinu, tak by měl využívat především barev působících na ženy a naopak. Zároveň by se nemělo na jedné stránce míchat velké množství barevných kombinací. Designér by neměl používat více než pět barev na jednu webovou stránku, případně by měl pracovat s jejich odstíny. Zároveň by se měl zaměřit na zvýrazňování důležitých prvků, jehož lze dosáhnout správným využitím teploty jednotlivých barev.
Tabulka 2 - Přitaţlivost barev (Krčmář, 2006, s. 57)
28
Teplota barev Jeden z parametrů všech barev z viditelného spektra. Člověk vnímá barvy od červené po žlutou jako teplé barvy, od zelené po modrou jsou potom barvy vnímány jako studené. Za studené jsou také považovány všechny odstíny šedi. Příkladem využití teploty barev může být označení potrubí studené a teplé vody. Studená je značena modrou barvou a teplá červenou. Při navrhování designu webu se teplota barev dá využít k upoutání pozornosti čtenáře na důležitou část stránky. Je-li použitá teplá barva popředí na studeném pozadí, má teplá barva tendenci vystupovat a je tím zdůrazněna.
Obrázek 9 - teplá barva (červená) opticky vystupuje proti chladné
Tímto se dá upoutat pozornost na důležité prvky stránky. Naopak studené barvy je vhodné používat jako barvu pozadí, jelikož k sobě nepřitahují tolik pozornosti a neruší tak čtenáře od samotného obsahu stránky. Pozornost by se také měla věnovat sytosti barev. Ta se mění v závislosti na tom, je-li do barvy přidávána černá nebo bílá. Přidáváním těchto barev ztrácí základní použitá barva na intenzitě a nemusí být tak výrazná nebo přitažlivá. Neznamená to však, že by se ztrátou intenzity byla barva méně použitelná. Naopak se dá použít jako podklad, který neodvádí zbytečně pozornost a zároveň působí na oko uklidňujícím pocitem.
Problémy při výběru barev Předchozí oddíl popisuje působení jednotlivých barev na lidskou psychiku a zaměřuje se především na jednotlivé barvy. Cílem designéra však je zkombinovat tyto barvy do konkrétních barevných schémat, ve kterých budou určité prvky správně zdůrazněné teplotou barev, design nebude příliš unavovat oči uživatele a zároveň musí být design dostatečně přitažlivý, aby návštěvníky zaujal. Navíc by měl při navrhování dávat pozor, při použití určitých barev jelikož v populaci existuje nezanedbatelné procento lidí, kteří 29
trpí například částečnou slepotou. Zhruba jedna žena z dvou set trpí touto vadou, u mužů se tato hranice pohybuje dokonce kolem osmi procent populace, tedy jeden z dvanácti mužů trpí barevnou slepotou (Colourblindawarness.com, 2010). Tito lidé mohou mít problém s rozeznáváním jednotlivých barevných kombinací a často nepoznají rozdíl mezi barvami, které obsahují odstíny červené nebo zelené barvy. Otestovat webové stránky proti barvosleposti potom lze například využitím nástrojů zaměřených na tuto problematiku (Wickline, 2003). Jsou tedy barevné kombinace, kterým je lépe se vyhnout.
Mezi ně patří například oranžová a žlutá, červená a
oranžová nebo fialová a modrá barva (Krčmář, 2006, s. 50). Také je dobré se vyhnout příliš výrazným kombinacím, jako je například zelená barva na červeném pozadí, nebo křiklavě zelená na bílé, jelikož to jsou kombinace, které jsou schopny podráždit oči čtenářů.
Barevná schémata Toto byly příklady barevných kombinací, které se k sobě z nějakého důvodu nehodí, cílem tohoto odstavce bude naopak představení barev, které k sobě harmonicky sednou. S výběrem vhodných kombinací designérovi pomohou barevná schémata, jichž existuje celkem šest základních druhů, mezi něž se řadí schémata monochromatická, analogická, doplňková, kontrastní, triáda nebo tetráda (Beaird, 2010, s. 57), případně jejich další variace a úpravy. Jedná se o sady barev, které spolu tvoří harmonický vzhled a nepůsobí rušivě. Návrhář může tyto barvy vybírat podle vlastního citu a zkušenosti, nebo může využít již připravených a vyzkoušených schémat. Prvním krokem je výběr základní barvy, která by měla korespondovat se zaměřením webu. Tuto barvu si většinou volí zákazník nebo zadavatel projektu. Od této základní barvy se potom v závislosti na zvoleném schématu budou odvíjet další použité barvy. Existuje celá řada generátorů, které podle vnitřních algoritmů dopočítávají vhodné barevné kombinace, a zároveň si na nich může tvůrce zjistit, jak jeho volbu budou vnímat lidé s již zmíněnými zrakovými vadami (Colorschemedesigner.com, 2009).
30
Obrázek 10 - spektrum viditelného světla (Dobre-svetlo.cz, 2014)
To jak barvu vidíme, určuje její vlnová délka. Barvy, které se pohybují ve vlnových délkách mezi 380nm až 750nm jsou pro člověka viditelné a tyto barvy se zobrazují na chromatickém kruhu, viz obrázek 11. Podle toho, kde se námi použité barvy na kruhu pohybují,
se
rozdělují
barevná
schémata.
Mezi
základní
schémata
patří
Monochromatické schéma, které vychází z jediné barvy a z většího počtu jejích odstínů (Beaird, 2010, s. 57), které vzniknou změnou jasu a sytosti, nebo doplněním bílou a černou barvou. Tento výsledek je příjemný pro oči, problémem však může být vytváření zvýrazněných částí, jelikož se zde nevyužívají kontrastní barvy ale pouze odstíny jedné a té samé barvy. Využití tohoto schématu může být například u firem, které zakládají svoji značku na konkrétní barvě a potom i web barevně zapadá do jejich vize.
Dalším druhem je Analogické barevné schéma, jež je tvořeno barvami sousedícími na chromatickém kruhu. (Beaird, 2010, s. 59) Zvolené schéma je tedy většinou laděné do teplé či studené varianty, je však možnost vybrat barvy na přelomu mezi teplými a studenými odstíny a využít jich k již zmíněnému podtržení jiných barev. Pravidlem je, že by vybrané barvy ve schématu neměly překročit jednu čtvrtinu kruhu, aby pro návštěvníka nepůsobily barvy rušivým dojmem. Případně použitá kontrastní barva by měla sloužit pouze pro podtržení hlavních barev schématu. Doplňkové nebo také komplementární schéma představuje barvy, které jsou na rozdíl od předchozích příkladů umístěny na opačných stranách chromatického kruhu. Správným použitím barev může návrhář dosáhnout jak rovnováhy mezi barvami, tak krásného kontrastu mezi nimi. Dá se také využívat kombinací schémat, kdy do popředí lze umístit podobně laděné barvy a na pozadí se použijí právě doplňkové barvy, které však nemusí být nutně přesně opačné. Příkladem mohou být třeba rudé květiny na zeleném pozadí. Je také důležité zvolit, která z barev bude tou hlavní, jelikož se od ní bude odvíjet barevná teplota vzhledu. S výběrem správné kombinace je však třeba zacházet opatrně, jelikož doplňkové barvy mohou mít tendenci se navzájem zvýrazňovat. Jinými variantami potom jsou měkce kontrastní schéma, triáda a tetráda. Měkký kontrast vznikne, jsou-li k základní barvě přidány jako doplněk dvě blízko sousedící barvy. (Beaird, 2010, s. 64) Vznikne tak kontrast mezi barvami, který však není tak intenzivní jako při použití přesně opačných barev a schéma tak může být příjemnější pro oči. Triáda, jak již název napovídá, je tvořena třemi barvami, které jsou na barevném kruhu rozmístěny pravidelně v rozmezí 120°. Stejně tak jako je jasný původ Tetrády, která je tvořena čtyřmi barvami, které jsou v kruhu rozmístěny do čtverce či obdélníku a tvoří tak dvojici vzájemně kontrastních barev. Zde je však třeba dávat si velký pozor na výběr barev a je vhodnější volit menší rozestupy mezi základními barvami, aby schéma nepůsobilo až příliš agresivně. Při tvorbě webu se dá řídit spoustou návodů či pouček, ať již z pohledu psychologického, nebo vzhledového. Nelze však určit, který z pohledů je správný, jako nelze určit, která barva je ta pravá, jelikož na každého barvy působí jinak a stejně tak má každý člověk jiný vkus. Pravidlem by však mělo být plánování předem a střídmost 32
při výběru barev. S výběrem barev použitých na webu by také měl být spjat výběr barevnosti písma, které by mělo být v kontrastu se zbytkem stránky, ale zároveň by mělo být příjemné na oči a dostatečně dobře čitelné. Výběrem barev písma, stejně jako správným výběrem druhu písma pro web se zabývá kapitola webové Typografie.
2.3 Design prvků Ne každá část webu však musí být zaplněna jednolitou barevnou plochou. Občas se může stát, že návrh webu splňuje veškeré požadavky, je vytvořen v těch správných barvách, jednotlivé bloky mají správné proporce a jsou dobře umístěné. Dokonce i obsah webu je kvalitní a je psán elegantním a dobře čitelným písmem, ale přece jenom webu něco chybí k dokonalosti. A přestože je dnešní design zaměřený především na jednoduchost a čistotu, není někdy na škodu ho vylepšit. Dnešní trend jednoduchých bílých pozadí, jasně řezaných linií totiž může občas působit chladně a neosobně. Pro vytvoření větší osobnosti by mohl posloužit například obrázek na pozadí, ten však může odpoutávat pozornost od obsahu a navíc zvyšovat přijímaná data. Těmto problémům lze předejít vytvořením vhodné textury nebo přechodu, které jsou méně datově náročné a navíc vytváří webu hloubku a dodatečnou atraktivitu. Navíc je pravděpodobné, že vytvořená textura bude do jisté míry originální a pomůže tak odlišit web od konkurence. Jiným způsobem odlišení a doplnění volných ploch webu potom může být použití oddělovacích čar, jednoduchých tvarů nebo stínování prvků.
Textura a vzorek Nejprve je třeba definovat, co je to vlastně textura respektive vzorek. V reálném světě má každý předmět určitou barvu, ale také konkrétní povrch. Například stůl je dřevěný a právě struktura dřeva vytváří texturu, která je vidět na povrchu stolu. V grafice si lze potom texturu nejlépe představit při 3D modelování, kdy je nejprve vytvořen 3D objekt, na který se potom nanáší povrch v podobě textury. Tato textura může mít základ v obrázku, případně může být náhodně generovaná. Na stejném principu potom fungují textury v designu stránek. Nejprve se vytvoří určitý blok, ať už je to pozadí, část obsahu nebo ovládací prvek, na který se potom nanáší vzorek nebo textura. A právě zde je třeba rozlišit tyto dva způsoby pokrývání povrchu. Textura i vzorek totiž plní velice podobnou úlohu, ale každý trochu jiným způsobem. Zatímco vzorek je většinou tvořen sérií opakujících se bodů, jež dohromady tvoří stále se opakující tvary, textura je často tvořena tak, aby vyvolávala pocit reálného povrchu (Dawson, 2012, s. 141). Textura 33
potom může vypadat například jako dřevěný či travnatý povrch, který se sice může opakovat, ale ne s takovou pravidelností jako v případě vzorku.
Obrázek 12 - Srovnání textury (vlevo) a vzorku (vpravo)
Oba povrchy potom mohou sloužit ke zvýraznění ploch, které by jinak zely prázdnotou. Textury i vzorky lze potom velmi jednoduše tvořit v grafických programech, stejně jako je možné získat elegantní textury v různých fotobankách či webových projektech, na kterých je často možné si samotnou texturu přímo vyzkoušet. Příkladem může být web Subtle Patterns (2014), který nabízí celou řadu textur zdarma, jejichž design je možné si prohlédnout přímo na webu.
Barevný přechod Podobnou funkci jako textury či vzorky může plnit i barevný přechod. Z názvu je jasné, že se jedná o vytváření určitého spektra barev, které přechází z jedné barvy do druhé. Výhodou přechodu je, že může být přímo generován v prohlížeči bez potřeby načítání dodatečné grafiky. Podpora efektu přechodu se sice různí, moderní prohlížeče však již tento prvek dostatečně podporují (W3Schools, 2013). Přechody je také možno vytvářet v grafických programech, které tuto funkci mají často přímo zabudovanou. Výsledný přechod lze potom využít například jako doplněk ke grafice webu. Z obrázku použitého v zápatí stránky tak může být využit přechod do jednolitého designu zbytku webu.
Obrázek 13 - příklad barevného přechodu
34
Pouţití čar a stínů Design však nemusí být tvořen pouze klasickým schématem se třemi jasně oddělenými sloupci. Především při tvorbě moderního designu se často využívá daleko méně výrazných prvků, které oddělují jednotlivé segmenty stránky. A právě k tomuto se mohou perfektně hodit různé druhy oddělujících čar. Jednotlivé části stránky tak mají stejný design, ale přesto jsou jasně oddělené, aby uživateli nesplývaly dohromady. Vytváření samotných čar není v grafických programech problémem, navíc různé typy a tloušťky čar jsou přímo podporované v prohlížečích. Pro tyto klady je vhodné jemné linie na stránkách využívat a to jak v podobě oddělovače, tak jako jemných kontur nebo rámečků k jednotlivým prvkům designu. „Obtížná chvíle nastává, když se začneme odkazovat na objekty z reálného světa, aniž bychom dodržovali pravidla, jimiž se tyto objekty řídí.“ (Anderson, 2012, s. 32) Posílit dojem z designu respektive z navržených webových stránek potom lze i použitím elegantního stínu. Zde je však třeba dbát především na to, aby použití stínu nebylo přehnané a nepůsobilo nepřirozeně a nuceně. Stíny by neměly být příliš roztáhlé a ostře řezané a neměly by na stránce působit rušivě. Na použitém obrázku je jasně vidět, že v prvním případě nevypadá použitý stín přitažlivě, naopak druhý stín působí přirozeně a stačilo pouze nastavit jinou orientaci a intenzitu stylu.
Obrázek 14 - příklad špatně a správně nastaveného stínu (Anderson, 2012, s. 32)
35
3. Obsah webové stránky 3.1 Webová typografie Tato práce rozebírá webdesign především z pohledu grafického návrhu, a proto tato kapitola oproti ostatním vybočuje, jelikož práci s textem zajišťuje kodér stránky. Z tohoto důvodu se v této kapitole mohou objevovat jednoduché částí HTML případně CSS, které jinak nejsou součástí práce. V této kapitole jde především o to vysvětlit důležité body webové typografie, představit si dostupné fonty a přiblížit si problémy, které se mohou objevit při jejich výběru. Také jsou zde popsány základy formátování na webu a na kapitoly jsou uvedeny zdroje, které mohou sloužit pro výběr fontů. Jelikož hlavním důvodem k vytvoření webových stránek je komunikace, případně poskytnutí informací nebo zábavy pro návštěvníky, je potřeba, aby tyto informace byly pro čtenáře přitažlivé a především dobře čitelné. Typografická pravidla popisují, jaký druh písma použít, jaký zvolit font nebo kde správně použít mezery. S těmito pravidly se lidé setkávají pravidelně při tvorbě dokumentů, na které se pravidla vztahují. Například jedna normostrana této práce má jasně definovaná pravidla pro počet znaků na stránce, druh písma, jeho velikost či pro rozestupy mezi jednotlivými řádky. Podobnými pravidly se řídí i webová typografie, která však má svá specifická omezení případně upravená pravidla, jelikož text na webu má jiný účel a formu než text v běžném dokumentu. Tato práce tedy nepopisuje pravidla sloužící například pro správné užití uvozovek ve větě, ale pouze pravidla, která se vztahují přímo k tvorbě webu.
Strukturování textu Výběr písma na web se odvíjí od jeho přitažlivosti, ale především od dobré čitelnosti textu. Ze stejného důvodu je také třeba text správně strukturovat, tedy použít vhodné zarovnání odstavců, odsazení textu nebo zvolit dobře čitelnou velikost. Je-li text umístěn na web bez rozmyslu a správného zarovnání, nevypadá často elegantně, špatně se čte a v některých případech může dokonce vypadávat z předem určených kontejnerů, uživatelé potom mívají problémy najít v textu požadované informace a obracejí se na alternativní zdroje.
36
Těmto problémům se dá předejít dobrým naformátováním textu podobně jako u knih nebo jiných tisknutých dokumentů. Zatímco však u tiskovin je velkým měřítkem počet vytisknutých stran a tedy výsledná cena, na webu toto omezení odpadá. Proto není třeba nastavovat miniaturní písmo nebo zmenšovat řádkování pro ušetření trochy místa. Naopak cílem je, aby čtenář dostal informace, kvůli kterým web navštívil, a proto je vhodné nastavit dostatečné mezery, používat kratší odstavce, které působí vzdušněji a zlepšit tak čitelnost textu. Dobrým způsobem jak upozornit čtenáře na důležité informace může být také zvýraznění části textu. Toho se dá docílit klasickými nástroji jako podtržení či změnou tloušťky slova, jinou variantou může být také celkové odsazení části textu. Zvýrazňovat by se však měly pouze klíčové myšlenky a důležité informace. Také by se neměla jednotlivá zvýraznění příliš kombinovat a autor by je měl používat s mírou. Dalším důležitým bodem je zarovnání textů. V dokumentech se na delší texty používá často pouze jeden druh zarovnání a to zarovnání do bloku. Na webu je však situace komplikovanější. Zatímco vytisknutý text se již měnit nebude, na webu se text mění často, je zobrazován v různých šířkách a na různě nastavených zařízeních. Textové editory podporují funkci dělení slov (Microsoft, 2015), případně se dají slova dělit ručně, proto je možné použít zarovnání do bloku bez větších problémů. Na druhou stranu webové prohlížeče zatím tuto funkci nepodporují nebo není používaná a zarovnání do bloku tak může u kratších odstavců nebo při použití delších slov způsobovat vznik velkých mezer neboli „kráterů― v textu.
Obrázek 15 - problém při zarovnání do bloku (Beaird, 2010, s. 101)
37
Proto je vhodné pro texty volit zarovnání doleva, které zároveň pomáhá s přechodem z jednoho řádku na další. Na střed nebo do bloku se zarovnávají pouze kratší odstavce, u kterých nevznikají zmíněné krátery, případně jich lze využít u některých nadpisů. V neposlední řadě je pro zlepšení čitelnosti dobré nastavit správnou velikost písma a odsazení řádků. V českém průzkumu (Frendrych, Prokop, 2011) bylo zjištěno, že uživatelé preferují písmo na webu ve velikosti 14px, při použitém fontu Arial. Mezery mezi řádky by se měly pohybovat v rozmezí 1,3-1,6 násobku velikosti písma (Křovák, 2013).
Výběr písma na web Velkým problémem při tvorbě stráněk může být výběr písma, jelikož designér musí počítat s tím, jaké fonty má v počítači nainstalovány návštěvník webu. Písmo, které nemá čtenář v systému nainstalované, se mu nezobrazí. Příkladem může být použití fontu Geneva, který má v počítači nainstalováno téměř sto procent uživatelů operačního systému Mac, ale pouze dvě procenta uživatelů Windows (Dan’s Tools, 2011). Takže zatímco na jednom systému by se písmo zobrazilo správně naprosté většině, tak na druhém systému by bylo automaticky přiřazené jiné písmo a design by již nevypadal tak, jak ho grafik navrhnul.
Obrázek 16 - devět písem instalovaných standardně na Windows i OS X (Beaird, 2010, s. 95)
38
Jednou z možností, jak tomuto problému předejít, je použít jeden z fontů na „bezpečném seznamu“ (Beaird, 2010, s. 94), který tvoří devět základních písem, viz obrázek 16, případně využít alternativy, která je bezpečnému fontu podobná. Dostupnost fontů na jednotlivých platformách lze zjistit například z webu cssfontstack.com. Díky kaskádovým stylům potom můžeme vybrat několik druhů fontů, které se zobrazí podle nastavené priority v závislosti na dostupnosti fontu v systému návštěvníka webu. Takový zápis potom může vypadat například takto. „font-family: Helvetica, 'Arial Rounded MT Bold', Arial, sansserif;“
Čtenáři by se potom v závislosti na nainstalovaných písmech nejprve zobrazilo písmo Helvetica, při jehož absenci by to byl Arial Rounded MT Bold případně prostý Arial, který je na výše zmíněném bezpečném seznamu. Pro případ, že na počítači není nainstalovaný ani jeden z uvedených fontů existuje pět obecných rodin fontů (Bos, 2001), které se v seznamu uvádějí nakonec.
Druhou možností je využít fontů dostupných online pomocí CSS stylu font-face. Díky tomuto lze nastavit textu libovolný webově dostupný font. S touto variantou se ovšem spojuje několik komplikací. Tou může být doba načítání stránek, která se s přidanými fonty prodlužuje, jelikož prohlížeč musí navíc stahovat další písmo, které není uložené v počítači. Zároveň je třeba dbát na autorská práva majitele fontu, jelikož odkazování na konkrétní fonty může být s těmito právy v rozporu. Tomuto lze předejít využitím fontů, které jsou určeny pro volné šíření, kterými jsou například Google písma (Google, 2015). 39
Dalším problémem je kompatibilita příkazu font-face se staršími prohlížeči. V tabulce 2 je uvedeno, v kterých verzích začaly hlavní webové prohlížeče tento styl podporovat. Jedná se však o kvalitní a stále oblíbenější způsob, jak na web zvolit přitažlivá a osobitá písma. Použití na stránkách je potom velice jednoduché. V hlavičce stránky je třeba odkázat na požadovaný font. (příklad pro písmo Allura) „“
Přidat pojmenování fontu do CSS stránek. „font-family: 'Allura', cursive;“ A používat font stejně, jako když je nainstalován přímo v počítači. Mezi další možnosti se dá řadit nahrazení fontu pomocí Flashe, Javascriptu případně obrázků, u těchto způsobů však nastává problém, že jsou přímo závislé na uživateli. Je totiž běžné, že někteří uživatelé tyto technologie blokují a požadovaný font by se jim nezobrazil. @font-face Chrome
Firefox
Safari
IE
Opera
Verze
3.6
3
9
10
4
Tabulka 3 - podpora stylu font-face (W3Schools, 2011)
Druhy písma Na internetu je dostupná spousta placených fontů, stejně jako fontů volně šiřitelných. Ty se dají řadit do kategorií, z nichž většina lidí zná ty hlavní, které se shodují s již zmíněnými obecnými fonty. Jedná se o patková písma, bezpatková písma, písma s pevnou šířkou, která připomínají písmo psacího stroje, ozdobná a písma napodobující rukopis. Jednotlivé druhy písem se vzhledově liší, jelikož byly vytvořeny pro jiné účely.
Patkové nebo bezpatkové písmo O tom, jaký druh písma bude na webu použit, rozhoduje grafik, případně zadavatel práce, obecně je ale nejvíce rozšířené používání bezpatkových a patkových písem pro hlavní text. Je to především díky jejich dobré čitelnosti, jelikož obsah by měl mít přednost před formou a čtenář by neměl vnímat jaký je použit font, ale co se mu snaží text sdělit. Vede se také dlouhá debata, jestli používat spíše patková nebo bezpatková písma. Převládá názor, že bezpatková písma jsou na web vhodnější, jelikož obrazovky 40
mají stále menší počet bodů na palec než tisknutý text (Kole, 2013) a text psaný patkovým písmem může být hůře čitelný, hlavním argumentem je tedy stále technická stránka. Záleží však také na zvolené velikosti písma a osobní preferenci. Grafik však může tyto dva druhy libovolně kombinovat a použít bezpatkové písmo pro hlavní text a zlepšit tak jeho čitelnost, zatímco pro nadpis může zvolit elegantní patkové písmo. Nejvíce používanými písmy jsou Arial a Verdana (Beaird, 2010, s. 103) v případě bezpatkových písem, u těch druhých je to Times New Roman, jež jsou dostupné na všech hlavních platformách. Existuje však celá řada modernějších či méně okoukaných písem, která se dají použít při výběru hlavního fontu. V případě nadpisů je pak dostupná celá řada desénových písem z kategorie ozdobných či ručně psaných.
Obrázek 18 - bezpatkové a patkové písmo
Ozdobná písma Již z názvu vyplývá, že se jedná především o dekorativní písma. Z obrázku 5 je patrné, že se nejedná o písma vhodná pro delší odstavce, jelikož řez těchto fontů není určen pro pohodlné čtení uživatele, ale především pro upoutání jeho pozornosti. Proto je vhodné používat tyto fonty v textu velmi střídmě, případně je využít pouze do nadpisů, nebo jako odrazový můstek při vytváření loga značky nebo firmy. Je však třeba dbát pozor na výběr správného písma, jelikož některá výrazná písma nemusí vždy korespondovat například s duchem usedlejší společnosti.
Neproporcionální písmo Zatímco u většiny písem je každý znak jinak široký, neproporcionální písmo je postavené na tom, že všechny znaky zabírají stejně místa. Takže zatímco u Arialu jsou písmena „l― a „w― různě široké, u neproporcionálního Courieru jsou znaky doplněny o pevné mezery a znaky tak mají stejnou šířku. Tato vlastnost písma vychází z historie psacích strojů, které neuměly rozlišovat mezi různě širokými znaky, a proto musely být znaky stejné. V dnešní době se tohoto druhu písma využívá především v některých tabulkových programech, kde je vhodné, aby byl text pod sebou zarovnaný, pro odlišení kusu textu případně jako výpis části kódu. V době, kdy na webu nebyla dostupná 41
grafika v podobě obrázků, se také tato písma využívala jako nástroj pro vytváření textových obrázků.
Ručně psaná písma Poslední kategorií jsou písma, která se snaží napodobit ručně psaný text. Nejznámějším je jedno ze základních písem Comic Sans, které se ovšem v poslední době setkává s negativními ohlasy především kvůli jeho nadužívání na webu nebo dokonce v oficiálních dokumentech. Existuje tak celá řada webů, která proti používání toho písma bojuje (ComicSansCriminal, 2010). Ručně psaných fontů je však daleko více a na rozdíl od předchozího zmíněného je lze využít k vytvoření elegantních a osobitých návrhů. Navíc se oproti skutečně ručně psanému písmu vyvarujeme nečitelnosti a nepravidelnosti při psaní.
Obrázek 19 - různě řezy písma
Shrnutí Předchozí odstavce popsaly, jakým způsobem je vhodné text na stránkách strukturovat, která písma jsou pro web bezpečná a která na něj nehodí. Také zde byly uvedeny příklady, jak použít písma, která uživatel nemá v počítači. Kde ale získat elegantní a osobité fonty, které se dobře čtou? Také je třeba myslet na licenční podmínky u použitých fontů, jelikož i na použití cizího písma se vztahuje autorský zákon. Proto je třeba si vždy přečíst licenční podmínky na stránkách, kde jsou fonty nabízeny. Existuje řada webů, které nabízejí fonty zdarma i ke komerčnímu využití, ale jsou i fonty, které je před použitím třeba zakoupit a to buď platbou za jednotlivé rodiny fontů, nebo formou předplatného. V tabulce jsou příklady stránek poskytujících písma.
42
Fonty zdarma
Placené fonty
1001fonts.com
fontshop.com
Fontspace.com
fontspring.com
dafont.com
typekit.com Tabulka 4 - uţitečné odkazy ke staţení fontů
Další možností při výběr písma jsou například Google fonty, které jsou všechny zdarma, volně šiřitelné a upravené pro použití na webu. Navíc je zde možnost zvolit si přesná kritéria a web již podle nich sám vybere vhodný font. Zároveň je vypočítána zátěž při použití písma na webu a je přímo poskytnut CSS kód pro jednoduché použití fontu. Výběr konkrétního písma potom už záleží pouze na osobní preferenci a zaměření webu. Na stránkách banky najde ručně psané písmo pouze menší uplatnění, to však neznamená, že se nemůže hodit na osobní či jiný web. Pokud font není technicky špatně zpracován, tak v praxi neexistuje špatné písmo, pouze je třeba najít jeho vhodné uplatnění. Proto je třeba se stejně jako při výběru barev zeptat, jaké je zaměření webu, koho má přilákat a jak má na návštěvníky působit. Podle toho se na web volí vhodné písmo. Posledním kritériem by měla být střídmost při výběru, kdy na jednom webu stačí použít maximálně čtyři druhy fontů a v textu by se neměla kombinovat dvě patková nebo dvě bezpatková písma (Beaird, 2010, s. 111).
3.2 Webové ilustrace V předchozí kapitole bylo řečeno, že uživatelé chodí na stránky především kvůli obsahu. Ten je ve velké míře prezentován formou textu, a proto je třeba text správně používat. Co když se však objeví problém nebo nápad, který není tvůrce schopen jednoduše a pro čtenáře přitažlivě popsat? Přesně to je chvíle, kdy může použít jednoduchý obrázek nebo ilustraci, která toho řekne daleko více než celý odstavec textu, který by zároveň byl pro čtenáře nezajímavým. Obrázek může v textu sloužit jako pouhá ilustrace, doplněk k textu nebo může mít formu grafů či vysvětlujících piktogramů, podle kterých se čtenář okamžitě zorientuje. Samostatnou oblastí potom jsou obrázkové galerie, ve kterých je důležitost kladena na samotné obrázky, které jsou předmětem zájmu.
43
„ Je dobré poznamenat, že kvůli jejich formě, tvaru, textuře a použití barev obrázky na sebe často navážou pozornost dříve než hutnější a obecně vypadající text, který je obklopuje.“ - (Dawson, 2012, s. 103). Při špatném použití mohou obrázky na stránce rušit od důležité informace, ale když je naopak autor umístí správně, může pomocí nich vypíchnout důležitou oblast stránky a vytvořit tak referenční bod zájmu
Mnoţství ilustrací V případě použití obrázků na webu je třeba dbát na jejich množství. Existuje řada webů, používajících hromadu obrázků, které mají nahradit nedostatek jiného obsahu, případně opačný extrém, kdy autor ilustrace téměř nevyužívá a web potom vypadá jako diplomová práce, která uživatele ničím neláká ani na sebe neupoutá. Stejně jako v předchozích případech (výběr barev, výběr fontů) je třeba přistupovat k množství ilustrací střídmě. Použít takzvanou zlatou střední cestu a přiměřené množství obrázků, které bude odpovídat množství textu na stránce, obrázky by většinou neměly sloužit jako hlavní médium, které udrží pozornost návštěvníků. Myšleno je použití obrázků na běžných webech a ne na stránkách určených k výměně obrázků, kde je velké množství obrázků a minimum textu žádáno. Je také třeba počítat s tím, že s přibývajícím množstvím ilustrací se zvětšuje datová náročnost stránky, což je především v dnešní době omezených datových tarifů mobilních připojení (Fajmon, 2014) stále omezujícím faktorem. S tím také souvisí použití vhodného formátů obrázků, kterým se zabývá odstavec níže v textu.
Pouţití ilustrací V úvodu kapitoly byly zmíněny funkce obrázků na webu a také jejich množství oproti textu. Je třeba si však uvědomit, že text a ilustrace by proti sobě neměly bojovat. Naopak by spolu měly úzce korespondovat a vzájemně se doplňovat, případně u výpadku by měl jeden druhého nahradit. Tvůrce stránky by měl pamatovat na lidi, kteří například obrázky z nějakého důvodu nevidí. Důvodem může být uživatelovo postižení, výpadek server s obrázky nebo může uživatel obrázky v prohlížeči přímo blokovat, například aby šetřil přenesená data. V tomto případě by měl autor myslet nad alternativou, která se uživateli zobrazí, když neuvidí obrázky. Je totiž nepříjemné například přijít na web, který odkazuje na neexistující data. Samotné obrázky je však opět třeba směřovat na předpokládané návštěvníky webu. Stejně jako se ne každé písmo 44
či barva hodí na stránky banky, tak ne každý obrázek se bude hodit na stránky zaměřené na úpravu aut, jejichž čtenářskou základnou bude především mužská část populace. Dobrým způsobem užitečného použití ilustrace na webu je infografika. Jejím hlavním cílem je jednoduchým a rychlým způsobem poskytnout čtenáři informace. Infografika přímo vybízí k použití na moderních webech, ať už k prezentaci dat nebo například uvádění novinek. S infografikou se v životě setkal téměř každý i v běžných životních situacích a především díky sociálním sítím se dá pomocí infografiky šířit nenáročnou formou řada informací. Informace zobrazené v infografice se potom uživatelům snadněji pamatují (ČeskéInfografiky, 2013), mohou rozbourat delší oddíly textu případně vizuálně zkrášlit obsah.
Obrázek 20 - Infografika v běţném ţivotě (ProShieldSafetySigns, 2015)
Ke snadnějšímu pochopení textu či dat v tabulkách může sloužit také zobrazení informací v grafech či diagramech. Převedším při velkém množství použitých čísel může být interpretace dat složitá. Jsou-li však tato data doplněna o názorný graf, uživatel je zpracuje jednodušeji a jak bylo uvedeno výše, lépe si je zapamatuje. Bude-li tedy web zaměřen na statistiky či velká množství jiných tabulkových dat, měl by být doplněn právě ilustracemi v podobě grafů či diagramů, které budou snadno pochopitelné a přitažlivější pro větší množství čtenářů. K ilustracím na webu potom také patří celá řada zjednodušujících či navigačních ikon, které pomáhají v orientaci na stránkách. Je zde však jedna ikona, která má zcela specifickou funkci a je na většině webů jedinečná. Jedná se o takzvaný Favicon, který jednoznačně v liště panelů prohlížeče identifikuje webové stránky bez závislosti na tom, co je vepsáno do hlaviček jednotlivých webů.
45
Obrázek 21 - Favicony známých webů
Slouží tak jako jedna z mnoha částí k prezentaci vytvořených stránek a k odlišení se od konkurence, proto by se na ní nemělo zapomínat a věnovat její tvorbě pozornost. Obrázky se na webu dají využít nejen jako výše popsané praktické pomůcky, ale lze z nich tvořit také působivé galerie. Tvorbou galerie se zabývá kapitola webová galerie v praktické části této práce. Obrázky na webu mohou být doplněny také o videa, případně o Flash animace či jejich alternativy (HTML5 apod.). V posledních letech jsou velmi populární videa obsahující tutoriály poskytující nejrůznější návody, případně zpravodajská nebo zábavná videa sdílená na sociálních sítích.
Zdroje obrázků Nejprve je však potřeba třeba obrázkový materiál pro nový web někde získat. Existuje hned několik možností, kde obrázky získat, s některými se však mohou vázat určité komplikace. Na webu lze použít obrázky získané vlastní tvorbou, zakoupené ve fotobance, případně pořízené najatým profesionálem (Beaird, 2010, s. 121). První možnost, tedy pořídit ilustrace na web vlastní tvorbou, je oproti dalším zmíněným výhodnější především v ceně. Jelikož ilustrace může pořídit přímo grafik, potažmo majitel, odpadají vyšší pořizovací náklady. Zároveň je možné fotografie přímo použít a není třeba čekat, než profesionál fotografie upraví a zašle je zadavateli. Zakoupením fotografií v některé z fotobank lze také ušetřit čas, na druhou stranu pořizování fotografií ke komerčnímu využití se může pohybovat v řádek stovek až tisíců korun za jednu fotografii (Fotobanka.cz, 1999-2012). I z fotobank lze získat obrázky zdarma, výsledná kvalita ovšem může odpovídat pořizovací ceně. Třetí možností je zaplatit profesionálního fotografa. Výhodou je, že fotograf pořídí obrázky přesně podle zadání a v odpovídající kvalitě. Zde je však třeba dbát na dobrou volbu fotografa, jelikož každý fotograf se zaměřuje na jiné druhy fotografií. Zdroje fotografií je tedy třeba volit s ohledem na finanční možnosti majitele, zaměření webu, případně na požadovanou kvalitu fotografií. Pro menší weby není třeba pořizovat fotografie za cenu, která může přesáhnout hodnotu celého webu, naopak u profesionálních stránek by měla být odpovídající kvalita ilustrací. Existují však i fotobanky, které nabízejí všechny své obrázky zdarma, příkladem může být web freeimages, který nabízí řadu kvalitních fotografií k použití zdarma. Na obrázky stažené zdarma se však stejně jako na placené 46
Úpravy obrázků Předtím, než je obrázky možné umístit na web, je ve většině případů potřeba je upravit, případně kompletně vytvořit. K tomu slouží grafické editory, které se mohou lišit počtem funkcí nebo cenou, případně mohou být zdarma dostupné jako webové aplikace. Těmto programům je věnována samostatná kapitola, která některé z nich popisuje a srovnává jejich výhody a nevýhody. Menší úpravy a efekty jsou dokonce možné úpravou přímo v CSS dané webové stránky. Mezi tyto úpravy může patřit vytvoření rámečku, upravení barevného tónu a světlosti, případně změna velikosti použitého obrázku. Po dokončení úprav v aplikaci je třeba obrázek uložit do některého z podporovaných grafických formátů.
Formáty obrázků na web Existuje celá řada formátů, do kterých lze obrázky uložit. Ať už se jedná o formáty rastrových obrázků jako TIFF, GIF, JPEG, PNG, BMP nebo vektorových jako například SVG, AI, CDR. Ne všechny formáty jsou však vhodné pro použití na webu a i ty, které
47
se nejčastěji používají, mají řadu výhod nebo omezení. Následuje výčet a srovnání nejpoužívanějších formátů, které jsou podporovány většinou prohlížečů.
JPEG Formát vhodný především pro fotografie, u kterých se klade důraz především na jejich datovou náročnost. Díky tomu je vhodný právě k použití na webu. Oproti formátu GIF navíc zvládá ukládat až 16 milionů barev, díky čemuž je vhodnější právě pro statické fotografie. Nevýhodou silná komprese obrázku, která může způsobovat vznik takzvaných artefaktů v obrázku. Tento formát také není určen pro animace a nepodporuje průhlednost obrázku, která se na webu může hodit.
GIF Na rozdíl od předchozího formátu podporuje GIF animace a je v něm možno nastavit jednu barvu jako průhlednou. Nevýhodou nastavené průhlednosti však je, že vzniká v celém obrázku, díky čemuž může dojít k nechtěným výsledkům. Oblíbenost si však získal především díky animacím, které podporuje a také jeho neztrátovostí, takže u něj nevznikají artefakty, při kompresi z jiných formátů, jako je tomu u JPG. Nevýhodou je větší velikost souboru oproti JPG a podpora pouze 256 barev, což dělá formát nevhodný pro fotografie.
PNG Byl vyvinut jako konkurence pro zmíněný GIF, když hrozilo, že použití předchozího formátu by mohlo být zpoplatněno (Stanford.edu, 2015). Komprese u formátu funguje podobně jako u GIFu, tedy nejméně barevný obrázek má nejmenší velikost. Navíc je zde podporována plná průhlednost, která není omezena pouze na jednu barvu jako u GIFu. Je možné zobrazit i částečnou průhlednost až v 256 úrovních (Beaird, 2010, s. 134). Formát stejně jako JPG podporuje více než 16 milionů barev, nevýhodou však může být velikost výsledných souborů.
Na webu lze použít i jiné formáty, nevýhodou však bývá velikost souborů, které často nepoužívají kompresi jako předchozí formáty a jejich použití není často tak jednoduché jako u výše popsaných. Vybočuje však nový formát vyvíjený společností Google, takzvaný WebP (Developers.google.com, 2015). Formát podporuje jak ztrátovou tak i bezztrátovou kompresi, při kterých dosahuje lepších výsledků než JPEG i PNG a to v řádech desítek procent. V obou případech formát podporuje úplnou průhlednost a 48
srovnatelný počet barev. Nevýhodou potom může být prozatímní nedostatečná podpora ze strany prohlížečů (Developers.google.com, 2015).
3.3 Doplňující obsah webové stránky Obsah webu je tedy především tvořen textem, obrázkovými ilustracemi, případně je doplněn o videa, nebo doplňkové ikony, které zjednodušují orientaci na stránkách. K pohybu mezi jednotlivými částmi webu poté slouží nástroj navigace, který je popsán v kapitole o kompozici. Problémem ovšem je, když se webový projekt stane velice komplexním, případně se na webu začne objevovat velké množství obsahu. V tu chvíli často přestane stačit klasická navigace, která nemusí být dostatečná především v situaci, kdy uživatel hledá konkrétní informaci, článek nebo video. Ke zlepšení orientace a zrychlení pohybu na webu slouží nástroj vyhledávání. Jelikož je tato práce zaměřena na grafickou úpravu, tak zde nenajdete návod, jak samotnou navigaci vytvořit, nebo jakým způsobem pracovat s databázemi a podobně. Na druhou stranu zde je popsáno, jaké druhy vyhledávání jsou dnes používány, čemu se vyvarovat a jaký typ vyhledávání vybrat podle Vašeho webového projektu.
Nástroj vyhledávání Tento nástroj je v dnešní době nedílnou součástí naprosté většiny webů. Pokud ovšem tento krok podceníte, zákazník u Vás informaci nenajde, tak je pravděpodobné, že se obrátí na jinou stránku, která mu poskytne lepší služby. Nástroj vyhledávání by tak měl být především o interakci s uživatelem, měl by být dostatečně jednoduchý, aby ho pochopil i méně zkušený návštěvník, ale dostatečně výkonný, aby mohl najít konkrétní obsah, po kterém touží. Je také důležité soustředit se, jakým způsobem prezentujete výsledky vyhledávání. Pokud vyhledávácí modul nalezne veškeré žádané informace, ale není schopen je uspořádat přehledně, pak opět ztrácíte oproti konkurenci. „Problém. Zákaznící se chtějí rychle přemístit z jednoho místa na druhé; vyhledávací stránky jsou ale pro takovou operaci příliš složité.“ (Duyne, Landay, Hong, 2005, s. 530) Při běžném surfování na internetu se tak pravděpodobně setkáte se třemi typy vyhledávání. První možnost je vytvořit komplexní vyhledávací formuláře, kde může uživatel nastavit jednotlivé parametry vyhledávání, vybrat podsekce případně zvolit typ 49
zobrazení vyhledaných výsledků. Málokdo ovšem chce při každém vyhledávání nastavovat tyto parametry a tento druh vyhledávání by pravděpodobně měl být využíván pouze při velmi komplexních projektech, případně v uživatelských fórech, kde mohou být doslova miliony příspěvků, ve kterých může uživatel vyhledávat. Pokud je však tento vyhledávací nástroj velmi obsáhlý a vyžaduje velkou aktivitu na straně uživatele, potom by měl poskytovat i odpovídající služby, což není vždy pravidlem. Druhou možností je vytvořit typ navigace, který používá například jeden z největších internetových obchodů Amazon. Jedná se o jednořádkový vyhledávací modul, který je navíc doplněn o dostupné kategorie, ve kterých může uživatel vyhledávat. Pro uživatele tak odpadá povinnost vyplňovat složité formuláře a zjišťovat, co vlastně musí vyplnit. Místo toho si například vybere podsekci knihy, zadá druh knihy a výsledky poté odpovídají konkrétněji jeho požadavku. Použití tohoto druhu vyhledávání je pak daleko vhodnější než v předchozím případě, přesto není třeba u menších projektů nástroj vyhledávání zbytečně pro uživatele komplikovat. Problémem může být, když si uživatel není jist, co vlastně vyhledává a výsledky se potom nezobrazují podle jeho požadavků, jelikož nezvolil vhodnou kategorii. Toto může opravit opětovným vyhledáváním, které však již vyžaduje jeho opětovnou aktivitu, v některých případech dokonce musí čekat určitou dobu, než mu bude umožněno další vyhledávání. Pro tyto případy existuje třetí možnost, kterou je pouze jeden řádek vyhledávání, do kterého uživatel pouze zadá požadavek bez nutnosti jakékoliv jiné interakce. Pokud je navíc tento nástroj kvalitně zpracován, může se z něho stát naprosto robustní nástroj, který uživateli poskytne naprostý komfort v používání, a přesto z něj dostane skvělé výsledky. Nejlepším příkladem tohoto řešení je vyhledávání od společnosti Google. Pomocí tohoto nástroje jsou denně miliony lidí odkazování na weby po celém světě, a pokud uživatel zároveň zná tento nástroj, je schopen provádět vyhledávání, které těžko hledá konkurenci. Tento vyhledávací řádek je následně doplněn o volbu, která určuje obsah, který se má zobrazit, případně má uživatel možnost přepnout se do onoho komplexnějšího formuláře. Uživatel tak zadá pouze to, co hledá a teprve v konkrétních výsledcích vyhledávání si může vyfiltrovat konkrétnější informace. Tato volba by však vždy měla být na uživateli, který by se vyhledávacích nástrojů neměl bát, a tyto nástroje by měly být vždy komfortní pro jeho užití. Zároveň by ve formulářích nemělo být zbytečně moc textu, o který uživatel stejně ve většině případů nestojí. 50
Nástroj vyhledávání by měl být zároveň dobře viditelný a uživatel by neměl mít problém ho na stránce lokalizovat. Vhodné místo pro vyhledávací nástroj je v hlavičce stránky, jak již bylo napsáno v kompozici stránky. Nástroj by se stejně jako navigace neměl po stránce pohybovat. Měl by mít jasně určené pevné místo a měl by obsahovat vždy minimálně tři elementy. Těmi je označení druhu formuláře, vyhledávací pole a potvrzovací tlačítko, které je jasně označené. Samotný design prvku se potom odvíjí ve většině případů od designu zbytku webu. V dnešní době je velice populární navigace, která je umístěna na vrcholu stránky a která se během pohybu na webu neskrývá a je neustále dostupná. Toto řešení je velice vhodné i pro použití na mobilních zařízeních a vytváří tak perfektní prostor pro vyhledávací modul. Zde potom nastupuje design prvku, který bývá řešen tak, že se zobrazuje pouze ikona vyhledávání, která se po kliknutí rozšíří do plného vyhledávacího řádku. Dalším řešením bývá umístění vyhledávání do postranních panelů, kde může mít modul od začátku svoji plnou velikost. Graficky může být vyhledávání řešeno libovolným způsobem, nikdy by však grafika neměla bránit v používání nástroje a to na jakémkoliv zařízení bez výjimky!
Obrázek 22 - Zákazníci budou vyhledávací modul snadno a rádi pouţívat, pokud bude jednoduchý a dostupný na kaţdé stránce. (Duyne, Landay, Hong, 2005, s. 532)
Výsledky vyhledávání Předchozí odstavce popisovaly zadávání požadavků z uživatelovy strany a jejich přehlednost. Tento odstavec popisuje ty stejné problémy, ale z druhé strany, tedy poskytované serverem v podobě výsledků vyhledávání. K těmto výsledkům by mělo být poskytnuto i vysvětlení. Tím je myšleno, že by měly být výsledky tříděny do jednotlivých kategorií, případně by měl mít uživatel kontrolu nad tím, jak si výsledky protřídí k obrazu svému ať již podle data publikování, druhu média nebo jiného kritéria. 51
Každý z výsledků by měl být stručný, ale jasně by z něj mělo vyplývat, o co ve výsledku jde a co se uživateli po rozkliknutí zobrazí. Ve výsledcích by mělo být také počítáno s chybou uživatele či zadání nepovoleného vyhledávacího řetězce. Uživatel by neměl být za svoji chybu trestán, a proto by mu měly být poskytnuty alternativní výsledky, případně další rozcestníky, které by mu mohly v navigaci pomoct.
Registrace/Přihlášení Ve chvíli, kdy chcete poskytovat obsah, který bude jedinečný pro konkrétní uživatele nebo chcete uživatelům umožnit přidávání komentářů pod články či se jinak zapojovat do diskuze, budete čelit nutnosti vytvořit pro uživatele účet. To můžete provést buď pomocí jednoho z účtů, které má uživatel vytvořený na některé sociální síti či službě, nebo pomocí samostatné registrace na Vašem webu. Zde však nastupuje stejný problém jako v případě složitých vyhledávacích formulářů. Jakmile se totiž uživatele začnete ptát na podrobné informace o jeho životě, tak začne jeho zájem o službu pomalu klesat. O to více ho může poté odradit, když náhodou některý z prvků Vašeho formuláře nebude fungovat. Je potom otázka, na co potřebuje malá služba, kde uživatelé diskutují o migraci žab, telefonní číslo nebo adresu uživatele. Je pochopitelné, že tyto prvky slouží k vytváření kvalitnější diskuze, zároveň však s každým dalším prvkem může uživatel ztrácet chuť diskutovat, když ani neví, kam jeho údaje poputují. Proto by měl registrační formulář vždy být jednoduchý na vyplnění, jasně formulovaný a nepožadovat informace, které se službou nesouvisí, případně by tyto informace měly být umístěny na méně viditelné místo jako volitelné položky. Vývojář by měl také počítat s chybou uživatele a vždy mu nabídnout alternativní řešení například v podobě generování nového hesla, které musí být jasně viditelné, aby se uživatel zbytečně netrápil.
Nenalezená stránka Někdy se stane, že se uživatel dostane na stránku, která byla přemístěna, nebo již jednoduše není aktuální a byla odstraněna. Přesto však může být někde zapomenut odkaz, který na tuto stránku směřuje. V tomto případě by měl mít web vytvořenou alternativní stránku, která tuto informaci uživateli jasně sdělí. V tomto případě bude uživatel dostatečně zklamaný z toho, že nenašel hledaný obsah a nemusíte ho dále frustrovat nevkusnou a výstražnou stránkou, která vypadá, jako kdyby uživatel něco
52
provedl. Existují proto varianty, jak tuto stránku zpracovat vtipně, aby se uživatel v této nepříjemné situaci alespoň zasmál.
Myslete vždy na uživatele a jeho pohodlí, jelikož je to právě uživatel, který na stránce zůstane a je s ní spokojen, který Vám vydělá peníze ať již formou reklamy nebo využitím Vašich služeb.
53
4. Nástroje pro tvorbu webové grafiky Tato kapitola se věnuje popisu nástrojů, které slouží k tvorbě grafiky, se kterou se můžeme setkat na webu. Zvolit správné nástroje může být klíčem k úspěšnému dosáhnutí požadovaných výsledků. Je třeba si zvolit ten správný nástroj, který bude splňovat uživatelova kritéria. Uživatel by si měl uvědomit, k jakému účelu bude jeho web sloužit a jaký nástroj je nejvhodnější pro vytvoření takového webu. Je spousta tvůrců, kteří jako první volbu zvolí ten nejkomplexnější program a poté si s ním často neví rady. Proto by měl každý zvážit svoje limity, mezi které patří obeznámenost s nástrojem, případně dostupná literatura ale také cena programu. Pro tvorbu osobních či menších webů není třeba utrácet spoustu peněz za profesionální programy, když se stačí podívat na alternativy zdarma. Tvorba webu může začít i s papírem a tužkou. Klasický nástroj, na který je zvyklý úplně každý, který nás nelimituje komplikovaností, nebo finanční náročností. Kreslení na papír je rychlejší než vytváření grafiky v počítači, a proto může při návrhu webu sloužit především na to, abychom si ujasnili rozložení jednotlivých prvků stránky, navrhování hlavičky nebo loga. Výhoda je, že při návrhu můžeme popustit uzdu fantazii, aniž bychom byli omezování neznalostí postupů při návrhu v grafických programech. Především potom při výuce na základní škole nejsou žáci limitování neznalostí programového vybavení školy a mohou si v nižších ročnících vyzkoušet základní návrh webu. Zároveň to může být příprava pro vyšší ročníky, kde by neměli klasické problémy, během kterých sami nevědí, podle čeho vlastní tvorbu v rámci IT předmětů tvořit. Při samotné tvorbě designu se bez některého programu neobejdou.
4.1 Rastrová a vektorová grafika Na tvorbu grafiky, která se používá na webu, se používají 2D grafické editory. Tyto editory slouží k vytváření rastrových nebo vektorových návrhů. Ještě před výběrem správného nástroje je třeba pochopit, jaký je výstup z které aplikace a k jaké tvorbě je vhodnější využít rastrové grafiky a na kterou se používají vektory.
Rastrová grafika Je tvořena sítí malých čtverců (pixelů), z nichž má každý danou barevnou hodnotu. Složením těchto pixelů potom vzniká celistvý obraz, jehož výsledná kvalita je dána tím, v jakém rozlišení byl obrázek zpracován. Rastrové obrázky jsou ukládány ve formátech jako JPG, PNG, BMP nebo GIF, případně mohou mít aplikace své vlastní formáty, jako například PSD, jež slouží jako pracovní list pro Adobe Photoshop. Podrobněji se formátům pro web věnuje kapitola Webové ilustrace. Výhody a nevýhody rastrové grafiky jsou zpracovány níže ve srovnání s vektorovou grafikou. Rastrová grafika se používá, je- li třeba dosáhnout spíše realistického vzhledu a nevystačíme si s využitím a skládáním geometrických objektů. Hlavními způsoby využití je úprava fotografií a vytváření webových designů.
Vektorová grafika Na rozdíl od rastrové grafiky nevyužívá jednotlivé pixely, ale je tvořena pomocí matematických rovnic, které definují jednotlivé tvary a křivky, pomocí nichž jsou potom skládány celé kompozice. Vektorová grafika slouží k návrhu spíše jednodušších obrázků, respektive není určena k vytváření fotorealistických projektů. Využívá se tam, kde je předpoklad, že obrázky budou procházet úpravou velikosti, a kde je požadavek na bezztrátovost kvality. Formáty vektorové grafiky jsou například SVG, PDF, AI, CDR. Vektory se využívají při tvorbě ilustrací, log, plakátů, potisků na trička nebo čehokoliv, co se bude v procesu výroby zvětšovat.
55
Srovnání rastrové a vektorové grafiky Výhody Rastrová grafika
-
Vektorová grafika
-
-
Nevýhody
pořízení je velice snadné (například fotografie) fotorealistické obrazy
-
libovolné bezztrátově zvětšování datová velikost, která se se změnou velikosti obrazu nemění jednoduché pozdější úpravy
-
-
-
ztráta kvality při změně velikosti datová velikost výsledných obrázků, odpovídající počtu pixelů méně komplexní grafika než při užití rastrové grafiky složitost pořízení (je třeba kreslit)
Tabulka 5 - výhody a nevýhody rastrové a vektorové grafiky
V praxi však nemusí designér striktně rozdělovat, jestli použije vektorový nebo bitmapový editor, ale může grafiku kombinovat, jelikož vektorová grafika jde převést na rastrovou velice jednoduše. Proto se například loga na webu navrhnou ve vektorech, které mohou být později převedeny v požadované velikosti na bitmapy, případně se na webu mohou použít v původním formátu. Zpětný převod však již téměř není možný a pro převod do vektorového formátu je nutno obrázek celý překreslit přímo v příslušném vektorovém editoru.
4.2 Rozdělení nástrojů Jak již bylo zmíněno, pro úpravu grafiky se využívá celá řada programů, další část práce popisuje vybrané rastrové a vektorové editory a srovnává jejich vlastnosti a výhody. V případě rastrové grafiky to jsou programy GIMP a Photoshop, z vektorových editorů to potom jsou Inkscape a další z produktů firmy Adobe tedy Illustrator. Šlo především o to, vybrat kvalitní alternativy jak komerční, tak nekomerční open source. První z aplikací sloužícím k úpravám rastrových obrázků je nekomerční GIMP, který je někdy nazýván jako konkurent (AlternativePedia.com, 2013) komerčního Photoshopu, ale porovnávat giganta od Adobe s volně šiřitelným programem není asi úplně na místě. GIMP je na trhu téměř tak dlouho jako konkurence a během let získal na popularitě, 56
právě jako alternativa pro ty, kteří nechtějí nebo nemohou investovat do cenově náročného Photoshopu. Stejně jako Photoshop pracuje GIMP primárně jako bitmapový editor. Můžeme ho využívat pro úpravu fotografií, stejně jako pro návrhy webu. Podporuje velké množství grafických formátů, mezi které částečně spadají soubory vytvořené ve Photoshopu. Výhodou GIMPu je, že je možné ho nainstalovat na všechny nejpoužívanější platformy, kdežto Photoshop není prozatím v plné míře dostupný pro uživatele Linuxu. Dalším plusem je nižší hardwarová náročnost než u konkurence. Nevýhodou je naproti tomu složitější přístupnost pro nové uživatele, kteří se mohou ze začátku ztrácet v méně přehledném menu, které však lze přizpůsobit. Mezi jiné nevýhody se dá také zařadit horší práce při úpravě textů, občasná nestabilita, složitější práce s vrstvami, nebo nemožnost využívat celosvětově uznávaný standard pro barevnou škálu Pantone. Adobe Photoshop byl vytvořen před více než dvaceti lety (Cnet.com, 2010) a od té doby se dostal na absolutní špičku při profesionální tvorbě rastrové grafiky. Program je schopný pracovat s nepřeberným množstvím grafických formátů a zároveň používá své vlastní, které umožňují ukládat celé rozpracované projekty. Program nabízí nástroje, které jsou přímo směřovány na grafiku určenou pro web, díky tomuto je mezi webdesignery tak rozšířen. Schopnosti Photoshopu ale rozhodně nekončí u úpravy fotografií, či návrhu designu stránek. Jeho funkce se s každou vydanou verzí rozšiřují a tvůrci postupně přidávají nové funkce, díky kterým lze ve Photoshopu omezeně pracovat s vektorovou grafikou, umí také pracovat s 3D předměty nebo zpracovávat video, které můžeme využít například k vytváření animací. Photoshop jednoznačně převyšuje jakoukoliv konkurenci svými nástroji, prací s vrstvami a také nabízenými rozšířeními, která lze do programu doinstalovat. Výhodou je zároveň celá řada tutoriálů, které jsou dostupné na internetu a které mohou při tvoření výrazně napomoci. Mezi zápory se může řadit až přílišná komplexnost a s tím související cena, která ovšem postupně klesá a Adobe momentálně nabízí balíky služeb s měsíčním předplatným (Adobe.com, 2015), které jsou cenově dostupnější než dříve. Dalším nástrojem, který je zdarma je program Inkscape. Ten slouží k vytváření a úpravě vektorové grafiky. Používá se k vytváření profesionálních webových designů, log, ikon, ilustrací nebo k vytváření předloh pro tisk. Využívá W3C standardy pro web a v základním nastavení používá formát SVG pro své vytvořené projekty. Součástí 57
programu jsou pokročilé kreslící nástroje a program podporuje export i import do různých vektorových formátů jako jsou SVG, AI, EPS, PDF či PNG (Inkscape.org, 2015). Jelikož se jedná o open source program, tak jsou návody a podpora poskytovány přímo komunitou uživatelů. Stejně jako Photoshop tak i Adobe Illustrator je na trhu více než dvě desítky let. Jedná se o pokročilý nástroj sloužící jak k vytváření grafiky. Na rozdíl od konkurenčního Inkscape není Illustrator distribuován zdarma, což může být hlavním argumentem hovořit v neprospěch programu, jelikož Illustrator nabízí podobné funkce. Jsou zde rozdíly v uživatelském prostředí, které je komplexnější, ale stejně tak Inkscpace obsahuje funkce, které v Illustratoru nenajdeme. Je zde větší podpora standardů pro barvy a velkou výhodou je vzájemná propojenost s jinými programy z portfolia společnosti Adobe. Oproti konkurenci však může být problém dostat se k oficiální podpoře, jelikož Adobe na stránkách nabízí spousty věcí, o které uživatel nemá zájem a informace, které jsou pro něj důležité, mohou být skryty mezi reklamními sděleními. Rozhodnutí, jaký program zvolit pro tvorbu vektorové grafiky tak záleží stejně jako u rastrové grafiky na tom, komu má nástroj sloužit, jelikož největším rozdílem u těchto programů je především cena, ostatní rozdíly závisí především na zvyku.
Srovnání grafických editorů Rastrový editor GIMP
Klady
Zápory
-
zdarma
-
nižší hardwarové
uživatelské
nároky
prostředí (lze
bez problémů
pomocí pluginů)
-
-
složitější
napříč všemi platformami Adobe Photoshop
-
množství nástrojů
-
pořizovací náklady
-
příprava obrázků
-
vyšší hardwarové
přímo pro web -
práce s vrstvami
nároky -
dříve menší kompatibilita v systému Linux
Tabulka 6 - srovnání rastrových editorů GIMP a Photoshop
58
Vektorový editor Inkscape
Klady
Zápory
-
zdarma
-
podpora komunity
-
nepodporuje některé barevné standardy barevné škály
Adobe Illustrator
-
-
propojenost
-
placené předplatné
s jinými programy
-
větší velikost
Adobe
výsledných
velmi často
souborů
používán stejně
-
složitá podpora
jako rastrový Photoshop Tabulka 7 - srovnání vektorových editorů Inkscape a Illustrator
Jiné alternativy Photoshop a GIMP však nejsou jedinými bitmapovými editory, které se dají využít při tvorbě grafiky, stejně tak se dá najít řada jiných vektorových editorů. Jako další alternativy lze jmenovat například Paint.NET od Microsoftu, který je jednoduchý a zároveň umožňuje základní práci s vrstvami. Dále by šlo jmenovat například Artweaver nebo webový editor Pixlr. Tyto alternativy jsou spíše jednodušší, také jsou často určeny spíše k úpravě fotek a zrovna navrhování designu webové stránky by v nich nemuselo být úplně vhodné. Na druhou stranu žáky na školách nebudou rozptylovat zbytečnými možnostmi, které nevyužijí. Stejně tak Inkscape a Illustrator nejsou jedinými alternativami při výběru vektorových editorů. K dispozici jsou také programy Makromedia Freehand nebo CorelDraw, které mohou při tvorbě grafiky posloužit stejným způsobem. U výběru grafického softwaru by se měl uživatel orientovat a rozhodovat především podle svého vlastního využití programu. Začátečníci, případně uživatele, kteří grafiku nevytváří komerčně, mohou využít řady nekomerčních produktů na trhu. Naopak profesionálové by se měli zeptat sami sebe, zda se jim investice do licence programu dostatečně nevrátí za vytvořenou grafiku.
59
5. Návrh designu webové stránky Než se pustíte do čtení tutoriálu a vlastního návrhu webové stránky, je třeba si ujasnit několik základních bodů. Tento návod je určen pro uživatele, kteří mají alespoň základní znalosti v oblasti grafických programů, proto zde nejsou vysvětleny úplné základy při používání jednotlivých nástrojů a funkcí. Pro účely tohoto návodu byl použit grafický editor Adobe Photoshop ve verzi CS6, ale samotný návod lze aplikovat i na předchozí verze až po Photoshop CS2. Na jednotlivé části tutoriálu by potom šly využít i jiné grafické programy, především potom u prvků jako je logo stránky, případně doplňující grafika a ikony, u kterých je předpoklad, že se může měnit jejich velikost. Výhody a nevýhody vektorové grafiky jsou popsány v kapitole o grafických nástrojích, proto se rozhodněte, kterou cestou se pustíte. Logo navržené v křivkách lze následně použít i na jiných projektech, než je pouze webová stránka. Vytvořený tutoriál spolu s použitými obrázky je dostupný v Příloze 1, zdrojové soubory k tutoriálu jsou vloženy ve formátu PSD na přiloženém CD jako Příloha 2.
5.1 Zpracování tutoriálu Tutoriál je zpracovaný formou kroků, které Vás provedou tvorbou jednotlivých prvků stránky, jako jsou navigace, postranní panel či zápatí. Tyto kroky jsou vždy doplněny ilustracemi, které ukazují použití respektive nastavení konkrétních nástrojů programu. Nejprve jsou v něm vytvořeny základy webu a stejně jako při čtení webové stránky tutoriál postupuje od vrcholu až na spodní část webu. Celkem jsou v tutoriálu navrženy dvě podoby webu, jedna ukazuje domovskou stránku a rozložení jednotlivých prvků na ní a druhá se potom věnuje vyplnění obsahu stránky. V tutoriálu je také popsána tvorba jednoduchých ikon, které budou odkazovat na sociální sítě, případně sloužících k osvěžení či orientaci na webu. V úplném závěru tutoriálu je také návod, jak vytvořit favicon, který bude prezentovat Váš web na liště záložek v internetovém prohlížeči. Proces tvorby tutoriálu začal nejprve s papírem a tužkou, které sloužily především k ujasnění a rozmístění jednotlivých prvků na stránce. Poté co byla jasná základní struktura webu, začala práce s grafickým programem. V něm bylo třeba vytvořit základní dokument a především strukturu webu v podobě složek, jelikož bez jasně dané struktury se může člověk rychle ztratit v množství vytvořených vrstev. Poté co byla jasně daná struktura, bylo třeba vytvořit jednotlivé prvky stránky jako navigace, obsah a 60
patka. Nejprve bylo třeba vybrat použitý druh navigační lišty, vytvořit místo pro logo stránky respektive pro její vyhledávací řádek. Bylo také třeba vypočítat použité rozměry pro vodící čáry, které jsou použity v tutoriálu a určit vzájemný poměr mezi obsahem webu a bočním panelem. Poté co byl vytvořen základní vzhled webu, přišla řada na vyhledání vhodného fontu, který byl vybrán s ohledem na budoucí použití na stránkách. Proto byl vybrán font, který je dostupný na webu společnosti Google a který je již připraven na optimální využití na webových stránkách. Problematikou využití písem na webu se zabývá kapitola o webové typografii. Bylo také třeba získat z webu podklady v podobě ilustračních obrázků a zvolit barvy použité během tvorby. Teprve po dokončení návrhu byl vytvořen samotný tutoriál. Ten byl tvořen za pomoci grafického programu, textového editoru a programu sloužícímu k snímání určité části obrazovky. Díky dobré struktuře zdrojového souboru v grafickém programu stačilo vypínat viditelnost jednotlivých vrstev a vytvářet jednotlivé kroky, jak po sobě následují.
5.2 Vyuţití tutoriálu Jak bylo zmíněno výše, tento tutoriál je určen především pro uživatele, kteří mají alespoň základ v používání osobního počítače, ale na druhou stranu neklade požadavky na znalosti počítačové grafiky. Proto autor vidí jeho využitelnost u žáků základní školy, u kterých předpokládá nižší znalosti v oblasti grafických programů. Tutoriál je možné využít jako zdroj informací při vytváření vlastního webového návrhu samotnými žáky, jelikož je formát tutoriálu zvolen tak, aby ho pochopil i méně zkušený čtenář. Tutoriál zároveň může sloužit jako pouhá inspirace pro čtenáře, kteří mohou měnit jeho samotný obsah a vytvořit vlastní originální návrh webu. Také zvolený způsob organizace prvků do mřížky umožňuje rychlou a jednoduchou úpravu jednotlivých prvků. Ve školním prostředí by mohl být tutoriál součástí většího projektu, ve kterém by si žáci nejprve vzájemně zadali požadavky na vzhled stránky (viz Zadání projektu) a následně by za pomoci tutoriálu vytvořili webový návrh dle požadovaných kritérií zadavatele. Mezi žáky by tak vznikala komunikace, která by následně vedla k cílevědomému zaměření studenta. Případně by se dal tento návrh zpracovat jako kolektivní projekt, při kterém by se žáci rozdělili do skupin, ve kterých by každý člen vytvořil podle tutoriálu část webu, kterou by doplnil o vlastní invenci. Díky použití tutoriálu by se zkrátila doba potřebná pro pedagoga postupně vysvětlovat kroky jednotlivým žákům, kteří by k textu 61
mohli přistupovat podle svých schopností a rychlosti práce. Zároveň by žáci nemuseli dlouho přemýšlet nad tím, jakým způsobem chtějí vlastní web zpracovat a obírat se tak o čas, které v rámci informatiky není na základních školách dostatek.
5.3 Zadání projektu V kapitole o kompozici a struktuře webu je napsáno, že je třeba před začátkem projektu zjistit požadavky, které by měl výsledný návrh splňovat. Následující web bude plnit funkci informačního média zaměřeného na ruční tvorbu přání a podobných dárkových předmětů. Bude na něm umístěna řada návodů v obrázkové a video podobě, proto je vhodné využít velkou část obrazovky koncového uživatele. Web zaměřený na ruční práce bude s velkou pravděpodobností zaměřen spíše na ženskou část populace a podle toho by měly být vybrány barvy, které by zároveň neměly být příliš kontrastní, aby neunavovaly oči uživatelů. Samotný obsah webu by potom měl být dostatečně viditelný i z větší vzdálenosti, jelikož uživatelky pravděpodobně nebudou sedět a pracovat přímo před svým monitorem. Při tvorbě byl využit doplněk GuideGuide volně dostupný z webu guideguide.me. Výsledkem tutoriálu je následující grafický návrh.
Obrázek 25 - Vytvořený Favicon
62
Obrázek 26 - Navrţený design 1. verze
63
Obrázek 27 - Navrţený design 2. verze
64
6. Závěr Tématem této práce je grafický design webových stránek v současné době. Proto je v ní zdůrazněna důležitost vzhledu webové stránky, která úzce souvisí s návštěvností a je jedním z hlavních kritérií mezi uživateli. Vzhledem k oboru autora (Učitelství na základní škole) je zde nastíněna možnost výuky grafického designu webových stránek na základních školách a s tím související problémy. Je také zajímavé sledovat, jak se web vyvíjel v předchozích letech a postupně přešel až na dnešní zařízení, která se stávají daleko mobilnějšími a různorodějšími než dříve. Výsledkem práce je vysvětlení jednotlivých prvků, které tvoří webovou stránku a které souvisí s tvorbou designu webové stránky. Jsou zde poskytnuty informace pro čtenáře, jež mají zájem začít s návrhem vlastního webového designu. V práci jsou popsány a následně srovnány používané grafické nástroje, jejichž aplikace je potom ukázána v Příloze 1 obsahující podrobný tutoriál, který vychází z teoretické části.
Frequently Asked Questions - WebP: Google Developers. Google Developers [online]. March 13, 2015. [cit. 2015-03-27]. Dostupné z: https://developers.google.com/speed/webp/faq#which_web_browsers_natively_support _web Google Doodles. Google [online]. http://www.google.com/doodles/
2015
Google Fonts. Google [online]. z: http://www.google.com/fonts
2015
Google Ventures. Google [online]. z: http://www.gv.com/
The Evolution of Web design 1990-Present. Design Juices [online]. 2011 [cit. 2015-0327]. Dostupné z: http://www.designjuices.co.uk/2011/09/web-design-evolution/ The Golden Ratio in Webdesign: Tuts+ Code Tutorial. REMICK, Jarel. Tuts+ Free Code Tutorials [online]. 29 Dec 2008 [cit. 2015-03-27]. Dostupné z: http://code.tutsplus.com/tutorials/the-golden-ratio-in-web-design--net-2272 The World Wide Web project. Info.cern.ch [online]. [cit. 2015-03-27]. Dostupné z: http://info.cern.ch/hypertext/WWW/TheProject.html VAN DUYNE, Douglas K, James A LANDAY a Jason I HONG. Návrh a tvorba webů: vytváříme zákaznicky orientovaný web. Vyd. 1. Brno: CP Books, 2005, 672 s. ISBN 80251-0508-3. Web Design History. ADMIN. ByPeople: curated network of developers and designers [online]. Jan 29 2015 [cit. 2015-03-27]. Dostupné z: http://www.bypeople.com/webdesign-history/ 70
8. Přílohy Příloha 1 – tvorba webového návrhu – tutoriál Příloha 2 – CD se zdrojovými soubory
72
Příloha 1 – Tvorba webového návrhu – tutoriál
Část 1. – vytvoření dokumentu Krok 1 Nejprve vytvořte ve Photoshopu nový dokument v nabídce Soubor > Nový. Není stanoven standard pro šířku dokumentu, ale v teoretické části je uvedeno, že nejvíce monitorů má rozlišení šířky mezi 1024px a 1366px. Proto nastavte rozlišení v tomto rozmezí podle obrázku. Výška dokumentu nemá fixní rozměry a bude se měnit s množstvím obsahu, který na web umístíte. Lze ji pohodlně měnit i v průběhu práce. Pro účely práce jsou nastaveny rozměry dokumentu na 1366px a 3000px.
Krok 2 Vytvořte si novou složku, kterou pojmenujte Pozadí. Ta bude umístěna jako poslední v panelu vrstev a bude tvořit základ pro celý dokument. V této složce vytvořte pomocí nástroje Obdélník (U) tvar, který bude pokrývat celou plochu stránky.
Krok 3 Obdélník vyplňte barvou #e8e9eb a převeďte ho na inteligentní objekt z panelu vrstev.
Krok 4 Vytvořte si nový soubor s průhledným pozadím o velikosti 8px na 8px a úhlopříčku vybarvěte černou barvou.
Krok 5 V nabídce Úpravy > Definovat vzorek nastavte vzorku jméno a uložte ho.
Krok 6 Vraťte se do hlavního dokumentu a v dolním menu Přidat styl vrstvy > Překrytí vzorkem aplikujte dle vzoru vytvořený vzorek s režimem Normální a krytím na 28% a velikostí 71% na vytvořené pozadí.
Krok 7 Nyní, když máte vytvořené pozadí stránky, je třeba vytvořit prostor pro samotný obsah. K tomu Vám poslouží vytvoření mřížky, pomocí které jednotlivé prvky stránky rozmístíte. Předem vytvořené mřížky se dají stáhnout z internetu, vytvořit pomocí pravítka, nebo nainstalováním doplňku Photoshop GuideGuide.Po instalaci doplňku ho aktivujte v nabídce Okna > Doplňky > GuideGuide.
Krok 8 Otevřete doplněk a nastavte ho následujícím způsobem. Levé odsazení 77px, horní odsazení 60px, počet buněk 12 s rozlišením 78px na 78px, horizontální i vertikální mezera mezi buňkami 25px, odsazení zleva je 78px.
Krok 9 Pro snadnější práci si pomocí doplňku vytvořte vodící čáry i kolem okrajů dokumentu, k tomu slouží ikony v dolní části doplňku.
Část 2. – Navigace Krok 10 V panelu vrstev si vytvořte složku, do které budete umísťovat jednotlivé prvky, které se vztahují k navigaci. Tuto složku pojmenujte Navigace. Do ní vytvořte podsložky dle obrázku.
Krok 11 Pomocí pravítka si vytvořte vodící čáru ve výšce 70px od horního okraje dokumentu. Krok 12 Pomocí Nástroje Obdélníku (U) vytvořte obdélník v šířce 1366px a výšce 70px. Nastavte mu barvu #000000 a umístěte ho na horní okraj stránky. Tento nově vytvořený objekt bude sloužit jako základ pro Vaši navigaci. Vrstvu přesuňte do složky Pozadí navigace.
Krok 13 Klepněte na vrstvu pravým tlačítkem myši a převeďte ji na Inteligentní objekt. Tím zabráníte deformaci samotné vrstvy, jako se tomu děje u úprav rastrových obrázků. Nastavte stín vrstvy podle obrázku.
Krok 14 Vyberte nástroj vodorovný Text (T) a napište do něj název Vaší stránky. V tomto případě Paper Elegance.
Krok 15 Vytvořte 2 řádky, první řádek fontem Qwigley s velikostí 36px a druhý řádek fontem Roboto s velikostí 18px.
Krok 16 Nastavte písmu barvu #ffffff a nastavte krytí na 61%.
Krok 17 Přesuňte logo na požadované místo v navigačním pruhu.
Krok 18 Dále je třeba nakreslit symbol pro vyhledávání. Proto si otevřete nový soubor 800px na 800px s průhledným pozadím.
Krok 19 Vytvořte si mřížku, která bude mít jednotlivé buňky o velikosti 100px, tedy 8 buněk svisle a 8 vodorovně.
Krok 20 Dále vyberte nástroj Elipsa (U), vypněte jeho výplň a nastavte tah na barvu #929090 s tloušťkou 50px. Vytvořte kruh, který bude mít průměr o velikosti 5 buněk. Krok 21 Zvolte nástroj čára, nastavte stejnou barvu jako v předchozím kroku a sílu čáry na 90px. Nakreslete podle obrázku čáru jako držadlo lupy.
Krok 22 V panelu vrstev označte obě vrstvy pomocí CTRL a pravým stiskem je převeďte na jeden společný inteligentní objekt.
Krok 23 Přesuňte objekt do hlavního souboru pomocí Duplikování vrstvy, upravte jeho velikost na 20px a přemístěte ho na pravý okraj navigace. Označte pole o výšce a šířce 70px (M) a umístěte objekt na přesný střed pomocí nástroje v horní liště.
Krok 24 Dalším krokem je vytvoření jednotlivých odkazů do navigace. Ve složce Odkazy proto vytvořte jednotlivé odkazy pomocí nástroje Vodorovný text (T), písmo Roboto Thin velikost 17px barva #e4e2e2. Umístěte text do navigace, rozestupy mezi jednotlivými odkazy jsou zhruba 30px.
Krok 25 Jelikož budou některé odkazy sloužit jako více stupňové menu, je třeba je tak označit. Vytvořte nový soubor o velikost 600px na 400px a nastavte mřížku po 100px.
Krok 26 Vytvořte dva obdélníky o velikosti 100px na 400px. Jeden otočte o 45° a druhý o -45°. Barva obdélníků je #8a8a8a. Krok 27 Přesuňte obdélníky do tvaru šipky a převeďte je na jeden společný inteligentní objekt.
Krok 28 Překopírujte objekt do hlavního souboru, nastavte šířku 11px a výšku 7px a přesuňte šipky k jednotlivým odkazům.
Část 3. – Obsah 1. verze – domovská stránka Krok 29 Vytvořte novou složku Obsah s podsložkou verze 1, ve které vytvořte dvě podsložky.
Krok 30 Do obrázku vložte obrázek, který bude na úvodní stránce. Obrázek bude umístěn v animaci, která se bude postupně přepínat. Krok 31 Přesuňte obrázek do složky Úvodní obrázek a nastavte mu šířku na celou stranu a výšku 4 buňky, tedy 387px Krok 32 Vytvořte obdélník (U) o velikosti 437px na 128px a umístěte ho přes úvodní obrázek podle předlohy.
Krok 33 Nastavte obdélníku barvu #3f3e3e a intenzitu krytí na 58%.
Krok 34 Na vytvořené pozadí vložte text, který se bude měnit spolu s úvodním obrázkem. Velikost textu je 36px a 24px font Roboto Thin.
Krok 35 Vytvořte 4 čtverce o straně 30px.
Krok 36 Třem nastavte barvu #6e6b6b a krytí 63%.
Krok 37 Čtvrtý čtverec má barvu #ff3100 a krytí na 72%. Čtverce budou sloužit k přepínání úvodního obrázku resp. článků.
Krok 38 Vytvořte složku obsah články a vložte do ní obrázek, který bude prezentovat článek. Nastavte velikost 387px na 284px a umístěte ho do mřížky.
Krok 39 Vytvořte jednu buňku vysoký obdélník, který bude mít stejnou šířku jako obrázek. Krok 40 Nastavte obdélníku barvu #474747 a krytí přepněte na 78%.
Krok 41 Vytvořte předělující čáru do obdélníku s barvou #ffffff a šířkou 1px podle obrázku. Doplňte obdélník o nadpis, kategorii a datum článku. Vše v písmu Roboto Thin velikost 25px a 17px.
Krok 42 Opakujte tento krok pro všechny články na stránce, celkem jich je 15. Objekty duplikujte pomocí zkratky Ctrl+J a následně je slučujte dohromady, abyste mohli měnit jejich vlastnosti najednou.
Krok 43 Vytvořte si nový dokument o velikosti 500px na 500px s průhledným pozadím. Do tohoto dokumentu vytvoříte ikony pro sdílení na sociálních sítích.
Krok 44 Stáhněte si logo Twitteru, písmo Lucida Grande, Catull a také logo Pinterest. Případně další z Vámi požadovaných sítí. Krok 45 Nastavte barvu pozadí pro Twitter #55acee, Facebook #3b5998, Google #292929, Pinterest #f23434.
Krok 46 Vložte do souboru značky jednotlivých služeb a nastavte jim velikost pod 300px a následně je vycentrujte.
Krok 47 Slučte vzájemně propojené vrstvy a odešlete je do hlavního souboru, kde jim upravte velikost na čtverec o straně 78px. Krok 48 Jako další krok vytvořte ovládání pro přepínání článků. Pro tento účel si vytvořte novou složku a pojmenujte ji Ovládání pod články.
Krok 49 Pomocí Nástroje obdélník (U) vytvořte obdélník ve vzdálenosti 25px od posledního článku (použijte mřížku), o velikosti 387px na 78px. Nastavte barvu výplně #ffffff s vytažením 1px a barvou #d1d1d1.
Krok 50 Vložte do ovládání šipku, kterou jste vytvořili v předešlých krocích tutoriálu.
Krok 51 Otočte jí nejprve o 90° doleva a nastavte jí šířku 30px a šířku 47px s barvou #d39996.
Krok 52 Se stejným nastavením vytvořte 42px dlouhou svislou čáru o síle 1px a umístěte ji na hranu buňky.
Krok 53 Napište text pro tlačítko, fontem Roboto Thin, velikost 48px a vycentrujte. Opakujte předešlé kroky zrcadlově pro tlačítko Následující.
Krok 54 Vytvořte si obdélník o velikosti 387px na 490px s vlastnostmi jako tlačítko předchozí a následující.
Krok 55 Do vytvořeného pozadí vložte text a vytvořte linku pro oddělení nadpisu. Barva linky #b95e59 a rozměry 357px na 11px.
Krok 56 Vycentrujte horizontálně linku a doplňte text, který oddělte linkami s šířkou 297px a barvou výplně #d1d1d1 s krytím na 63%.
Krok 57 Postup opakujte třikrát, vždy s rozestupem 25px, u třetího panelu doplňte posouvací lištu tvořenou obdélníkem a dvěma trojúhelníky.
Obsah 2. verze – otevřený článek Krok 58 Vytvořte pozadí pro článek pomocí nástroje Obdélník (U). Šířka prvku je 799px, jeho výška bude proměnlivá s délkou článku. Umístěte vrstvu do složky verze 2.
Krok 59 Nastavte pozadí bílou barvu a vytažení #d1d1d1 Krok 60 Vložte z Verze 1 objekty z dolního panelu a umístěte je vedle vytvořeného pozadí článku. Rozestupy mezi články jsou 25px. Pojmenujte vrstvu postranní panel.
Krok 61 Ve stejné úrovni jako u postranního panelu vytvořte linku pro oddělení nadpisu. Šířka linky je 11px a její délka je 734px. Barva #b95e59 krytí 63%.
Krok 62 Doplňte článku text, který bude mít velikost 36px pro nadpis, 14px pro drobečkovou navigaci, 16px pro jméno autora a datum zveřejnění stejně jako hlavní text. Vše písmem Roboto. Krok 63 V úrovni jména autora vytvořte pomocí textového nástroje (T) symbol pro ovládání velikosti písma a posuňte ho na úroveň okraje článku.
Krok 64 Doplňte článek o úvodní obrázek a další ilustrace, které budou lícovat s okraji článku. Krok 65 Z verze 1 překopírujte ikony sociálních sítí a umístěte je do spodní části článku. Změňte jejich velikost na 50px.
Krok 66 Stejným způsobem překopírujte listování mezi články a umístěte ho pod článek s mezerou 25px.
Krok 67 Dále vytvořte panel pro přidávání komentářů. Vytvořte bílý obdélník a velikost 799px na 181px a vytažením #d1d1d1.
Krok 68 Nejprve vytvořte čáru, která bude oddělovat přihlašování a formulář pro odesílání barvou #d39996.
Krok 69 Nad vytvořenou čáru vytvořte text o počtu zpráv a odkaz pro přihlašování, kterému přidejte šipku vytvořenou v navigaci, barva textu se shoduje s výše použitou. Font Robot Regular velikost 18px.
Krok 70 Přidejte formulář pro odesílání, který je vytažen barvou #d39996, text je formátován jako předchozí.
Krok 71 Doplňte ikonou siluety postavy ve stejné výšce jako formulář pro odeslání příspěvku.
Část 4. – Patička Krok 72 Posledním prvkem stránky, který je třeba vytvořit je patička, do které můžete umístit kontakt na Vás, důležité odkazy a jiné informace. Vytvořte novou složku Patička s podsložkami Pozadí a Obsah. Krok 73 Pro začátek vytvořte pomocí Nástroje obdélník (U) patičku o velikosti 1366px na 365px.
Krok 74 Použijte na vytvořený objekt barvu #e74c3c a pojmenujte jej v panelu vrstev Patička.
Krok 75 Vyberte Nástroj čára (U) a na vrcholu patičky vytvořte čáru po celé šířce stránky. Tloušťku čáry nastavte na 10px a barvu na #34495e a přesuňte ji do složky s pozadím patky.
Krok 76 Sociální sítě jsou v dnešní době velice populární, proto je třeba umístit na stránku odkazy na jednotlivé stránky. První možnost je stáhnout si některé z volně dostupných ikon, nebo si vytvořit vlastní. Proto si vytvořte nový soubor s velikostí 660px na 660px a průhledným pozadím.
Krok 77 Kolem okrajů dokumentu vytvořte vodící čáry, které vám pomohou při dalším kroku.
Krok 78 Vyberte Nástroj elipsa (U) a tahem z levého horního do pravého dolního rohu vytvořte kruh. Díky vytvořeným vodícím čarám není třeba držet Shift a vznikne pravidelný kruh, který je přichycen k hranám dokumentu. Použitá barva má hodnotu #e9e6da.
Krok 79 Na stránkách v tutoriálu budou použity ikony odkazující na Twitter, Facebook, Google+ a Pinterest. Jakmile vytvoříte jednu, zbylé ikony se dají vytvořit obdobným způsobem. Ukázková ikona bude odkazovat na Twitter, proto jděte na stránky a stáhněte si volně šiřitelné logo. Krok 80 Otevřete si stáhnuté logo a změňte jeho velikost 430px na 349px.
Krok 81 Označte vrstvu s logem stiskem klávesové zkratky Ctr+A, vyberte nástroj Posun (V) a použijte tlačítka pro vertikální a horizontální zarovnání v horní liště.
Krok 82 Vyberte logo například pomocí Kouzelné hůlky (W).
Krok 83 Převeďte kruh na rastrovou vrstvu v nabídce vrstvy a přepněte se na tuto vrstvu.
Krok 84 Stiskem Delete odstraňte z vrstvy vytvořený výběr loga. Vznikne vám tak kruh s vyříznutým logem uprostřed. Vrstvu se staženým logem můžete vypnout nebo vymazat.
Krok 85 Opět převeďte vrstvu na inteligentní objekt a nastavte jí Filtry > Šum > Přidat Šum na úrovni 3%.
Krok 86 Duplikujte vrstvu do hlavního dokumentu a změňte její velikost na šířku 66px a výšku 66px. Změnu provedete z nabídky Úpravy > Transformovat > Změna velikosti.
Krok 87 Přemístěte ikonu do připravené mřížky v patce stránky a opakujte postup pro ostatní ikony sociálních sítí. Krok 88 Poté co rozmístíte ikony, je třeba vytvořit text, který umístíte do patičky. Do patičky umístěte například informace o autorovi, vyhledávací panel, strom navigace apod. Písmo použité v patičce je Roboto ve velikostech 24px a 16px, odstavce jsou odsazeny o 6px doprava. Text vytvoříte pomocí nástroje Text (T) a následným tažením.
Krok 89 Na závěr umístěte pod ikony sociálních sítí fotografii autora, případně logo stránky a také datum, ke kterému je obsah webu aktuální, aby návštěvníci věděli, že obsah webu aktualizujete.
Část 5. - Favicon Krok 90 Na úplný závěr je třeba vytvořit ikonu do záložky webové stránky tzv. Favicon, který musí být ve velikosti 16px na 16px nebo 32px na 32px. Vytvořte si proto nový čtvercový soubor o straně 192px na 192px.
Krok 91 Vyplňte pozadí černou barvou a vyberte nástroj text, pomocí nějž napište iniciály loga.
Krok 92 Nastavte font Qwigley o velikosti 140px s bílou barvou a umístěte jej na střed čtverce.
