Úvod. > Barvy. > Písma. > Rozvržení stránky. > Animace

Estetická stránka tvorby webu Úvod

> Písma > Rozvržení stránky > Animace

02

Po letech zkušeností s výukou, kdy jsem se potkala s mnoha webdesignery a tvůrci stránek, jsem dospěla k přesvědčení, že nikdo nechce záměrně tvořit škaredé stránky; problém je, že někdo zkrátka lepší udělat neumí. Mnoho lidí se začalo věnovat webdesignu bez předchozího vzdělání v oboru. Tato kapitola nenahradí roky školení, ale je určena těm, kdo potřebují poradit se základními principy dobrého designu. Tato kapitola je postavena na dvou aspektech slovníkové definice estetického vkusu: design se řídí jistými principy a hodnocení krásy v umění je subjektivní záležitost.

17

> Barvy

Nejdříve si všichni mysleli, že naučit se tvořit webové stránky znamená naučit se používat HTML. Později si uvědomili, že potřebují umět pracovat s grafickými programy, aby mohli tvořit obrázky pro web. Pak zjistili, že musí vzít v úvahu použitelnost, přístupnost a přehlednost stránky. Proces tvoření webových stránek prodělal vývoj, který není ničím jiným než vedlejším projevem vyzrálosti – vyzrály výtvory webdesignerů, zlepšil se vkus uživatelů a zvýšilo se očekávání uživatelů. Někde v té směsici spočívá význam designu na starý způsob: barvy, typografie a rozvržení stránky.

18

02 Estetická stránka tvorby webu

Estetika barev Málokdo se vyzná v teorii barev a většina webových tvůrců, dokonce i příležitostní grafici si nejsou jisti při výběru příjemného barevného schématu. Zdálo by se, že teorie barev je téma, které je zábavné a tvořivé. Většina knih jej však bohužel vysvětluje nezáživným odborným způsobem. Tato kapitola podává teorii barev se zaměřením na web. Mým cílem je vyhnout se příliš odbornému vysvětlování, přičemž se chci zaměřit na snadno identifikovatelné principy a techniky. Za nápady v této části kapitoly však nevděčím sobě. O barvách mě učil manžel, Bruce Heavin, který namaloval ty krásné obálky na mých knihách. Podělil se s moji osobou o některé triky při volbě barev, čímž se moje schopnosti v této oblasti výrazně zlepšily. A některé z těchto užitečných rad bych zde chtěla přístupnou formou předat dál.

Některé pojmy z teorie barev K popisu barev je třeba se nejdříve shodnout v termínech. Zde jsou ty nejdůležitější pojmy, které se v textu objevují.

Spektrum: všechny barvy v určitém barevném prostoru, jako je RGB nebo CMYK.

Odstín: definuje určité místo v barevném kruhu nebo spektru. V našem případě byl zvolen zelený odstín.

Jas: vyjadřuje rozmezí mezi světlem a tmou. Náš příklad zobrazuje červenou barvu v různých stupních jasu od tmavé po světlou.


Sytost: vyjadřuje intenzitu barvy.

Tlumený: pokud lidé mluví o tlumených barvách, většinou mají na mysli barvy s nízkou sytostí.

Nízký kontrast

Vysoký kontrast

Kontrast: rozdíl hodnot. Vizuální hierarchie se vztahuje ke kontrastu.

Zesvětlení: k barvě se přidává bílá.

Ztmavení: k barvě se přidává černá.

19

20


Výběr barevných schémat K volbě vhodného barevného schématu pro webové stránky je potřeba znát vztahy mezi barvami. Následující část vás seznámí s některými pojmy, které budou později použity v kontextu tvorby webových stránek. Na trhu je mnoho knih o vztahu barev a emocí. Říká se, že purpurová je barva vášně, červená znamená zlost nebo vyvolávající pozornost, modrá je barva klidu. Myslím si, že nikdo nedovede a ani by neměl předurčovat, co která barva znamená pro někoho jiného. To je totiž zcela subjektivní záležitosti bez ohledu na to, co stojí v knihách. Kromě toho, asociace vyvolávané jednotlivými barvami jsou silně podmíněny kulturou. Abych uvedla konkrétní příklad, do naší školy v Kalifornii přišel jednou kdosi z Izraele a stěžoval si, že barvy na našich stránkách jsou stejné, jaké používali nacisti pro pásky, které museli nosit Židé za holocaustu. Byl proto silně rozhořčen, že stránky lynda.com používají žlutou a černou barvu. I když mám židovské předky, taková spojitost mě nikdy nenapadla; prostě se mi líbilo, jak se k sobě žlutá a černá hodí. Nezměnila jsem je, protože ve mně nic takového nevyvolávaly. Byla bych ovšem s výběrem takových barev opatrnější, kdybych navrhovala stránku pro židovské klienty. Některé firmy už mají své barevné schéma, které používají pro své logo, tištěné materiály a celkový image firmy, vytvořeno dávno. V takovém případě je potřeba s jejich barvami vhodně zacházet v souladu s tím, jak to vyžaduje prostředí webu. V jiných situacích máte úplnou volnost ve výběru barevného schématu. Volnost ovšem může být nebezpečná pro toho, kdo s ní neumí zacházet! Raději než na subjektivní a nedefinovatelné emoce, které jsou evokovány barvami, jsem se zaměřila na harmonické vztahy mezi barvami.


21

Vztahy mezi barvami Primární barvy

Sekundární barvy

Terciární barvy

Doplňkové barvy

Posunutý doplněk

Sousední barvy

Ukazatele lze posunout na kterékoli místo v barevném kruhu.



Monochromatické

Používá jeden odstín a různý jas téhož odstínu.

Tři příklady monochromatického barevného schématu (zleva doprava): azurová, teplé barvy, studené barvy.

22


Použití vztahů mezi barvami ve webdesignu Možná dokážete ohromit své kolegy a klienty, když budete znát rozdíl mezi doplňkovými a terciárními barvami, ale nebudete z toho mít nějaký praktický užitek, pokud tyto vědomosti nedokážete použít při tvorbě stránek. Všechny vztahy mezi barvami, které jsme si právě ukázali, souvisí s výběrem odstínu. Jakou roli však hraje sytost a jas? Jsou právě tak důležité jako odstín, ve většině případů možná ještě důležitější.

Tento hrozný příklad používá barevné schéma poskládané ze sousedních barev – odstín modré, červené a purpurové. Čitelnost je přinejmenším obtížná, ne-li nemožná.

Díváme-li se na nevhodnou kombinaci barev, vidíme, že jejich sytost je maximální a že všechny mají podobnou hodnotu jasu.

Trochu lepší příklad, který používá stejné barevné schéma sousedních barev modré, červené a purpurové, nicméně se liší v použitých hodnotách sytosti a jasu. Jaká to změna! Nestačí prostě zvolit druh barevné palety – je totiž potřeba umět vyvážit hodnoty jasu a sytosti všech barev a zároveň zvolit barevnou kombinaci, která neztěžuje čitelnost textu.

Při pohledu na vhodnější barevnou kombinaci vidíme, že se barvy výrazně liší v hodnotách sytosti a jasu.


23

Dobré cvičení, jak se přinutit myslet na tyto věci, je udělat si nejprve náhled stránky ve Photoshopu za použití vrstev. Zkuste vyplnit jednotlivé vrstvy designu odstíny šedé barvy takovým způsobem, aby důležité informace byly vhodným způsobem zvýrazněny. A poté, co jste navrhli stránku v šedých odstínech, nahraďte šedou barvu za jinou barvu, třeba žlutou. Budete překvapení, jak efektivní cvičení představuje tento postup!

Když budeme nejdříve tvořit ve stupních šedé barvy, můžeme se naučit myslet nejenom na barevné odstíny, ale také na jejich jas.

Barevné odstíny nahradily šedou barvu a já jsem získala právě takové barevné sladění, jaké jsem chtěla.

tip PLUGIN PRO PHOTOSHOP Hot Door Harmony je plug-in pro Photoshop, který mě zaujal a který se vztahuje k barevné harmonii. Zkušební verze je dostupná na adrese http://www.hotdoor.com. V době psaní této kapitoly existoval pouze ve verzi pro Macintosh, nicméně, verze pro Windows se připravuje. Tento plug-in vám umožní zvolit barvy prostřednictvím vztahu harmonie. Program vám ukáže výběr v paletě webových barev. Můžete přidávat bílou (zesvětlit) nebo černou (ztmavit), abyste získali různý jas, a poté zkopírovat pro kteroukoli barvu vytvořený hexadecimální kód. Vřele doporučuji tuto pomůcku stáhnout a vyzkoušet.

Plug-in Hot Door Harmony se používá snadno. Vyberte typ barevného schématu (například sousední barvy) a roztočte kuličku na barevném kruhu.

24


Pokud porozumíte vztahům mezi odstínem, jasem a sytostí, dokážete ve svých návrzích zdůraznit důležité věci a ty méně důležité potlačit. Získáte tak vládu nad barvami, které už nebudou ponechány náhodě.


25

26


Vizuální hierarchie

Galerie barev

Vhodné použití barev při tvorbě stránek je klíčem k efektivní komunikaci. Chcete-li zaměřit pozornost návštěvníka k těm částem stránky, které jsou nejdůležitější, lze toho dosáhnout mnoha různými způsoby. Podívejme se na některé příklady webů, kde barvy slouží jako prostředek k vytvoření vizuální důležitosti a hierarchie.

Imax Everest: film Střecha světa (http://www.mos.org/Everest/howhigh/howhigh.htm) je dobrým příkladem efektivního použití doplňkových barev.

Pokud chci, aby tím nejdůležitějším prvkem na stránce bylo logo, mohu jej zvýraznit pomocí barvy. Pokud je však tím důležitějším prvkem navigace, mohu se rozhodnout, že pomocí barev zvýrazním tuto část stránky.

Dříve než začnete vytvářet vstupní stránku webu, byste si měli stanovit, která informace je první, druhá, třetí a čtvrtá s ohledem na důležitost. Když si takto stanovíte pořadí důležitosti, budete moci použít mnoho z principů zmiňovaných v této kapitole, čímž tak prostřednictvím barev dosáhnete svých komunikačních cílů.

The LA County Arts Commission: (http://www.lacountyarts. org) používá mnoho barev, nicméně, celý web působí jednotně, protože si tvůrce dal záležet, aby hodnoty jasu všech barev byly podobné. Díky tomu působí velké množství různých odstínů harmonicky.


27

The Box (http://www.sixsides.com) používá kombinaci sousedních barev a posunutého doplňku. Každá sekce stránek má svoji barvu, takže stránka nejen dobře vypadá, ale má i přehlednou navigaci.

28


Estetika typografie Typografie pro web je spojena s mnoha omezeními, podrobněji se jimi zabývá kapitola 20. Tato část kapitoly se věnuje designovým principům spojeným s písmy. Zaměřuje se na písmo jako obrázek nebo písmo jako součást Flashe, nikoli na písma zobrazovaná prostřednictvím HTML.

Základní typografické pojmy Než se dostaneme někam daleko s písmy na webu, je třeba používat společnou terminologii. Následující příklady definují několik základních pojmů z typografie. Monospace (neproporcionální písmo): písmo, které se liší od standardního proporcionálního písma, jehož jednotlivé znaky zabírají různou šířku tím, že jeho znaky mají jednotnou šířkou. Na obrázku nahoře je písmo Courier, v HTML jej lze jednoduše Patkové písmo (serif): hlavní tahy písmen jsou za- použít vložením prvku PRE. Neproporcionální pískončeny patkami. Mnozí typografové se shodují, že ma lze také v HTML použít prostřednictvím prvpatková písma jsou v souvislém bloku textu nejlépe ku CODE nebo TT. čitelná. Výchozím fontem ve většině prohlížečů je právě patkové písmo – Times Roman pro Macintosh a Times New Roman pro PC.

Výchozí proložení (default leading): proložení (leading) je vzdálenost mezi jednotlivými řádky textu. Výraz pochází z dávných dob typografické sazby. Bezpatkové písmo (sans-serif): hlavní tahy nejsou Obrázek představuje výchozí prokládání v HTML zakončeny patkami. Bezpatkové písmo lze definovat bez použití specifických prvků. pomocí atributu FACE prvku FONT nebo pomocí CSS vlastnosti font-family. To si popíšeme později v této kapitole.

poznámka CSS TO UMÍ Mnoho typografických prvků popsaných v této části nelze nadefinovat pomocí klasického HTML, nicméně, s využitím CSS to obvykle možné je. Více v kapitole 23.

Volnější proložení (looser leading): lze ho dosáhnout prostřednictvím CSS a vlastnosti line-height. Více o CSS se dozvíte v kapitole 23.


29

Prostrkání znaků (spacing): dodatečná vzdálenost Text nadpisu (Headline text): text nadpisu slouží mezi jednotlivými písmeny ve slově. Lze změnit po- k rozdělení informace. Může používat odlišnou vemocí CSS. likost, barvu nebo jiný font. Podtržení, tučný text nebo jiné podobné zvýraznění umožňuje upoutat pozornost návštěvníka. Posun nad linkou (baseline shift): posun znaků směrem nahoru nebo dolů. Střídavě velká písmena (drop cap): text skládající se z velkých písmem je možné nastavit tak, aby počáteční písmeno každého slova bylo větší. V HTML toho lze dosáhnout poněkud komplikovaně prostřednictvím prvku FONT a atributu SIZE. Dnes se upřednostňuje použití CSS.

Vyrovnání párů (kerning): umožňuje upravit rozestupy mezi jednotlivými znaky. V CSS se k tomu používá vlastnost letter-spacing. Úprava proložení: definuje vzdálenost mezi řádky v bodových jednotkách. V CSS se k tomu používá vlastnost line-height. Mezery mezi slovy: v CSS lze změnit prostřednictvím vlastnosti letter-spacing.

Kapitálky (small caps): server HotWired používá v reklamě na titulní stránce velká písmena o velikosti malých. Je to jeden z příkladů, kdy se kapitálky používají jako druh titulku. Pro text s různou velikostí písma je nejlepší použít CSS.

Blok textu (body text): Souvislý text na stránce.

Tracking: rozestupy mezi jednotlivými písmeny v celém textu.

30


Úvod do typografie Fascinuje vás typografický design, nicméně, moc toho o něm nevíte? Je to opravdu atraktivní téma a poměrně složitá věda. Vybrala jsem pro vás některé internetové stránky o typografii, kde se můžete s problematikou sami seznámit. Existuje mnoho interaktivních stránek, které podávají informace o typografii. Zde jsou dvě z mých oblíbených.

CounterSPACE (http://counterspace.motivo.com).

TypoGRAPHIC (http://www.rsub.com/typographic).

tip

KDE SE DOZVĚDĚT VÍCE O TYPOGRAFII

Microsoft typography

CounterSPACE

Skvělý článek o tvorbě snadno čitelného písma. http://www.microsoft.com/typography/hinting/hinting. htm

Krásně provedená interaktivní studie o písmu vytvořená v programu Macromedia Flash. http://counterspace.motivo.com

The Microsoft Typographic Glossary

typoGRAPHIC

Slovníček typografického žargonu. http://www.microsoft.com/typography/glossary/content. htm

Obsáhlá stránka s pěkným designem, která seznamuje se světem typografie. http://www.rsub.com/typographic

Daniel Will-Harris

Typo.cz

Výběr a užití písma. http://www.will-harris.com/use-type.htm

Česká a zahraniční typografie na webu. http://www.typo.cz

webreview.com Hledejte na stránce „will-harris“. http://webreview.com/archives.shtml


Fonty pro web Existují odlišné způsoby publikování textu na webu: jedním je formát ASCII (vytvořený pomocí HTML nebo CSS) a druhým je text ve formě webové grafiky, jako jsou formáty GIF, JPEG nebo SWF (Flash). Níže je uveden příklad dvou stránek, které používají text zobrazovaný prostřednictvím HTML. Na prvním obrázku je použit font Verdana, na druhém je použit výchozí font pro webové stránky: Times Roman. Aby tento text mohli návštěvníci vidět úplně stejně, musejí mít příslušné fonty nainstalovány ve svém počítači. Z tohoto důvodu je volba fontů pro text zobrazovaného prostřednictvím HTML výrazně omezena oproti možnostem, které nabízí text zobrazený v grafickém souboru.

Tato stránka má jako font nadefinovanou Verdanu.

Toto je příklad stránky s výchozím fontem (Times Roman).

31

Úvod. > Barvy. > Písma. > Rozvržení stránky. > Animace

Recommend Documents