Jak se dělá web

Blog / Dála Musil – 20. října 2018

Chtěli byste si vytvořit nový web nebo předělat ten dosavadní? Pak se určitě vyplatí vědět, jak se takový web vlastně dělá. Není to totiž zas tak jednoduché, jak si možná myslíte, ale na druhou stranu to ani nemusí být tak složité, jak vám bude mnoho webových agentur či designérů tvrdit. Návod na good enough výsledek najdete v tomhle článku.

Předem upozorňuji, že pokud nemáte absolutně žádné povědomí o webdesignu a marketingu, nebo naopak jsou vaše znalosti těchto oborů vysoké, pak tenhle článek není pro vás. Není ani příliš odborný a stejně tak ani příliš laický. Pokud jste někde mezi, což je předpokládám většina z vás, pak vám poradí dostatečně dobře, abyste toho co nejvíc zvládli svépomocí.

Stanovení cíle

Nejvíc práce vám dá začátek celé tvorby. Nejdůležitější je totiž přesně vědět, co je cílem tvorby webu (příp. redesignu webu), jaké jsou vaše potřeby, resp. čeho chcete dosáhnout. Může to být pravidelně o něčem informovat, připravit cizojazyčnou mutaci, získávat kontakty nebo třeba prodávat produkty. Čím konkrétnější budete mít představu, tím lépe. Pokud tedy třeba víte, že chcete zvýšit počet objednávek, návštěvnost či konverzní poměr o 30 %, máte ideální cíl, jehož (ne)dosažení si pak můžete snadno změřit. Když jsem třeba redesignoval web mého klienta, cílem bylo vytvoření responzivní verze či propojení s firemním informačním systémem.

Analýza situace

Víte-li co chcete, je na čase zjistit, jaký je současný stav. Byť vás slovo analýza možná děsí, jde vlastně jen o to, že si uděláte průzkum (přinejmenším se zamyslíte) a vyvodíte z toho nějaká fakta. Na co je dobré se podívat? V první řadě sami na sebe a svou firmu (třeba jaké jsou vaše silné a slabé stránky), na analytiku webu (pokud používáte např. Google Analytics, pak se mrknout odkud lidé přišli, na jaké stránky apod.), na klíčová slova (co se jak hledá a jak toho využít ve svůj prospěch), na konkurenci (ať znáte své konkurenční výhody), na obsah (budete mít co dát na web?) a v neposlední řadě byste také měli znát svou cílovou skupinu, tj. pro koho ten web vlastně bude.

Příprava řešení

Protože máte díky analýze už z čeho vycházet, můžete si připravit řešení k dosažení cíle - vědět kdo, co a jak bude na webu dělat. Díky datům a znalosti cílové skupiny si můžete připravit typické imaginární návštěvníky/zákazníky (= kdo = persony). S těmi budete nějak komunikovat a také se budou po webu nějak pohybovat, protože budou chtít vyřešit svůj problém (= co = uživatelský scénář) a vyplatí se naplánovat, kudy by ideálně měli chodit (= jak = zákaznická cesta), aby se dostali do finiše - odeslali formulář, udělali objednávku apod. Ideálně by každá stránka webu měla mít svůj jeden vlastní cíl. Chcete-li vědět víc o dobrém designu služby, mrkněte sem.

Návrh obsahu a struktury

Přibližujeme se k tomu, jak bude web vypadat. V tomto bodě už byste měli na základě zjištění z předchozích dvou odstavců vědět, jaké všechny informace na webu budou - a teď přišel čas na to je uspořádat (= informační architektura). Co budete řešit? Jaké budou jednotlivé typové stránky (např. homepage, služby, detail produktu, blog, kontakt...) a co na nich bude, jak budou stránky/produkty uspořádané do kategorií (v případě e-shopu budete řešit též třeba filtry parametrů) i jak bude fungovat navigace. Ideální je v tomto případě načrtnout si celkovou hierarchii v podobě mapy stránek a jejich propojení mezi sebou. Tipy nejen k tomuto najdete v mém článku o webových chybách.

Model webu

Váš web se začíná zhmotňovat v podobě skic (náčrtů) či wireframů (drátěných modelů). Jak? Prostě si nakreslíte nebo v programu připravíte uspořádání prvků na jednotlivých stránkách webu. V tomto bodě tak můžete i poprvé otestovat funkčnost a smysluplnost vaší dosavadní představy a přípravy, a je to i část, kde budete v rámci celého procesu nejvíc věcí opravovat a ladit. Třeba zjistíte, že pro nějakou stránku nemáte obsah, někde je ho možná příliš, anebo třeba nevíte, jak by se měla stránka chovat. V rámci modelování už můžete tvořit i texty a příp. i podklad pro grafiku (např. vzhled prvků či barevnou paletu). Určitě mrkněte i do mého UX průvodce, který vám pomůže navrhnout části webu snadněji a účinněji.

Grafický návrh

Grafika je oblíbená část mnoha majitelů firem, kteří chtějí nový web, protože si bohužel myslí, že vzhled je ze všeho nejdůležitější (a i dnes ještě existují webové agentury, které začínají návrhem grafiky, aniž by měli jakékoliv nezbytné podklady). Ale vy nejste povrchní a dobře víte, že grafice předchází příprava. Grafický návrh by se měl držet wireframů a vést návštěvníka webu ke stanovenému cíli. Vyhněte se uměleckým blbůstkám a myslete samozřejmě na to, že návrh pak bude muset někdo nakódovat. Já osobně třeba řeším grafiku s kódováním najednou (přečtěte si třeba jak jsem redesignoval svůj web), protože vše ihned vidím a můžu podle potřeby ladit.

Oživení webu

Pokud pojede web na nějaké hotové šabloně, tak už máte skoro hotovo. Jestliže ne, tak bude potřeba oživit jednotlivé stránky, tj. nakódovat je, k čemuž se používá zejména jazyk HTML a kaskádové styly CSS, které řeší vzhled stránky. Většina z vás asi oživení sama dělat nebude, každopádně nezbytností je dnes responzivita - to znamená, že se stránka přizpůsobí zařízení (PC, tablet, mobil), na němž se zobrazuje. Oživený web už si pak můžete libovolně proklikat a také naplnit texty či obrázky. Jestliže chcete mít web napojený na redakční systém, nebo stavíte e-shop, pak přijde po kódování na řadu ještě programování. V této části už jen doporučím můj článek jak se nespálit při výběru dodavatele.

Testování

Poslední části tvorby webu je jeho otestování před spuštěním do ostrého provozu. Projděte si, zda řešení odpovídá tomu naplánovanému, zkontrolujte, jestli někde něco nechybí, a samozřejmě i to, zda vše funguje jak má (funkční navigace, stránky, formuláře, responzivita atd.). Web poté spusťte a průběžně sledujte (měřte), jak dobře se daří plnit původně stanovené cíle. Provoz webu či e-shopu je běh na dlouhou trať a neobejde se bez pravidelného tuningu a vhodného marketingu, ale to už je kapitola pro jiný článek :-).

Věřím, že vám dnešní článek trochu pootevřel oči a nebudete se tvorby webu bát, pokud jste se báli, a naopak vás nahlodá víc přemýšlet, pokud jste si tvorbu představovali až příliš snadnou. Tak ať se vám stavba nového webu podaří! :-)

Pokud vám přijde i po přečtení článku tvorba webu složitá, rád vám celý web navrhnu a pomohu s realizací až k jeho spuštění - dejte mi vědět.