Pokud si tedy vypracujeme vlastní postup, chcete-li proces návrhu, můžeme celý proces urychlit. Samotný proces pak mnohem snadněji pochopí i zákazník a identifikuje v něm vlastní roli. Tento článek se snaží shrnout osvědčené postupy, které pomohou Vašim projektů k vyšší efektivitě. Na své si tedy přijdou jak tvůrci webových stránek, tak samostatní zákazníci, kteří budou mít lepší přehled co od spolupráce očekávat.

O co tedy vlastně půjde?

Webdesign work-flow - je zdokumentovaný přehled jednotlivých kroků (úkolů), které je potřeba realizovat od začátku až do konce. Jednotlivé kroky se pak rozpadají na menší úkoly, které jsou zachycené v čase. Vznikne nám tak přehledná časová osa, kterou je potřeba maximálně dodržet.

1. Plánování

• Analýza požadavků
  Stanovení cíle a jeho pojmenování, určení cílové skupiny, podrobné požadavky na funkčnost, maximum relevantních informací k projektu, návrhy a usměrnění dle praktických zkušeností - toto je vždy individuální, někteří klienti přijdou s dokonale připraveným a naplánovaným projektem, někteří hlavní iniciativu očekávají od Vás.
• Plán projektu s časovou osou
  Shrnuje informace z analýzy, jedná se o stručný dokument a slouží jako základní vodítko v průběhu projektu.
• Mapa stránek
  Základní struktura webu, která by měla být přehledná pro návštěvníky. Nejedná se pouze o seznam stránek, ale také a to hlavně o hierarchii.
• Smlouva o dílo, autorská práva, platební podmínky
  Jedná se o klíčový prvek, je potřeba jasně stanovit platební podmínky, termíny, ustanovení o ukončení, vyřešení vlastnických a autorských práv.
• Získání přístupu k serverům
  Zajistěte si a ověřte informace o FTP účtech, přístupech k serverům a databázím, také k jejich konfiguraci, dále pak ověřte možnost nasazení a využití jednotlivých technologií.
• Výběr vhodných zdrojů, partnerů
  Jedná-li se o větší projekt neobejdete se bez spolupracovníků a partnerů, kteří Vám mohou s jednotlivými fázemi pomáhat či je samostatně realizovat. Buďte velice opatrní a vždy vybírejte osvědčené lidi s dobrými referencemi. Nemůžete si přeci dovolit doplatit na něčí nekompetentnost či neschopnost.

2. Design

Tato fáze typicky zahrnuje sestavení informací a požadavků do smysluplné struktury, která je doplněna o vizuální prezentaci (styl). Po dokončení fáze návrhu, by stránky měly mít více či méně ustálený a schválený vzhled. V této chvíli ještě bez obsahu a speciálních funkcí.

• Drátový model a návrh designových prvků
  Zde začíná opravdová zábava, která často končí zdlouhavým dohadováním o rozmístění a důležitosti jednotlivých prvků. Při tvorbě drátového modelu je často nejužitečnějším nástrojem, tužka a papír.
• Vypracování návrhu (náhledu, vizualizace) na základě analýzy
  Jeden z hlavních bodů - vizualizace, jednotlivé prvky většinou navrhuje v jednotlivých vrstvách, takže práce s přesunem a modifikacemi jednotlivých částí je poměrně jednoduchá a efektivní. Samozřejmě vrstvy také pomůžou při samotném řezání a stylování.
• Kontrola a schvalovací cyklus
  Velice důležitý bod - revize, ladění a schvalování vzhledu a vizuálního stylu do fáze, kdy je zákazník plně spokojen s designem. Zde je ještě poměrně jednoduché provádět případné změny, nesrovnatelně jednoduché s tím co nastane, při provádění změn již rozřezaného a nastylovaného webu.
• Rozřezání šablony a kódování do validního XHTML /CSS
  Vytvoření základní HTML stránky a CSS kódu. Nyní máme již "klikací" stránku, kterou naposledy společně zkontrolujete, zda vyhovuje všem požadavkům. Stránka zde ještě neobsahuje pokročilé funkce, ty přijdou na řadu později.
  • Výběr správné platformy / technologie
    Správný výběr platformy či technologie je zcela zásadní a může ušetřit v budoucnu spoustu problému, času a peněz. Rozhodněte se pro ASP/PHP, CMS - nástroj pro správu obsahu či různé frame-worky po dokonale úvaze a srovnání jednotlivých výhod a nevýhod. Zde se vytváří motor Vašeho projektu.
  • Kódování šablony pro jednotlivé typy stránek / sekce či platformy
    Většina webů má několik typů stránek, které se vzájemně liší. Vytvořte jejich šablony a ty poté modifikujte pro jednotlivé účely. Neopomíjejte zde mobilní uživatele.
  • Vývoj a testování speciálních funkcí a interaktivity jednotlivých prvků
    Dejte průchod vlastní fantazii! Drobnosti mohou Vaši stránku oživit, přidat ji vtip a důmyslnost. Všechny tyto prvky vám pomohou odlišit se a zviditelnit.
  • Naplnění obsahem
    Často nudný a zdlouhavý proces vkládání obsahu a jeho editace. Nezapomínejte na základní typografická pravidla a dávejte pozor i na detaily.
  • Testování a ověření funkčnosti
    Hurá! Konečně máme všechno pohromadě a můžeme začít testovat a ověřovat správnou funkčnost jednotlivých stránek. Věnujte kontrole maximální pozornost a buďte důslední. Budete mít větší jistotu, že jste nic nezapomněli vizuálně ani funkčně. Základem je samozřejmě cross-browser analýza neboli testování v jednotlivých podporovaných prohlížečích.
    • Ladění
      Zde si je potřeba uvědomit, že každý projekt je možné neustále vylepšovat a zdokonalovat. Nicméně z důvodu dodržení termínu a ekonomické podstaty je nutné dokončit vše plánované a splnit zadání. Další ladění a vylepšování je možné po spuštění. Stačí případné možnosti identifikovat a popsat.
    • Převod na veřejný server, zveřejnění
      Společně se zákazníkem vhodně naplánujte termín zveřejnění. Ujistěte se před zveřejněním, že klient o této fázi ví. Klient může být velice citlivý na načasování např. jedná-li se o re-design již fungujícího webu.
    • Testování pomocí nástrojů
      Konečná diagnostika pomocí validátorů HTML/CSS, nástrojů pro neplatné odkazy, kontrola pravopisu a podobně. Důslednou kontrolou předejte zbytečným reklamacím.
    • Závěrečná kontrola napříč podporovanými prohlížeči
      IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry ...
    • Předání klientovi
      Ujistěte se, že je zákazník spokojen a že všechny smluvní závazky byly řádně splněny. Zákazník musí být spokojený, aby zbytečně nepálil mosty.
    • Vypracování dokumentace a předání zdrojových kódů
      Dobrá dokumentace a zdrojové kódy zvýší důvěru a spokojenost. Zabrání zbytečné nejistotě a problémům v případě, že se zákazník rozhodne spolupracovat s jinými dodavateli - web developery.
    • Projekt uzavřete, archivujte a udržujte kontakt se zákazníkem
      Všechny důležité dokumenty, informace a zdrojové kódy uchovejte na bezpečném místě. Po měsíci zákazníka kontaktujte a zeptejte se, zda je vše v pořádku. Zákazník to jistě ocení a také získáte novou příležitost pro další spolupráci.

  4. Spuštění

  Cílem této fáze je závěrečné testování v reálných podmínkách, nejlépe se vzorkem reálných uživatelů. Ještě před zveřejněním a spuštěním celého projektu ověříte, zde se návštěvních chová podle vašich představ a obsah i struktura je pro něj srozumitelná.

  5. Po spuštění

  Často opomíjená, ale neméně důležitá fáze. Je potřeba si k zákazníkovi nechat otevřené dveře a seznámit ho s dalšími možnostmi spolupráce. Jak bylo uvedeno na začátku, toto je pouze obecný dokument, který se může stát základní kamenem Vašeho work-flow. Tento proces je potřeba neustále zdokonalovat, zpřesňovat a doplňovat o zdroje a nástroje. Výsledkem bude velice cenné know-how, které Vás bude posouvat stále dál. Získáte tímto i jistou konkurenční výhodu.
  Doporučuji vytvořit a udržovat 2 verze toho dokumentu. Jednu interní a druhou externí - zákaznickou.

3. Vývoj

V rámci vývoje se především programuje a plní obsah. Naprogramovaný kód by měl být pokud možno komentovaný a přehledný. Zvolte si vlastní strategii, kterou dodržíte, tak aby výsledek stále vyhovoval zadání a nebylo potřeba každou drobnost testovat.