Struktura menu a grafický design školních webů

Struktura menu je velice důležitá pro to, aby čtenář webových stránek našel to, co potřebuje. Když čtenář přistoupí na webové stránky, podvědomě si přeje, aby mu hlavní menu intuitivně napovědělo, co se skrývá pod jednotlivou položkou. Položky menu mají obsahovat takovou terminologii, která bude srozumitelná a která svým názvem bude schopna být nadřazenou položkou dalších úrovní položek submenu. Pro přehlednost je vhodné používat v názvech položek na začátku velké písmeno a zvolit takový font písma, který bude dobře čitelný. Při navrhování celé struktury menu by se mělo myslet na to, že hlavních položek menu má být co nejméně a další položky umisťovat až jako jejich submenu (další vnořenou úroveň menu). Pokud bude celá struktura menu takto navržena, tak se čtenář bude na webových stránkách vždy dobře orientovat a po krátkém letmém porozhlédnutí mu bude jasné, kde se pravděpodobně budou jeho hledané informace nacházet. Pro lepší představu uvádím příklad struktury menu, která čtenáři nabídne intuitivní přehled položek – viz obrázek na straně 19.

Školní web by měl mít i možnost vytváření pomocných položek menu například v postranních boxech školního webu. Není to sice klasická funkce menu, ale jen manuálně vytvořené interní odkazy na vlastní obsah webu nebo na nějaké externí služby, jako jsou Bakaláři nebo iŠkola.cz.

Grafický design je velice široké téma a není nikdy možné vytvořit grafiku, která se bude líbit všem návštěvníkům školních stránek. Je ale možné navrhnout a vytvořit takovou grafiku, kterou ocení většina čtenářů. Toto mohou doložit například ankety, které se umisťují na webové stránky, a všeobecná pověst konkrétního webu. V této části vám popíšu několik myšlenkových pochodů, které vycházejí z praxe a díky kterým jsme dosáhli překvapivých výsledků a velice pozitivních ohlasů na již zrealizované školní weby.

Než se pustím do popisu konkrétních příkladů, je nutné upozornit na to, že tvorba grafiky začíná vždy rozhovorem mezi webovým architektem a školou o tom, jaké má škola zaměření, jakou má tradici, jak se třeba i zkráceně nazývá atd.

Není však nutné, aby grafika školních stránek obsahovala přesný název školy. Řada ředitelů se mě ptala na to, zda je nutné mít jako název webových stránek oficiální název školy dle zřizovací listiny. Odpověď zní jasně: není to nutností, protože samotné webové stránky mohou mít svůj libovolný název a oficiální název je nutné mít uvedený pouze v položce kontaktů. Čili název webu může být např. jen přezdívka školy, tak jak si školu většina lidí pamatuje.

Je nutné zabývat se námětem grafického zpracování. Takže se nacházíme v rozhovoru o tom, jaká škola vlastně je, a zjišťujeme co nejvíce informací. Proč je důležité znát všechny tyto informace? Protože webové stránky musí vyjadřovat to, jak se ve škole žije a jaká tam vládne atmosféra. Musí vyjadřovat, jak se v této škole bude budoucí žák cítit, a měla by otisknout celý součet vlastností a způsobu prezentace školy.

Pokud má tedy webový architekt načerpané výše uvedené informace a patřičně se vžije do atmosféry školy, tak by měl následovat nějaký tok nápadů. Není samozřejmě zaručeno, že vhodné nápady dostane zrovna ten, kdo má za úkol navrhnout grafiku školy. Pro vhodný nápad, co vlastně grafik bude vytvářet, je zapotřebí talent a hlavně prostor pro to, aby se tvůrce mohl projevit.

Je nutné také zmínit, že úkolem webového architekta, který zpracovává celou myšlenku grafiky školního webu, není grafiku fyzicky vytvářet, ale pouze navrhovat a koordinovat celý koncept během jejího vývoje. Je to velice podobné jako v případě stavebního architekta, který narýsuje na papír, jak bude stavba domu po dokončení stavebních prací vypadat. Stejně jako při stavbě domu platí tedy i u tvorby grafiky a později i u programování funkcí webových stránek, že webový architekt pouze navrhuje a dohlíží na výrobní výsledky.

S nápady, které webovému architektovi přijdou, se podle situace může vyskytnout ještě potřeba doplnění dalších informací. Tyto informace jsou typu: jakým celkovým dojmem má grafika působit? Světlým, středním, tmavým? Jaký má mít grafika styl? Zaoblené hrany, ostré hrany? Jaké mají být použity barvy? Má být grafika tvořena z fotek, nebo má být kreslená? Tyto doplňkové otázky ale nemusí být vždy nutné pokládat, protože je možné, že navržený nápad už má tyto a další otázky v sobě zodpovězené.

Co dělat, když není nápad? Pokud tato situace nastane, pak většinou z toho důvodu, že při prvním rozhovoru nezískal webový architekt příliš mnoho informací a škola nechala čistě na něm, aby něco vymyslel. Ve chvíli, kdy se nedostaví žádný nápad, na kterém by se dalo stavět, by měl webový architekt požádat vedení školy o zorganizování schůzky s více učiteli, se kterými by diskutoval na toto téma. Metoda brainstormingu je velice efektivní a během této „burzy nápadů“ se načerpá mnoho inspirace přímo z centra dění školy a námět na webovou grafiku si většinou webový architekt z takovéto schůze odnáší s sebou ke zpracování. Inspiraci na nápad se určitě nevyplácí hledat na internetu, protože se z toho potom začíná stávat neosobní kopírování nápadů a cizí identity a se samotnou školou už toho takový nápad nebude mít mnoho společného. Pokud ovšem již nápad a námět celého grafického zpracování existuje, pak je hledání inspirace konkrétních částí grafiky samozřejmě dovoleno. Je to ale už ta část, kterou jsem uváděl výše, kdy webový architekt ve spolupráci se školou naprojektuje školní web a grafik toto zadání už jen zpracuje.

Jak námět zpracovat? Toto je většinou dáno samotným webovým architektem, který má za úkol myšlenku nějakým způsobem načrtnout. Tato fáze vývoje se nazývá tvorba drátěného modelu (wireframe), která se podobá práci již zmíněného stavebního architekta. Cílem rýsování drátěného modelu je dostat nápad do stavu, kdy není náročné s ním jakkoli hýbat a měnit ho při jeho ukázce. Škola s jeho pomocí může vidět, jak bude celý web vypadat a jaké bude mít rozložení. K tomu celý tento proces slouží. Pro nikoho není výhodné a příjemné nějak razantně měnit již dokončený finální návrh webové grafiky, proto metoda drátěného modelu práci grafika předchází. Drátěný model se využívá nejen pro grafické rozložení webových stránek a načrtnutí samotné grafiky, ale i pro detailní vyobrazení funkcionality.

Způsobů, jak drátěný model vytvořit, je několik. Je však nutné připravit ho tak, aby se v něm dokázal i běžný uživatel orientovat a aby se s co největší přesností podobal zamýšlenému výsledku. Styl drátěného modelu by měl webový architekt zvolit podle náročnosti a technických možností. Pokud se jedná o drátěný model, kde je potřeba vyjádřit nějaké složité křivky či obrazce, je vhodné zvolit papírovou formu, a naopak, pokud se jedná o symetrické tvary, bude lepší použít software, který tvoří linie s absolutní přesností.

Vše začíná a může i končit tužkou a papírem. Já osobně jsem u tužky a papíru již mnohokrát skončil a výsledek finální práce byl velice povedený. Jeden takový jednoduchý náčrtek jsem připravil pro ZŠ Jílové u Děčína (www.zsjilovedc.cz).

Tato škola s chráněným hnízdem netopýrů v půdních prostorách školy chtěla webové stránky ve stylu Saxany. Finální zpracování grafiky už bylo úkolem grafika, který se řídil rozložením, které bylo na papírovém náčrtku drátěného modelu, a celou myšlenkou, která mu byla předána.

Drátěný model tvořený softwarem. Další možností, jak vytvořit drátěný model, je použití nějaké webové aplikace nebo instalovaného softwaru. Já osobně používám velice kvalitní webovou aplikaci Cacoo, která je sice placená, má však v sobě mnoho funkcí. Jeden takový projekt pro školní webové stránky jsem navrhoval pro ZŠ Maršovská s rozšířenou výukou hudební výchovy v Teplicích (www.zsmarsovska.cz).

Zde byl námět jasný. Bylo nutné, aby grafika webu korespondovala se zaměřením školy a aby položky menu nezabíraly mnoho místa na webu. Položky se proto skryly pod klávesy klavíru.

Jak tedy grafiku pro svou školu začít tvořit? Školy mají dost často velice starý, konzervativní vzhled svých webových stránek. Je to z velké části dáno i tím, že na rozdíl od dnešní doby neumožňovala dříve žádná technologie udělat web, který by měl něco navíc. Každopádně se nebojte při sestavování zadání v rámci kreativity dostatečně projevit, protože dostat cokoli na webové stránky je téměř vždy možné. Konzultujte toto téma vždy s někým, koho tato činnost zajímá, a s někým, kdo bude ochoten trávit nad tímto úkolem více času, protože pro webového architekta je tato fáze vývoje školních stránek časově náročná. Když bude naopak webové stránky navrhovat někdo jen proto, že to prostě musí udělat, výsledek moc webové krásy nepřinese.

Struktura webu by měla být navržena logicky tak, aby se v ní čtenář vyznal. Jednotlivé položky mají obsahovat srozumitelné termíny s čitelným fontem. Grafika si vyžaduje kvalitní konzultaci a dostatek času. Čas věnovaný konzultaci s webovým architektem se mnohonásobně vrátí. Pokud se nedostaví žádný nápad, je potřeba hlouběji konzultovat zadání. Námět je vhodné přenášet na papír nebo do softwaru, aby se mohl námět snadno měnit. Tvořte grafiku a celou strukturu webu s někým povolaným.

V příštím díle se zaměříme na administrační část webu (redakční systém), který byl navržen a vyvinut přímo pro školní webové stránky s návazností a propojením funkcí, o kterých jsem psal v předchozích článcích v Řízení školy č. 5/2015 až 8/2015.