Tvorba webu krok za krokem: od briefu po spuštění

Co obnáší tvorba webu

Firemní web nevzniká tak, že si designér sedne k počítači a začne kreslit. Před prvním pixelem proběhne několik týdnů práce, která není vidět: sběr podkladů, analýza konkurence, rozhodování o struktuře. Teprve pak přichází na řadu vizuální návrh a programování.

Celý proces se dá rozdělit do šesti fází. Každá má svůj účel a výstup, který slouží jako vstup pro fázi následující. Přeskočení jedné fáze se vždy projeví v kvalitě výsledku. Firma Basecamp, která stojí za projektovým nástrojem stejného jména, popisuje ve své knize „Shape Up" podobný princip: než začnete stavět, musíte tvarovat (anglicky shape) zadání do takové podoby, aby vývojový tým přesně věděl, co má dodat.

Následující průvodce popisuje každou fázi tak, jak ji vedu já při práci s klienty.

Brief a zadání

Brief (zadávací dokument) je základ celého projektu. Obsahuje odpovědi na otázky, bez kterých nelze začít: Jaký je cíl webu? Kdo jsou jeho návštěvníci? Kolik stránek web bude mít? Jaké funkce potřebujete?

Dobrý brief má obvykle 1 až 3 stránky a zahrnuje pět oblastí:

1. 1Cíle: co má web dosáhnout (generovat poptávky, informovat, prodávat).
2. 2Cílová skupina: kdo web navštíví a co tam hledá.
3. 3Konkurence: 3 až 5 webů konkurentů s poznámkou, co na nich funguje a co ne.
4. 4Funkční požadavky: kontaktní formulář, blog, vícejazyčnost, napojení na CRM.
5. 5Reference: příklady webů, které se vám líbí, a vysvětlení proč.

Klienti často přicházejí s větou „chceme moderní web". To je příliš obecné. Z vlastní zkušenosti odhaduji, že většina zpožděných projektů měla nedostatečný brief. Čím konkrétnějším zadáním začnete, tím méně kol revizí vás čeká.

Výstupem této fáze je odsouhlasený brief, cenová nabídka a harmonogram.

Strategie a struktura webu

Se schváleným briefem přichází na řadu informační architektura (anglicky information architecture): rozhodování o tom, jaké stránky web bude mít a jak budou vzájemně propojené.

Prakticky to znamená vytvořit mapu webu (sitemap). U firemního webu o 8 stránkách to vypadá jednoduše: úvodní stránka, o nás, služby, portfolio, kontakt. U webu se 40 stránkami a blogem je struktura podstatně složitější a vyžaduje promyšlenou navigaci.

V této fázi také vzniká obsahová strategie. Designér a klient společně rozhodnou, jaký typ obsahu bude na každé stránce: krátké texty s velkými fotografiemi, nebo naopak delší textové bloky s datovými grafy. Steve Krug ve své knize „Don't Make Me Think" zdůrazňuje, že uživatelé webové stránky nečtou, nýbrž skenují. Struktura obsahu musí tomuto chování odpovídat.

Výstupem je schválená mapa webu a obsahový plán pro každou stránku.

Wireframy

Wireframe je schéma rozložení prvků na stránce. Nemá barvy, nemá finální fotografie, neřeší typografii. Jeho úkolem je vyřešit, kde bude nadpis, kde text, kde obrázek, kde tlačítko.

Wireframy se nejčastěji navrhují v nástrojích jako Figma nebo v papírové podobě. Pracuji obvykle ve Figmě, kde klient může přímo komentovat jednotlivé prvky. U menších webů (do 5 unikátních šablon) stačí 2 až 3 dny práce. U rozsáhlejších projektů může wireframová fáze trvat i dva týdny.

Na wireframech se řeší i responzivní design (přizpůsobení webu různým velikostem obrazovky). Podle dat společnosti Statcounter tvoří mobilní zařízení v Česku přes 60 % veškerého webového provozu. Každou stránku je proto nutné navrhnout minimálně ve dvou variantách: pro desktop a pro mobil.

Častá chyba v této fázi je řešit vizuální detaily. Wireframe má být rychlý a zaměřený na strukturu. Barvy a fonty přijdou na řadu až v dalším kroku.

Výstupem jsou schválené wireframy pro všechny unikátní šablony stránek.

Vizuální návrh

Teprve nyní se web začíná „oblékat". Designér na schválené wireframy aplikuje vizuální identitu: barvy, typografii, fotografie, ikonky, celkový styl.

Návrh vzniká ve Figmě jako sada obrazovek v reálné velikosti (pixel-perfect). Klient vidí přesně to, jak bude web vypadat po naprogramování. Obvykle se nejdříve navrhne úvodní stránka a jedna vnitřní stránka. Po schválení základního směru designér dopracuje zbývající šablony.

V této fázi se řeší i detaily interakce: co se stane, když uživatel najede myší na tlačítko, jak se otevře mobilní menu, jaká bude animace při scrollování. Design systém GOV.UK, který spravuje britská vláda, je dobrým příkladem toho, jak i jednoduché interakce výrazně ovlivňují srozumitelnost webu.

Počet revizních kol závisí na dohodě. Standardně nabízím dvě kola revizí v ceně. Každé další kolo znamená posun termínu, proto se vyplatí dát si na zpětné vazbě záležet.

Výstupem je schválený vizuální návrh všech šablon ve Figmě, včetně mobilních variant.

Vývoj a programování

Schválený design se předává do vývoje. Vývojář (nebo designér, pokud kóduje sám) převádí statické návrhy z Figmy do funkčního kódu.

Volba technologie závisí na požadavcích projektu. Pro firemní prezentační weby, kde klient potřebuje sám upravovat obsah, se osvědčuje kombinace Next.js (framework pro tvorbu webových aplikací) a redakčního systému, například Sanity nebo WordPress. Pro jednodušší weby bez redakčního systému může stačit statický generátor jako Astro nebo čistý HTML s CSS.

Během vývoje se řeší i technické detaily, které v designu nejsou vidět:

• Rychlost načítání. Google PageSpeed Insights doporučuje, aby se stránka načetla do 2,5 sekundy. Každá další sekunda podle údajů Googlu snižuje konverze o 7 %.
• SEO základ. Správné HTML značky, meta popisky, strukturovaná data, mapa webu pro vyhledávače.
• Přístupnost. Web by měl být použitelný i pro lidi s hendikepem. Standard WCAG 2.2 definuje konkrétní požadavky, od kontrastních poměrů po ovladatelnost klávesnicí.
• Zabezpečení. SSL certifikát (HTTPS), ochrana formulářů proti spamu, pravidelné aktualizace.

Výstupem je funkční web na testovací adrese, který je připravený k naplnění finálním obsahem.

Obsah, testování a spuštění

Poslední fáze spojuje tři kroky, které na sebe těsně navazují.

Naplnění obsahem. Klient dodá finální texty, fotografie a další podklady. Designér nebo copywriter je zasadí do připravených šablon. U webů s redakčním systémem se klient naučí obsah spravovat sám.

Testování. Před spuštěním projde web kontrolou ve všech běžných prohlížečích (Chrome, Safari, Firefox, Edge) a na reálných zařízeních. Testuje se funkčnost formulářů, rychlost načítání, správnost odkazů a zobrazení na mobilech. Britská agentura Clearleft na svém blogu sdílí rozsáhlý checklist, který používá před každým spuštěním: od kontroly 404 stránek po nastavení analytiky.

Spuštění. Po schválení testovací verze se web nasadí na produkční doménu. Nastavení DNS záznamů, přesměrování ze starého webu, napojení analytických nástrojů (Google Analytics 4, Search Console) a případné indexování v Google. Celý proces trvá obvykle 1 až 2 dny.

Na co si dát pozor

Za devět let práce v oboru jsem viděl desítky projektů, které se zbytečně protáhly nebo zdražily. Nejčastější příčiny:

Pozdní dodání obsahu. Texty a fotografie od klienta jsou nejčastějším důvodem zpoždění. Pokud nemáte kapacitu psát texty sami, domluvte se s designérem na spolupráci s copywriterem už ve fázi briefu.

Příliš mnoho rozhodovatelů. Když finální slovo nemá jeden člověk, ale komise pěti lidí, každé kolo revizí se protahuje. Určete jednu kontaktní osobu, která sbírá zpětnou vazbu od ostatních a předává ji designérovi pohromadě.

Podcenění mobilní verze. U některých klientů stále přetrvává představa, že mobilní verze je „zmenšený desktop". Není. Mobilní uživatel má jiný kontext, jiné cíle a menší trpělivost. Mobilní verzi je nutné navrhovat jako samostatný produkt.

Chybějící plán údržby. Web není jednorázový projekt. Po spuštění potřebuje pravidelné aktualizace, bezpečnostní záplaty a průběžné úpravy obsahu. Domluvte se předem, kdo a jak se o web bude starat.

Rozpočet a časový rámec

Firemní web od nezávislého designéra v Česku stojí obvykle 50 000 až 200 000 Kč bez DPH. Cenu ovlivňuje počet stránek, složitost designu, požadované funkce a to, zda klient dodá obsah sám, nebo ho tvoří designér.

Časový rámec pro web o 5 až 15 stránkách:

Největší proměnnou v harmonogramu jsou čekací doby na zpětnou vazbu a dodání obsahu od klienta. Samotná práce designéra a vývojáře zabere méně času než čekání na podklady.