7. modul - článek

V této lekci se budeme zabývat designovými prvky, které určují první dojem. Patří sem například fotky, videa, logo, ilustrace, textury, ikony, ale i negativní prostor. 


FOTKY A VIDEA

Velmi často se setkávám s tím, že moji klienti chtějí vytvořit web a neuvědomují si důležitost toho, jak kvalitní fotografie mají. Konzistentní fotky na vašem webu jsou extrémně důležité pro to, aby váš web zanechal v návštěvnících harmonický dojem.

Ohledně výběru fotek pro váš web je harmonie jedna z nejdůležitějších věcí. Pojďme si povědět o tom, co to vlastně harmonie je. Podle Wikipedie harmonie znamená soulad, souzvuk nebo souznění. Když je něco harmonického, cítíme se v tom dobře. Opakem harmonie je disharmonie (nesoulad), kde se necítíme dobře. Pokud tedy chcete, aby se vaši zákazníci na vašem webu cítili dobře, je potřeba, aby na něm pociťovali harmonii. 

Protože fotky jsou jedním z nejvýraznějších designových prvků, které mají na celkový dojem návštěvníků z vašeho webu největší vliv, je důležité věnovat jim pozornost.


Pokuste se řídit těmito pravidly:

1. Udržujte soulad mezi portrétními fotkami a fotkami detailů.

• Portrétní fotky - jsou takové fotky, na nichž jsou tváře lidí - pro návštěvníka jsou to energeticky náročnější fotky, tím spíš, pokud jsou na nich lidé, kteří se dívají přímo do objektivu (tedy na ně) a vyzařují emoce.
• Fotky detailů - sem patří fotky, které zobrazují detaily prostředí (nebo i samotné prostředí) - jsou to často fotky bez lidí nebo na nich lidé nehrají příliš velkou roli (lidé tam mohou být rozmazaní nebo se tam mohou objevit například jen jejich ruce nebo nohy). Tyto fotky jsou pro návštěvníky více uklidňující. 

Pokud budete mít na webu všude jen samé lidi, může to pro vaše návštěvníky působit tak, jako by procházeli ulicemi rušného města - je to zábavné, ale po čase to může být vyčerpávající.

Pokud budete mít na webu naopak jen detaily, může to na vaše zákazníky působit tak, jako by byly v pusté krajině - je to uklidňující, ale po čase to může být nuda. 

Proto se na svém webu pokuste dosáhnout souladu mezi portrétními fotkami a fotkami detailů.


2. Udržujte soulad v barevné teplotě fotek

Světlo má různou barevnou teplotu - od načervenalého západu slunce, přes žlutavé světlo domácích žárovek až po chladné světlo zatažených dnů a namodralé světlo umělých zářivek.

Mixovat dohromady teple a studeně laděné fotky vedle sebe může na vaše návštěvníky působit podobně, jako by byly v zasněžené krajině a zároveň také na sluncem zalité pláži najednou. Nebo jakoby měli doma v obýváku rozsvícenou jednu lampičku teplou a druhou chladnou - člověku to podvědomě není prostě příjemné, protože je to pro něj nepřirozené. 

Proto se vždy snažte kombinovat fotky, které jsou v podobné barevné teplotě. 

Také si dejte pozor, jak mixujete tmavé, kontrastní fotky s těmi jemnými, světlými nebo s teplými a hřejivými. Opět si to přirovnejte k ročnímu období, které zastupuje vaše značka a ujistěte se, které je vaše hlavní období a které vedlejší. Pokud je vaše hlavní období zima a vedlejší podzim, může být přirozené, že použijete bílo-černé nebo černo-šedé kontrastní fotky v kombinaci s fotkami, které jsou lazeny například do podzimní hnědo-oranžovo-béžové.


3. Udržujte soulad ve stabilitě a pohybu

Pokud vytváříte svůj web, můžete vytvořit místa, která jsou stabilní a místa, která jsou v pohybu. Větší část vašeho webu může být stabilní, ale některá místa můžete dát do pohybu - například díky pohyblivým prvkům, nastavení tranzicí, hooverů atd. 

V případě fotek můžete pohyb dodat prostřednictvím automatické galerie, kterou umístíte na web. Nemusí to být jen portfolio vašich fotek, může to být například i portfolio vašich produktů, které se proměňují nebo tváře zákazníků, kteří vám dali referenci. 

Na váš web můžete přidat také tzv. gify, které vytvoříte z videa nebo naopak ze série fotek. Díky nim přidáte do svého webu trochu života. Jen si dejte pozor na jejich velikost, aby vám zbytečně neztížila načítání webu (a nezhoršila zážitek návštěvníka).

Skvělý způsob, jak přidat na web trochu života je pomocí videa. 

• takové video může být buď samostatné, které budete sdílet z Youtube, Vimea nebo například Loomu (aby se váš web dlouho nenačítal)
• nebo může být ve formě videobanneru - jedná se většinou o krátké video (buď ve smyčce, které se pouští opakovaně nebo bez smyčky jednorázově) na pozadí vašeho webu - to web příjemně rozpohybuje, ale zároveň návštěvníka nezahltí - pokud budete vkládat bannery na pozadí, hlídejte si prosím jejich velikost - často se totiž nahrávají přímo na web a zhoršují tak jeho načítání a tím i zkušenost návštěvníka

Pokud byste dali na svůj web příliš pohyblivých prvků, návštěvníka byste zahltili a nejspíš také přetížili web. Pracujte s nimi tedy spíše jako s kořením.


Kde můžete sehnat doplňkové fotky a videa pro váš web?

Zdarma:

• Pexels 
• Unsplash 
• Pixabay 

Placené:

• Haute Stock
• Moyo Studio
• The Humble Lion

LOGO

Pokud si budete vytvářet vlastní logo, zkuste prozkoumat Pinterest, Canvu nebo Creative Market a sledujte, co k vám promlouvá. Můžete si například vytvořit složku, kam si stáhnete loga, která se vám líbí. Poté si je jedno po druhém prohlédněte a ptejte se na to, co konkrétně se vám na něm líbí a jaké pocity ve vás vyvolávají fonty, barvy a další prvky, ze kterého je logo složeno.

Pokud vás zaujme některé logo, které si můžete koupit nebo pokud najdete nějaké zdarma třeba na Canva, upravte si ho podle svého a vtiskněte mu svou jedinečnost. Také u koupě loga dejte pozor na to, aby fonty, ze kterých je složeno, podporovaly českou diakritiku (pokud ji v logu budete potřebovat).

Kde si můžete logo vytvořit? Pokud nepracujete s nějakým grafickým programem, pak určitě zkuste vytvořit si ho v Canva - máte-li placenou verzi, můžete ho exportovat jako .png s průhledným pozadím a nahrát do Showit. Jen si ohlídejte jeho velikost, aby se vám zbytečně nezpomaloval web.

Můžete si vytvořit také jednoduché textové logo za pomocí fontů, které použijete pro svůj web. V tomto případě si zkuste pohrát s následujícími možnostmi:

• vyzkoušejte různou mezeru mezi písmeny a sledujte, jak se mění pocit, které text poté vyzařuje
• pracujte s hierarchií slov - pokud máte v logu například více slov, rozhodněte se, které slovo bude velké a která slova můžete o něco upozadit
• velká nebo malá písmena - velká písmena přidávají do vašeho loga autoritu, zatímco malá písmena zase dodávají pocit větší přístupnosti
• kontrast - mnoho fontů najdete v různých tloušťkách - v případě vašeho loga s nimi můžete zkusit experimentovat - například spojte tučný "bold" styl písma s jeho lehkou "light" nebo "thin" verzí, můžete zde také podobně pracovat s kurzívou

Do vašeho loga také můžete přidat ikonu nebo ilustraci. Vyzkoušejte také geometrické tvary jako jsou čáry, čtverce, obdélníky, kruhy nebo trojúhelníky. Samotný text můžete použít například do tvaru kruhu kolem ikony nebo písmena. 

Použít můžete také pouze iniciály a hrát si s umístěním písmen.

Důležitá součást loga může být tzv. strapline. Strapline popisuje, co děláte - je to například, pokud pod vaším jménem v logu bude napsáno lifestyle fotografka nebo byznys koučka. Nezapomeňte, že i tato část loga musí být dobře k přečtení, vyvarujte se proto příliš malých velikostí písmen. 

Pokud se na logo vlastnoručně necítíte, zkuste oslovit Veroniku z Brandstylist nebo Kristýnu z Tinaydesign.


ILUSTRACE

Ilustrace můžou přidat do vašeho designu více stylu, vkusu a charakteru. Ilustrace můžete použít na webu a pak je dál rozvíjet například na vizitkách nebo při balení vašich produktů. 

Ilustrace nemusíte použít vždy, protože se ne vždy hodí. Pokud ale cítíte, že se k vám a k vaší značce hodí, určitě to s nimi nevzdávejte. Pokud totiž najdete ty správné, může to váš celkový design dostat o úroveň výš - a to právě díky jeho propracovanosti a promyšlenosti.

O ilustracích můžete přemýšlet v rámci ročního období vaší značky. 

• Pro jarní osobnosti se hodí čistý ilustrativní styl s jemnými liniemi nebo použití pastelových barev u vodních štětců, které jsou jasné a čisté.
• Pro letní osobnosti fungují dobře kresby perem nebo inkoustem, které odkazují na luxus a tradici. 
• Pro podzimní osobnosti můžete využít tučnější ručně kreslené čáry a tvary, které dodají prvky stability a profesionální, odpovědné práce. 
• Pro zimní osobnosti se hodí významově silné, ale esteticky jednodušší ilustrace, které dodají vašemu designu osobnost a které budou mít takový charakter, že si je vaši zákazníci zapamatují. 

Mnoho úžasných ikon zdarma najdete na Canva. Pokud máte placenou Canvu, můžete si jednotlivé ilustrace exportovat s průhledným pozadím jako .png a použít je na svém webu. Jen si pohlídejte velikost, aby se vám zbytečně dlouho nenačítaly.

Na Creative Market si můžete zakoupit krásné a do posledního detailu propracované kolekce ilustrací. 


IKONY

Ikony přidávají více osobnosti do vašeho celkového designu. Malé ikony můžete využít jako odrážky nebo pokud někde potřebujete očíslovat například části procesu. Větší ikony, které jsou spíše v podobě razítek, můžete použít například jako kategorie na blogu. 

Pokud cítíte, že svůj design můžete vylepšit ikonami, vyzkoušejte to - bude tak působit více promyšleně a propracovaně.

Mnoho úžasných ikon zdarma najdete na Canva.

Za pár dolarů najdete skvělé ikony na The Noun Project.


VZORY A TEXTURY

Vhodně zvolené textury a vzory mohou povýšit váš design opět o úroveň výš. Výsledný pocit z designu je prostě jiný, než pokud vidíte jen logo a několik fontů. 

Pro strukturované vzory můžete mixovat čárky, tečky, ilustrace nebo geometrické tvary.

Můžete také najít přirozenou strukturu například v podobě kamene, mramoru, písku, květin nebo například textilií. 

Pokud ve svém designu použijete ilustrace, můžete je například v Canva vkládat opakováním a vytvořit si z nich pravidelný vzor, který použijete například na pozadí vašeho canvasu na webu nebo při balení vašich produktů. Při opakování vzoru můžete vyzkoušet vkládání malých drobných tvarů geometricky s velkými dramatičtějšími tvary. A nebo můžete vytvořit z chaosu řád a použít různé typy a velikostí tvarů, které budou dohromady působit harmonicky.

Pokud vybíráte vzory a textury, můžete se opět řídit osobností vaší značky podle ročního období. 

• Pro jarní osobnosti vyzkoušejte jasné a čisté tečky, čárky, jednoduché květy nebo jednoduchá pozadí.
• Pro letní osobnosti se hodí květinové nebo damaškové vzory, elegantní linie a jemné textury například písku. 
• Pro podzimní osobnosti se hodí teplé, organické, nebo ručně kreslené vzory a hrubší řemeslné nebo látkové textury.
• Pro zimní osobnosti fungují dobře silné, minimalistické a geometrické vzory nebo textury tmavého kamene, uhlí, šedočerného betonu nebo bílého mramoru. 

Na Creative Market si můžete zakoupit krásné geometrické, minimalistické nebo třeba květinové vzory.

Textury například písku, kamene, květin nebo mramoru můžete hledat na stejném místě, kde hledáte doplňkové fotografie pro web.
    

NEGATIVNÍ PROSTOR

Negativní prostor, prázdný prostor nebo také white space je prostor mezi ostatními prvky designu. Můžeme ho však brát jako prvek samotný, protože je potřeba vložit ho do vašeho webu tak, aby v něm všechny ostatní prvky mohly dýchat a vytvořit harmonický pocit v návštěvníkovi, který si na vašem webu nebude připadat jako v přeplněném autobuse.

Negativní prostor plní výraznou estetickou funkci - použijte ho tedy tam, kde chcete vyvolat dojem luxusu. Naopak ho můžete upozadit v nabídkách, které apelují na nižší cenu. 

Existuje makro a mikro negativní prostor:

• makro negativní prostor - prostor mezi základními prvky designu, jako například okraje stránky
• mikro negativní prostor - prostor mezi malými prvky ve skupině, jako například řádky v odstavci, okraje fotek v galerii atd.

Kromě estetické funkce může negativní prostor také pomoci návštěvníkům vašeho webu, aby se lépe zorientovali, aby se jim lépe četli nadpisy a řádky nebo abyste jim pomohli upřít pozornost tam, kam potřebujeme. Také díky němu pomáháte návštěvníkům určit, které prvky k sobě patří (tím, že jsou pohromadě ve skupině). Jednoduše řečeno - váš web je díky negativnímu prostoru pro vaše zákazníky lépe pochopitelný a srozumitelný (to vše díky negativnímu prostoru).

Zajímavostí je také strach z prázdného místa - tzv. horror vacui. Strach z prázdného místa se objevoval v umění nebo třeba také u knih, jejichž tisk byl velmi drahý a proto zde bylo důležité zaplnit každičký volný prostor. Možná se s ním setkáte také u sebe, když budete mít tendenci nacpat vše na jedno místo tak, aby to lidé viděli, kdyby je náhodou na vašem webu nenapadlo scrollovat. 

Tento strach můžete vyřešit tak, že až budete klást pod sebe jednotlivé canvasy, vždy přemýšlejte o tom, jak návštěvníka přirozeně navedete na další canvas, ale ne za cenu absence negativního prostoru. 


TYPY PRO SOULAD CANVASŮ NA WEBU

Až budete tvořit jednotlivé stránky tak, že budete pod sebe vkládat další a další canvasy. Myslete na soulad a harmonii také zde. 

Pokuste se řídit těmito třemi pravidly a uvidíte, že vaše stránky budou hned příjemnější pro návštěvníky. 


1. Udržujte linii prvků pod sebou jdoucích canvasů.

Každý canvas, ze kterého se skládá vaše stránka má v sobě obsaženy různé prvky - například fotky a texty. Představte si, že máte canvas, kde je nalevo text a napravo fotka. Linii zarovnání textu nastavte například 50px od levého začátku canvasu. Stejně tak pravou hranici fotky nastavte tak, aby byla také 50px od pravého konce canvasu.

Až budete vkládat další canvas - opět dodržte stejný odstup prvků od levého začátku a pravého konce canvasu. Toto nejde nastavit úplně vždy, ale pro návštěvníka jsou prvky, které jsou uspořádány takto harmonicky příjemnější. Na druhou stranu někdy je také potřeba porušit pravidla (protože život také není podle pravítka) a harmonii zarovnaných prvků kreativně porušit. 

Toto pravidlo platí, pokud ho použijete vertikálně, tak horizontálně. Jednoduše dejte pozor na pomyslné linie, které vaše prvky na webu vertikálně i horizontálně vytvářejí a jestli na vás působí harmonicky.


2. Střídejte fotky s texty vlevo i vpravo.

Stejně tak, jako si můžete dát pozor na zarovnání linie jednotlivých prvků na webu, můžete si ohlídat také střídání fotek vlevo i vpravo - tím spíš, pokud jsou doprovázeny textem. Pokud máte na svém webu například tři balíčky a představujete je v podobě fotky a textu, pak může působit harmoničtěji, pokud prostřední balíček bude mít fotku a text na opačné straně jinde než balíček první a třetí.  

Opět to není něco, čeho se musíte zarytě držet, ale sledujte svůj pocit z webu, pokud prohodíte střídavě fotky s textem vlevo a vpravo.


3. Střídejte pozadí canvasů.

Ze zkušenosti se mi také osvědčilo, že pokud používáte například bílé a béžové pozadí, že ho můžete střídat například podle jednotlivých canvasů (nebo obsahových celků, které vytvářejí). Sem tam můžete také použít pozadí z fotografie nebo videa, kterým dobře vyvážíte tok stránky a zároveň tak můžete přidat trochu potřebného kontrastu (nebo tak rozdělit obsahové části stránky).