Kroky které vám dneska ukážu jsou takový obecný nejčastější rozsah. Může to samozřejmě být o něco doplněné podle toho, jaký web nebo projekt řešíte, ale také protože nežijeme v ideálním světě, tak to může být ovlivněné i termínem a rozpočtem.

‍

A samozřejmě zároveň pokud si zrovna nevyberete někoho, kdo weby seká jak na běžícím páse a absolutně ho nezajímá, jestli vám ten web k něčemu bude. Pak se nejčastěji setkáte s následujícím rozsahem. A mimochodem - je to v rámci tvorby individuálních webů, třeba u šablonového je samozřejmě trochu jinak - ale i to zmíním v závěru článku.

‍

Seznámení

Tohle je důležitý úvodní krok. Protože aby vám váš webař pomohl, musí poznat vás, váš byznys, vaší cílovou skupinu atp.. Sám na to mám vypracovaný seznam otázek, které s klienty probírám - ne vždy je třeba probrat všechny, takže podle situace je upravuji, doplňuji atp.

‍

Je v tom i například to, že pokud se nestaví web pro nově vzniklou firmu, tak probíráme i ten původní web. Co ale ještě zmíním, tak v rámci téhle části by měly být i nastavené cíle a očekávání. Ideálně měřitelné, aby se to dalo vyhodnotit. Často se sice setkávám s tím, že web podle slov klienta nemá být obchodní nástroj a je to jenom jakási vizitka, ve většině případů ale nakonec stejně když to projdeme společně, tak dojdeme k tomu, že to tak úplně není.

‍

A mimochodem, pokud vás zmíněné otázky zajímají konkrétně, protože samozřejmě to není jen pro webaře ale hodí se vám to v dalších situacích, níže je odkaz, kde si je zdarma můžete stáhnout.

Struktura a wireframe

Dalším krokem je, že se řeší struktura webu, samozřejmě pokud to není třeba jednostránkový web nebo něco malého. Ta by se měla mimo jiné navrhovat i dle analýzy klíčových slov ale i s přihlédnutím na původní web, protože jinak se musí dělat redirecty přesměrování původní URL adres na nové a o tom jsem mluvil v článku o SEO.

‍

Spolu s tím se navrhují i wireframe webu - wireframe je drátěný model webu, který nám značí, kde bude jaký obsah, prvek nebo tlačítko. Podle toho, jak moc detailní wireframe jsou - často jsem i u složitějších věcí začíná na úrovni bloků ve smyslu tady bude hlavička s menu, tady bude blok xy obsahu atp.. A pak se z toho tvoří detailnější, který více ukazuje že tady bude nějaký obrázek, tady akční tlačítko atp..

‍

Osobně nemám rád přehnaně detailní wireframe až že by se tomu dalo říkat i design. Někdy to samozřejmě je ku prospěchu, někdy to zase bere designérovi prostor. Wireframe je totiž běžný podklad pro designéra a je to to první na co se vám zřejmě zeptá.  

‍

‍

Každopádně třeba v mém případě pokud nezpracovávám design já a nevím, kdo ho bude dělat, raději pro klienta udělám wireframe detailnější, protože spousta designérů jsou spíše umělci - čili dělají hezký obraz, který ale nemusí jako web fungovat ve smyslu konverzního poměru. Protože za mě je skvělý designér spíše řemeslník a až pak umělec.

‍

Specifikace

A posledním krokem, který uzavírá tu řekněme úvodní část tvorby, je specifikace. A zase podle projektu buď je pojmutá pouze formou toho na jakém CMS to bude postavené, co bude statický obsah a co dynamický atp.. Čím větší projekt, tím větší a detailnější specifikace.

‍

Zároveň i podle těchto předchozích částí by se buď projekt měl naceňovat a nebo alespoň doupřesňovat, protože na začátku je to spíše hádání, až tady kdy je k dispozici struktura, wireframe a specifikace, tak lze vždy přesně určit cena.

‍

Moodboard a design

A tím se dostáváme na první bod v tvorbě samotné a to je design. Respektive design doporučuji začínat u moodboardu pro vyloučení nebo alespoň minimalizaci úprav. Je to defakto shodnutí mezi designérem a klientem nad grafickým stylem. A protože se spousta projektů zasekne právě u designu, natočil / napsal jsem o moodboardu samostatné video a článek, odkaz je tady. Sám ho používám roky a druhý návrh jsem za tu dobu neřešil a úpravy pokud řeším, tak minimálně. Takže určitě doporučuji.

‍

A pak následuje design samotný. Nejčastěji ho dostanete v podobě PNG náhledu, odkazu třeba na Figmu a nebo jako klikací prototyp.

‍

Uživatelské testování

Tenhle krok se často ignoruje a vynechává. Ať už kvůli času i rozpočtu. Pokud je to ale alespoň trochu možné, doporučuji ho. Dokáže přinést skvělé komentáře. A teď nemluvím o žádném velkém a sofistikovaném testování - skvěle poslouží pár lidí, klidně kolegů kteří ještě design neviděli a podle jednoduchého scénáře se jich ptát jak by postupovali, sledujte kde se zaseknou atp..

‍

‍

Uživatelské testování jako takové dává smysl i v pozdějších fázích tvorby a to klidně i po spuštění - ale čím déle bude, tím potenciálně úpravy budou náročnější a tím pádem dražší. Proto já doporučuji ho udělat hned po designu než se jde kódovat.

‍

‍

Kódování a programování

A jak jsem zmínil v předchozím bodě, po designu nebo i ideálně uživatelském testování je potřeba designu oživit. Respektive zatím je to vpodstatě obrázek - nebo i klikací, pokud se dělá zmíněný prototype. Pořád ale obrázek.

‍

A pak jsou tam dvě části. Nechci zacházet příliš do podrobna, ale design - tedy ten styl, to rozložení atp. je šablona - ta se kóduje do HTML/CSS + nějaký další script třeba pro animace, to není podstatné - podstatné je, že je to kódování šablony. Tahle šablona se i uzpůsobuje pro různá rozlišení a zařízení a do ní lze už doplnit texty atp.. Ale většinou se tato šablona dál propojuje s nějakým CMS - což znamená content management systémem, neboli redakčním systémem pro správu obsahu.

‍

A může to být vlastní třeba v PHP napsaný, to spíš mimochodem nedoporučuju, nebo nějaký opensource jako Wordpress, Drupal atp. a nebo no-code nástroj jako na tomhle webu často zmíněný Webflow a Framer, tam se mimochodem rovnou i tvoří, respektive tedy kóduje šablona.

‍

Tyto systémy navíc nemají funkci jenom správy obsahu, ale i další funkce pro SEO a tak podobně. Jestli chcete vidět, jak se edituje obsah v takovém systému, konkrétně Webflow, zase tady nechám odkaz. Napříč systémy je to totiž více či méně podobné.

‍

‍

Čili když se vrátím, je třeba udělat šablonu a tu propojit s redakčním systémem, pokud se nespouští jenom nějaký vyloženě jednoduchý web, který administraci nepotřebuje - pak se řeší jen ta šablona.

‍

‍

Ostatní kroky

Pak následuje řada kroků jako doplnění obsahu, to se koneckonců už více či méně dělá už v průběhu, pak zaškolení s editací a ovládáním webu a tak dál na jehož konci je samotné spuštění webu. Tohle už je samozřejmě radostná část procesu tvorby webových stránek.

‍

Zmíním, že pokud místo individuálního webu řešíte ten šablonový, škrtněte si ze zmíněného procesu minimálně z větší části specifikaci, design, kódování a programování, protože tam se řeší spíše úpravy již hotové šablony, čili proces je zkrácený o ty nejnáročnější a nejdražší části tvorby, právě proto lze na šablonových webech značně ušetřit a v mnoha situacích je to skvělá volba.

‍

Každopádně pozor - spuštěním webu to většinou nekončí. Nebo respektive nemělo by. A jaké jsou další kroky pro dosažení maximálního efektu s webem?  To znamená úspěchu v online prostředí?  O tom si povíme příště.