Jak vytvořit přehledný stromový diagram webu

Stromový diagram webu vizualizuje, jak jsou stránky na webu uspořádány. Nadřazené stránky jsou zobrazeny nad nebo vlevo od podřízených, čímž ukazují vztahy a cesty, kterými se uživatelé k jednotlivým stránkám dostanou. Vývojáři jej používají při tvorbě i redesignu webových stránek. Diagram může být jednoduchý i složitý – vše záleží na rozsahu webu a potřebách týmu.

Krok 1

Sepište seznam všech stránek, které web obsahuje nebo bude obsahovat. Ujistěte se, že každý položka představuje skutečnou stránku. U větších webů můžete přiřadit číselnou referenci, která usnadní tvorbu diagramu a sledování postupu.

Krok 2

Pomocí odrážek vytvořte hierarchický přehled, který ukáže vztahy rodič‑potomek mezi stránkami. Například e‑shop s oblečením může mít hlavní stránky „Muži“, „Ženy“ a „Děti“, pod nimiž budou podkategorie jako „Košile“, „Kalhoty“ atd., a dále konkrétní produktové stránky.

Krok 3

Na horní část dokumentu nakreslete obdélník pro každou hlavní stránku a vložte stručný název spolu s referenčním číslem, abyste mohli snadno najít podrobnosti v dalších plánovacích materiálech.

Krok 4

Pod každou hlavní kategorií nakreslete obdélníky pro podkategorie. Například pod „Muži“ vytvořte čtyři obdélníky: „Košile“, „Kalhoty“, „Shorty“ a „Kabáty“. Umístěte je vedle sebe, aby bylo patrné, že jsou na stejné úrovni.

Krok 5

Propojte podkategorie s jejich nadřazenou kategorií pomocí rovných čar, podobně jako v organizačním diagramu. To zvyšuje čitelnost a usnadňuje orientaci.

Krok 6

Pokračujte v rozvětvování diagramu dále, dokud nedosáhnete potřebné úrovně detailu. Například pod „Košile" můžete přidat „Formální košile" a „Lehké košile". Nemusíte však zahrnovat každou jednotlivou produktovou stránku.

Krok 7

Stejným způsobem dokončete sekce pro všechny hlavní kategorie – např. „Ženy“ a „Děti“.

Upravte symboliku diagramu podle informací, které chcete týmu sdělit. Použijte např. zaoblené obdélníky pro dynamické stránky a shluk několika obdélníků pro skupinu podobných stránek. Přidejte legendu, která vysvětlí použité konvence.

Tip

• Než začnete pracovat v počítači, nakreslete část diagramu na papír – pomůže vám to rychleji definovat strukturu.

Upozornění

• Stromové diagramy mohou být velmi rozsáhlé. Rozdělte je na menší částí, které lze snadno vytisknout nebo umístit na nástěnku. Menší diagramy můžete sbalit do sešitu a používat je jako referenci během vývoje.