Postup realizácie tvorby webu
Pre predstavu o našej spolupráci sme prehľadne spísali jednotlivé fázy a kroky, ktoré vychádzajú z našich dlhoročných skúseností pri tvorbe webov.
Aby vznikol web, ktorý bude nielen skvele vyzerať, ale aj dobre fungovať, je potrebné prejsť všetkými fázami postupne a spoločne zladiť všetky dôležité podklady - informácie o firme, produktoch, službách, referenciách a ďalšie vstupné materiály.
Fáza 1 - Príprava
1.1 Spolupráca
Celým procesom spolupráce vás bude sprevádzať náš projektový manažér/ka, ktorý zabezpečí hladký priebeh realizácie. Kompletný projekt nového webu s vami preberie na osobnej schôdzke alebo formou video hovoru.1.2 Úvodná konzultácia
Predstavíte nám svoj projekt a poviete nám, čo od nového webu očakávate, aké sú vaše požiadavky a ciele. Ak to bude možné, budeme radi, ak vyplníte náš vstupný projektový dotazník.1.3 Orientačná cenová ponuka
Ak si nevyberiete z ponuky troch hlavných cenových balíčkov a počas úvodnej konzultácie zistíme, že máte záujem o individuálne riešenie, navrhujeme začať prvú fázu prípravy nového webu, ktorá zahŕňa analýzu a prípravu zadania. Túto fázu odporúčame predovšetkým v prípade, že nemáte jasnú predstavu o rozsahu.1.4 Základná analýza a príprava zadania
- Workshop a definovanie zadania
Na spoločnom workshope detailne prejdeme vaše požiadavky na nový web, pozrieme sa na dáta z Google Analytics a pripravíme návrh ideálnej zákazníckej cesty – od vstupu na web až po dosiahnutie konverzného cieľa (napr. dopyt). Výstupom bude ucelená správa v PDF, ktorá bude obsahovať kompletné zadanie pre nový web, zoznam odporúčaní, na čo sa zamerať a čomu sa naopak vyhnúť.
- Štruktúra webu (pavúk)
Spoločne tiež navrhneme štruktúru webu a zoznam všetkých URL adries s odporúčaním, ako ich najlepšie optimalizovať z pohľadu SEO. Pavúčia štruktúra webu bude dodaná v prehľadnom a editovateľnom súbore, takže ju budete môcť v prípade potreby jednoducho upraviť.
- Drôtený model (wireframe)
Vytvoríme aj prototyp nového webu (drôtený model – wireframe) stránok, ktorý pomôže vám aj dizajnérom jasne pochopiť rozloženie prvkov na stránke a logiku celého webu. Tieto fázy sú kľúčové, pretože určujú jednoduchosť a intuitívnosť navigácie pre nových aj existujúcich zákazníkov.
1.5 Finálna cenová ponuka
Po vzájomnom odsúhlasení finálneho zadania, štruktúry, drôtového modelu a technickej špecifikácie vám predložíme finálnu individuálnu cenovú ponuku nového webu na mieru.Hlavným ukazovateľom ceny nového webu je jeho rozsah a časová náročnosť. Predovšetkým ide o celkový počet vzorových strán, ktoré musí grafik navrhnúť, kóder vizuálne upraviť a programátor napojiť na redakčný systém.
V prípade zníženia celkového rozsahu cena webových stránok automaticky klesá, ale naopak jeho rozšírenie môže mať vplyv na konečnú cenu webu. Z tohto dôvodu odporúčame prvú fázu projektu, ktorou je analýza rozsahu webu nepodceniť a aktívne sa jej venovať.
Rozsah cenovej ponuky webu:
- Grafický návrh homepage
- Grafický návrh vnútorných strán
- Grafický návrh responzívneho dizajnu
- HTML/CSS kódovanie
- Programátorské práce
- Napojenie na 321 CMS redakčný systém
- Plnenie obsahu webu
- Zprovoznienie webu na serveri
- Tvorba obsahu (texty, video, foto, tabuľky, grafy, ikony)
1.6 Návrh zmluvy o dielo
Po odsúhlasení cenovej ponuky vám zašleme návrh zmluvy o dielo vrátane príloh obsahujúcich špecifikáciu diela, časový harmonogram, jednotlivé termíny realizácie.1.7 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. Pri nevyužití grafického návrhu alebo ukončení projektu je úhrada platby 1/3 nevratná a je považovaná za skicovné.Fáza 2 - Grafický návrh
2.1 Zadanie projektu do 321 INTRA
Kompletná komunikácia aj jednotlivé termíny sú detailne archivované v našom projektovom systéme, do ktorého máte neustály prístup. Prostredníctvom intranetového systému môžete s nami komunikovať, zdieľať podklady a zadávať jednotlivé korektúry.2.2 Odovzdanie podkladov zo strany zákazníka
Základom úspešnej realizácie každého projektu je zhromaždenie všetkých potrebných podkladov. Medzi najdôležitejšie patrí:- firemné logo v krivkách
- logo manuál
- logá partnerov
- kompletné textové podklady (txt., doc.)
- obrázky, fotografie a dokumenty na stiahnutie (1920px)
- videá
Len upozorňujeme, že dodatočne odovzdané podklady a zmeny obsahu môžu mať vplyv na termín dokončenia, ale aj na konečnú cenu projektu.
2.3 Grafický návrh webu
Grafický návrh pre tvorbu nového webu zahŕňa kompletné spracovanie grafického dizajnu, ktorý začína tromi originálnymi návrhmi novej homepage. Na základe výberu jedného z týchto návrhov sa stanoví základný grafický štýl, ktorý bude použitý pre návrh ďalších stránok webu. Tento dizajn zahŕňa aj návrhy bannerov a sprievodných symbolov, ktoré budú korešpondovať s celkovým vizuálnym štýlom. Po odsúhlasení grafických návrhov homepage sa začína s grafikou vnútorných stránok.2.4 Tvorba obsahu
Ak pri tvorbe grafických návrhov zistíme, že nám chýbajú sprievodné fotografie, video slučky alebo obsahové informácie, postaráme sa o ich vytvorenie.2.5 Fakturácia 2/3
Ak ste s grafickým návrhom webu spokojní, môžeme začať s programovaním webu. Podľa obchodných podmienok vystavujeme druhú z troch faktúr.Fáza 3 - Realizácia
3.1 Plnenie obsahu
Pred samotným kódovaním a programovaním je potrebné web naplniť všetkým obsahom. Akonáhle máme všetky texty, fotografie, tabuľky, články a cenníky, kóder môže pracovať s reálnymi dátami, čo nám pomáha šetriť čas aj peniaze pre našich zákazníkov. Takisto vám predvyplníme stránku GDPR, vrátane všetkých potrebných právnych náležitostí.3.2 Programovanie
Zahŕňa sprevádzkovanie kontaktných formulárov a špeciálnych technických vylepšení na mieru každému webu.3.3 HTML / CSS Kódovanie
Po odsúhlasení grafického designu prichádza na rad frontend kódovanie, čo v praxi znamená rozpohybovanie grafiky do interaktívnej podoby. Táto časť 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 (Android 5+)
3.4 Responzívny dizajn
Predposledným krokom pri realizácii nového webu je vytvorenie mobilného - responzívneho dizajnu, ktorý zaručuje optimálne zobrazenie webových stránok na rôznych zariadeniach (mobilné telefóny, tablety a pod.). S responzívnym dizajnom sa musí pracovať už pri grafickom návrhu webu, kde sa určia prioritné elementy na zobrazenie na menších obrazovkách.3.5 Testovacia prevádzka
Akonáhle je web úspešne dokončený, začíname testovaciu prevádzku na našich serveroch. Zameriavame sa na funkčnosť, intuitívnu navigáciu a nastavujeme dôležité konverzné a sledovacie kódy pre rozsiahlejšiu analytiku. Ďalej optimalizujeme rýchlosť načítania, upravujeme veľkosť obrázkov a prevádzame ich do formátu WebP. Web pripravujeme na spustenie na vopred vybranom serveri.Fáza 4 - Spustenie do prevádzky
4.1 Prístupy na server a DNS domény
Z vlastnej skúsenosti odporúčame zhromaždiť všetky prístupy ešte pred začiatkom realizácie. Vypátrať vlastníka domény vrátane prihlasovacích údajov k serveru býva často časovo náročné. Prosíme o zaslanie prístupov na FTP server vrátane MySQL databázy. Dostupnosť voľnej domény si môžete jednoducho overiť na www.domena.sk.
4.2 Záloha starého webu
V prípade potreby zálohujeme starý web.4.3 Spustenie webu na požadovanej doméne
Nový web pustíme do sveta na (staro) novej doméne.4.4 Kontrola analytických a meracích kódov
Skontrolujeme, či všetky analytické a meracie kódy fungujú správne a odosielajú údaje tak, ako majú.4.5 Fakturácia 3/3
Po vašej úplnej spokojnosti s novým webom vystavujeme finálnu faktúru (poslednú tretinu) z celkovej sumy projektu.FAQ Tvorba webu
Príprava kvalitného zadania pre tvorbu e-shopu je kľúčová pre úspešnú realizáciu projektu. Detailné a štruktúrované zadanie poskytne vývojárom jasnú predstavu o vašich požiadavkách a očakávaniach, čo vedie k efektívnemu vývoju a minimalizácii nedorozumení.
Pred samotným návrhom a tvorbou e-shopu vykonávame dôkladnú analýzu, ktorá nám pomáha správne definovať potreby projektu a určiť jeho rozsah. Tento krok je zásadný pre hladký priebeh realizácie a úspešné spustenie e-shopu. Naša analýza zahŕňa nasledujúce fázy:
UX (User Experience) a UI (User Interface) sú dva kľúčové pojmy v oblasti webového a aplikačného dizajnu, ktoré sa často zamieňajú, avšak každý z nich sa zameriava na odlišné aspekty interakcie používateľa s produktom. UX sa zaoberá celkovým dojmom a funkčnosťou používateľskej skúsenosti, zatiaľ čo UI rieši konkrétnu vizuálnu podobu a ovládacie prvky. Oba prístupy sa vzájomne dopĺňajú a spoločne tvoria základ úspešného digitálneho produktu.
Google Analytics je bezplatný nástroj od spoločnosti Google, ktorý umožňuje sledovať a analyzovať návštevnosť a správanie používateľov na vašich webových stránkach. Poskytuje detailné štatistiky o počte návštevníkov, ich demografii, zdrojoch návštevnosti, dĺžke pobytu na stránke a mnohých ďalších ukazovateľoch.
Jazykové mutácie webu sú kľúčové pre efektívnu komunikáciu s medzinárodným publikom a pre rozšírenie dosahu vašich webových stránok na zahraničné trhy. Implementácia viacjazyčného obsahu zahŕňa nielen preklad textov, ale aj technické úpravy pre optimalizáciu vo vyhľadávačoch a zabezpečenie plynulej používateľskej skúsenosti.
Čo je redakčný systém?
Redakčný systém (CMS - Content Management System) je softvér určený na jednoduchú správu obsahu a tvorbu webových stránok alebo blogov. Umožňuje používateľom bez hlbokých technických znalostí efektívne spravovať rôzne typy obsahu, ako sú príspevky, diskusie, produkty, dokumenty, komentáre, obrázky či videá.Vďaka redakčnému systému je možné jednoducho meniť obsah webu bez nutnosti zásahu programátora. Umožňuje tiež nastavenie používateľských práv pre rôzne úrovne prístupu.
Responzívny design je prístup k tvorbe webových stránok, ktorý zabezpečuje ich optimálne zobrazenie a funkčnosť na rôznych zariadeniach, ako sú mobilné telefóny, tablety či stolné počítače. Cieľom je poskytnúť používateľom konzistentný a príjemný zážitok bez ohľadu na veľkosť či rozlíšenie ich obrazovky.
Grafická mapa na webe je interaktívny prvok, ktorý využíva službu Google Maps a umožňuje prispôsobiť vzhľad mapy tak, aby ladila s dizajnom a farebnou schémou vášho webu. Týmto spôsobom sa mapa stáva nielen funkčným nástrojom, ale aj estetickou súčasťou webovej prezentácie.
Infografika je vizuálny nástroj, ktorý kombinuje text, grafiku a dizajnové prvky s cieľom efektívne a prehľadne odovzdať komplexné informácie. V dnešnej uponáhľanej dobe, keď čitatelia nemajú čas na dlhé texty, infografika umožňuje rýchle pochopenie a zapamätanie kľúčových odkazov.
Interaktívne prvky sú dôležitou súčasťou moderných webových stránok, pretože zvyšujú zapojenie používateľov a zlepšujú ich celkovú skúsenosť. Pomáhajú návštevníkom lepšie sa orientovať, motivujú ich k interakcii a môžu výrazne prispieť k vyššej konverzii.