Postup realizace developerského webu
Abychom vám co nejlépe přiblížili, jak spolupráce probíhá, připravili jsme přehled jednotlivých kroků vycházející z naší dlouholeté praxe při tvorbě webů pro developerské projekty.
Naším cílem není jen esteticky působivý web - chceme vytvořit funkční a přehledný online nástroj, který bude obsahovat všechny důležité detaily o vaší firmě, kartách bytů, popisu projektu a dalších klíčových informacích. Pro dosažení tohoto cíle je nezbytné projít na sebe navazující kroky a sjednotit co nejvíce podkladů již v přípravné fázi.
Fáze 1 - Příprava
1.1 Spolupráce
Celým procesem spolupráce vás bude provázet náš projektový manažer Martin nebo Adam, 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.1.2 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í.1.3 Základní analýza rozsahu webu
V tomto kroku se zaměřujeme na analýzu rozsahu webu - sitemapu (mapa stránek), která určí celkový počet typových stránek. Jelikož nelze bez podrobnějšího zadání určit koncovou cenu projektu, vždy se snažíme analyzovat rozsah webu (počet stránek, bytů / domů / etap, atd.). Díky tomu vytvoříme jednoduchou a přehlednou strukturu stránek pro intuitivní navigaci návštěvníků. Samotná analýza určí rozsah webu a technickou složitost, což má vliv na cenu webu.1.4 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 webových stránek 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
1.5 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.1.6 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.Fáze 2 - Návrh
2.1 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.2.2 Předání podkladů ze strany zákazníka
Základem úspěšné realizace každého developerského projektu je shromáždění všech potřebných podkladů, mezi nejdůležitější patří:- firemní logo ve vektorech včetně logo manuálu + další loga, která se mají na webu zobrazit
- kompletní textové podklady (txt. doc.)
- vizualizace projektu, obrázky a dokumenty ke stažení (.jpg, .png) ideálně ve vysokém rozlišení, které jsou použity pro interaktivní SVG a navigaci v rámci domu
- karty bytů s půdorysy bytu ve křivkách
- půdorysy pater ve křivkách
- standardy v PDF
- kompletní a finální verze ceníku
2.3 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
2.4 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).2.5 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).
2.6 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í
2.7 Fakturace 2/3
Pokud jste s návrhem spokojeni, vystavujeme druhou ze tří faktur.Fáze 3 - Realizace
3.1 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+)
3.2 Programování
Zahrnuje zprovoznění kontaktních formulářů, propojení interaktivních SVG pro intuitivní pohyb v rámci domu, pater a bytů, a speciálních technických vychytávek na míru každému webu.3.3 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
3.4 Plnění obsahu
Na web nasypeme kompletní obsah, včetně dokumentů ke stažení a všech důležitých informací.3.5 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.
3.6 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í
4.1 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.4.2 Záloha starého webu
V případě potřeby zálohujeme starý web.4.3 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.4.4 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í.4.5 Fakturace 3/3
Poslední částí je doplacení poslední třetiny z celkové ceny projektu.FAQ Tvorba webu
Příprava kvalitního zadání pro tvorbu e-shopu je klíčová pro úspěšnou realizaci projektu. Detailní a strukturované zadání poskytne vývojářům jasnou představu o vašich požadavcích a očekáváních, což vede k efektivnímu vývoji a minimalizaci nedorozumění.
Před samotným návrhem a tvorbou e-shopu provádíme důkladnou analýzu, která nám pomáhá správně definovat potřeby projektu a určit jeho rozsah. Tento krok je zásadní pro hladký průběh realizace a úspěšné spuštění e-shopu.
Naše analýza zahrnuje následující fáze:
UX (User Experience) a UI (User Interface) jsou dva klíčové pojmy v oblasti webového a aplikačního designu, které se často zaměňují, avšak každý z nich se zaměřuje na odlišné aspekty interakce uživatele s produktem. UX se zabývá celkovým dojmem a funkčností uživatelského zážitku, zatímco UI řeší konkrétní vizuální podobu a ovládací prvky. Oba přístupy se vzájemně doplňují a společně tvoří základ úspěšného digitálního produktu.
Google Analytics je bezplatný nástroj od společnosti Google, který umožňuje sledovat a analyzovat návštěvnost a chování uživatelů na vašich webových stránkách. Poskytuje detailní statistiky o počtu návštěvníků, jejich demografii, zdrojích návštěvnosti, délce pobytu na stránce a mnoha dalších ukazatelích.
Jazykové mutace webu jsou klíčové pro efektivní komunikaci s mezinárodním publikem a pro rozšíření dosahu vašich webových stránek na zahraniční trhy. Implementace vícejazyčného obsahu zahrnuje nejen překlad textů, ale i technické úpravy pro optimalizaci ve vyhledávačích a zajištění hladkého uživatelského zážitku.
Co je redakční systém?
Redakční systém (CMS - Content Management System) je software určený k jednoduché správě obsahu a tvorbě webových stránek nebo blogů. Umožňuje uživatelům bez hlubokých technických znalostí efektivně spravovat různé typy obsahu, jako jsou příspěvky, diskuse, produkty, dokumenty, komentáře, obrázky nebo videa.Díky redakčnímu systému je možné jednoduše měnit obsah webu bez nutnosti zásahu programátora. Umožňuje také nastavení uživatelských práv pro různé úrovně přístupu.
Responzivní web zajišťuje, aby se webové stránky správně zobrazovaly a pohodlně používaly na všech zařízeních, od mobilních telefonů a tabletů až po stolní počítače. Obsah a jednotlivé prvky webu se automaticky přizpůsobují velikosti a rozlišení obrazovky, díky čemuž mají uživatelé vždy přehledný a příjemný zážitek.
Tvorba webových stránek by měla spojovat moderní design, přehlednou strukturu a snadné ovládání. Každý firemní web na míru proto navrhujeme podle konkrétních potřeb společnosti, jejího oboru i cílové skupiny. Výsledkem je rychlý, responzivní a funkční web, který podporuje důvěryhodnost značky, prezentuje služby a pomáhá získávat nové zákazníky.
Grafická mapa na webu je interaktivní prvek, který využívá službu Google Maps a umožňuje přizpůsobit vzhled mapy tak, aby ladila s designem a barevným schématem vašeho webu. Tímto způsobem se mapa stává nejen funkčním nástrojem, ale i estetickou součástí webové prezentace.
Infografika je vizuální nástroj, který kombinuje text, grafiku a designové prvky s cílem efektivně a přehledně předat komplexní informace. V dnešní uspěchané době, kdy čtenáři nemají čas na dlouhé texty, infografika umožňuje rychlé pochopení a zapamatování klíčových sdělení.
Interaktivní prvky jsou důležitou součástí moderních webových stránek, protože zvyšují zapojení uživatelů a zlepšují jejich celkovou zkušenost. Pomáhají návštěvníkům lépe se orientovat, motivují je k interakci a mohou výrazně přispět k vyšší konverzi.