Webová prezentace umělce -

fotograf

1. Obsah

1. Obsah...............................................................................................................1

2. Publikum..........................................................................................................2

2.1 Návštěvníci................................................................................................2

2.2 Persona......................................................................................................2

3. Informační architektura....................................................................................3

3.1 Organizační schéma..................................................................................3

3.2 Diagram uspořádání informací...................................................................3

3.3 Prostorové rozložení informací úvodní stránky a podstránky.....................4

4. Navigace..........................................................................................................5

5. Rozvržení.........................................................................................................6

6. Barevné řešení.................................................................................................7

6.1 Důvod a způsob výběru barev...................................................................7

6.2 Barevné schéma........................................................................................7

7. Test navigace...................................................................................................8

8. Animace...........................................................................................................9

8.1 Účel a význam animace.............................................................................9

8.2 Popis scénáře animace..............................................................................9

– 1

2. Publikum

2.1 Návštěvníci

Předpokládaná skupina návštěvníků se bude pohybovat v rozmezí 15-35 let. Návštěvník má kvalitní zrak a je schopen rozeznat všechna viditelná spektra barev a nemá jiné závažnější potíže se zrakem, jako jsou slepota či barvoslepost. Struktura web není nijak obtížná k zapamatování toho, kde se právě uživatel webu nachází. Ke spuštění webu bude návštěvník potřebovat stolní PC nebo notebook s minimálním rozlišením monitoru 1024x800. Bude moc být spuštěn i na mobilních zařízeních a tabletech, ale velikosti stránek nebudou přizpůsobeny konkrétnímu zařízení. Uživatel ke spuštění webu by měl používat jeden z prohlížečů typu: Chrome, IE, Opera, Firefox, Safari, které jsou podporovány.

Jedná se především o web, který bude určen pro: zjištění biografie umělecké osoby, konkrétně fotograf možnosti si prohlédnout fotografovo portfolio potencionálního zákazníka, který může kontaktovat dotyčného

umělce o nějaký druh výpomoci rekreační fotografy, kteří zde mohou najít určitý způsob

inspirace umělci nebo také milovníci fotografii

2.2 Persona

Fiktivní zákazník, který bude shánět nějakou výpomoc po fotografovi. Po příchodu na stránku si opravdu ověří, že to je on, to lze vyčíst z názvu anebo také v podstránce – kontakt. Zřejmě bude chtít vidět, jak dotyčný fotograf fotí a sám posoudit, jestli je pro něho vhodný. Na to bude odkazovat podstránka – portfolio, kde budou vystaveny fotky v dostatečné velikosti a kvalitě, aby šlo podle toho posoudit, zda je fotograf pro uživatele adekvátní. Uživatel bude chtít také znát cenu, ale kvůli diskrétnosti fotografa se o ceně bude diskutovat osobně. Dále tedy uživatel navštíví podstránku – kontakt, kde uživatel bude moci kontaktovat fotografa pomocí formuláře, telefonicky nebo na sociálních sítích.

Dále personou může být fanoušek a známý, kteří budou mít možnost fotky, pořízené fotografem v sekci – portfolio, hodnotit a komentovat, což bude mít velice pozitivní vliv na fotografa, který může použít komentáře jako reference.

– 2

3. Informační architektura

3.1 Organizační schéma

Organizační schéma je tematické, přičemž web pojednává o určitém fotografovi. Dle účelu webu můžeme tenhle web zařadit mezi umělecké i osobní weby. Interaktivita webu je statická s osobním formulářem v sekci Kontakt.

Názvy hlavních kategorii jsou o mně – kde bude stručná a dostatečná biografie uměleckého fotografa, ve kterém se budu vyskytovat: jméno, příjmení, teritorium působení, koníčky, zkušenosti, reference, možnost kontaktu. Kontakt – kontaktní formulář s informacemi, proč právě toho fotografa kontaktovat a Portfolio, kde se bude vyskytovat alba fotografii, které umělec nafotil a zveřejnil. Zde bude možnost uživatele, po přihlášení přes sekci přihlášení, ohodnotit fotku (líbí, nelíbí) a také bude moci napsat krátký komentář.

3.2 Diagram uspořádání informací

Na webu je zprovozněna drobečková navigace, kde se právě uživatel nachází. Stránky budou propojeny hierarchickým uspořádání, ve kterém se dostaneme z každé stránky na hlavní stránku a také z menu stránky je možné jít na sekce o mně, portfolio, kontakt a přihlášení. Web nebude obsahovat mapu stránek, kvůli jeho nízké náročnosti na zapamatování a přehlednosti celé kompozice webu, která je velice jednoduchá.

– 3

Diagram uspořádání informací

3.3 Prostorové rozložení informací úvodní stránky a podstránky

V následujícím přiloženém obrázku můžeme vidět stručně rozebraný drátěný model hlavní stránky a podstránky.

– 4

Drátěný model

4. Navigace

Primární navigace bude schopna poskytnout uživateli informace o tom, kde se právě nachází, díky zvýraznění jednotlivé sekce v hlavním menu a mimo jiné také díky drobečkové navigaci, ve které lze zjistit i odkud jsme sem přišli. Také současnou pozici na stránce bude udávat název stránky. Ze současné stránky můžeme použít nezvýrazněné názvy v hlavním menu k průchodu do dalších sekcí nebo můžeme použít logo stránky nebo drobečkovou navigaci k návratu na hlavní stránku. Struktura webu bude tak bude tak jednoduchá, že uživatel se vždy dostane tam, kam chce jít.

Sekundární navigace a další hierarchie navigací nebude za potřebí, kvůli jednoduchosti stránky.

– 5

5. Rozvržení

U rozvržení stránky je využito mřížkového systému o celkové šířce 1024px, který má 16 sloupců. Níže je zobrazena následné rozložení stránky.

– 6

Mřížkový systém 1 - Hlavní stránka

Mřížkový systém 2 - Vedlejší stránka

6. Barevné řešení

6.1 Důvod a způsob výběru barev

Při výběru barev byla jako hlavní barva webu zvolena oranžová, která se doplňuje s barvami fotografie, jež se rozprostírá přes celou šířku webu. Fotografie, která se v prvním dojmu působí agresivně, díky své křiklavé fialové barvě, tak přesto ve výsledku zanechává příjemný pocit s celkovou kombinací barev celého webu. Dále využívám také odstíny oranžové, plochu světle modré, která se doplňuje s oranžovou a fialovou, a pro zvýraznění textu jsem využil černou nebo bílou barvu – záleží na podkladu. U názvu webu jsem využil zlatou barvu pro nabuzení vznešené atmosféry.

Zapůsobení na návštěvníka bude klidné, ale přitom lehce agresivní, který bude bedlivě sledovat každý svůj klik po webu, než dojde k fotkám v portfoliu, kde uživatel projíždí fotky s nadchnutím a úžasem.

6.2 Barevné schéma

V barevném kruhu jsou znázorněny výseče typů barev, které jsou na stránce použity. Jedná se rozdělené komplementární barevné schéma, které ve své kombinaci barev působí klidně.

Níže lze spatřit barevné schéma v podobě spektra barev, které se na stránce vyskytují. To jsou hlavně barvy fotky, která je základem celého webu a dále také jednotlivé barvy textů, boxů, nadpisů a písem.

– 7

Barevný kruh

Spektrum barev

7. Test navigace

O jaký server se jedná?- JANA ŠLOSAROVÁ PHOTOGRAPHY

Na jaké jsem stránce?- JANA ŠLOSAROVÁ PHOTOGRAPHY v sekci Kontakt

Jaké jsou hlavní sekce?- O mně, Portfolio, Kontakt

Jaké zde mám možnosti?- Vstup do sekcí O mně, Portfolio, Kontakt, vstup na Home a do

sekce PŘÍHLÁŠENÍKde se nacházím v hierarchii?

- Home > KontaktJak mohu vyhledávat?

- Prohledáváním všech sekcí postupně

– 8

8. Animace

8.1 Účel a význam animace

Hlavní logo (nadpis) webu bylo zpracováno do krátké animace. Toto pohyblivé logo dokáže jednoduše a efektivně zaujmout návštěvníka webu hned po vstupu na stránku. Uživatele upoutá už jen tím, že se ‚něco‘ na webu pohybuje, což už dává první impulsy, že webové stránky nebudou celé suché a prostoduché. Jak už jsem popisoval výše, logo bude dávat návštěvníkům informaci, kde se nachází a čí web to je.

8.2 Popis scénáře animace

Veškerý pohyb v animaci se děje s písmeny loga, kdy z neviditelných částí se do boxu pohybují jednotlivá písmena. Jako první se na scéně objeví hlavní a zároveň největší písmeno J, které se pohybuje z pravé části do levé v intervalu 0,9 s. Dále z vrchní neviditelné části jakoby padají jednotlivá písmena celého jména v logu, jejichž počátek nastává v době 0,9 s animace a po intervalu 0,1 s se písmena přidávají, kdy dopad jednoho znaku je 0,4 s. Padání písmen je ukončeno v 2,7 s. Po krátké prodlevě, kdy ve 3,0 s ze spodní neviditelné části se dostane do boxu „PHOTOGRAPHY“ celé vcelku. Celá animace trvá 3,3 s, kterou uživatel po návštěvě webu s ochotou shlédne. U objektu „PHOTOGRAPHY“ je využita vnořená animace, kdy po skončení hlavní animace, nápisem projede písmeno po písmenu černá barva a zpět do zlatové, za účelem zdůraznění, kde se návštěvník nachází a dodání pocitu kvality fotografa.

– 9