Pri rozhodnutí o vytvorení webovej stránky na podporu predaja služieb alebo produktov spoločnosti sa zákazník ocitá často v bode nula. Vie, že chce „niečo“. Ale málokedy presne vie, ako by to malo vyzerať. A takmer nikdy nemá predstavu o tom, ako to „niečo“ vznikne.

Definovanie štruktúry a obsahu webovej stránky je interaktívny proces, na ktorý má vplyv zákazník a segment, v akom jeho spoločnosť pôsobí. Spôsob, akým webová stránka vznikne, predstavuje súbor procesov, podľa ktorých pri tvorbe webu postupujeme my. Ako sa od počiatočnej idey prepracujeme k funkčnému webu a prípadne aj jeho integrovaniu do širšieho digitálneho ekosystému, vám priblížim v tomto článku.

Vývoj webovej stránky zahŕňa štyri základné fázy:
1. Analýzu
2. Pre-launch
3. Launch
4. Testovanie, dolaďovanie a ďalší rozvoj

Proces vyvoja webu

Trošku si vás rozpitveme...

Fáza analýzy sa v mnohom podobá pátraniu v zákutiach ľudskej duše. Pripravte sa na to, že sa budeme chcieť o vás (ergo o vašej spoločnosti) dozvedieť všetko. Prečo vznikla, k akému marketingovému archetypu sa hlási, kto sú na trhu jej spojenci a kto konkurenti, aký je jej jedinečný predajný argument.

Všetky získané informácie nám pomôžu spoločne s vami zadefinovať, čo všetko by na webovej stránke malo byť.
A budeme si pri tom veľa kresliť. Výsledkom našich prvých stretnutí bude vytvorenie tzv. mindmapy.

Mindmapa je v podstate akýsi dúhový pavúk a prvý nevyhnutný krok na ceste k webu.

Vzor MindMapy

Znázorňuje jeho základnú štruktúru, jednotlivé stránky, podstránky a funkcionality. Je rámcovým ohraničením rozsahu projektu. Preto je jej kresbe potrebné venovať náležitý čas.

Čím komplikovanejšia je organizačná štruktúra spoločnosti, čím komplikovanejšie sú procesy, ktorými sa riadi, a čím je portfólio jej aktivít širšie, tým dlhšie nám to bude trvať.

Mindmapa má dve základné výhody. Tou prvou je, že až do ukončenia analytickej fázy ju možno donekonečna prekresľovať. Tou druhou je jej názornosť. Mindmapa dokáže vniesť do zdanlivého chaosu poriadok, štruktúrovane a zrozumiteľne uchopiť aj tie najkomplikovanejšie skutočnosti.

Odsúhlasná mindmapa slúži ako podklad k vytvoreniu mockupov.

priklad mockupu

Ide v podstate o jednoduché a šablónovité znázornenie štruktúry webu pre účely jednoduchšej vizualizácie, vytvorené buď podľa vybranej šablóny wordpressu, alebo na mieru zákazníkovi. Mockup je názornou odpoveďou na otázku: „Ako to bude celé vyzerať?“ Ide v podstate o funkčný prototyp webu, ktorý síce ešte neobsahuje texty ani obrázky, ale je plne klikateľný, čo znamená, že zákazník už získa jasnú predstavu nielen o jeho štruktúre, ale aj o tom, ako sa budú správať jeho jednotlivé časti, keď na ne klikne.

Mockup zároveň vytvára priestor pre revíziu mindmapy. To, čo sa na nej javilo ako dôležité, sa môže pri preklopení do funkčného prototypu odrazu zjaviť nadbytočné. Ak sa nám napríklad pri kreslení mindmapy zdalo, že každá zo zákazníkových 15 služieb si zaslúži vlastnú podstránku a potom zistíme, že jej náplňou by mala byť jedna veta, bude vhodné mindmapu prekresliť.

Mockup a mindmapa sú základy, na ktorých začneme budovať web. Preto je potrebné, aby ste im ako zákazník venovali náležitú pozornosť, aktívne participovali na ich tvorbe a pripomienkovaní a boli s nimi absolútne stotožnení. Budeme na nich totiž budovať FATSku.

Funkčná a technická špecifikácia (FATS) je záväzný dokument, v ktorom sú definované všetky časti projektu. Obsahuje funkčný popis projektu, technické informácie a špecifikácie, napríklad pre aký typ prehliadača bude optimalizovaný, podrobný zoznam použitých pluginov alebo nástrojov tretej strany, aké typy filtrov použijeme v e-shope a pod. FATS zároveň definuje administračné body, t.z. kto, čo a v akom rozsahu môže na webe meniť.

Odsúhlasená FATSka je cestovná mapa, podľa ktorej budeme vyvíjať web. Je záväzná pre nás aj pre klienta. Náš proces je však zároveň pružný. Ak sa po ukončení analytickej fázy rozhodne klient niečo zmeniť, pridať, vymeniť a nie je to zakotvené vo FATS, radi mu vyjdeme v ústrety. V takomto prípade však treba rátať s tým, že sa to prejaví aj vo finálnej cene projektu.

Preto odporúčam nesnažiť sa fázu analýzy za každú cenu urýchliť. Naopak. Oplatí sa venovať jej dostatok času. Dobre urobená analýza nám, programátorovi a najmä klientovi ušetrí množstvo komplikácií v ďalších fázach vývoja webu.

Výdatná poživeň

Zatiaľ čo by sme mockup v analytickej fáze mohli prirovnať k jednohupkám typu amuse bouche, všetko, čo vám naservírujeme v Pre-Launch fáze, už bude výdatná poživeň.

Pre-Launch fáza slúži najmä na doladenie funkčného prototypu (mockupu), jeho grafické spracovanie, naplnenie obsahom, HTML kódovanie a nasadenie prototypu do wordpressovej šablóny alebo kustomizovaného redakčného systému. V tomto štádiu vývoja už pracujeme s reálnou grafikou, správnymi fontmi, farebnosťou a v preddefinovanom vizuálnom štýle v súlade s korporátnou identitou.

Nastroje a kroky pre vyvoj webu

V závislosti od snaživosti klienta pracujeme buď so vzorovými textami (blahoslavené „Lorem ipsum“), alebo konkrétnymi textami od klienta. Obzvlášť snaživých klientov, ktorí si chcú obsah napĺňať sami, radi zaškolíme :) . Na konci Pre-Launch fázy máme k dispozícii možno trochu nedoladený, ale už funkčný web, ktorý po sérii testovaní na interných testovacích linkách, následnom odladení prípadných chybičiek a naplnení kompletným obsahom bude pripravený na spustenie.

Veľký tresk

Launch – alebo spustenie webu – vždy sprevádza nadšenie aj nervozita. Navrhli sme ho, nakreslili, vymodelovali, vypiplali, otestovali. Je čas vypustiť ho do sveta.

Na cestu mu ešte do batôžku pribalíme trackovacie nástroje (Google Analytics, Hotjar a spol.), aby sme s ich pomocou mohli sledovať, ako sa mu „tam vonku“ darí, z diaľky ho SEO optimalizovať alebo ho promovať prostredníctvom rôznych kampaní. A neustále premýšľať o tom, čo ešte pridať, čo vytvoriť a vyťažiť pri tom zo synergie.

Samotným spustením webovej stránky totiž väčšinou nič nekončí. Vzniká tu priestor pre vývoj ďalších aplikácií a funkcionalít, o ktorých sme my ani zákazník spočiatku ešte neuvažovali. Možno predsa len v rámci nového projektu vytvoríme ešte ten e-shop, objednávkový formulár alebo mobilnú aplikáciu...

A takto, milí priatelia, sa naše weby menia na digitálne ekosystémy.