POSTUP REALIZÁCIE TVORBY DEVELOPERSKÉHO WEBU

 

Pre bližšiu predstavu o priebehu spolupráce si Vám dovoľujeme rozpísať jednotlivé kroky, ktoré vychádzajú z mnohoročných skúseností pri vytváraní nových developerských webov.

Aby sme pre Vás vytvorili perfektný developerský web, nielen po grafickej stránke, je nutné dodržať jednotlivé na seba nadväzujúce kroky a predovšetkým zjednotiť čo najviac podkladov týkajúcich sa firmy, detailov projektu a všetkých informacií, ktoré sa majú na webe objaviť.

 

FÁZA 1 - Príprava

Spolupráca

Celým procesom spolupráce Vás bude sprevádzať náš projektový manažér, ktorý zaistí hladký priebeh realizácie. Kompletný projekt nového webu s Vami preberie na osobnej schôdzke alebo formou konferenčného hovoru.

Zadanie projektu

Predstavíte nám svôj projekt a poviete nám, čo od nového webu očakáváte. My navrhneme ideálne riešenie. Dohodneme sa tak na rozsahu a technickom prevedení.

Základná analýza rozsahu webu

V tomto kroku sa zameriavame na analýzu rozsahu webu - sitemapu (mapa stránok), ktorá určí celkový počet typových stránok. Keďže nie je možné bez podrobnejšieho zadania určiť koncovú cenu projektu, vždy sa snažíme analyzovať rozsah webu (počet stránok, bytov / domov / etáp, atd.) a vytvoriť tak jednoduchú a prehľadnú štruktúru stránok pre intuitívnu navigáciu návštěvníkov. Samotná analýza určí rozsah webu a technickú zložitosť, čo má vplyv na cenu webu.

Cenová ponuka

Hlavným ukazovateľom ceny nového webu je jeho rozsah - mapa webu. Predovšetkým sa jedná o celkový počet typových strán, ktoré musí grafik navrhnúť, kóder nastylovať a programátor napojiť na redakčný systém.
V prípade zníženia celkového rozsahu, cena automaticky klesá, ale naopak jeho rozšírenie môže mať vplyv na konečnú cenu webu. Z tohto dôvodu doporučujeme prvú fázu projektu, ktorou je analýza rozsahu webu nepodceniť a aktívne sa jej venovať.

ROZSAH CENOVEJ PONUKY WEBU

- Analýza projektu
- Sitemapa / Návrh mapy webu
- Wireframe / Návrh interaktívnej štruktúry webu

- Grafický návrh loga a nastavenie základného vizuálneho štýlu projektu
- Grafický návrh homepage
- Grafický návrh vnútorných strán / Kariet bytov
- Grafický návrh responzívneho designu
- HTML/CSS kódovanie
- Programátorské práce
- Napojenie 321 CMS redakčného systému
- Plnenie obsahu webu
- Sprevádzkovanie webu na servere

Zmluva o dielo vrátane stanovania termínov

Po odsúhlasení cenovej ponuky Vám pošleme návrh zmluvy o dielo vrátane príloh obsahujúcich špecifikáciu diela, časový harmonogram, jednotlivé termíny a technickú špecifikáciu.

Fakturácia 1/3

Pri podpise zmluvy Vám bude automaticky vygenerovaná proforma faktúra vo výške 1/3 z celkovej čiastky projektu. Dňom úhrady štartuje realizácia nového webu.

FÁZA 2 – Návrh

Zadanie projektu do 321 INTRA

Kompletná komunikácia, ako aj jednotlivé termíny sú detailne archivované v našom projektovom systéme, ku ktorému máte neustály prístup. Prostredníctvom intranetového systému s nami môžete komunikovať, zdieľať podklady a zadávať jednotlivé korektúry.

Predanie podkladov zo strany zákazníka

Základom úspěšnej realizácie každého developerského projektu je zhromaždenie všetkých potrebných podkladov, medzi nejdôležitejšie patrí:

- firemné logo vo vektoroch vrátane logo manuálu + ďalšie logá, ktoré se majú na webe zobraziť
- kompletné textové podklady (txt. doc.)
- vizualizácia projektu, obrázky a dokumenty na stiahnutie (.jpg, .png) ideálne vo vysokom rozlíšení, ktoré sú použité pre interaktívne SVG a navigáciu v rámci domu
- karty bytov s pôdorysmi bytu v krivkách
- pôdorysy poschodí v krivkách
- štandardy v PDF
- kompletnú a finálnu verziu cenníku

Všetky podklady, ktoré z Vašej strany neobdržíme si radi zaistíme sami. Len upozorňujeme, že dodatečne predané podklady a zmeny obsahu môžu mať vplyv na termín dokončenia, ale i na konečnú cenu projektu

 

Analýza projektu

V nadväznosti na predanie podkladov sa pustíme do podrobnej analýzy projektu. Obvykle sa zameriavame na:

- analýzu podkladov / rozsahu
- analýzu stávajúceho riešenia
- analýzu prístupnosti
- analýzu cieľovej skupiny
- definíciu konverzie / konverzné cesty
- analýzu konkurencie

 

Štruktúra webu

Z výsledkov analýzy navrhneme ideálnu štruktúru webu (schéma - pavúkový rozkres mapy stránok), ktorá bude definovať celkový rozsah nového projektu a hlavného menu. Po odsúhlasení štruktúry sa púšťame do prípravy interaktívneho, dráteného modelu.

 

Wireframe webu

Aby došlo k splneniu požadovaných konverzných cieľov je nutné navrhnúť ideálnu štruktúru nového webu.
To všetko je potreba premyslieť skôr, než sa pustíme do grafického návrhu. Významnou prednosťou tejto aktivity je fakt, že v drátenom modeli je možné veľmi jednoducho robiť zmeny, keďže sa jedná o funkčný interaktívny prototyp webu (funkčný web bez grafiky).

 

Grafický návrh

Grafický návrh webu obsahuje kompletné spracovnie grafického designu, obsahuje 3 originálne homepage. Na základe vybraného favorita sa tvorí základný grafický štýl pre ďalšie stránky, návrh bannerov a doprovodných symbolov, prehľad fotografií, úprava zaslaných podkladov a veľkosti fotografií, úprava veľkosti a barevnosti logotypov.

- Grafický návrh homepage
/ korektúry / odsúhlasenie
- Grafický návrh vnútorných strán
/ korektúry / odsúhlasenie
- Grafický návrh ikon, kontaktných formulárov
/ korektúry / odsúhlasenie
- Grafický návrh responzívneho designu
/ korektúry / odsúhlasenie

Fakturácia 2/3

Ak ste s návrhom spokojní, vystavujeme druhú z troch faktúr.

FÁZE 3 - Realizácia

 

HTML/CSS Kódovanie

Po odsúhlasení grafického designu prichádza na radu frontend kódovanie, čo v praxi znamená rozpohybovanie grafiky do interaktívnej podoby. Táto čásť je časovo najnáročnejšia.
Kódovanie je optimalizované pre tieto prehliadače:

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

Súčasťou sú i knižnice Bootstrap, Media Queries, JavaScript, Framework jQuery

Programovanie

Zahŕňa sprevádzkovanie kontaktných formulárov, prepojenie interaktívnych SVG k intuitívnemu pohybu v rámci domu, poschodí a bytov, a špeciálnych technických vychytávok na mieru každému webu

Prepojenie s redakčným systémom 321 WEB

Redakčný systém je software, ktorý slúži na správu obsahu a tvorbu webových stránok alebo blogu. Redakčné systémy sa používajú aj na správu príspevkov, diskusií, produktov, dokumentov, komentárov, publikovanie obrázkov alebo videí, prípadne je možné v rámci redakčného systému určovať práva jednotlivým užívateľom.

Keďže sa jedná o software vyvinutý našimi programátormi, sme schopní CMS upraviť a prispôsobiť Vašim požiadavkám.
Viac informácií ohľadne funkčnosti nájdete na www.321web.cz

Plnenie obsahu

Na web nasypeme kompletný obsah, vrátane dokumentov na stiahnutie a všetkých dôležitých informácií.

 

Responzívny design

Responzívny design zaručuje optimálne zobrazenie webových stránok na rôznych zariadeniach (mobilné telefóny, tablety aj.). S responzívnym designom sa musí počítať už pri grafickom návrhu webu, kde se určia prioritné elementy k zobrazeniu na menších obrazovkách.

Testovanie

Akonáhle je developerský web úspešne dokončený začíname s testovacou prevádzkouna našich serveroch. Zameriavame sa na funkčnosť, intuitívnu navigáciu a nastavujeme dôležité konverzné a sledovacie kódy k rozsiahlej analytike.

Ďalej optimalizujeme rýchlosť načítania a pripravujeme web na sprevádzkovanie.

FÁZA 4 - Sprevádzkovanie

Prístupy na server a DNS domény

Zo skúseností doporučujeme zhromaždiť všetky prístupy už pred zahájením realizácie. Vypátrať vlastníka domény vrátane prihlasovacích údajov na server býva často časovo náročné. Prosíme o zaslanie prístupov na FTP server vrátane MySQL databázy. Pri zriaďovaní profesionálneho hostingu a nových domén doporučujeme využitie služieb www.onebit.cz

Dostupnosť voľnej domény môžete jednoducho dohľadať na www.domena.cz

Záloha starého webu

V prípade potreby zálohujeme starý web.

 

Sprevádzkovanie webu na požadovanej doméne

Nový web pustíme do sveta na (staro)novej doméne.

Kontrola analytických a meracích kódov

Skontrolujeme, či všetky meracie a analytické kódy fungujú a komunikujú napr. s Google Analytics tak, ako majú.

Fakturácia 3/3

Poslednou časťou je doplatenie poslednej tretiny z celkovej ceny projektu.

Súhlasíte s postupom
a chcete zadať nový projekt?

WWW Štúdio

FAQ Tvorba webu

Grafický návrh webu obsahuje kompletné spracovanie grafického designu celého webu, grafický návrh 3 typových stránok homepage, základný grafický štýl pre ďalšie stránky, návrh bannerov a doprovodných symbolov, prehľad fotografií, produktov a výrobkov, úprava zaslaných podkladov a veľkosti fotografií, úprava veľkosti a farebnosti logotypov. Viac informácií dostávate v úvodnom e-maili.

Interaktívnymi prvkami sú myslené dynamické efekty na webe - napr. grafika, tlačítka a obrázky reagujúce na Váš pohyb myši. Patria sem rôzne pop-up prvky, počítadlá a ďalšie vychytávky. Ak je web dynamický, vytvára interakciu s návštevníkom (UX - User Experience ), ktorá pozitívne ovplyvňuje dĺžku zotrvania návštevníka na webe a zvyšuje jeho záujem. A tým aj pravdepodobnosť konverzie návštevníka na zákazníka.

Dnešná doba je charakteristická neustálym zrýchľovaním. Určite nám dáte za pravdu, že málokto z nás má čas a priestor na čítanie dlhých odstavcov. Hlavnou úlohou infografiky je uľahčiť návštevníkom pochopiť a nasať rôzne druhy informácií. Použitím vizuálne zaujímavých prvkov, zvýraznením a postupným dávkovaním informácií umožňuje infografika upozorniť na tie najdôležitejšie informácie tak, aby si ich každý všimol a zapamätal.

O čo ide?

Vďaka službám Google Maps Vám ponúkame možnosť vytvorenia vlastnej Google mapy, ktorá bude zodpovedať grafickému a farebnému riešeniu Vášho nového webu. Mapy, okrem prispôsobenia vzhľadu, ďalej umožňujú i umiestnenie interaktívnych bodov na mape.

Napríklad je možné pomocou rôznych ikon vyznačiť na mape Vašich zákazníkov, partnerov, dodávateľov apod. Body záujmu na mape sa vkladajú pomcou GPS bodov, môžete tak označiť presné miesta. Napríklad sídlo Vašej firmy.

O čo ide?

Call to action prvky - teda tlačidlá "Mám záujem o" a "Chcem" sú najdôležitejšie nástroje k vytvoreniu zákazníckej konverzie. A teda aj hlavným zmyslom pri tvorbe nového webu. Aby boli tlačidlá funkčné a čo najefektívnejšie plnili svôj účel - veľmi záleží na ich farebnosti, kontraste k pozadiu, umiestnení, zdelení atd.

Prečo je to potrebné?

Tlačidlá obvykle smerujú do objednávkového formulára, ktorý umožní zákazníkovi objednať službu, prípadne zistiť viac informácií.

Niekedy sú však weby iba prezentačné, takže call to action prvky pre Vás nemajú význam. Alebo by ste naopak kapacitne nezvládali na konverzie zákazníkov adekvátne reagovať. Neváhajte nám preto zdeliť, aký účel potrebujete, aby call to action prvky plnily.

Responzívny design zaručuje optimalizované zobrazenie webových stránok na rôznych zariadeniach (mobilné telefóny, tablety ai.) S responzívnym designom sa musí počítať už pri grafickom návrhu webu, kde sa určia prioritné elementy k zobrazeniu na menších obrazovkách.

Čo je to redakčný systém?

Redakčný systém je software, ktorý slúži pre správu obsahu a tvorbu webových stránok alebo blogu. Redakčné systémy sa používajú aj pre správu príspevkov, diskusií , produktov, dokumentov, komentárov, pre publikovanie obrázkov alebo videí, prípadne je možné v rámci redakčného systému určovať práva jednotlivým užívateľom.

Medzi najčastejšie redakčné systémy webových stránok patrí WordpressJoomlaDrupal a Wix. 

Súčasťou našich webov môže byť redakčný systém, ktorý slúži k jednoduchej správe obsahu a štruktúry webu. Systém je navrhnutý s ohľadom na jednuché a intuitívne ovládanie, preto i počítačový laik dokáže so systémom pracovať.

Keďže sa jedná o software vyvinutý našimi programátormi, sme schopní CMS upraviť a prispôsobiť Vašim požiadavkám.

Video návod ako používať redakčný systém nájdete tu.

Možnosti redakčného systému

  • prihlásenie na základe mena a hesla / zmena a nastavenie
  • účet pre samostatného užívateľa (méno + heslo - možnosť zmeny)
  • kompletná editácia menu + obsahu stránok vrátane kontaktov
  • prehľad kategórií – zobrazenie – prehľad – úprava
  • prehľad produktov a výrobkov – zobrazenie – prehľad – úprava
  • vkladanie vlastného obsahu, obrázkov, dokumentov a odkazov na stránky
  • kontaktný formulár - kompletný prehľad vložených dotazov
  • vkladanie novinek / aktualít / článkov
  • FAQ / diskusia

Ako to funguje?

Jazykové mutácie webu slúžia na korektný preklad požadovanej jazykovej verzie stránok. Súčasťou prekladu a jazykovej mutácie webu (multijazyčnosť) je preklad url adries, kontaktných formulárov, ale aj pomenovanie všetkých obrázkov a dostupných súborov na webe (vrátane vyplnenia title a alt).

Úspešne sme vytvorili a optimalizovali desiatky jazykových mutácií pre svetové vyhľadávače v angličtine, nemčine, ruštine, francúzštine, taliančine a ďalších jazykoch sveta.

Jazykové mutácie vytvárame na samostatnej doméne. Napr.: http://www.xyz.com/ Vrátane preklopenia redakčného systému s kompletnou funkčnosťou a úpravou zdrojového kódu ( i URL adries) pre daný jazyk.

Z hľadiska spracovania zákazky je postup nesledujúci: vytvorenie kompletného webu v jednom jazyku, spustenie webu, následné vytvorenie jazykykových mutácií, vzájomné prepojenie všetkých webov.

Prečo vlastné domény?

  • Pre každú jazykovú mutáciu je potrebné objendať a zaplatiť vlastnú doménu a webhosting.
  • Hlavnou výhodou je možnosť SEO optimalizácie pre zahraničné trhy a kompletná supervízia nad obsahem. Nižšie uvádzame niekoľko príkladov pre predsatvu:
  • Japonsko - Yahoo.jp
  • Čína - Baidu.com
  • Rusko - Yandex.ru
  • Taliansko - Libero.it
  • Slovensko - Zoznam.sk
  • Nemecko - Google.de

Čo ponúkame?

Používate k propagácii na internete sociálne siete? Ak máte založené profily, ponúkame Vám možnosť prepojenia webu s Vašimi účtami.

Ak sociálne siete aktívne nepoužívate, ale máte záujem o prepojenie...
Štandardne Vám v rámci tejto služby ponúkame založenie firemného facebookového účtu so základným nastavením stránky a naplnením obsahu v grafickom štýle nového webu = úvodný obrázok, profilový obrázok a niekoľko príspevkov.*

Nezaoberáme sa tvorbou obsahu na sociálnych sieťach

*V prípade záujmu o aktívne používanie Vášho firemného profilu na Facebooku nastavíme správcom účtu oprávnenú osobu z Vašej firmy - následný obsah si už môžete pridávať a spravovať sami.

Čo to je?

Sledovací kód Google Analytics umožňuje analyzovať chovanie návštevníkov a ich pohyb, dĺžku ich zotrvania na webe atd. Pomocou Google Analytics môžete aj sledovať nárast návštevnosti súvisiaci s novým webem a SEO optimalizáciou.

Ako to funguje?

Ak už máte existujúci web s vlastnou doménou, pravdepodobne už máte aj založený Google Analytics účet a Váš sledovací kód meria návštevnosť a chovanie zákazníkov na webe. V rámci redesignu stávajúceho webu je zaistené plynulé pokračovanie tohto merania.

V prípade úplne nového webu (na novo-vzniknutej doméne) dôjde k založeniu nového Google Analytics účtu a nahraniu sledovacieho kódu na stránky webu. Vy sami určíte, kto budú osoby s oprávneným prístupom k tomuto účtu.

UX - User experience

UX užívateľská skúsenosť je to, ako sa návštevník na vašom webe cíti. Keď na prvý pokus vie, kadiaľ vedie cesta k nejakému cieľu. Či už je to získanie informácií, nákup na e-shope alebo rezervácia ubytovania. Užívateľská prístupnosť nie je na prvý pohľad viditeľná, ale je zásadná pre návštevníka, či na webe dokončí to, kvôli čomu na web prišiel.

Príklady zlého UX designu

  • keď na stránkach reštaurácie musíte premýšľať nad tým, kde nájsť kontakt alebo jedálny lístok.
  • ak si na e-shope vložíte tovar do košíka, ktoré potom chcete odobrať, ale nemôžete nájsť tlačidlo na odobranie. 
  • keď si chcete rezervovať ubytovanie a v každom medzi kroku na vás vyskakuje napríklad bannerová reklama na súvisiace služby.

UI - User interface

UI Užívateľské rozhranie, to je to, čo vníma návštevník na prvý pohľad. Farby, rozloženie prvkov na stránke, tlačidlá, animácie apod. Sú to všetky prvky na webe, ktoré by mali byť v určitej harmónii, ktorá bude pre návštevníka príjemná a zapamätateľná. Preto je ideálne zamyslieť sa nad vizuálnou identitou značky, s ktorou sa pracuje naprieč celou firmou od vizitek, cez web až po emailing.

Príklady zlého UI designu

  • ťažko čitateľný alebo príliš kontrastný text. Napríklad svetlo šedý text na bielom pozadí.
  • prehnane blikajúce bannery, nekonzistentná grafika.
  • neresponzivita pre mobilné telefóny