POSTUP REALIZACE TVORBA WEBU

 

Pro bližší představu o průběhu spolupráce si Vám dovolujeme rozepsat jednotlivé kroky, které vychází z letité zkušenosti při vytváření nových webů.


Proto, abychom pro Vás vytvořili perfektní web, nejen po grafické stránce, je nutné dodržet jednotlivé na sebe navazující kroky a především sjednotit co nejvíce podkladů týkajících se firmy, produktů, služeb, referencí a všech informací, které se mají na webu objevit.

 

FÁZE 1 - Příprava

Spolupráce

Celým procesem spolupráce Vás bude provázet náš projektový manažer, který zajistí hladký průběh realizace. Kompletní projekt nového webu s Vámi probere na osobní schůzce nebo formou konferenčního hovoru nebo video callu.

Zadání projektu

Představíte nám svůj projekt a řeknete nám, co od nového webu očekáváte. My navrhneme ideální řešení. Domluvíme se tak na rozsahu a technickém řešení.

Základní analýza rozsahu webu

V dalším kroku se zaměřujeme na analýzu rozsahu webu - sitemapu (mapu stránek), která určí celkový počet typových (vzorových) stránek . Jelikož není možné bez podrobnějšího zadání určit koncovou cenu projektu vždy se snažíme analyzovat rozsah webu (počet stránek, kategorií, kontaktních formulářů atd.) a vytvořit tak jednoduchou a přehlednou strukturu stránek pro intuitivní navigaci návštěvníků (UI/UX). Samotná analýza určí rozsah webu a technickou složitost, což má vliv na cenu a termín realizace nového webu.

Cenová nabídka

Hlavním ukazatelem ceny nového webu je jeho rozsah - mapa webu. Především se jedná o celkový počet typových stran, které musí grafik navrhnout, kodér nastylovat a programátor napojit na redakční systém.
V případě snížení celkového rozsahu cena automaticky klesá, ale naopak jeho rozšíření může mít vliv na konečnou cenu webu. Z tohoto důvodu doporučujeme první fázi projektu, kterou je analýza rozsahu webu nepodcenit a aktivně se jí věnovat.

ROZSAH CENOVÉ NABÍDKY WEBU

- Analýza projektu
- Sitemapa / Návrh mapy webu
- Wireframe / Návrh interaktivní struktura webu

- Grafický návrh homepage
- Grafický návrh vnitřních stran
- Grafický návrh responzivu
- HTML/CSS kódování
- Programátorské práce
- Napojení 321 CMS redakčního systému
- Plnění obsahu webu
- Zprovoznění webu na serveru

Smlouva o dílo včetně stanovení termínů

Po odsouhlasení cenové nabídky Vám zašleme návrh smlouvy o dílo včetně příloh obsahující specifikaci díla, časový harmonogram, jednotlivé termíny a technickou specifikaci.

Fakturace 1/3

Při podpisu smlouvy Vám bude automaticky vygenerována proforma faktura ve výši 1/3 z celkové částky projektu. Dnem úhrady startuje realizace nového webu. Při nevyužití grafického návrhu nebo ukončení projektu je úhrada platby 1/3 nevratná a je brána jako skicovné.

FÁZE 2 – Návrh

Zadání projektu do 321 INTRA

Kompletní komunikace i jednotlivé termíny jsou detailně archivovány v našem projektovém systému, ke kterému máte neustálý přístup. Prostřednictvím intranetového systému můžete s námi komunikovat, sdílet podklady a zadávat jednotlivé korektury.

Předání podkladů ze strany zákazníka

Základem úspěšné realizace každého projektu je shromáždění všech potřebných podkladů, mezi nejdůležitější patří:

- firemní logo ve křivkách
- logo manuál
- loga partnerů
- kompletní textové podklady (txt. doc.)
- obrázky, fotografie a dokumenty ke stažení (1920px)
- videa

Všechny podklady, které z Vaší strany neobdržíme si rádi zajistíme po vlastní ose.
Jen upozorňujeme, že dodatečně předané podklady a změny obsahu mohou mít vliv na termín dokončení, ale i konečnou cenu projektu

Podrobná analýza projektu

V návaznosti na předání podkladů se pustíme do podrobné analýzy projektu. Obvykle se zaměřujeme na:

- analýzu podkladů / rozsahu
- analýzu stávajícího řešení
- analýzu přístupnosti
- analýzu cílové skupiny
- definici konverze / konverzní cesty
- analýzu konkurence

Dále analyzujeme data z Google analytics a heat mapy.

 

Struktura webu

Z výsledků analýzy navrhneme ideální strukturu webu (schéma - pavoukový rozkres mapy stránek), která bude definovat celkový rozsah nového projektu a hlavního menu. Po odsouhlasení struktury se pouštíme do přípravy interaktivního drátěného modelu.

 

Wireframe webu

Proto, aby došlo ke splnění požadovaných konverzních cílů je nutné navrhnout ideální strukturu nového webu.
To vše je na místě promyslet dříve, než se pustíme do grafického návrhu. Významnou předností této aktivity je fakt, že v drátěném modelu je možné velmi snadno provádět změny, jelikož se jedná o funkční interaktivní prototyp webu (funkční web bez grafiky).

 

Grafický návrh

Grafický návrh webu obsahuje kompletní zpracování grafického designu, obsahuje 3 originální homepage. Na základě vybraného favorita vychází základní grafický styl pro další stránky, návrh bannerů a doprovodných symbolů, přehled fotografií, produktů a výrobků, úpravu zaslaných podkladů a velikosti fotografií, úpravu velikosti a barevnosti logotypů.

- Grafický návrh homepage
/ korektury / odsouhlasení
- Grafický návrh vnitřních stran
/ korektury / odsouhlasení
- Grafický návrh ikon, kontaktních formulářu
/ korektury / odsouhlasení
- Grafický návrh responzivního designu
/ korektury / odsouhlasení

Fakturace 2/3

Pokud jste s grafickým návrhem webu spokojeni, můžeme začít s programováním webu. Dle obchodních podmínek vystavujeme druhou ze tří faktur.

FÁZE 3 - Realizace

 

HTML/CSS Kódování

Po odsouhlasení grafického designu přichází na řadu frontend kódování, což v praxi znamená rozpohybování grafiky do interaktivní podoby. Tato část je časově nejnáročnější.
Kódování je optimalizováno pro tyto prohlížeče:

  • Internet Explorer 11
  • MS Edge 14+
  • Mozilla Firefox (aktuální verze)
  • Google Chrome (aktuální verze)
  • Apple Safari (iOS 9.3+), Android browser (Andorid 5+)

Součástí jsou i knihovny Bootstrap, Media Queries, JavaScript, Framework jQuery

Programování

Zahrnuje zprovoznění kontaktních formulářů a speciálních technických vychytávek na míru každému webu.

Propojení s redakčním systém 321 WEB

Redakční systém je nástroj, který slouží pro správu obsahu a tvorbu webových stránek nebo blogu. Redakční systémy se používají taktéž pro správu příspěvků, novinek, diskusí, produktů, dokumentů, komentářů, publikování obrázků nebo videí, případně lze v rámci redakčního systému určovat práva jednotlivým uživatelům.

Jelikož se jedná o software vyvinutý našimi programátory, jsme schopni CMS upravit a přizpůsobit Vašim požadavkům.
Více informací ohledně funkčnosti naleznete www.321web.cz

Plnění obsahu

Jakmile je web napojen na CMS redakční systém můžeme začít s plněním obsahu včetně dokumentů ke stažení a všech důležitých informací. Předvyplníme vám také stránku GDPR včetně důležitých právních náležitostí.

 

Responzivní design

Předposledním krokem při realizaci nového webu je vytvoření mobilního - responzivní designu, který zaručuje optimální zobrazení webových stránek na různých zařízeních (mobilní telefony, tablety aj.).

S responzivním designem se musí pracovat již u grafického návrhu webu, kde se určí prioritní elementy k zobrazení na menších obrazovkách.

Testovací provoz

Jakmile je web úspěšně dokončen začínáme s testovacím provozem na našich serverech. Zaměřujeme se na funkčnost, intuitivní navigaci a nastavujeme důležité konverzní a sledovací kody pro rozsáhlejší analytiku.

Dále optimalizujeme rychlost načítání, upravujeme velikost obrázků s převodem na formát WebP a připravujeme web ke zprovoznění na předem vybraném serveru.

FÁZE 4 - Zprovoznění

Přístupy na server a DNS domény

Ze zkušeností doporučujeme shromáždit veškeré přístupy již před zahájením realizace. Vypátrat vlastníka domény včetně přihlašovacích údajů na server bývá mnohdy časově náročné. Prosíme o zaslání přístupů na FTP server včetně MySQL databáze. Při zřizování profesionálního hostingu a nových domén doporučujeme využití služeb www.onebit.cz

Dostupnost volné domény můžete snadno dohledat na www.domena.cz

Záloha starého webu

V případě potřeby zálohujeme starý web.

Zprovoznění webu na požadované doméně

Nový web pustíme do světa na (staro)nové doméně. Stránky také zaindexujeme pro vyhledávače Google a Seznam.

Kontrola analytických a měřících kódů

Zkontrolujeme, zda veškeré měřící a analytické kódy fungují a zasílají data tak, jak mají.

Fakturace 3/3

Při vaší plné spokojenosti s novým webem vystavujeme finální fakturu (poslední třetinu) z celkové částky projektu.

Líbí se Vám náš postup
realizace nového webu?

WWW Studio

FAQ Tvorba webu

UX - User experience

UX uživatelská zkušenost je to, jak se návštěvník na vašem webu cítí. Když na první pokus ví, kudy vede cesta k nějakému cíly. Ať už je to získání informací, nákup na e-shopu a nebo rezervace ubytování. Uživatelská přívětivost není na první pohled viditelná ale je zásadní pro návštěvníka jestli na webu dokončí to, kvůli čemu na web přišel.

Příklady špatného UX designu

  • když na stránkách restaurace hledáte kde se nachází nebo jídelní lístek. Pokud musíte přemýšlet nad tím, kde najdete kontakt nebo jídelní lístek, je to špatně.
  • pokud si na e-shopu vložíte zboží do košíku, které po té chcete odebrat a vložit jiné ale nemůžete najít tlačítko k odebrání. 
  • když si chcete rezervovat ubytování a v každém mezi kroku na vás vyskakuje například bannerová reklama na související služby.

UI - User interface

UI Uživatelské rozhraní, to je to, co vnímá návštěvník na první pohled. Barvy, rozložení prvku na stránce, tlačítka, animace apod. Jsou to všechny prvky na webu, který by měli být v určité harmonii, která bude pro návštěvníka příjemná a zapamatovatelná. Proto je ideální zamyslet se nad vizuální identitou značky, se kterou se pracuje napříc celou firmou od vizitek, přes web až po emailing.

Příklady špatného UI designu

  • špatně čitelný nebo příliš kontrastní text. Například světlé šedý text na bílém pozadí.
  • přehnaně blikající bannery, nekonzistentní grafika.
  • neresponzivita pro mobilní telefony

Interaktivními prvky jsou myšleny dynamické efekty na webu - např. grafika, tlačítka a obrázky reagující na Váš pohyb myši. Patří sem různé vyjížděcí pop-up prvky, počítadla a další vychytávky. Pokud je web dynamický, vytváří interakci s návštěvníkem (UX - User Experience ), která pozitivně ovlivňuje délku setrvání návštěvníka na webu a zvyšuje jeho zájem. A tím i pravděpodobnost konverze návštěvníka na zákazníka.

Dnešní doba je charakteristická neustálým zrychlováním. Jistě nám dáte za pravdu, že málokdo z nás má čas a prostor na pročítání předlouhých odstavců. Hlavním úkolem infografiky je usnadnit čtenářům pojmout různé druhy informací. Použitím vizuálně zajímavých prvků, zvýrazněním a postupným dávkováním informací umožňuje infografika upozornit na ty nejdůležitější informace tak, aby si jich každý všimnul a zapamatoval.

O co jde?

Díky službám Google Maps Vám nabízíme možnost vytvoření vlastní Google mapy, která bude odpovídat grafickému a barevnému řešení Vašeho nového webu. Mapy, kromě přizpůsobení vzhledu, dále umožňují i umístění interaktivních bodů na mapě.

Například lze pomocí různých ikonek vyznačit na mapě Vaše zákazníky, partnery, dodavatele apod. Body zájmu na mapě se vkládají pomocí GPS bodů, můžete tak označit naprosto přesná místa. Například sídlo Vaší firmy.

O co jde?

Call to action prvky - tedy tlačítka "Mám zájem o" a "Chci" jsou nejdůležitějšími nástroji pro vytvoření zákaznické konverze. A tedy i hlavním smyslem při tvorbě nového webu. Aby byla tlačítka funkční a co nejefektněji plnila svůj účel - velmi záleží na jejich barevnosti, kontrastu k pozadí, umístění, sdělení atd.

Proč je to potřeba?

Tlačítka obvykle směřují do objednávkového formuláře, který umožní zákazníkovi objednat službu, případně zjistit více informací.

Někdy jsou však weby pouze prezentační, takže call to action prvky pro Vás nemají význam. Nebo byste naopak kapacitně nezvládali na konverzi zákazníků adekvátně reagovat. Neváhejte proto sdělit, jaký účel potřebujete, aby call to action prvky plnily.

Responzivní design zaručuje optimalizované zobrazení webových stránek na různých zařízeních (mobilní telefony, tablety aj.) S responzivním designem se musí počítat již u grafického návrhu webu, kde se určí prioritní elementy k zobrazení na menších obrazovkách.

Co je to redakční systém?

Redakční systém je software, který slouží pro správu obsahu a tvorbu webových stránek nebo blogu. Redakční systémy se používají taktéž pro správu příspěvků, diskusí , produktů, dokumentů, komentářů, pro publikování obrázků nebo videí, případně lze v rámci redakčního systému určovat práva jednotlivým uživatelům.

Mezi nejčastější redakční systémy webových stránek patří WordpressJoomlaDrupal a Wix. 

Součástí našich webů může být redakční systém, který slouží ke snadné správě obsahu a struktury webu. Systém je navržen s ohledem na snadné a intuitivní ovládání, proto i počítačový laik dokáže se systémem pracovat.

Jelikož se jedná o software vyvinutý našimi programátory, jsme schopni CMS upravit a přizpůsobit Vašim požadavkům.

Video návod jak používat redakční systém zde.

Možnosti redakčního systému

  • přihlášení na základě jména a hesla / změna a nastavení
  • účet pro samostatného uživatele (jméno+heslo - možnost změny)
  • kompletní editace menu + obsahu stránek včetně kontaktů
  • přehled kategorií – zobrazení – přehled – úprava
  • přehled produktů a výrobků – zobrazení – přehled – úprava
  • vkládání vlastního obsahu, obrázků, dokumentů a odkazů na stránky
  • kontaktní formulář - kompletní přehled vložených dotazů
  • vkládání novinek / aktualit / články
  • FAQ / diskuse

Jak to funguje?

Jazykové mutace webu slouží ke korektnímu překladu požadované jazykové verze stránek. Součástí překladu a jazykové mutace webu (multijazyčnost) je překlad url adres, kontaktních formulářů, ale také pojmenování všech obrázků a dostupných souborů  na webu (včetně vyplnění title a alt).

Úspěšně jsme vytvořili a optimalizovali desítky jazykových mutací pro světové vyhledávače v angličtině, němčině, ruštině, francouzštině, italštině a dalších jazycích světa.

Jazykové mutace vytváříme na samostatné doméně. Např.: http://www.xyz.com/ Včetně překlopení redakčního systému s kompletní funkčností a úpravou zdrojového kódu ( i URL adres) pro daný jazyk.

Z hlediska zpracování zakázky je postup následující: vytvoření kompletního webu v jednom jazyce, spuštění webu, následné vytvoření jazykykových mutací, vzájemné propojení všech webů.

Proč vlastní domény?

  • Pro každou jazykovou mutaci je potřeba objednat a zaplatit vlastní doménu a webhosting.
  • Hlavní výhodou je možnost SEO optimalizace pro zahraniční trhy a kompletní supervize nad obsahem. Níže uvádíme několik příkladů pro představu:
  • Japonsko - Yahoo.jp
  • Čína - Baidu.com
  • Rusko - Yandex.ru
  • Itálie - Libero.it
  • Slovensko - Zoznam.sk
  • Německo - Google.de

Co to je?

Sledovací kód Google Analytics (nově GA4) umožňuje analyzovat chování návštěvníků a jejich pohyb, délku setrvání na webu atd. Pomocí Google Analytics můžete také sledovat nárůst návštěvnosti související s novým webem a SEO optimalizací.

Jak to funguje?

Pokud již máte existující web s vlastní doménou, pravděpodobně již máte také založený Google Analytics účet a Váš sledovací kód měří návštěvnost a chování zákazníků na webu. V rámci redesignu stávajícího webu je zajištěno plynulé pokračování tohoto měření.

V případě zcela nového webu (na nově vzniklé doméně) dojde k založení nového Google Analytics účtu a nahrání sledovacího kódu na stránky webu. Vy sami určíte, kdo budou osoby s oprávněným přístupem k tomuto účtu.