Mendelova univerzita v Brně Provozně ekonomická fakulta Webová prezentace zábavního areálu plavecký stadion 15.10.2016 Jakub Kočnar
Obsah 1. Publikum... 3 1.1. Návštěvníci... 3 1.2. Persony... 3 2. Informančí architektura... 4 2.1. Organizační schéma... 4 2.2. Diagram uspořádání informací... 5 2.3. Navigace... 6 2.4. Prostorové rozložení informací... 6 3. Barevné řešení... 10 3.1. Důvod a způsob výběru barev... 10 3.2. Barevné schéma... 10 4. Grafický návrh... 11 4.1. Hlavní stránka 1024px... 11 4.2. Podstránka 1024px... 12 4.3. Hlavní stránka 480px a podstránka... 13 4.4. Textura... 14 5. Test navigace... 15 5.1. Kufrový test... 15 6. Animace... 17 Plynulé změny u stránky... 17 Popis animace... 17
1. Publikum 1.1. Návštěvníci Hlavním účelem webové stránky bude nalákání lidí ke sportovnímu vyžití. Stáří publika bude široké vzhledem k tomu, že plavecké stadiony vyhledávají lidé v jakékoliv věkové skupině, ale přece jenom nějaké průměrné věkové omezení bude a to do 70 let. Předpokládají se návštěvníci sportovně založení ale také nadšení pro konkrétní druh sportovního vyžití nebo úplní začátečníci. Návštěvníci budou chtít na webu provádět spoustu činností. Hlavní činnosti budou objednávky a rezervace na konkrétní datum. Nejdůležitější je první stránky kdy chce zákazník co nejvíce informací a vidět je co nejpřehledněji (teplota, otevírací doba, rezervace, kontakt, poloha, obsazenost). Dále bude návštěvníky zajímat, zda je v jednotlivých areálech zajištěn bezbariérový přístup, jestli jsou zde nějací zaměstnanci, kteří by v případě, je-li návštěvník zrakově postižený, poskytli pomoc. Také nás zajímá, jak často se budou vracet, tudíž udělat náš web všestranně atraktivní. Web na tohle zaměření bude určitě externí webový server, dostupný pro každého ve veřejné síti. 1.2. Persony Michal, 21let, student Mendelovy univerzity. Naši webovou stránku vyhledal především pro to, že plavání provozuje na profesionální úrovni a také pro to že tento plavecký stadion je blízko univerzity. Také ho velice zaujaly zvýhodněné ceny pro studenty. Od webových stránek očekává především přehlednost, možnosti rezervovat si určitou plaveckou dráhu, jelikož tento sport dělá závodně. Karel, 60let, zaměstnanec DPMB. Naši webovou stránky vyhledal z důvodu, že naše stránky nabízí také možnost cvičení s fitness trenérem přímo ve vodě. Po celodenním řízení MHD je tato možnost terapie naprosto dokonalá. Také ho oslovily možnosti slev, jelikož je zaměstnancem DPMB podnik mu hradí 50% na konkrétní plavecký stadion. Při prohlížení webových stránek ho především zaujala možnost zpětného kamerového záznamu, který se uchovává po dobu jednoho dne. Pavlína, 28let, žena v domácnosti, 2 děti. Tahle maminka vyhledala naši webou stránku z důvodu nedělního výletu. Pro děti je zde zajištěn nedělní doprovodný, animační program s příjemnými animátory. Program probíhá v dětském bazénku aby nebylo narušeno plavání pro veřejnost. 3
2. Informančí architektura 2.1. Organizační schéma Hlavní stránka základní informace, otevírací doba, mapa, teplota vody, aktuality, vyhledávací nástroje, kontakt, přihlášení a panel nabídek v záhlaví stránky o Registrace zde se uživatel zaregistruje pro následnou rezervaci o Fotogalerie a Video jednodenní záznam videa, fotografie Fotografie Videa o Kontakty tel. čísla, mail, facebook o Co u nás najdete zde bude přehled všech prostor Dětský bazén Plavecký bazén Sauna Vířivka Bar Relaxační bazén Prodejny o E-shop prodej plaveckého vybavení a doplňků přes internet Doplňky Plavecké potřeby o Ceník a otevírací doba ceník rozdělený podle jednotlivý skupin a také otevírací doba o Obsazenost aktuální obsazenost bazénů Plavecký bazén Relaxační bazén o Historie výstavba a historie celého areálu o Rehabilitace a cvičení cvičení pro muže i ženy v jakémkoliv věku o Webcamera aktuální obraz přímo z bazénů 4
2.2. Diagram uspořádání informací Domovská stránka Registrace Foto a Video Co u nás najdete E-shop Ceník a otevírací doba Obsazenost Foto Dětský bazén Doplňky Plavecký bazén Video Plavecký bazén Plavecké potřeby Relaxační bazén Sauna Vířivka Bar Relexační bazén Prodejny Historie Rehabilitace a cvičení ve vodě Webcamera Obrázek 1: Diagram uspořádání informací 5
2.3. Navigace Jako primární navigaci jsem použil vodorovnou lištu jednotlivých položek, která je umístěna pod obrázkem. Po kliknutí na danou kategorii se položka zabarví a uživatel bude přesměrován na danou podkategorii. V každé podkategorii bude ještě přidána drobečková navigace. Drobečkovou navigaci bude doplňovat na levé straně boční navigační lišta s položkami podkategorií. U mobilní verze se navigace dosti zjednoduší a všechny kategorie se přesunou do jednoho toggle menu. Vyhledávání u mobilní verze nebude. 2.4. Prostorové rozložení informací Drátový model domovské stránky při zobrazovací ploše 1024px. V záhlaví stránky se bude nacházet položka košík, obrázek bazénů, vyhledávání informací a kontakty. U kontaktů bude tel. čislo a e-mail na provozovatele. Dále se zde bude nacházet vodorovná navigační lišta, která bude na všech stránkách stejná. Pod ní bude vytvořená koláž z fotek, na kterých budou základní informace o teplotě vody a obsazenosti bazénů. Aktuality budou rozdělený do čtyř bloků podle kategorie. Jako poslední bude lišta s odkazy na sociální sítě. Obrázek 2: Domovská stránka 1024px 6
Drátový model domovské stránky při zobrazovací ploše 480px Zde je následující změna kategorie jsou zabaleny v rozbalovacím seznamu toggle menu. Seznam aktualit se také přizpůsobil velikosti zobrazovací plochy. Vyhledávání v mobilní verzi není potřeba. Obrázek 3: Domovská stránka 480px 7
Drátový model podstránky Ceník a otevírazí doba při zobrazovací ploše 1024px Zde bude primární navigací boční levá lišta s jednotlivými podkategoriemi a vedle ní bude drobečková navigace. Obrázek 4: Kategorie Ceník a otevírací doba při zobrazovací ploše 1024px 8
Drátový model podstránky Ceník a otevírací doba při zobrazovací ploše 480px Změna oproti hlavní stránce je v menu, kde rozbalovací seznam toggle menu nahradilo hamburger menu. Obsah se přizpůsobil rozměrům stránky. Obrázek 5: Kategorie Cenik a otevírací doba pri zobrazovací ploše 480px 9
3. Barevné řešení Sadu barev jsem zvolil analogickou, jelikož budu využívat hlavně odstíny modré barvy. Analogické rozdělení působí na diváka elegantně a čistě. Na barevném kruhu to bývá jedna barva a dvě bezprostředně sousedící. Na okolí působí jednotně, ať už teple nebo studeně. 3.1. Důvod a způsob výběru barev Bude převládat modrá barva, jelikož se váže k tématu vody a plaveckým stadionům. Modrá barva především reprezentuje vodu, spolehlivost a bezstarostnost, je univerzálně oblíbenou barvou. Vzhledem k tomu že dominantní barvou bude modrá, tak vybrané barvy budou na návštěvníka působit studeně. Doplňující barvy budou odstíny modré, fialové a zelené. 3.2. Barevné schéma Obrázek 6: barevné schéma Obrázek 7:barevný kruh 10
4. Grafický návrh 4.1. Hlavní stránka 1024px Obrázek 8:1024px 11
4.2. Podstránka 1024px Obrázek 9:1024px podkat 12
4.3. Hlavní stránka 480px a podstránka Obrázek 11:480px Obrázek 10:480px podkat 13
4.4. Textura Textura byla použita jako barevný podklad pod všechny stránky. Barva byla vybraná modrá, z důvodu výběru barevného schématu. Obrázek 12: textura 14
5. Test navigace 5.1. Kufrový test Jsou-li stránky dobře navrženy, měli bychom být schopni zodpovědět na následující otázky. 1. O jaký server se jedná (značka) 2. Na jakém jsem stránce (název stránky) 3. Jaké jsou hlavní sekce (primární navigace) 4. Jaké mám zde možnosti (lokální navigace) 5. Kde se nacházím v hierarchii 6. Jak můžu vyhledávat 1 6 2 3 2 4 5 Obrázek 13:podstránka 1024px 15
1 4 2 3 5 5 2 Obrázek 14:podstránka 480px 16
6. Animace Plynulé změny u stránky U stránky bude animace v hlavičce stránky, kdy se bude v boxu košík otáčet košík a diváka to na první pohled upoutá a bude mít pojem o tom, že náš plavecký stadion i prodává nějaké produkty, které si může ihned z našich internetových stránek objednat. Košík se bude otáčet o 360 doprava i doleva. Popis animace Animace má sloužit jako reklamní baner na upoutání pozornosti. Reklamní baner se bude skládat ze dvou obrázků, které byly na stránce použity jako informační baner a logo plaveckého stadionu. Průběh animace bude takový, že obrázek budou obíhat černé čáry a na baneru se bude zobrazovat nápis PŘIJĎTE SI ZAPLAVAT, který má diváka upoutat a nalákat na návštěvu tohoto stadionu. Logo které bylo použito jako logo plaveckého stadionu se bude animací vytvářet jedno za druhým a bude se postupně kutálet směrem doprava a následně zmizí, po zmizení se začne po ose kutálet další logo. 17