Jak probíhá tvorba webu: 7 kroků od prvního hovoru po spuštění

Loni na podzim zavolal Marek, majitel středně velké pražské logistické firmy. Potřeboval nový web. A měl z toho hrůzu.

Před dvěma lety si nechal udělat web u jiné agentury. Projekt měl trvat šest týdnů. Trval pět měsíců. Komunikace probíhala přes chaotické e-mailové vlákna, kde se ztrácel kontext. Marek nevěděl, co se zrovna děje, co od něj agentura potřebuje, ani kdy bude hotovo. Výsledek byl web, který vypadal jako šablona s nalepenými texty. Marek zaplatil 180 000 Kč a po roce začal hledat znovu.

Když přišel k nám, jeho první otázka nebyla o ceně ani o designu. Zeptal se: „Můžete mi říct přesně, co se bude dít a kdy?“

Mohl. A řekl jsem mu, že za osm týdnů bude mít web, který nejen vypadá profesionálně, ale skutečně generuje poptávky. Řekl jsem mu taky, co od něj budeme potřebovat, v jakých momentech bude schvalovat, a co se stane, když se mu něco nebude líbit. Žádná překvapení.

Markův web jsme spustili za 7 týdnů a 3 dny. Během prvních tří měsíců po spuštění mu web přinesl o 40 % víc vyplněných poptávkových formulářů než ten předchozí. Ne proto, že bychom byli géniové. Proto, že jsme měli jasný proces a Marek přesně věděl, co se děje.

Tenhle článek popisuje přesně ten proces. Sedm kroků, kterými procházíme s každým klientem od prvního hovoru po den spuštění. Žádná teorie, žádné buzzwordy. Konkrétní postup s reálnými časovými rámci, abyste věděli, co očekávat, ještě než se rozhodnete.

Krok 1: Bezplatná konzultace (den 1)

Všechno začíná jedním hovorem. Trvá 30 až 45 minut a je zdarma. Žádný závazek, žádné poplatky za „úvodní analýzu.“

Na tomhle hovoru nás zajímá několik věcí. Co vaše firma dělá a pro koho. Jaký problém by měl nový web řešit: chcete víc poptávek, potřebujete profesionálnější prezentaci, nebo vás současná technologie brzdí? Jestli máte existující web a co na něm funguje a co ne. A jaký máte rozpočet a časový rámec, protože bez těchto dvou informací nedokážeme posoudit, jestli jsme pro vás správná volba.

Tady je věc, kterou říkám každému: nehodíme se pro všechny. Pokud potřebujete jednoduchý jednostránkový web za 20 000 Kč, existují levnější řešení, která vám budou stačit. Klidně doporučíme konkrétní alternativy. Nemá smysl platit za tvorbu webu na míru, když to vaše situace nevyžaduje. Upřímnost na začátku šetří čas oběma stranám.

Pokud se na hovoru shodneme, že spolupráce dává smysl, do tří pracovních dnů pošleme cenovou nabídku s rozpisem fází, časovým harmonogramem a přesnou cenou. Žádné „od 50 000 Kč“ bez horní hranice. Pevná cena za jasně definovaný rozsah.

Co klient vidí: Cenovou nabídku v PDF s rozpisem jednotlivých fází, cenou za každou fázi a celkovým harmonogramem. Žádné překvapení.

Co klient schvaluje: Rozsah projektu a rozpočet.

Krok 2: Strategie a sitemap (týden 1)

Tady se rozhoduje o úspěchu celého projektu. A tady většina agentur šlápne vedle, protože tuhle fázi přeskočí.

Než někdo otevře Figmu nebo napíše řádek kódu, potřebujeme odpovědi na strategické otázky. Kdo jsou vaši hlavní zákazníci a co hledají? Jakou akci má návštěvník na webu udělat? Jaké stránky potřebujete a jak spolu souvisejí? Kde budou hlavní vstupní body z vyhledávačů?

Výstupem je sitemap, tedy kompletní mapa stránek webu s hierarchií a vzájemnými vazbami. Ale ne jen seznam stránek. Ke každé stránce definujeme její účel (informační, konverzní, podpůrná), hlavní SEO klíčová slova a jakou akci na ní chceme od návštěvníka.

Pokud nahrazujeme existující web, v téhle fázi děláme taky mapování přesměrování. Každá stará URL, která má návštěvnost nebo zpětné odkazy, dostane svůj nový ekvivalent. Přeskočení tohoto kroku stojí firmy měsíce ztracené organické návštěvnosti. Viděli jsme to mnohokrát a podrobně to rozebíráme v článku o technickém SEO při spuštění webu.

Co klient vidí: Vizuální mapu stránek (sitemap) a strategický dokument s definicí cílů pro každou stránku.

Co klient schvaluje: Strukturu webu, počet stránek a jejich účel. Tohle je poslední moment, kdy změna struktury nic nestojí.

Typická délka: 3-5 pracovních dní.

Krok 3: Wireframing (týden 2)

Wireframe je drátěný model stránky. Černobílé schéma, které ukazuje, co bude na stránce, v jakém pořadí a jak velký prostor to zabere. Žádné barvy, žádné obrázky, žádné finální texty. Čistá struktura.

Proč to děláme? Protože diskutovat o rozmístění obsahu je jednodušší, když se nikdo nerozptyluje barvami. Když klient vidí barevný design, jeho pozornost přirozeně sklouzne k vizuálním detailům: „Mohl by být nadpis větší? Co takhle jiný odstín modré?“ Wireframe nutí soustředit se na to podstatné: je správná informace na správném místě?

Wireframy děláme pro všechny klíčové typy stránek: homepage, hlavní stránku služby nebo produktu, kontaktní stránku a jednu typovou podstránku. Pokud má web specifické funkce (kalkulačka, filtrování, klientský portál), wireframujeme i ty.

Každý wireframe obsahuje reálné nebo blízké reálným texty. Žádné „Lorem ipsum.“ Lorem ipsum maskuje problémy, které se objeví, až když tam napíšete skutečný nadpis o 80 znacích místo pěti slov placeholder textu. Pracujeme s reálným obsahem od začátku, protože obsah určuje design, ne naopak.

Co klient vidí: Wireframy v nástroji, kde může přímo komentovat jednotlivé sekce. Každý wireframe je opatřený poznámkami vysvětlujícími, proč jsou prvky rozmístěny tak, jak jsou.

Co klient schvaluje: Strukturu a rozložení obsahu na každé stránce. Po schválení wireframů se mění jen vizuální styl, ne co kde je.

Typická délka: 3-5 pracovních dní včetně jednoho kola revizí.

Krok 4: UI design ve Figma (týdny 3-4)

Teď přichází moment, na který se klienti těší nejvíc. Wireframy dostávají barvy, typografii, obrázky a identitu značky. Designujeme v Figmě, což je profesionální návrhový nástroj, ke kterému má klient přístup přes prohlížeč. Žádné instalace, žádné posílání PDF sem a tam.

Design začínáme od komponentového systému. Definujeme barvy, typografickou škálu, tlačítka, formulářové prvky, karty a další stavební bloky. Z těchto komponent pak skládáme jednotlivé stránky. Tenhle přístup zajistí, že celý web působí konzistentně, a zároveň výrazně urychlí pozdější vývoj.

Každý design je od začátku responzivní. Neděláme jen desktopovou verzi a pak „nějak“ zmenšíme na mobil. Navrhujeme desktop i mobilní verzi paralelně, protože u většiny firemních webů dnes přichází 50-70 % návštěvníků z mobilních zařízení. UI/UX musí fungovat na obou.

Klient má v této fázi dvě kola revizí zahrnutá v ceně. Obvykle stačí jedno. Na prvním kole řekneme: „Tady je direction, řekněte nám, co vám sedí a co ne.“ Na druhém doladíme detaily. Pokud se client a designer shodnou na wireframech v kroku 3, design obvykle sedne rychle, protože strukturální otázky jsou už vyřešené.

Upřímná poznámka: občas klient chce design, který podle nás nebude fungovat. Třeba tmavé pozadí s šedým textem, protože to „vypadá sofistikovaně.“ Nebo animaci na každém prvku, protože to viděl na webu nějakého startupu ze Silicon Valley. V takových případech řekneme svůj názor přímo. Klient má poslední slovo, ale naše práce je upozornit na rizika. Neřekneme „jasně, uděláme cokoli chcete,“ protože to není služba, ale servilita.

Co klient vidí: Kompletní design v Figmě s interaktivním prototypem, kde si může proklikat klíčové scénáře. Desktop i mobilní verze.

Co klient schvaluje: Vizuální styl, barevnost, typografii a celkový dojem webu.

Typická délka: 5-8 pracovních dní včetně dvou kol revizí.

Krok 5: Vývoj (týdny 4-6)

Po schválení designu začíná programování. Stavíme na moderních technologiích, primárně na frameworku Nuxt (Vue.js), protože nám dává kontrolu nad výkonem, SEO a škálovatelností od prvního řádku kódu.

Vývoj probíhá v krátkých iteracích podle principů agile. V praxi to znamená, že klient nevidí výsledek až po třech týdnech, ale průběžně. Obvykle po prvním týdnu vývoje zpřístupníme testovací verzi webu na dočasné adrese, kde klient může sledovat postup v reálném čase.

Během vývoje řešíme několik věcí paralelně. Frontend: přesná implementace designu z Figmy do kódu, včetně animací, responzivity a interaktivních prvků. Backend a integrace: kontaktní formuláře, napojení na CRM, analytika, případně CMS pro správu obsahu. Výkon: optimalizace obrázků, Core Web Vitals, rychlost načítání. A technické SEO: strukturovaná data, meta tagy, sitemap, robots.txt, hreflang pro vícejazyčné weby.

Výkon bereme vážně. Cílíme na skóre 90+ v PageSpeed Insights na mobilu. Ne proto, že to vypadá hezky v reportu, ale proto, že rychlost přímo ovlivňuje konverzní poměr. Každá sekunda navíc v načítání stojí zhruba 7 % konverzí. U webu, který generuje poptávky za statisíce korun, je to reálná ztráta.

Podrobněji o tom, co obnáší vývoj webu od technické stránky, píšeme na stránce o tvorbě webů.

Co klient vidí: Živou testovací verzi webu s přístupem přes odkaz. Průběžné aktualizace minimálně dvakrát týdně.

Co klient schvaluje: Funkčnost jednotlivých komponent a celkový stav webu před přechodem do fáze obsahu.

Typická délka: 8-12 pracovních dní.

Krok 6: Obsah a SEO nastavení (týdny 6-7)

Web bez obsahu je prázdná budova. Tuhle fázi hodně klientů podceňuje a my na to upozorňujeme už v kroku 1. Texty, fotky, loga, reference, to všechno musí být připravené, než web spustíme.

Co se děje v téhle fázi: finalizace a vložení všech textů na web, optimalizace obsahu pro vyhledávače (title tagy, meta popisy, nadpisová hierarchie, interní prolinkování), nastavení analytiky (GA4, Search Console), komprese a optimalizace všech obrázků a médií, nastavení SEO strukturovaných dat (Organization, LocalBusiness, BreadcrumbList, FAQPage) a kontrola hreflang tagů u vícejazyčných webů.

Pokud klient nemá vlastní texty, pomůžeme s copywritingem za příplatek. Ale i při objednání textů od nás potřebujeme od klienta podklady: popis služeb svými slovy, reference, čísla, příběhy. Nikdo nezná firmu líp než její majitel. My z toho uděláme text, který funguje na webu.

SEO není fáze, kterou přidáváme na konec. Je součástí celého procesu od kroku 2. Ale v téhle fázi děláme finální SEO audit: kontrolujeme, že žádná stránka nemá duplicitní meta tagy, že interní odkazy vedou tam, kam mají, a že strukturovaná data jsou validní. Pokud vás zajímá, co všechno dobrý web za rozumnou cenu zahrnuje z hlediska SEO, podívejte se na náš podrobný přehled.

Co klient vidí: Web s reálným obsahem v testovacím prostředí. SEO report s přehledem nastavení.

Co klient schvaluje: Finální obsah na webu. Toto je poslední kontrola před testováním.

Typická délka: 3-5 pracovních dní (závisí na tom, jak rychle klient dodá obsah).

Krok 7: Testování a spuštění (týden 7-8)

Poslední krok. A jeden z nejdůležitějších. Spustit web bez důkladného testování je jako otevřít obchod bez toho, abyste zkontrolovali, jestli fungují pokladny.

Testujeme systematicky. Funkční testování: každý formulář, každý odkaz, každé tlačítko. Cross-browser testování: Chrome, Firefox, Safari, Edge. Na desktopu i mobilu. Responzivita: reálná zařízení, ne jen zmenšování okna prohlížeče. iPhone, Samsung, iPad, různé rozlišení. Výkon: PageSpeed Insights, Lighthouse audit, kontrola Core Web Vitals. SEO kontrola: validace strukturovaných dat, kontrola robots.txt, ověření sitemapy, test indexovatelnosti. Přístupnost: kontrast barev, navigace klávesnicí, alt texty u obrázků.

Po interním testování předáme web klientovi k finálnímu ověření. Klient má 2-3 pracovní dny na procházení webu a hlášení připomínek. Opravíme je a domluvíme den spuštění.

Samotné spuštění děláme vždy v úterý až čtvrtek, nikdy v pátek. Pokud se něco po spuštění pokazí, chceme mít pracovní dny na reakci. DNS propagace, cachování, neočekávané problémy, to vše potřebuje pozornost v prvních 24-48 hodinách.

Po spuštění: odešleme sitemapu do Google Search Console, ověříme indexaci klíčových stránek, nastavíme monitoring uptime a výkonu. Prvních 14 dní aktivně sledujeme web a řešíme cokoli, co se objeví. Podrobně o tom, co by měl mít kvalitní web z pohledu webdesignu v Praze, píšeme na naší SEO stránce.

Co klient vidí: Hotový web na finální doméně. Report z testování. Přístupové údaje ke všem nástrojům.

Co klient schvaluje: Finální web a datum spuštění.

Typická délka: 3-5 pracovních dní.

Přehled celého procesu

Důležité upozornění: tabulka ukazuje typický projekt firemního webu s 8-15 stránkami. Jednoduchý web může být rychlejší (4-5 týdnů), složitější projekt s e-shopem nebo klientským portálem bude delší (10-14 týdnů). Přesný harmonogram dostanete v nabídce po prvním hovoru. Podrobněji o cenách a rozsazích různých typů webů píšeme v článku Kolik stojí webové stránky.

Co může pokazit tvorbu webu

Nebudeme předstírat, že každý projekt jde hladce. Nejde. Za roky práce jsme viděli vzorce, které projekty spolehlivě zpomalují nebo pokazí. Většinou nejde o technické problémy.

Klient nedodá obsah. Tohle je absolutní jednička. Web je technicky hotový, ale čeká se na texty. Týden, dva, měsíc. Projekt se protáhne ne proto, že by agentura nestíhala, ale proto, že klient podcenil, kolik času příprava obsahu zabere. Proto na to upozorňujeme v kroku 1 a dáváme jasný deadline. Pokud víte, že texty budou problém, objednejte copywriting rovnou.

Příliš mnoho lidí rozhoduje. Když design schvaluje majitel, marketingový ředitel, obchodní ředitel a asistentka, každý má jiný názor a nikdo nemá finální slovo. Výsledek je kompromis, který nikomu nevyhovuje. Osvědčený model: jedna osoba na straně klienta má rozhodovací pravomoc. Ostatní můžou dát připomínky, ale finální slovo je na jednom člověku.

Změna rozsahu uprostřed projektu. „A co kdybychom přidali ještě blog? A kalkulačku? A sekci s videy?“ Rozumíme, nápady přicházejí. Ale každá změna rozsahu posouvá deadline a zvyšuje cenu. Proto máme jasně definovaný rozsah v nabídce. Nápady zapisujeme a řešíme je jako fázi 2 po spuštění. Web nemusí mít na startu všechno. Musí mít to podstatné a musí to fungovat.

Nerealistická očekávání od SEO. Nový web se nezačne zobrazovat na první pozici v Googlu den po spuštění. SEO je běh na dlouhou trať. Realisticky trvá 3-6 měsíců, než se nový web ustálí ve výsledcích vyhledávání. Nastavíme technické základy tak, aby web měl nejlepší možnou startovní pozici, ale zázraky neslibujeme. Pokud vás někdo láká na „garantované první místo v Googlu za měsíc,“ utíkejte.

Výběr agentury jen podle ceny. Nejlevnější nabídka není nejlepší nabídka. Viděli jsme desítky projektů, kde klient vybral nejlevnější agenturu, dostal nekvalitní web a za rok platil znovu. Dvojitá cena, ztracený čas. V našem ceníku najdete transparentní přehled, co za jakou cenu dostanete. A pokud hledáte podrobnější rozbor, čtěte náš článek o cenách tvorby webu.

Ignorování webu po spuštění. Web není projekt, který se udělá a zapomene. Potřebuje aktualizace, nový obsah, sledování výkonu a průběžné vylepšování. Firmy, které po spuštění web neudržují, se za dva roky vrátí ke znamením popsaným v článku o redesignu webu.

Často kladené otázky

Jak dlouho trvá tvorba webu?

Typický firemní web s 8-15 stránkami trvá 6-8 týdnů od podpisu smlouvy po spuštění. Jednodušší projekty zvládneme za 4-5 týdnů, složitější (e-shop, vícejazyčný web, webová aplikace) trvají 10-16 týdnů. Nejčastější důvod zpoždění není na naší straně: je to čekání na obsah od klienta. Pokud máte texty a fotky připravené, držíme harmonogram. Podrobněji o tvorbě webu a jejích fázích píšeme na naší stránce služeb.

Co potřebuji připravit?

Před zahájením projektu ideálně: texty pro hlavní stránky (alespoň v bodech), logo ve vektorovém formátu (SVG nebo AI), fotografie (firemní fotky, produktové fotky, fotky týmu), přístup k doméně a hostingu, přístup do Google Analytics a Search Console (pokud existují) a kontakt na osobu s rozhodovací pravomocí. Nemáte některé z toho? Nevadí, na prvním hovoru probereme, co zvládnete připravit sami a s čím pomůžeme. Texty a fotky můžeme zajistit za příplatek.

Co když se mi nelíbí návrh?

Právě proto existují kroky 3 a 4 s wireframy a designem. V každém kroku máte dvě kola revizí zahrnutá v ceně. Pokud se vám nelíbí rozložení obsahu, řeknete to na wireframech a opravíme to, než začneme designovat. Pokud se vám nelíbí vizuální styl, řeknete to na designu a upravíme to, než začneme programovat. Klíč je v tom, že problémy řešíme v rané fázi, kde je změna rychlá a levná. Pokud by se i po dvou kolech revizí klient a designér neshodli na směru (za roky práce se to stalo dvakrát), nabídneme třetí směr nebo vrátíme peníze za designovou fázi. Ale upřímně, pokud spolu projdeme strategii a wireframy, u designu se shodujeme vždycky.

Pokud chcete mít nad designovým procesem maximální kontrolu, doporučujeme si předem projít náš článek o tvorbě design briefu, kde vysvětlujeme, jak formulovat své požadavky tak, aby designér přesně pochopil vaši vizi. A pokud máte pocit, že váš současný web potřebuje víc než kosmetické úpravy, zvažte UX/UI audit jako první krok.

Závěr

Marek, ten majitel logistické firmy ze začátku článku, nám po spuštění webu řekl jednu věc, která nám utkvěla: „Poprvé jsem měl pocit, že vím, za co platím a co dostanu.“

To není o tom, že bychom dělali něco revolučního. Je to o tom, že proces je jasný, komunikace otevřená a klient není překvapený. Žádný krok tvorby webu není tajemný. Každý se dá vysvětlit normálním jazykem. A každý klient má právo vědět, co se děje s jeho penězi a jeho projektem.

Pokud zvažujete nový web nebo redesign toho stávajícího a chcete vědět, jak by to vypadalo konkrétně pro vaši firmu, ozvěte se. Prvních 30-45 minut konzultace je zdarma a bez závazku. Řekneme vám na rovinu, jestli nový web potřebujete, kolik bude stát a jak dlouho potrvá. A pokud ho nepotřebujete, řekneme vám i to.

Domluvte si bezplatnou konzultaci a zjistěte, jak by celý proces vypadal pro váš projekt.