I just introduce my school project I have created in a web desing subject.

1. Webová prezentace umělce - fotograf

2. 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
Martin Homola – Webová prezentace umělce - fotograf 1

3. 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.
Martin Homola – Webová prezentace umělce - fotograf 2

4. 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á.
Diagram uspořádání informací
Martin Homola – Webová prezentace umělce - fotograf 3

5. 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.
Drátěný model
Martin Homola – Webová prezentace umělce - fotograf 4

6. 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.
Martin Homola – Webová prezentace umělce - fotograf 5

7. 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.
Mřížkový systém 1 - Hlavní stránka
Mřížkový systém 2 - Vedlejší stránka
Martin Homola – Webová prezentace umělce - fotograf 6

8. 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.
Barevný kruh
Spektrum barev
Martin Homola – Webová prezentace umělce - fotograf 7

9. 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 > Kontakt
Jak mohu vyhledávat?
- Prohledáváním všech sekcí postupně
Martin Homola – Webová prezentace umělce - fotograf 8

10. 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.
Martin Homola – Webová prezentace umělce - fotograf 9