Modelovanie webového sídla - tvorba návrhu a jeho dokončenie

Ako by mala prebiehať skutočná tvorba návrhu webového sídla od času, kedy webového dizajnéra osloví klient. Ako by mal na tvorbe participovať klient a čo by mal mať na starosti dizajnér.

Dnes si pohovoríme o tom, ako by mala prebiehať skutočná tvorba návrhu webového sídla od času, kedy webového dizajnéra klient osloví. Nebudeme si hovoriť o tom, ako by ho mal zaujať, aby neprešiel ku konkurencii, to nie je úlohou tohto článku. Čo si však povieme je, ako by mal pri tvorbe návrhu webového sídla klient participovať, ako by mal dizajnér postupovať. Pre niekoho to nebude nič nové, to nám však neprekáža, aby sme o tom diskutovali a pridali ďalší diel do veľkej skladačky o modeloch a princípoch dobrého webového dizajnu.

Čo je webové sídlo

Pokiaľ chce webový dizajnér začať pracovať na webovom sídle, mal by vedieť, čo to je. Mal by poznať proces tvorby a rámec pravidiel, ktoré vedú k dobrému výsledku. Každý by mi teraz asi povedal: „však to je jasné!“ Áno možno to je jasné, ale skúsme to definovať v širšej súvislosti. Často sa stáva, že webová stránka je nesprávne pochopená a vznikne niečo, čo nemá dlhú trvácnosť. Hlavnou motiváciou tvorby cechu webových dizajnérov by mala byť dlhotrvajúca kvalita, ako výsledok ich práce. Pri opisovaní niektorých bodov sa možno budem opakovať s už pre niekoho známym, to ale nie je prekážkou.

Dobré webové sídlo tvoria tieto atribúty:

• Súbor webových stránok, ale aspoň jednej, medzi sebou prepojených hypertextom.
• Do istej miery (so zachovaním životne dôležitej funkčnosti) zobraziteľné na akomkoľvek zariadení, ktoré má internetový prehliadač - treba s tým počítať.
• Postavené na technológiách HTML a CSS.
• Dobre premyslená vnútorná štruktúra hypertextových prepojení - uľahčuje samotnú prácu, pretože filtruje prvky, ktoré budú používané opakovane na stránkach, a ktoré nie.

Čo nie je webové sídlo

• Webová stránka postavená celá na technológii flash/silverlight. Dôvod? Nie je všade použiteľná.
• Obrázok.
• Výstup „uložiť ako webovú stránku“ z Wordu alebo iného textového editora.

Postup dobrej tvorby

Nechcem nikomu zasahovať do jeho vlastného postupu tvorby webových stránok. No ako jestvuje postup pre návrh dobrého auta, mostu alebo domu, tak by mal jestvovať aj postup pre návrh a výrobu dobrého webového sídla. Má tieto charakteristiky:

1. Zadanie od klienta. Ak neexistuje, mal by to byť súbor vlastností, ktoré sú výstupom prvej diskusie medzi klientom a webovým dizajnérom.
2. Skicovanie celého sídla a najlepšie pre viac možných veľkostí okna prehliadača (ideálom je začať mobilnou verziou, skončiť verziou pre stolné počítače), skicovanie detailov - vhodné nástroje sú papier a ceruza.
3. Výroba prvého modelu podľa skíc, tzv. „snehu“. Snehom tento prvý model nazývam preto, lebo prvé farby sú skôr sivé, svetlé s prevahou bielej a presne také, ako stromy v zime - bez listov a farieb. V tomto bode sa pracuje hlavne so štruktúrou a funkcionalitou.
4. Poskytnutie tohto prvého modelu klientovi, ktorý je oboznámený s postupom tvorby, aby mohol dať webovému dizajnérovi spätnú väzbu, hlavne čo sa týka použiteľnosti. Klient pracuje so snehom, ktorý je predmetom bodu 2. Navyše by sa mal tento model otestovať s viacerými používateľmi, aby sa vyladili chyby vytvorené počas návrhu.
5. Keď sa doladí použiteľnosť, môže sa sídlo a každá jeho strana „ofarbiť“, môžu sa pridať grafické detaily a znovu ukázať klientovi s tým, že tentokrát nech sa zameria práve na vlastnú grafiku. V tomto bode ide hlavne o estetický dojem, kontrast, vyváženie farieb, …

Vyššie popísaný postup má tú vlastnosť, že sa nepracuje so statickým neinteraktívnym obrázkom. Dá sa klikať, prechádzať medzi jednotlivými časťami, skúšať, ako sa sídlo správa za istých okolností - mobil, počítač, tlačiareň. To sa s obrázkovým náhľadom, tzv. „plagátom“, urobiť nedá. Na plagát si klient neklikne. Grafický návrh celého sídla sa predáva pomocou obalu, čo je chybou. Dá sa tak predať aj niečo, čo bude po stránke použiteľnosti veľmi zlé. Naopak HTML model dostane presne zadefinované pravidlá a úpravy podľa spätnej väzby a tým sa zaručí jeho kvalita a vysoká miera použiteľnosti na akomkoľvek zariadení.

Nástroje na tvorbu

Vymenujme si nájstroje a ich úlohy v tomto procese, ktoré by mal webový dizajnér používať:

1. Hlavu. Môže sa javiť, že používa, ale nie vždy je to tak. Dobrý webový dizajnér sa nesmie zamerať na jednu koľaj: „optimalizované pre webkit“, nemal by na koľaj ani vyjsť. Webový dizajnér musí myslieť pre všetkých ľudí v čo najväčšej miere. Resp. je lepšie povedať, mal by predovšetkým použiť tie technológie, ktoré pozná každé zariadenie, ktoré vie pristupovať do internetu. To je predovšetkým HTML. Základom je dobrá sémantika. Ak je niečo zoznam, zoznamom by to malo byť aj bez CSS. Ak je niečo odsek textu, mal by to byť odsek textu aj bez CSS. Práve hlava webového dizajnéra tu hrá veľkú a nenahraditeľnú úlohu, pretože bez starostlivého premyslenia vznikne len lacná napodobenina, kde hlavným komunikačným nástrojom majiteľa webového sídla a jeho návštevníka-používateľa je obrazová informácia v spojitosti s textom (všetci vieme, ako sa číta text na webovej stránke).
2. Papier a ceruzu. Úzko súvisí s bodom 1. S týmito nástrojmi sa dajú robiť náčrty v podstate kdekoľvek, kedy človeku napadne. Skice pomáhajú zachytiť myšlienky bez toho, aby boli nutné slová. V tom je ich nenahraditeľná úloha vo webovom dizajne. Dobrá ceruza, ktorá sedí v ruke a nesnaží sa rozpadnúť spolu s dobrý papierom je súčasťou dobrej skice (aspoň z pohľadu inšpirácie). Najviac sa mi osvedčila mechanická ceruza a štvorčekovaný papier, pretože ten umožňuje zachovávať jednoduchým spôsobom proporcie pri kreslení toho istého objektu viackrát. Treba poznamenať, že ceurza a papier nerobia hneď dobrého webového dizajnéra, to sa dá až časom, trénovaním a vzdelávaním.
3. Internetový prehliadač. Základná výbava webového dizajnéra. Každý, kto vyrába webové stránky ich má niekoľko nainštalovaných, aby webové sídlo malo solídny základ vo všetkých. Nie je dôležité vyrábať (a opakujem to už niekoľký krát) stránky na pixel rovnaké v každom z nich. Pre používateľa je základom použiteľnosť a funkcie. Dobrý webový dizajn na to myslí a zohľadňuje nedostatky každého prehliadača, ale neohraničuje sa zhora najhorším.
4. HTML. Tento jazyk v už akejkoľvek jeho podobe je podstatou webovej technológie a sémantiky. Bez neho, resp. bez jeho značiek by sa nám len veľmi ťažko vyrábali nie len mobilné verzie webových sídiel. Dobre premyslená štruktúra stránky je predpokladom pre dobre napísaný HTML kód, ktorý je prepokladom pre dobrý dizajn webovej stránky, či celého sídla. Musím zvýrazniť, že niečo také nevznikne za jeden deň.
5. CSS. Nástroj na vizuálnu časť webového dizajnu. V súčinnosti s grafikou je to silný nástroj na vytvorenie uceleného webového diela od webovej typografie, cez animácie a ikonky až po stránky určené pre Internet Explorer 6.
6. Grafický editor. Vo webovom dizajne by mal zastávať úlohu podporného nástroja pre webovú grafiku. Nemali by sa v ňom kresliť celé návrhy sídiel, ale len jeho časti. Dôvodov pre tieto tvrdenia mám niekoľko, no najzávažnejším je práve výstup návrhu webovej stránky v grafickom editore, ktorý je statický, s fixnými rozmermi, nepočíta s mobilnou verziou (pokiaľ sa nejedná priamo o návrh mobilnej verzie).
7. Ľudí. Sú veľmi dôležití pri testovaní a následnej spätnej väzbe.

Spojením vyššie vymenovaných bodov a celej koncepcie modelovania webového sídla môže vzniknúť kvalitné dielo. Osvojením si spomínaných techník je táto práca oveľa jednoduchšia a príjemnejšia, ako vymýšľať dizajn v grafickom editore.

Predchádzajúce časti seriálu o Modelovaní webového sídla:
1. Modelovanie webového sídla
2. Modelovanie webového sídla - záujem klienta