Hlavní práce71485_spao00.pdf, 7.3 MB Stáhnout

Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky

Redesign webu jazykové školy DIPLOMOVÁ PRÁCE

Studijní program: Aplikovaná informatika Studijní obor: Informační systémy a technologie

Autor: Bc. Ondřej Špála

Vedoucí diplomové práce: Ing. Zdeněk Vondra, Ph. D.

Prohlášení

Prohlašuji, že jsem diplomovou práci Redesign webu jazykové školy vypracoval samostatně za použitı́ v práci uvedených pramenů a literatury.

V Praze dne 7. prosince 2020

Ondřej SGpála

Abstrakt

Tato diplomová práce popisuje proces redesignu webu jazykové školy Profi English, který je dostupný na adrese www.profienglish.cz. Web existoval v původnı́ podobě od svého vzniku v roce 2008, ačkoliv obsah byl průběžně aktualizován. Nynı́ již však působı́ zastarale, což

zanechává v návštěvnı́cı́ch negativnı́ dojem a nesplňuje standardnı́ nároky na použitelnost.

Cı́lem práce je navrhnout a implementovat nový a přehledný web, který bude působit moderně

a zlepšı́ uživatelskou zkušenost.

Za tı́mto účelem byla nejprve provedena analýza firemnı́ho stylu Profi English a stávajı́cı́ho stavu webu. Ten je rozebrán po stránce vzhledu, provedenı́, datové analýzy z nástroje Google Analytics a také podroben uživatelskému testovánı́. Následně je popsán proces UX designu, který ústı́ v návrh nového layoutu a vzhledu. Předpokladem nového návrhu bylo stanovenı́

vizuálnı́ho stylu Profi English, který byl zaznamenán do grafického manuálu, tvořı́cı́ho vedlejšı́

výstup projektu. Dále je názorně popsán redesign jednotlivých částı́ webu, který je dalšı́m výstupem práce. Poslednı́ fázı́ realizace byl proces vývoje softwaru, tedy implementace, testovánı́ a nasazenı́. Výsledky druhého kola uživatelského testovánı́ potvrdily zlepšenı́ dojmu z webu, čı́mž došlo k naplněnı́ hlavnı́ho cı́le.

Klíčová slova

webový design, redesign webu, firemnı́ identita, grafický manuál

JEL

L86

Abstract

This diploma thesis deals with the topic of web redesign. It describes the process of redesigning web page of a small language school called Profi English, which can be found on URL www.profienglish.cz. Content of this web was continuously updated but the design remained same since 2008, when the web was created. Now it looks outdated, which started to have a negative impact on the user experience and does not fulfil usability standards. The main goal of this thesis is to design and implement new and easy to read website, which will look modern and improve the user experience.

For this to achieve first was conducted an analysis of the brand style and current web solution.

Website is described in terms of design, implementation, data analysis from Google Analytics and also a user testing was executed, to help with prioritization of the problems. Next the UX design process is described which leads to the graphic design of the new layout. But before that the brand visual style had to be defined. Brand manual was created, to help with consistent design decision, which was one of the objectives. After that the redesign of all the different web parts is thoroughly described. The final phase was the implementation, testing and deployment of the new web. The results of the second round of user testing confirmed that the user experience was improved, which fulfilled the main objective.

Keywords

web design, web redesign, brand identity, brand manual

JEL

L86

Obsah

U[vod ... 8

1 Webdesign pro firmu ... 10

1.1 Firemnı́ identita ... 10

1.1.1 Grafický manuál ... 11

1.1.2 Logo ... 11

1.1.3 Brand identity design ... 13

1.2 Webdesign ... 14

1.2.1 Principy krásného webdesignu ... 15

1.2.2 User Experience design ... 18

1.2.3 Požadavky na web ... 21

1.2.4 Web na mobilu ... 22

1.2.5 Web redesign ... 22

1.2.6 Testovánı́ webu ... 23

1.3 Modernı́ trendy webdesignu ... 25

1.3.1 CMS a Wordpress ... 26

1.3.2 Website builder ... 27

1.3.3 CSS šablony ... 27

2 Východiska pro redesign ... 29

2.1 Analýza Profi English ... 29

2.1.1 Firemnı́ design ... 30

2.1.2 Závěr analýzy komunikace ... 33

2.2 Analýza webu ... 34

2.2.1 Představené webu ... 34

2.2.2 Vzhled ... 35

2.2.3 Provedenı́ webu ... 37

2.2.4 Analýza chovánı́ uživatelů ... 40

2.2.5 Konkurenčnı́ weby ... 43

2.2.6 Uživatelské testovánı́ ... 44

2.2.7 Shrnutı́ výsledků analýzy webu ... 45

2.3 Požadavky na redesign ... 46

2.3.1 Cı́le nového webu ... 47

3 Redesign webu ... 48

3.1 UX design ... 48

3.2 Návrh vzhledu ... 51

3.2.1 Vizuálnı́ styl ... 51

3.2.2 Design ... 55

3.3 Implementace ... 64

3.4 Testovánı́ ... 68

3.4.1 Uživatelské testovánı́ ... 69

3.5 Ukončenı́ projektu ... 70

3.5.1 Vyhodnocenı́ úspěšnosti ... 70

Závěr ... 72

Použitá literatura ... 73 Přı́lohy ... I Přı́loha A: Grafický manuál Profi English ... I

Seznam obrázků

obr. 1 – Double Diamond schéma designového procesu ... 14

obr. 2 – schéma kombinacı́ na barevném spektru ... 16

obr. 3 – schéma vrstev webdesignu podle Garretta ... 19

obr. 4 – originálnı́ logo Profi English ... 30

obr. 5 – různé kombinace loga Profi English ... 31

obr. 6 – logo Profi English na webu ... 32

obr. 7 – použitı́ různých fontů na webu ... 33

obr. 8 – původnı́ design webu – úvodnı́ stránka ... 36

obr. 9 – původnı́ design webu – dětské kurzy ... 36

obr. 10 – provedenı́ oblých rohů pomocı́ obrázků ... 37

obr. 11 – hlavnı́ navigačnı́ lišta ... 37

obr. 12 – postrannı́ navigačnı́ nabı́dka ... 38

obr. 13 – automatický e-mail od Google Search Console ... 39

obr. 14 – web školy Langfor ... 43

obr. 15 – wireframy pro nový web ... 50

obr. 16 – ochranná zóna kolem loga ... 52

obr. 17 – lockup loga s adresou webu ... 52

obr. 18 – černobı́lá verze loga ... 52

obr. 19 – aplikace loga na různá pozadı́ ... 53

obr. 20 – tučný řez pı́sma Vodafone RG Bold ... 53

obr. 21 – řez pı́sma Brandon Text ... 53

obr. 22 – font Proxima Nova ... 54

obr. 23 – definice barev ... 54

obr. 24 – redesign záhlavı́ webu ... 55

obr. 25 – redesign navigace na mobilu ... 56

obr. 26 – hero section nového webu ... 57

obr. 27 – hlavnı́ nabı́dka akcı́ na home page ... 57

obr. 28 – spodnı́ část nové home page ... 58

obr. 29 – aktuality na home page ... 58

obr. 30 – stránka Kurzy nového webu ... 59

obr. 31 – stránka Akce nového webu ... 60

obr. 32 – nová stránka s odkazem na registračnı́ systém ... 61

obr. 33 – nová stránka s kontakty ... 62

obr. 34 – nová stránka CEFR ... 63

obr. 35 – zápatı́ webu ... 64

Úvod

Tato diplomová práce se věnuje tematice prezentace firmy na internetu, což je v dnešnı́ době

problém, který řešı́ společnosti podnikajı́cı́ v jakémkoliv odvětvı́, pokud chtějı́ svým webem oslovit zákaznı́ky. Téměř polovina lidı́ považuje design stránky za nejdůležitějšı́ faktor při posuzovánı́ důvěryhodnosti podniku, přičemž prvnı́ vyvolaný dojem často u návštěvnı́ka rozhodne, zda bude pokračovat v interakci s tı́mto webem. (1)

Projekt se zabývá webem, který již byl analyzován v rámci autorovi bakalářské práce, která se týkala hlavně technické stránky webu. Byly zde popsány nedostatky zastaralého HTML kódu, který znevýhodňoval web v očı́ch internetových vyhledávačů, jež hodnotı́ obsah. V praktické

části došlo k aktualizaci kódu, zlepšenı́ faktorů ovlivňujı́cı́ch SEO a také přizpůsobenı́ zobrazenı́

na mobilnı́ch zařı́zenı́ch. Po grafické stránce však web zůstal beze změny, a tak zde zůstal prostor pro zlepšenı́ v podobě nového designu, tak jak bylo navrženo v závěru práce.

Řešený problém, cíle a přínosy práce

Ačkoliv byl obsah webu aktualizován, komplexnı́ nedostatky vyplývajı́cı́ nejen ze stářı́ webu jsou nadále relevantnı́. Tı́m prvotnı́m je staromódnı́ vzhled, který nereflektuje firemnı́ styl, ačkoliv web sloužı́ jako propagačnı́ materiál a měl by dosahovat odpovı́dajı́cı́ úrovně. Kapacita původnı́ navigace již nepojme potřebné množstvı́ odkazů a mı́sto na home page se zahlcuje.

Zastaralé praktiky implementace majı́ dopad na nedostatečnou responzivitu webu, který

nesplňuje standardy použitelnosti. Uživatelské testovánı́ potvrdilo, že vzhled webu vytvářı́ u návštěvnı́ků spı́še negativnı́ dojem a přehlednost obsahu je nedostatečná, jelikož nemusı́ dojı́t k předánı́ klı́čových informacı́. Srovnánı́ s vybraným webem konkurence navı́c odhalilo značnou konkurenčnı́ nevýhodu.

Hlavnı́m výstupem práce je redesignovaný web dostupný na adrese www.profienglish.cz.

Cı́lem je vytvořit nový web, který bude poskytovat informace přehledně a pohodlně.

Modernějšı́ vzhled bude vzbuzovat pozitivnı́ dojem, což zlepšı́ konkurenceschopnost a snı́žı́

procento okamžitého odchodu z webu. Nový vzhled bude také reflektovat firemnı́ styl a zvyšovat úroveň prezentace, potažmo vnı́mánı́ celého brandu. Sjednocenı́ navigace a optimalizovaná responzivita poskytne pohodlnějšı́ použitelnost a zlepšı́ celkovou zkušenost z návštěvy webu.

Metody a data

V analytické části je nejprve zkoumána komunikace Profi English, docházı́ k porovnánı́ různých aplikacı́ loga za účelem jejich sjednocenı́. Web je zkoumán a hodnocen z hlediska jeho vzniku a historie, designu, pravidel použitelnosti a implementačnı́ch postupů. Pro analýzu chovánı́

uživatelů jsou použita data z nástroje Google Analytics, který měřı́ výkonnost jednotlivých stránek. Statistické metody srovnávajı́ návštěvnost, počet vstupů, mı́ru okamžitého odchodu a přı́stupy různých zařı́zenı́. Postup návrhu webu se odvı́jı́ dle modelu vrstev user-centered designu JJ Garretta, což umožnı́ tvorbu produktu na mı́ru zákaznı́kům. Také bylo ve dvou kolech provedeno uživatelské testovánı́ webu doplněné o strukturovaný rozhovor. Tı́m došlo

k pochopenı́ nedostatků původnı́ho webu a výsledná data jsou navı́c v závěru porovnána, za účelem ověřenı́ účinnosti provedených změn.

Postup řešení práce

V prvnı́ části této práce jsou položeny teoretické základy problematiky firemnı́ identity a jejı́ho budovánı́, procesu návrhu nového webu nebo redesignu, user experience a jejı́ vliv na webdesign a také aktuálnı́ trendy na poli navrhovánı́ webů. Druhá kapitola se zabývá analýzou současného stavu a týká se nejprve firemnı́ identity Profi English, kde je shrnut nekonzistentnı́

vizuálnı́ styl. Předevšı́m se však věnuje webu, popisuje jeho vznik, vzhled, implementaci a porovnánı́ s weby konkurence. Dále je zde analýza výkonu webu za poslednı́ roky vycházejı́cı́

ze statistik nástroje Google Analytics. Na původnı́m webu bylo také realizováno uživatelské

testovánı́, jež potvrzuje základnı́ hypotézy o nedostatcı́ch webu. Shrnutı́ analytické části de facto ústı́ v požadavky na nový web. Třetı́ a poslednı́ část zahrnuje celý proces redesignu a tvorby nového webu. Ten začı́ná u loga a definice firemnı́ho stylu, který je zaznamenán do manuálu a sloužı́ jako východisko pro redesign a tvořı́ vedlejšı́ výstup této práce s praktickým přesahem pro budoucı́ fungovánı́ firmy a tvorbu grafických propagačnı́ch materiálů. Samotný

web je nejprve popsán z hlediska metodiky UX designu, jehož poslednı́ fázı́ je grafický návrh jednotlivých částı́ webu, které jsou zde detailně popsány. Nakonec docházı́ k samotné

implementaci, vysvětlenı́ zvolených řešenı́ a testovánı́ nového softwaru. Závěrem projektu je předánı́ webu včetně kontroly vyhověnı́ všem požadavkům a také analýza dat a uživatelské

testovánı́, které ověřujı́, zda skutečně došlo k naplněnı́ stanovených cı́lů webu.

1 Webdesign pro firmu

V úvodnı́ kapitole jsou položeny teoretické základy z oblastı́ týkajı́cı́ch se této diplomové práce.

Hlavnı́m tématem je webový design, ke kterému lze přistupovat z několika směrů, napřı́klad zaměřit se na roli koncového uživatele (user centered design). Rozebrán je celý proces tvorby nového webu, od definovánı́ požadavků až po testovánı́. Dále jsou zde uvedeny praktiky webdesignu pro mobil a procesu redesignovánı́ webu, což je specifický typ projektu, který se od návrhu zcela nových stránek lišı́ v několika ohledech. Jelikož jde o design nového vzhledu pro web konkrétnı́ firmy, v úvodu kapitoly jsou nejprve vysvětleny prvky firemnı́ identity, jako je kultura, komunikace, zásady firemnı́ho designu a prezentace na internetu. Poslednı́ část se zabývá trendy v oblasti webdesignu, které je vhodné využı́t při navrhovánı́ soudobého vzhledu webu.

1.1 Firemní identita

Firemnı́ identita je soubor elementů zahrnujı́cı́ prvky jako design, kultura, komunikace a samotný produkt. Kombinacı́ těchto složek vzniká firemnı́ image, který zůstává v očı́ch zákaznı́ků jako výsledný dojem z dané společnosti a každá ze zmı́něných složek v tom hraje vlastnı́ roli. Firemnı́ kulturu ovlivňuje historie a vývoj firmy, také styl jednánı́, ať už uvnitř

podniku nebo navenek. Firemnı́ komunikace se zabývá konkrétnı́m obsahem a volbou médiı́ a technických prostředků, které firma pro svá sdělenı́ použı́vá. Do firemnı́ho designu spadajı́

veškeré viditelné projevy firmy, kterými vizualizuje svou komunikaci. Patřı́ sem název a logo, ale napřı́klad i firemnı́ barvy, použı́vané fonty nebo dopisnı́ papı́ry a jiné kancelářské potřeby.

Produkt je poslednı́, ovšem neméně důležitou částı́ obchodnı́ch aktivit firmy. Ačkoliv se nemusı́

jednat o hmotnou věc, je důležité, aby produkt zapadal do celého systému firemnı́ identity, respektive aby identita byla sladěna s produktem. (2)

Udržet kvalitnı́ a jednotnou image firmy je obtı́žný úkol a jednı́m z jeho hlavnı́ch aspektů je velikost společnosti. CGı́m většı́ počet zaměstnanců, procesů a jejich výstupů ve firmě existuje, tı́m robustnějšı́ jsou potřeba podklady pro správnou exekuci. Proto firmy definujı́ zásady, kterými se pracovnı́ci jednotlivých oborů musı́ řı́dit. Mezi ty patřı́ stanovenı́ názvu nebo napřı́klad slogan, klı́čová slova a dalšı́ pravidla komunikace. Jako podklad pro vizuálnı́ stránku identity sloužı́ grafický manuál, což je soubor hlavnı́ch pravidel prezentace firmy, který

zajišťuje konzistenci vizuálnı́ho stylu. Jsou zde definovány záležitosti jako použı́vané fonty pı́sma, jejich kombinace, firemnı́ barva a barevná schémata a samozřejmě také logo a způsoby, jak s nı́m nakládat. Logo, jakožto nejdominantnějšı́ prvek firemnı́ho designu, nese hlavnı́

zodpovědnost, a proto mu musı́ být věnována největšı́ pozornost. Musı́ korespondovat nejen s názvem firmy, ale také se všemi ostatnı́mi prvky firemnı́ identity. (2)

1.1.1 Grafický manuál

Grafický manuál pomáhá budovat identitu značky a jeho důležitost platı́ oběma směry, pro využitı́ uvnitř společnosti i vně. Umožňuje outsourcing grafických zakázek, nebo sloužı́ pro veřejnost jako instrukce pro zacházenı́ s firemnı́mi prvky. Obsáhlost se může lišit přı́pad od přı́padu, ovšem obvykle platı́ přı́má úměra mezi velikostı́ společnosti a délkou této přı́ručky.

Jelikož se jedná o publikaci obvykle dostupnou v elektronické a někdy i fyzické podobě, standardně zahrnuje i desky, které jsou prostorem pro výtvarnou demonstraci popisovaných prvků. Následuje obsah, který naopak plnı́ čistě praktickou funkci, tedy snadnou orientaci v publikaci. Volitelnou složkou je zahrnutı́ firemnı́ch hodnot, nebo motto společnosti, které

vystihuje a doplňuje celkový obraz dané firmy. Hlavnı́m obsahem manuálu jsou instrukce k použı́vánı́ loga, fontů a barev společnosti. Je třeba uvést všechny použitelné varianty loga a tı́m pádem zakázat jakoukoliv dalšı́ manipulaci se značkou nebo jejı́mi částmi. Obvykle se jedná o barevné a černobı́lé logo, různé kombinace symbolu a logotypu, varianty na barevných podkladech a veškeré druhy modifikacı́ či rozšı́řenı́ o dalšı́ nápisy. Přı́ručka k zacházenı́ s fonty definuje konkrétnı́ řezy pı́sma a přı́pady jejich užitı́ napřı́č webem a dalšı́mi podklady, včetně

vizitek a reprezentativnı́ch materiálů, čı́mž unifikuje styl prezentace. SGablona barev sjednocuje tento všudypřı́tomný aspekt a zabraňuje nekonzistenci mezi barevným provedenı́m jakýchkoliv firemnı́ch znaků. Předpokladem ke správnému použitı́ barvy ve všech sférách komunikace je definovat konkrétnı́ barvu, ať jde o e-mail nebo tištěný leták, a proto se obvykle uvádı́ HEX zápis, CMYK, RGB nebo Pantone ID. Publikaci je vhodné průběžně prokládat konkrétnı́mi přı́klady aplikace zmiňovaných pravidel, ať už se jedná o reálné produkty, nebo digitálnı́ grafiky. (3)

1.1.2 Logo

Uznávaný grafický designer Paul Rand tvrdı́, že logo je něco jako vlajka nebo erb. Hlavnı́m účelem loga nenı́ prodávat, ale být rozpoznáno. Logo nebývá jasným popisem firmy. Naopak, svůj význam odvozuje od charakteristiky věcı́, které symbolizuje. Je méně důležité než samotný

produkt, který zastupuje, ovšem nejdůležitějšı́ je to, co reprezentuje. Dobré logo je jednoduché, ale musı́ vyjadřovat zamýšlený význam a účel. Je přiměřené a praktické, aby se dalo použı́t v jakékoliv velikosti a situaci. (4)

Požadavky na návrh, kodifikaci, aplikaci a užı́vánı́ značek vyplývajı́ z funkcı́, které značky majı́.

Tato kritéria lze v tomto ohledu rozdělit na čtyři hlavnı́ skupiny – identifikačnı́, sémantická, estetická a technologická. (5)

Identifikace je primárnı́m kritériem, jelikož nejdůležitějšı́ je rozpoznánı́ značky. Spadá sem několik vlastnostı́, které by logo mělo nebo dokonce musı́ splňovat. Napřı́klad originalita je definovaná jako nutná podmı́nka pro registraci značky – musı́ být “označenı́ způsobilé odlišit výrobky nebo služby jedné osoby od výrobků nebo služeb jiné osoby“. Registrace ochranné

známky pomáhá při ochraně proti podvodnı́kům a padělatelům. Dalšı́mi klı́čovými složkami identifikace jsou rozpoznatelnost a zapamatovatelnost, což jsou vlastnosti, které souvisejı́

zejména se složitostı́, respektive jednoduchostı́ loga. Bonusové body lze přičı́st za nápaditost,

Sémantickou neboli významovou složku tvořı́ také název firmy, který má přesah do všech rovin manipulace s danou značkou. Délka názvu a volba konkrétnı́ch znaků se promı́tne do vzhledu loga, vyslovitelnost a srozumitelnost do audiovizuálnı́ komunikace. Pochopitelnost loga musı́ být umožněna jeho jednoznačnostı́ a použitı́m vhodných a smysluplných symbolů.

Obsah je předáván i barevnostı́ a emotivnı́ hodnotou značky, typem pı́sma a stylizacı́ vhodné

pro daný obor. (5)

Estetické hledisko je do jisté mı́ry subjektivnı́, ovšem existujı́ standardy kvality výtvarné

stylizace. Obecně lze řı́ct, že značka by měla být „výtvarně čistá“. Jde zejména o sladěnı́

jednotlivých částı́ značky do vizuálně homogennı́ho celku, tak jako lze rozpoznat autorský styl u konkrétnı́ch malı́řů. Svou roli zde hrajı́ estetika, cit, vkus a elegance. Pro mı́ru výtvarné

stylizace neexistuje žádné jednoznačné doporučenı́. Za trend lze považovat tendenci k vizuálnı́mu zjednodušovánı́, proti tomu však současně jdou módnı́ 3D efekty a stı́ny či odlesky, které dodávajı́ logu originalitu. Barevnost je bezesporu také důležitým faktorem, ovšem značka jako taková musı́ být použitelná i v černobı́lé podobě nebo specifickém prostředı́, kdy se kvůli kontrastu pozadı́ použı́vajı́ inverznı́ barvy. Pı́smo je rovněž důležitou součástı́ značky, protože ve značce nahrazuje mluvené slovo, a tedy funkci intonace či barvy hlasu, dává určitý vizuálnı́ charakter a dotvářı́ jejı́ emotivnı́ hodnotu. (5)

Technologická kritéria završujı́ tento výčet několika poznatky ohledně reálné

aplikovatelnosti loga. Kvalitnı́ zobrazenı́ značky ovlivňuje několik faktorů – velikost, kvalita provedenı́ detailů, použité technologie, materiál, povrch atd. Minimálnı́ velikost potřebná

k rozpoznatelnosti loga by neměla přesahovat 1 cm. Zobrazenı́ na displeji nebo v tisku závisı́

na kvalitě a technologickém zpracovánı́, ovšem kvalita musı́ být dostačujı́cı́ i v přı́padě

realizace alternativnı́ho provedenı́, jako je napřı́klad tisk na produkt nebo třeba nášivka. (5)

1.1.3 Brand identity design

Proces brandingu – tvorby a řı́zenı́ identity vyžaduje kombinaci výzkumu, strategického uvažovánı́ a designu. Lze ho rozdělit do pěti fázı́ – výzkum, strategie, návrh identity, tvorba a následná správa výstupů. (6)

Výzkum (conducting research) a Strategie (clarifying strategy)

V prvnı́ fázi je klı́čové zı́skat a uspořádat veškeré informace o firmě, která chce svůj brand budovat. Je třeba porozumět, co je misı́ firmy, popsat vizi, hodnoty a firemnı́ kulturu.

Pochopit cı́lový trh, konkurenčnı́ výhody, silné a slabé stránky a marketingové strategie. Cı́lem je odkrýt jádro fungovánı́ společnosti a zjistit, jak zapadá do konkurenčnı́ho prostředı́. Druhá

fáze zahrnuje metodologické zkoumánı́ a strategickou představivost. Je předevšı́m o analýze nasbı́raných dat a jejich sjednocenı́ do souvislých myšlenek. Definujı́ se zde zásadnı́ vlastnosti brandu a klı́čová sdělenı́, která je potřeba předat.

Návrh identity (designing identity)

V této fázi začı́ná kreativnı́ design. Je to iterativnı́ proces, který se snažı́ dát významu konkrétnı́

podobu. Už je třeba vybrat přesné prvky, které budou tvořit koherentnı́ celek. Systém barev musı́ být dostatečně flexibilnı́, aby umožnil širokou škálu aplikacı́ designu. Vybraná pı́sma musı́

vhodně zapadat do hierarchie důležitosti informacı́, být odlišitelná a předevšı́m čitelná. Také

je třeba experimentovat s reálnou aplikacı́ designů a vyzkoušet, jak fungujı́ jako systém. Pro tyto potřeby se hodı́ vytvořit firemnı́ podklady, jako je vizitka, dopisnı́ hlavička, reklama nebo třeba kšiltovka s logem. Tı́m se design prověřı́ ještě ve fázi vývoje a umožnı́ kvalitnějšı́

prezentaci celého návrhu.

Tvorba klíčových bodů (creating touchpoints) a Správa výstupů (managing assets)

Prioritou této fáze je vytřı́bit a dotáhnout všechny elementy identity. Vyzkoušet poslednı́

návrhy a doladit drobnosti, které budou nakonec napevno zapsány, proto tato práce vyžaduje cit pro detail. Výsledky celého design procesu jsou systematicky zaznamenány, tvořı́ se grafický

manuál. Finálnı́ a prakticky nekončı́cı́ fázı́ je management výstupů, tedy to, jak jsou veškeré

materiály zužitkovány pro co největšı́ přı́nos. Vyžaduje strategii a plánovánı́ přechodu na nový

systém, zaváděnı́ změn do internı́ch procesů. Tvorba nových standardů a postupů pro budoucı́

fungovánı́ a dlouhodobé využı́vánı́.

1.2 Webdesign

Webový design je disciplı́na, která má za úkol celý proces návrhu webu, tedy nejen jeho grafickou podobu. Jedná se o obor, kde se prolı́ná grafický a UX design, marketingové myšlenı́

a softwarové inženýrstvı́. Proces návrhu se dá zjednodušeně rozdělit do dvou fázı́ (obr. 1). Tou prvnı́ je průzkum a definice, kde se jedná předevšı́m o zjišťovánı́ potřeb a cı́lů webu a jeho cı́lové skupiny, tedy návštěvnı́ků. V této fázi je nutno zapojit předevšı́m analytiky či produktového manažera. Na základě výstupů z této fáze se může pokročit k modelům rozhranı́

a prvnı́m prototypům. Zde odvedou největšı́ kus práce designér, grafik a také programátor. Při vı́ceiteračnı́m procesu se tyto výstupy a návrhy mohou opět vrátit do fáze průzkumu, kde může proběhnout testovánı́ a revize dı́lčı́ch verzı́, které se přı́padně upravı́ pro dalšı́ vývoj. (7)

obr. 1 – Double Diamond schéma designového procesu

(zdroj: interactiondesign17.wordpress.com/2017/02/09/week-4-double-diamond-framework/)

Vzhled stránek je pro návštěvnı́ky důležitým faktorem, stejně jako vizuálnı́ dojem při výběru jiného produktu, třeba automobilu. Důležitost a dopady webdesignu ilustruje několik následujı́cı́ch statistik, týkajı́cı́ch se chovánı́ uživatelů na internetu. Dle tohoto výzkumu téměř

polovina lidı́ považuje design stránky za nejdůležitějšı́ faktor při posuzovánı́ důvěryhodnosti podniku. Přičemž prvnı́ vyvolaný dojem, zı́skaný během 10 sekund, často u návštěvnı́ka rozhodne, zda bude pokračovat v interakci s tı́mto webem. Nejčastějšı́ chybou mezi weby malých firem bývá přehlcený design, který uživatele hned v prvnı́ chvı́li zahrne množstvı́m nedostatečně strukturovaných informacı́ a odradı́ ho od dalšı́ho průzkumu stránek. Proto je důležité dbát na přehlednost obsahu a čistotu designu. Podobný dopad může mı́t i delšı́ doba načı́tánı́ obsahu či vadné zobrazenı́. Po návštěvě úvodnı́ strany vyhledává většina návštěvnı́ků

(64 %) kontaktnı́ informace, a pokud nenı́ s výsledkem spokojena, 44 % lidı́ se rozhodne v takovou chvı́li pro odchod z webu. Klı́čová je proto snadná navigace a nabı́zenı́ obsahu, který

upoutá pozornost a prodloužı́ doby návštěvy, což zvyšuje šance na konverzi. Důležitost mobilnı́ho zobrazenı́ zdůrazňuje statistika doby strávené na internetu, ta je totiž z většiny zprostředkovaná skrze mobilnı́ zařı́zenı́, a to v mı́ře až 2 z každých 3 minut. (1)

1.2.1 Principy krásného webdesignu

Tato kapitola se zabývá přı́stupem podle stejnojmenné knihy Jasona Beairda, která se v jednotlivých kapitolách zaměřuje na 5 nejdůležitějšı́ch aspektů vizuálnı́ stránky návrhu webu. Kniha je z roku 2010 a nezachycuje tedy poslednı́ trendy, ovšem popsané principy jsou stále aktuálnı́ a platné. Jako definici kvalitnı́ho návrhu webu v knize uvádı́ skloubenı́ dvou hlavnı́ch hledisek, použitelnosti a estetiky. Použitelnost se zaměřuje na funkčnost stránek a efektivnı́ prezentaci informacı́, v rámci estetického hlediska jde výhradně o skvěle vypadajı́cı́

vzhled. (8)

Struktura a kompozice

Struktura a kompozice je prvnı́m tématem procesu. Je zde popsáno, jak v úvodu co nejlépe zı́skat od klienta přesné zadánı́, či jak začı́t se základnı́m popisem webu sami. Anatomie webové

stránky je zde rozdělena do následujı́cı́ch prvků – logo, navigace, obsah, patička a prázdný

prostor. Poslednı́ zmı́něný prvek se může zdát, že mezi ostatnı́ nepatřı́, ovšem opak je pravdou.

Využitı́ bı́lého (prázdného) prostoru je stejně důležité jako samotný obsah, protože dá

vyniknout důležitým prvkům a usměrňuje pozornost návštěvnı́ka webu. Dalšı́m tématem je vyváženost a rovnováha rozvrženı́ stránek. K tomu pomáhá jednoduché pravidlo třetin, které

zajišťuje ideálnı́ optické rozdělenı́, podobně jako třeba na fotografii či obrazu. Rovnováhy se však dá dosáhnout i nesymetrickým rozvrženı́m, ve kterém je třeba správně pracovat s velikostı́ a rozloženı́m jednotlivých elementů.

Barva

Dalšı́m aspektem je barevná stylizace webu. V úvahu se musı́ brát estetičnost, použitelnost a zaměřenı́, totožnost a styl majitele. Modernı́ obrazovky zobrazujı́ paletu vı́ce než 16 milionů

barev, a to je vskutku nepřeberné množstvı́ kombinacı́. Ke správnému rozhodnutı́ se dajı́ použı́t poznatky z psychologie, ale i prakticky ověřená teorie barev, napřı́klad kontrast. Svou roli hraje teplota barev, studené barvy (modrá – zelená) snižujı́ napětı́ a ustupujı́ do pozadı́, a proto se hodı́ na volné plochy nebo jako podkres. Teplejšı́ barvy (červená – žlutá) majı́ tendenci vynikat a upozorňovat na sebe, a proto se hodı́ jako zvýrazněnı́ prvku. Zvláštnı́ pozici v počı́tačové

grafice má bı́lá a černá barva, které jsou vnı́mány jako standardnı́ barvy zobrazenı́ napřı́klad textu na stránce. Bı́lá, či jejı́ trochu zbarvené odstı́ny, se do pozadı́ skvěle hodı́ dı́ky vysokému kontrastu s tmavými barvami. Bı́lá a černá také v kombinaci s barevným odstı́nem určujı́ jeho sytost a světlost. Vhodné kombinace barev vysvětlujı́ barevná schémata na obrázku 2, kterých je několik základnı́ch druhů – monochromatické (odstı́ny jedné barvy), analogické (barvy sousedı́cı́ na spektru), doplňkové (barvy na spektru protilehlé), triáda (3 barvy se stejným vzájemným odstupem).

obr. 2 – schéma kombinacı́ na barevném spektru

(zdroj: www.spectrumnoir.com/an-introduction-to-the-colour-wheel/)

Textura

Tento aspekt dokáže pozvednout barevné sladěnı́ webu na ještě vyššı́ úroveň. Do této kategorie spadá využitı́ prvků, jako jsou body, čáry a složitějšı́ geometrické tvary – napřı́klad odrážky a nejrůznějšı́ oddělovače a zvýrazňovače obsahu. Dále sem patřı́ využitı́ hloubky, stı́nů a tvorba 3D textur či efektů. A to jak za použitı́ grafických programů, tak pouze CSS v prohlı́žeči. Za nejvyššı́ formu grafické úpravy lze považovat vlastnı́ návrhy vytvořené v grafických programech, implementované do designu webu. V tomto přı́padě se jedná nejčastěji o vektorovou grafiku, která je pro web vhodná z důvodu nastavitelné velikosti bez ztráty kvality.

Patřı́ sem i trochu složitějšı́ prvky – ikony, které mohou mı́t konkrétnějšı́ význam. Jejich využı́vánı́ na internetu se objevuje čı́m dál tı́m častěji, jelikož jejich použitı́ je rychlé, snadné a praktické. Existujı́ dokonce fonty, které majı́ ke každému znaku přidělenou vektorovou ikonu, a lze je volně implementovat do svého webu. Ten tak dostane nový rozměr za téměř nulové

náklady. Napřı́klad web Font Awesome, který aktuálně nabı́zı́ 7722 ikon. Ne všechny jsou zdarma, i tak je ale z čeho vybı́rat a tento nástroj opravdu může usnadnit proces zajištěnı́

grafického doprovodu pro obsah na webu. Na výběr je z nejrůznějšı́ch druhů šipek a odrážek, přes organizačnı́ ikony až k logům sociálnı́ch sı́tı́, které se hodı́ pro tvorbu tlačı́tek na sdı́lenı́

obsahu.

Typografie

Typografie se zabývá tı́m, jak bude vypadat psaný obsah webu. Pokud je hlavnı́m smyslem stránek předánı́ informacı́ v psané formě, je třeba na tento faktor brát velký ohled. Základnı́

volba pı́sma připadá na patkové, či bezpatkové pı́smo. Patková pı́sma vznikla adaptacı́ tahů

štětce a zvyšujı́ čitelnost širokých bloků textu. Patky čtenáři poskytujı́ vodorovnou referenčnı́

linii a ten se tak neztrácı́ mezi řádky, proto jsou tato pı́sma hojně využı́vána v tisku. Použı́vánı́

bezpatkových pı́sem se rozšı́řilo až po prvnı́ světové válce a jejich popularita stále roste. Tato pı́sma majı́ čistšı́ a modernějšı́ vzhled, ovšem v digitálnı́m světě se prosadila i z praktických důvodů. Staršı́ monitory měly potı́že detaily patkových znaků správně zobrazovat s dostatečnou čitelnostı́, a tak bylo praktičtějšı́ použı́vat jednoduššı́ bezpatkové symboly. Své

mı́sto, obzvláště na poli technologiı́, majı́ i takzvaná neproporciálnı́ pı́sma. Ta se, na rozdı́l od těch běžně použı́vaných, proporcionálnı́ch pı́sem lišı́ tı́m, že každý znak má stejnou, pevně

danou šı́řku. Tento typ pı́sma vznikl kvůli psacı́m strojům, které potřebovaly za každým

znakem posunout papı́r o stejný úsek. Dodnes se však tato pı́sma použı́vajı́ v programovánı́ pro psanı́ kódu, jelikož stejná šı́řka znaků usnadňuje orientaci v textu, kde jsou řádky zarovnané

pod sebou ve sloupcı́ch a najdete ho i v této práci. Dřı́ve byl omezený počet pı́sem na webu problémem a uživatel byl v krajnı́ch přı́padech nucen si stáhnout daný font a nainstalovat na svůj počı́tač. Dnes je situace jiná a na internetu je ke staženı́ téměř nekonečné množstvı́ fontů, které si může každý stáhnout a nahrát na svůj web, jelikož toto již prohlı́žeče běžně podporujı́.

Existujı́ také služby jako Google Fonts, které nabı́zejı́ fonty pro použitı́ online a bez složité

instalace. Na webu fonts.google.com jich je zdarma téměř tisı́c, vložit na web jdou pouhým odkazem a následně snadno použı́t.

Kombinování fontů

Při tvorbě nejen webu, ale i třeba jednoduchého propagačnı́ho letáku, se autor snadno dostane do situace, kdy potřebuje použı́t různé druhy pı́sma. Jak však určit, která kombinace bude oku lahodı́cı́? Prvnı́ radou bude použı́t různé řezy a barvy jedné rodiny fontů, kterých mohou být až desı́tky. Pokud to okolnosti umožňujı́, praktické bývá použı́t co nejméně různých pı́sem, třeba i jen právě jedno. Pokud však padne rozhodnutı́ na použitı́ dalšı́ho fontu, pak nezbývá, než různé kombinace vyzkoušet a postupně vybrat tu nejlepšı́. Vhodnost kombinace spočı́vá ve správné mı́ře kontrastu a souladu mezi pı́smy. Snadnou cestou kontrastu je využitı́ různých typů pı́sma, napřı́klad bezpatkové v kombinaci s patkami nebo psaným fontem. Takto vzniká

kontrast automaticky dı́ky odlišnosti na prvnı́ pohled, přesto však musı́ oba fonty ladit se smyslem daného sdělenı́. V přı́padě použitı́ dvou fontů stejného typu musı́ být mezi nimi dostatečný rozdı́l. Výsledek, kdy se fonty podobajı́, ale jsou přece jen jiné, působı́ spı́še jako omyl. Kontrastu se snadno docı́lı́ také výrazně odlišnou velikostı́ a tučnostı́ pı́sma, což lze uplatnit napřı́klad v nadpisech. Pro kombinovánı́ se hodı́ fonty se stejnou základnı́ výškou pı́smene, čı́mž vzniká text podobné hutnosti. Pomocným vodı́tkem může být datum vzniku fontu, kde se opět lze snažit o kontrast nebo soulad. (9)

Ilustrace obsahu

Finálnı́ ilustrace obsahu je také důležitou fázı́ designu. Realizace je možná pomocı́ vytvořené

digitálnı́ grafiky nebo bitmapových obrázků – napřı́klad reálných fotek produktů na e-shopu.

Obrázky skvěle poutajı́ pozornost, navádějı́ návštěvnı́ky k vlastnı́mu obsahu a dávajı́ rychlý

přehled o tom, čeho se bude následujı́cı́ obsah týkat. Ovšem pouze v tom přı́padě, že je jich správné množstvı́, jsou estetické a dostatečně kvalitnı́, relevantnı́ k obsahu a zajı́mavé.

Použitelné obrázky mohou pocházet z vlastnı́ tvorby, ovšem ty často nesplňujı́ kvalitativnı́

kritéria použitelnosti. Proto jsou zde možnosti jako najmout fotografa pro pořı́zenı́

konkrétnı́ch snı́mků nebo zakoupit ilustračnı́ obrázek online v některé z fotobank. Existujı́ i fotobanky, které nabı́zejı́ obrázky s licencı́ zdarma i pro komerčnı́ užitı́, napřı́klad web Free Images (www.freeimages.com). Důležité je nezapomenout na konečnou úpravu fotek pro web, ať už se jedná o správné ořı́znutı́, aby obrázek nebyl deformovaný roztaženı́m, nebo komprimaci. Obrázky na webu nemohou být v žádném přı́padě v plném rozlišenı́, jelikož by to zvyšovalo dobu načı́tánı́ a přenesená data.

1.2.2 User Experience design

User experience (UX) je prožitek, který produkt nebo služba vytvořı́ v člověku, který ho použı́vá. Ve fázi vývoje se klade důraz předevšı́m na funkcionalitu daného produktu. CGasto se ovšem zapomı́ná, jak důležitý je efekt na uživatele. UX nenı́ o tom, jak daný produkt funguje uvnitř, ale jaký vzbuzuje celkový dojem při běžném použı́vánı́. Tedy napřı́klad jak snadno se obsluhuje, jak pohodlně se ovládá a také, jak se při tom člověk cı́tı́. O takových věcech často mohou rozhodovat maličkosti, ovšem i ty mohou mı́t dopad na budoucı́ chovánı́ uživatele jakožto zákaznı́ka, až se bude přı́ště rozhodovat o koupi nového produktu. (10)

Design zaměřený na uživatelskou zkušenost navazuje na klasické úhly pohledu, jako je funkcionalita a vzhled a předpokládá jejich naplněnı́. Napřı́klad z estetického hlediska musı́ mı́t tlačı́tko hezký tvar a barvu, z funkčnı́ho pohledu musı́ vykonávat správnou akci. UX na to navazuje a řešı́ aspekty, jako je vhodná velikost a umı́stěnı́ tlačı́tka, aby se uživateli pohodlně

mačkalo. U produktu jako židle je jasné, že člověk musı́ být schopný se na ni posadit, aniž by se pod nı́m zřı́tila. Ovšem čı́m komplexnějšı́ produkt nebo služba je, tı́m těžšı́ je určit, jak konkrétně uživateli správnou zkušenost poskytnout, a proto se design zaměřený na UX stává

čı́m dál užitečnějšı́.

Weby se řadı́ do té složitějšı́ kategorie, kde UX design hraje velkou roli. Pro většinu lidı́ jsou stránky komplikované celky, postavené na technologiı́ch, kterým nerozumı́. Navı́c při návštěvě

webu nedostanou žádný manuál nebo výcvikový kurz, který by jim poradil. Vše je pouze na uživateli a jeho rozhodnutı́ch, aby si s webem poradil. Pokud se mu to nebude dařit, často z toho bude vinit sám sebe a bude se cı́tit hloupě, což v něm dobrý dojem nezanechá. A přitom porozumět uživatelům a nabı́dnout jim snadný postup je práce designéra a vývojáře webu.

Přijı́t na trh s produktem a webem jako prvnı́ nebo uvést nové možnosti a funkce bylo vždy důležité, ovšem nic nezajistı́ udržitelnou konkurenčnı́ výhodu právě tak jako skvělá uživatelská

zkušenost. (10)

User-centered webdesign

Jak tvořit web a dbát přitom v každé fázi na dojem koncového uživatele představuje J. J. Garrett ve své knize “The Elements of User Experience: User-centered Design for the Web“ z roku 2011.

Koncept je v podstatě jednoduchý, jde o to zajistit, že žádný aspekt uživatelského dojmu z produktu nenastane bez našeho úmyslu. To znamená brát v potaz každou možnou akci uživatele, rozumět jeho očekávánı́ a snažit se jej naplnit. Tento princip implementovaný do celého procesu designu webu zajistı́ jeho naplněnı́. Jeho framework rozděluje proces tvorby webu do pěti úrovnı́, ve kterých se zaměřuje na problémy UX a poskytuje nástroje k jejich řešenı́. Jsou jimi strategie, rámec, struktura, kostra a povrch. Ve směru odspodu přibývá s každou vrstvou na konkrétnosti. Ve spodnı́ vrstvě vůbec nejde o finálnı́ vzhled stránky, ale pouze o to, jak zapadá do našı́ strategie. Naopak v té nejvyššı́ se zabýváme každým nejmenšı́m detailem vzhledu. Každá vrstva je závislá na té předchozı́, a proto musı́ rozhodnutı́ učiněná v jednotlivých fázı́ch do sebe zapadat. Což ovšem neznamená, že musı́ být jednotlivé fáze ukončeny vždy dřı́ve, než se začne řešit ta následujı́cı́. Přechod mezi fázemi by měl být plynulý

a někdy dojde i na přehodnocenı́ dřı́vějšı́ch kroků. (10)

Horizontálnı́ rozdělenı́ vrstev procesu má ještě jeden aspekt a je třeba je rozpůlit jednou vertikálnı́ čarou (obrázek 4). Na jedné straně každé vrstvy se model zabývá webem z hlediska jeho funkcionality, na straně druhé jako informačnı́ho média. Historicky byl web předevšı́m o zobrazovánı́ informacı́, lidé vytvářeli dokumenty obdobné těm psaným a nahrávali je na internet se vzájemnými odkazy. Postupem času však přibyly nové technologie pro webové

prohlı́žeče i servery a internet zı́skal nové funkčnı́ rozměry. Prohlı́ženı́ webu se stalo interaktivnějšı́ a dohnalo možnosti nativnı́ch počı́tačových aplikacı́. Prostředı́ na internetu se stalo komerčnı́ a internetové aplikace si našly širokou škálu využitı́ od sociálnı́ch sı́tı́ až po bankovnı́ služby. Zároveň neustává ani původnı́ záměr předávánı́ informacı́ ve formě jakýchsi dokumentů a internet vzkvétá i jako publikačnı́ médium pro nespočet novinářských redakcı́

nebo specializovaných magazı́nů.

obr. 3 – schéma vrstev webdesignu podle Garretta (zdroj: 9)

Strategie (strategy) je základem pro určenı́ rámce a všechny navazujı́cı́ úrovně. Hlavnı́mi tématy této fáze jsou cı́le produktu (product objectives) a potřeby uživatelů (user needs). Cı́le, které stanovı́me pro web, vycházı́ z našich záměrů a business plánu. Mohou sem patřit aspekty typu budovánı́ identity nebo metriky typu návštěvnost webu, které majı́ být zlepšeny. Potřeby uživatelů jsou vnějšı́ vlivy, které ovšem musı́me do strategie také zahrnout a čı́m lépe jim porozumı́me, tı́m lépe je můžeme naplnit. Patřı́ sem segmentace a analýza návštěvnı́ků, na základě, které zı́skáme přehled o tom, kdo a proč na náš web zavı́tá.

Rámec (scope) určuje, co všechno na web patřı́ a co už by tam bylo navı́c. Hrubě definuje požadavky na funkcionalitu webu, aby zde bylo vše, co uživatel potřebuje a zároveň toho nebylo až přı́liš. Rozdělenı́ této vrstvy odpovı́dá dvojı́mu přı́stupu z hlediska informacı́

a funkcionality, tedy definujı́ se zde konkrétnı́ nároky na obsah (content requirements) a funkčnı́ specifikace (functional specifications). Obsah musı́ zahrnovat vše potřebné

k uspokojenı́ uživatele a specifika funkčnosti jsou klı́čová pro projekty vývoje softwaru, jelikož

usnadňujı́ jejich řı́zenı́.

Struktura webu (structure) navazuje na definovanou funkčnı́ specifikaci a rozhoduje o tom, jak jednotlivé dı́ly zapadnou do sebe. Zde se určı́, jakým způsobem může uživatel interagovat s obsahem webu, přecházet mezi jednotlivými stránkami a navigovat se směrem k hledanému obsahu. Opět zde platı́ dvousměrný pohled na architekturu a složenı́ informacı́ (information architecture) a návrh interakcı́ (interaction design).

Těsně pod povrchem je kostra webu (skeleton), kam patřı́ problematika rozvrženı́ stránek.

Koncepčnı́ struktura webu dostává konkrétnı́ podobu a rozhoduje se o umı́stěnı́ obsahu a textu, ovládánı́ a tlačı́tek. Toto rozloženı́ musı́ napomáhat efektivitě a použitelnosti stránek.

Z funkčnı́ho hlediska se zabývá návrhem rozhranı́ (interface design), tedy výběrem vhodných ovládacı́ch prvků a jiných interaktivnı́ch detailů. Dále návrhem navigace (navigation design), která musı́ být přehledná, jednoduchá a dávat najevo strukturu a souvislosti na webu vhodným kategorizovánı́m odkazů. Informačnı́ návrh (information design) řešı́ způsob, jak správně

prezentovat informace, aby jim bylo dobře a jednoduše porozuměno. Pro potřeby návrhů

rozloženı́ stránek se skvěle hodı́ wireframy, což je hrubý náčrt uspořádánı́ jednotlivých elementů na jedné obrazovce.

Povrchová vrstva (surface) je nejsvrchnějšı́ vrstva, konkrétnı́ podoba stránek, které se skládajı́ z obrázků a textu. Některé elementy jsou interaktivnı́ a provádějı́ různé akce, jiné

pouze ilustrativnı́. V této vrstvě jde o naplněnı́ kostry webu konkrétnı́m obsahem takovým způsobem, který uživatele oslovı́. Cı́lem je návrh, který bude dobře působit na smysly (sensory design) každého návštěvnı́ka. Zabývá se napřı́klad problematikou toho, kam spočine náš zrak při návštěvě stránek jako prvnı́, dostatečným kontrastem hlavnı́ch elementů, ale i celkovou sladěnostı́ a synergiı́. Je kladen důraz na ty nejmenšı́ detaily, jako je velikost konkrétnı́ch fontů

a správné odstı́ny barev.

1.2.3Požadavky na web

Pracovat logickým a praktickým způsobem je klı́čem k efektivnı́mu procesu tvorby webu.

Přemýšlenı́ o požadavcı́ch v dostatečně rané fázi vývoje ušetřı́ mnoho hodin řešenı́ budoucı́ch problémů. Požadavky na web jsou vodı́tkem, které definuje, co bude třeba na stránky zahrnout.

Je nutné zde definovat, jaký je účel webu a kdo je cı́lové publikum, jak má web na uživatele působit, jak komplexnı́ web bude a kolik úrovnı́ vnořenı́ budou mı́t stránky, jakou funkcionalitu musı́ web naplňovat atd. Požadavky je třeba řádně dokumentovat, aby byly vždy jasné a zpětně

dohledatelné. Hodı́ se i při přı́padných neshodách se zadavatelem, kdy sloužı́ jako důkaz o domluvených podmı́nkách. (11)

Požadavky na vzhled a atmosféru webu

To, jak by měl web působit, musı́ být jasné už od začátku. CGı́m přesněji a obsáhleji se tyto věci definujı́, tı́m lepšı́ho výsledku se dá efektivně dosáhnout. V této části se musı́ s dostatečným předstihem definovat styl webu, včetně použitých pı́sem a barev, aby se mohlo v části návrhu dosáhnout uspokojivých výsledků.

Požadavky na rychlost

Rychlost souvisı́ se složitostı́ webu a ovlivňuje jeho návrh. Je třeba dávat si pozor na náročnějšı́

operace, jako je připojovánı́ k databázi a stahovánı́ dat. Dalšı́m faktorem je množstvı́

připojených lidı́, kteřı́ budou web využı́vat, a to je třeba zohlednit při volbě provozovatele serveru a datového plánu.

Požadavky na budoucí rozšíření

Návrh webu může vı́ce či méně respektovat požadavky na jeho přı́padné rozšı́řenı́. Pokud jsme si jisti, že web nebude procházet dalšı́ proměnou, nenı́ nutné věnovat tomuto aspektu většı́

pozornost, ovšem tento přı́pad je spı́še ojedinělý. Naopak mezi praktiky, které umožnı́ dalšı́

změny, patřı́ napřı́klad skládánı́ webu z jednotlivých modulů. Je třeba dát si pozor na tvorbu navigace, jelikož zatı́mco do svislého seznamu se dajı́ přidávat dalšı́ položky bez omezenı́, do graficky složitějšı́ch konstrukcı́ s konkrétnı́m tvarem těžko.

Požadavky na obsah

Množstvı́ a struktura obsahu ovlivňuje všechny výše zmı́něné aspekty. Je třeba znát požadavky předem, aby mohla vzniknout smysluplná struktura a navigačnı́ systém. Pro tento účel se vytvářı́ vývojový diagram, který zachycuje všechny stránky na webu a cestu, kterou se k nim dá dostat. Z toho se následně dá vytvořit i mapa webu, kterou lze také umı́stit na stránky.

V přı́padě menšı́ch webů toto samozřejmě nenı́ potřeba a v extrémnı́ch přı́padech lze uvažovat nad jednostránkovým designem, kdy je veškerý obsah umı́stěn na jedné úvodnı́ stránce.

Funkční požadavky

Tento aspekt se velmi lišı́ u každého webu. Základnı́ funkcionalita, jako napřı́klad správné

vykreslovánı́ obsahu a fungujı́cı́ tlačı́tka, která provádı́ danou akci, by měla být splněna u každého webu. Pro webové aplikace, které musı́ splňovat celou řadu funkcı́, je nutné tyto nároky obsáhle specifikovat, tak jako v přı́padě jiných SW aplikacı́.

1.2.4 Web na mobilu

Na internet přistupuje každý uživatel přes různá zařı́zenı́ s rozdı́lnou velikostı́ displeje, a proto je vhodné, když jsou na webu zachována určitá pravidla a principy pro všechna zobrazenı́.

Rozhranı́ je tak pro návštěvnı́ka srozumitelné a nemusı́ se učit nic nového. U uživatelů se také

předpokládá snı́žená pozornost a obratnost a musı́ mu být pohyb po webu usnadněn, ovládánı́

by tak mělo být co nejjednoduššı́, napřı́klad bez vyskakovacı́ch oken, která jsou na mobilu nepraktická. CGtenı́ obsahu probı́há v přirozeném směru od shora dolů a zleva doprava, a proto je nutné ve stejném smyslu řadit informaci podle důležitosti. Prvky, které nejsou rovnou na očı́ch a jsou schované napřı́klad pod rozbalovacı́m menu, majı́ lidé tendenci přehlı́žet. S tı́m je třeba počı́tat hlavně při návrhu navigace, a proto je někdy lepšı́ investovat drahocenný prostor na obrazovce do “připnutého” panelu, který bude viditelný pořád. Při návrhu ovládánı́ je také

třeba dbát na to, kam člověk prstem dosáhne. Nejčastěji je mobil ovládán palcem, který je umı́stěn spı́še na spodnı́ straně obrazovky a hornı́ rohy jsou pro něj téměř nedosažitelné.

Takový palec také něco měřı́, konkrétně na výšku alespoň 2 centimetry. Proto je třeba, aby tomu byly ovládacı́ prvky na mobilnı́m zobrazenı́ přizpůsobené. Zatı́mco na počı́tači je člověk při hranı́ her schopen myšı́ zamı́řit i na titěrnou hlavu nepřı́tele schovávajı́cı́ho se za horizontem, ovládánı́ palcem či jiným prstem je o poznánı́ vı́ce neohrabané. A tak je doporučená velikost tlačı́tek alespoň 1 centimetr. (7)

Přı́stupy k tvorbě webu z hlediska velikosti čtecı́ho zařı́zenı́ jsou v podstatě dva. Buď se dá

přednost počı́tačům (desktop-first), nebo mobilům (mobile-first). Ten prvnı́ postup je dnes už

z očividných důvodů v podstatě překonaný a může fungovat pouze v přı́padě, že se rozhodneme weby pro mobil a desktop úplně rozdělit a vytvořit dvě odlišné verze. To může dobře fungovat, pakliže máme prostředky na výrobu dvou webů. Jistou nevýhodou však zůstává přı́padná nekonzistence mezi oběma verzemi. Pokud se designer rozhodne navrhnout nejprve návrh pro mobil, nutı́ ho to k zjednodušovánı́ a lepšı́mu využitı́ omezené plochy displeje, což může mı́t ve výsledku pozitivnı́ dopad. Ve zmiňované knize autor však nabádá

k jakémusi synchronnı́mu postupu, kdy člověk bere v potaz oba pohledy zároveň. Autor poukazuje na to, že nenı́ vhodné považovat určitý typ zařı́zenı́ za důležitějšı́ než jiný. Roli také

hraje trend rozšiřovánı́ různorodosti displejů, dnes již nemáme jen počı́tač a telefon, ale obrovsky širokou škálu velikostı́ zařı́zenı́. Od malých smartphonů přes většı́, malé a většı́

tablety, notebooky všech velikostı́, klasické obrazovky a také obrovské zahnuté obrazovky pro profesionálnı́ počı́tačové grafiky, což je nutné brát na zřetel. (7)

1.2.5 Web redesign

Redesign webu svým procesem pochopitelně připomı́ná vznik nového webu, ovšem je zde několik faktorů, které by se měly brát v potaz. Nový web bude pravděpodobně umı́stěn na stejné URL adrese jako ten předchozı́, tudı́ž je třeba kalkulovat napřı́klad s umı́stěnı́m ve výsledcı́ch vyhledávánı́, které se vážou na konkrétnı́ URL adresy. Návštěvnı́ci už jsou zvyklı́ na určité aspekty webu a toho je třeba buď využı́t, nebo se vynasnažit přeučit je na nový systém.

Pokud se firma rozhodne pro redesign webu, jako prvnı́ by se měla zamyslet nad stávajı́cı́m stavem a provést jeho analýzu. Návštěvnost jednotlivých stránek a tok uživatelů může poskytnout dobrý přehled o tom, co na webu funguje dobře a kde jsou slabá mı́sta, na která je

třeba se zaměřit. Porozumět tomu, co uživatel na webu hledá, jaké si klade otázky a jak hledá

odpovědi je jedinou cestou k úspěchu. Obsah webu bude zčásti zachován, což ušetřı́ nějaký čas při vývoji. Je však vhodné přehodnotit jeho strukturu a na tu potom navázat při navrhovánı́

stránek. Redesign je také přı́ležitostı́ pro revidovánı́ grafického stylu firmy a zaběhlých praktik.

Některé aspekty je třeba po několika letech změnit, podrobit aktuálnı́m trendům, a předevšı́m udržet celý styl jednotný. (12)

Co se týče SEO (Search Engine Optimization), během redesignu webu platı́ několik zásad, dı́ky kterým se dá předejı́t tomu, aby se web po všech změnách ve výsledcı́ch začal propadat.

Zavedený web již totiž má nějaké hodnocenı́, vyhledávače o něm již všechno vědı́ a sledujı́

pohyb návštěvnı́ků po jednotlivých stránkách. V přı́padě, že URL, na které byl zmapovaný

obsah, bude najednou nedostupná, web začne v hodnocenı́ ztrácet. Na druhou stranu se dá

tı́mto procesem i zı́skat, jelikož je to přı́ležitost pro analýzu stávajı́cı́ch výsledků a přı́padnou změnu v obsahu či jiných aspektech. V prvnı́ řadě stojı́ za zamyšlenı́ stávajı́cı́ struktura webu v kontextu zamýšlených úprav, ta by se měla, pokud možno co nejméně měnit. Pokud dojde kromě přidánı́ nových stránek také k přesunu těch stávajı́cı́ch na jinou URL, je nutné přidat na web přesměrovánı́ domény (redirect 301). Tı́m bude postaráno o to, aby všechny odkazy, které

mı́řı́ na starou URL, byly přesměrovány na novou stránku, a tak se neztrácela jejı́ hodnota. Na úrovni konkrétnı́ch stránek lze potom zlepšit výsledky vyhledávačů úpravou obsahu, nadpisů

všech úrovnı́, meta tagů či názvem stránky. Na závěr je třeba také upravit XML soubor se sitemapou, kde jsou všechny aktuálnı́ URL adresy daného webu a přı́padně také soubor robots.txt, který definuje pokročilé nastavenı́ způsobu hodnocenı́ webu vyhledávači. (13) 1.2.6 Testování webu

Testovánı́ je přirozenou součástı́ jakéhokoliv vývojového cyklu, ať už se jedná o web nebo aplikaci, či doménu úplně mimo software. Plážový mı́č je třeba také nejdřı́ve vyzkoušet v terénu, než se začne ve velkém vyrábět. Testovánı́ webů spočı́vá předevšı́m ve vyzkoušenı́

kompatibility různých prohlı́žečů a velikostı́ obrazovek. Samozřejmostı́ je ověřenı́

použitelnosti webu v nejrozšı́řenějšı́ch prohlı́žečı́ch, což je předevšı́m Google Chrome, Safari od společnosti Apple, Internet Explorer a Edge, Mozilla Firefox a Opera. (14) Na paměti je také

třeba mı́t různé verze těchto prohlı́žečů. V poslednı́ fázi vývoje je třeba ověřit, že se stránky načı́tajı́ a zobrazujı́ dostatečně rychle a správně na co nejširšı́m spektru konečných zařı́zenı́.

K tomu sloužı́ řada nástrojů, jelikož nenı́ možné otevı́rat web fyzicky na takovém množstvı́

elektroniky. Testovánı́ na fyzických zařı́zenı́ch má však také své opodstatněnı́. Simulátory nemusı́ být vždy přesné a plně nenahradı́ testovánı́ na reálném opotřebovaném mobilu, kde se mohou vyskytnout problémy s výkonnostı́ nebo ovládánı́m dotykem. (7)

Nejjednoduššı́m způsobem, jak emulovat různá zařı́zenı́, je nástroj DevTools v aplikaci Google Chrome. Ten musı́ znát každý vývojář a měl by se naučit využı́vat potenciál tohoto nástroje.

Nabı́zı́ možnost plynule zvětšovat a zmenšovat testovanou velikost okna, ale obsahuje také

řadu přednastavených velikostı́ odpovı́dajı́cı́ch různým mobilnı́m zařı́zenı́m. Simuluje ovládánı́

dotykem a přibližovánı́. Také je zde možnost zpomalenı́ internetového připojenı́ pro přiblı́ženı́

se reálným podmı́nkám.

Komerčnı́m nástrojem pro tuto problematiku je napřı́klad služba BrowserStack. Zde dostanete za poplatek přı́stup ke vzdáleným plochám, kde si můžete zvolit jakoukoliv verzi nejrůznějšı́ch prohlı́žečů a nemusı́te se tak zabývat složitým procesem instalace několika staršı́ch verzı́

softwaru na váš počı́tač. Tato online aplikace funguje přes prohlı́žeč, funguje tak na všech platformách a poskytuje snadný způsob, jak testovat v prostředı́ třeba úplně jiného operačnı́ho systému.

Uživatelské testování

Vzhledem k tomu, že na vzestupu je přı́stup, kdy se design služeb točı́ kolem konečného zákaznı́ka, je důležité otestovat produkt v reálném prostředı́ na reálných lidech. K tomu sloužı́

právě uživatelské testovánı́, jehož smyslem je vyzkoušenı́ použitelnosti produktu. Předmětem je sledovánı́ uživatelů, kteřı́ se snažı́ produkt použı́vat a dosáhnout konkrétnı́ch smysluplných cı́lů. Lidé podı́lejı́cı́ se na vývoji nebo ti, jež jsou s produktem či službou seznámeni, už majı́

zkreslený pohled na věc a nejsou schopni odhalit nedostatky, které se objevı́ třeba jen při prvnı́m kontaktu s produktem. Zapojenı́ zcela objektivnı́ch a nezkušených lidı́ do procesu pomůže identifikovat slabé stránky a vychytat mouchy. Pro testovánı́ je také důležitý výběr vhodného kandidáta, kterým by měl být prototyp reálného koncového uživatele produktu.

Tento typ testovánı́ se provádı́ jednotlivě, aby se mohl zadavatel soustředit na veškeré detaily chovánı́ uživatele. Zadavatel uživatele krátce seznámı́ s produktem a sdělı́ mu svou představu o tom, čeho by měl daný tester dosáhnout. Ten potom bez dalšı́ pomoci produkt použı́vá a sdı́lı́

své pocity a myšlenky během procesu, čı́mž poskytne unikátnı́ a velice cenný vhled do své

mysli. Právě taková simulace reálného použı́vánı́ produktu pomůže odhalit klı́čové

nedostatky.

1.3 Moderní trendy webdesignu

Jelikož se tato práce zabývá redesignem webu v modernı́m stylu, je třeba popsat konkrétnı́

aspekty, které by měl nový web zahrnovat, aby nepůsobil staromódně. K této problematice existuje nespočet článků, které každoročně vydávajı́ multimediálnı́ společnosti a návrhářská

studia a tvořı́ takto obsah pro své blogy. Výjimkou nenı́ ani článek z webu WebFX, což je společnost, která se zabývá digitálnı́m marketingem a SEO optimalizacı́. Jejich výčet 10 trendů

pro rok 2020 vypadá následovně: (15) White space

V češtině se tento prvek nazývá prázdný nebo negativnı́ prostor a jedná se o nevyplněný

prostor mezi ostatnı́mi prvky designu. Má také svůj účel a musı́ mu být přikládána dostatečná

důležitost. Tento prostor vytvářı́ vizuálnı́ hierarchii mezi jednotlivými elementy na stránce a směřuje návštěvnı́kovu pozornost napřı́č celou stránkou. Prázdný prostor dá vyniknout hlavnı́m informacı́m na stránce a určuje vztahy mezi prvky. Pokud jsou dva prvky blı́zko u sebe, lidské oko si to vyložı́, jako že k sobě patřı́. Jelikož je jednı́m z modernı́ch trendů návrat k minimalismu, využı́vánı́ záměrného negativnı́ho prostoru je toho následkem.

Full-page headers

Záhlavı́ přes celou stránku se nejčastěji kombinuje s nadpisem a klı́čovou informacı́ umı́stěnou na levé straně, doplněnou o grafický prvek na zbytku stránky. CGtenář automaticky upı́rá svou pozornost doleva nahoru, a proto tak může zachytit hlavnı́ sdělenı́. Je to také vhodné mı́sto pro umı́stěnı́ tzv. CTA elementů, tedy Call-to-action, česky by se dalo řı́ct výzva k akci. Toto tlačı́tko zpravidla zajišťuje hlavnı́ akci souvisejı́cı́ s danou stránkou, ať už se jedná o přidánı́ do košı́ku nebo třeba staženı́ obsahu.

Playful cursors

Tato hravá funkce udělá z prohlı́ženı́ webu o něco zajı́mavějšı́ prožitek a může zanechat v návštěvnı́kovi novou zkušenost. Ať už se jedná pouze o změněný kurzor nebo složitějšı́

animace spouštěné jeho pohybem, uživatelé se běžně pouštějı́ do interakcı́ s takovými prvky a angažovanost je přesně to, čeho se u svých návštěvnı́ků snažı́me dosáhnout. Je jasné, že takový typ prvku se nehodı́ na každý web, zejména na serióznı́, informativnı́ a businessové

stránky.

Dynamic scrolling

Se stále rozvı́jejı́cı́mi webovými technologiemi se každým rokem objevujı́ nové možnosti, jak dosáhnout nejrůznějšı́ch efektů v prohlı́žeči za snižujı́cı́ch se výpočetnı́ch nároků. Tento trend zahrnuje komplexnı́ grafické funkce na webu, kdy návštěvnı́k posunem po stránce automaticky spouštı́ multimediálnı́ prvky. Prohlı́ženı́ takové stránky může být diametrálně rozdı́lným zážitkem než čtenı́ článku z informačnı́ho serveru.

Custom illustrations

Inspiracı́ tohoto trendu jsou klasické tiskoviny a dalšı́ formy tradičnı́ umělecké tvorby. Nabı́dka trhu digitálnı́ grafiky roste stejně s trendem online businessu, a tak se některé firmy vydávajı́

Grid design

Hrátky s vyváženostı́ stránky a rozvrženı́m prvků hrály vždy velkou roli a ve webovém designu hraje prim rozvrženı́ dle mřı́žky, které lze snadno implementovat. Prvky jsou poddajné

responzivnı́m požadavkům webu a mohou tvořit vyvážené symetrické nebo asymetrické

uspořádánı́, které se stává stále populárnějšı́m.

Color trends

Každým rokem se stává trendy jiná barva a letos by měla přijı́t řada na mentolově zelenou (mint green). Ve hře také stále zůstávajı́ gradienty, které nabı́zejı́ nekonečné množstvı́

barevných kombinacı́ a majı́ širokou škálu využitı́. Významnou roli také hraje souvislost s brandem a psychologie barev, která je také zmı́něna v kapitole 1.2.2 této práce.

Bold fonts

Výrazné a plné fonty se hodı́ skvěle pro výrazné nadpisy, kde hrajı́ často prim. Volba typu pı́sma má klı́čovou roli o to vı́ce, pokud je text tı́m hlavnı́m nebo jediným poutacı́m prvkem. Velká

plocha tučných fontů se dá využı́t napřı́klad jako průhled s grafikou na pozadı́, ovšem čitelnost textu musı́ zůstat vždy prioritou.

Focus on UX/UI

Důležitost uživatelské zkušenosti je v této práci již vylı́čena a zaměřenı́ na lidskou stránku věci je zkrátka v kurzu. Klı́čové pro web je tedy rychlé načı́tánı́ stránek a vizuálnı́ch prvků, vkusně

nabı́zený a snadno čitelný obsah vhodně doplněný o multimediálnı́ složky. Nezbytný je také

bezchybně nabı́zený obsah při mobilnı́m zobrazenı́, který nenı́ ochuzen o animace a dalšı́

požitkové složky.

Impactful stories

Využitı́ obrázků, infografiky nebo videa a dalšı́ch multimediálnı́ch prvků pro vysvětlenı́ vašeho záměru čtenářovi je ideálnı́m způsobem, jak zaujmout jeho pozornost. Weby obohacené

o jakousi přı́běhovou složku dokážou čtenáři předat informace s mnohem většı́ emotivnı́m zásahem.

1.3.1CMS a Wordpress

CMS je zkratka anglického Content Management System. Tedy v překladu něco jako systém pro správu obsahu na webu. Pro CMS se často použı́vá české označenı́ redakčnı́ či publikačnı́

systém, jelikož se přes něj snadno dajı́ publikovat nové přı́spěvky na web. Dı́ky CMS může správce webu upravovat, vytvářet a mazat stránky, dokumenty (články) či fotky a spravovat komentáře či soubory na webu. Zásadnı́ výhodou CMS je to, že nenı́ potřeba ke správě webu osobu s rozsáhlými zkušenostmi v programovánı́ nebo vůbec informačnı́ch technologiı́ch.

Editaci a budovánı́ stránek tak zvládne i člověk, který nemá zkušenosti s tvorbou stránek, a to je také největšı́ výhodou jeho použı́vánı́. Použı́vánı́ CMS či podobných systémů je modernı́

alternativou k absolvovánı́ celého procesu webdesignu a vývoje webu.

Wordpress je nejpoužı́vanějšı́m CMS systémem a držı́ asi 62 % tohoto specifického trhu. Od jeho vzniku v roce 2003 se na jeho tvorbě podı́lelo přes 70 programátorů a doba strávená

vývojem je odhadována na 112 let. Komunita kolem wordpressu je také aktivnı́ a organizuje