Grafické návrhy

Základem webové prezentace je pečlivě vypracovaný grafický návrh stránek – layout. Tomuto kroku věnujeme maximální možnou péči, protože důsledky nevhodného rozvržení jsou u hotové prezentace jen obtížně (pokud vůbec) odstranitelné a následkem je nepřehlednost stránek a obtížná navigace.

Vytvořit grafický návrh stránky znamená zajistit podrobné podklady o budoucí webové prezentaci. Před zahájením práce je potřeba shromáždit řadu rozmanitých informací.

Vstupní informace:

• jaké bude množství textového obsahu. Bude-li stránka obsahovat malé množství textových informací, bude design stránky tvořen mnoha grafickými plochami a prvky tak, aby se zakryl nedostatek psaného obsahu. To je typické pro firemní prezentace například kadeřnictví nebo třeba restaurace. Na takových stránkách bývá uveden kontakt, otevírací doba, několik vět s pochvalami od spokojených zákazníků a reference. Vhodným uspořádáním je možné docílit dojmu, že stránky jsou plné důležitých informací. Opakem jsou stránky, na kterých je provozován nějaký on-line výukový kurz a které textovým obsahem přetékají. Střídmý design bude pro tyto stránky velkým přínosem a usnadní čtení rozsáhlého textu a navigaci po jednotlivých stránkách.
• jaké bude množství obrazového obsahu . To je rozhodující pro způsob využití obrázků v grafickém návrhu. Čím bude obrazově bohatší obsah stránky, tím střídmější a nenápadnější bude samotná grafika stránky . A naopak – pokud bude obsah tvořen textem s malým počtem obrázků, může být vzhled stránky graficky obsažnější a výraznější.
• bude-li prezentace vybavena redakčním systémem. Pokud ano, musí se kód stránky napsat tak aby se přizpůsoboval měnícímu se obsahu stránek.
• jestli se má počítat do budoucnu s rozšířováním počtu stránek. Pokud má webové sídlo pět stránek a nepočítá se s velkým rozšiřováním v budoucnu, mohou být navigační prvky umístěny v přehledné vodorovné liště. Svislá navigace může obsahovat daleko více odkazů a je také jednodušší její rozšiřování v případě změny rozsahu prezentace.
• jaký typ návštěvníků bude stránky navštěvovat. Stránky s hrami pro mobilní telefony budou mít odvážnější design, který může i šokovat. Stránky pro seniory budou velmi seriózní, úsporné a s přehlednou a intuitivní navigací.
• zda se počítá se zobrazením na alternativních prohlížečích. Pokud se mají stránky správně zobrazit i na různých textových prohlížečích, hlasových čtečkách, PDA zařízeních a pod., je potřeba tomu grafiku uzpůsobit.

• jaká je image subjektu, který je na webu prezentován. Některá firma se snaží prezentovat jako seriózní subjekt, který nade vše staví solidnost – například pojištovny a banky a jiné se berou s nadhledem – dříve třeba OSKAR, nebo LENTILKY. Tomu je potřeba podřídit vzhled stránek.

V závislosti na rozsahu a určení webu může být vzhled všech stránek stejný, nebo může být jiná grafika úvodní strany a jiná pro stránky dalších urovní.

Výstupem této fáze webdesignu je rozpracovaný grafický návrh ve formátu *.png, který obsahuje kompletní grafiku a všechny stavy tlačítek a interaktivních prvků (při najetí myší a podobně). Samotný tento soubor je však pro web nepoužitelný. Je potřeba jej rozřezat a optimalizovat.

Rozřezání a optimalizace grafiky

Hotový grafický návrh je skica všech prvků stránky, včetně všech jejich stavů – například jak se změní vzhled tlačítka při najetí myší, jak vypadá rozbalený seznam navigačního menu atd. Aby se skica dala použít na webu, je potřeba ji rozřezat a optimalizovat.

Rozřezání grafiky na jednotlivé prvky – slices – je proces, při kterém vznikne řada samostatných dílčích prvků stránky. Jednotlivé prvky jsou potom umístěny na stránku tak aby do sebe přesně zapadaly. Při prohlížení stránky není poznat, že je složena z malých dílků. Některé prvky se zobrazí až při určité akci návštěvníka – při kliknutí na tlačítko, při načtení stránky či při nějaké předem určené akci návštěvníka. Význam rozřezání grafiky je:

• Opakované využití určitých prvků. Jestliže se určitý prvek opakuje na stránce vícekrát, je možné jej stáhnout pouze jednou. Zmenší se tak velikost výsledného souboru stránky.
• Zrychlení načtení stránky stahováním několika menších souborů místo jednoho velkého. Rozdělením se lépe využije kapacity internetového připojení. Princip je stejný, jako při využití různých manažerů stahování.
• Optimální využití vlastností komprimovaných formátů jpg, gif nebo png. Každý formát má určité specifické vlastnosti komprese grafiky. Při rozřezání grafiky na malé části, je možno zvolit rozdílný stupeň komprimace každého řezu podle požadavků na jeho zobrazení. Například dívčí obličej na úvodní straně tohoto webu je zobrazen ve vysoké kvalitě (minimální komprese) zatímco rozostřené pozadí je velmi silně komprimované aniž by ztráta detailů vadila.

Jednotlivé řezy grafiky jsou na výsledné stránce uloženy do správné polohy pomocí tzv. CSS pozicování.

Datum poslední aktualizace: 12. 11. 2012