Firemní web: Jak pracovat s maketami stránek (18)

Jak tedy nejlépe nadefinovat strukturu klíčových stránek webu? Nejprve si vemte k ruce vše, co jste si v přípravě připravili do této doby. Zejména to budou obsahové, funkční a navigační prvky, se kterými pro web počítáte. Dejte si na pomyslnou hromádku veškeré textové části webu (články, aktuality, textové tipy atp.), navigační prvky (drobečková navigace, hlavní menu, kontextová menu), funkční prvky (vyhledávání, přihlášení uživatelů, řazení a porovnání produktů atp.) nebo orientační prvky (hlavička s logem, patička, nadpisy atp.).

Pokud máte pohromadě všechny prvky, které se mají do stránky vejít, vaším dalším úkol bude jejich vzájemná prioritizace. Jednotlivé prvky si seřaďte podle toho, jakou mají vůči sobě prioritu. Jsou články důležitější než titulky? Je vyhledávací formulář důležitější než formulář pro přihlášení uživatele? Prvky s větší prioritou by totiž měly ve výsledném grafickém návrhu dostat vyšší vizuální prioritu, které se dá jednoduše docílit vhodným umístěním ve stránce, použitou barvou pozadí a popředí, velikostí písma atp.

Nyní můžeme pokročit s samotným maketám stránek - tzv. wireframům. Wireframe je jednoduchá skica webové stránky, ve které jsou načrtnuty všechny prvky tak, jak by jednou měly vypadat v grafickém návrhu. Představte si, že pomocí obyčejné tužky a kusu papíru namalujete, kde bude hlavička, kde patička, co se všechno nachází v hlavním sloupci, co obsahuje vedlejší sloupci, kde jsou aktuality, kde vyhledávací formulář atp. Nemusíte zacházet do bližších detailů, stačí obrysy a kontury, které si dobře popište a znázorněte priority.

Blok a tužka je sice dobrý prostředek, ale často bývá vhodnější využít některého elektronického formátu. V takovém případě můžete použít některý kreslící program, nebo specializovaný program typu Microsoft Visio nebo Omnigraffle.

Pomocí wireframů navrhněte všechny klíčové stránky vašeho budoucího webu. K čemu jsou vlastně tak užitečné? Jejich přínos poznáte v situaci, kdy se budete bavit s grafikem o grafickém návrhu. Wireframe nejlépe popisuje, jaké prvky se mají vyskytovat na stránce, jaká je jejich vzájemná priorita atp. Grafik pak může lépe odvést svoji kreativní práci, přičemž zachová zadání, které jste mu připravili, na nic nezapomene, nezamění vzájemné priority. Čím více času a úsilí věnujete tvorbě wireframů, tím více si ušetříte času a námahy při přípravě grafických návrhů.

Předcházející díly seriálu:

• Cíle Webu (1)
• Konkrétní cíle webu (2)
• Cílové Skupiny (3)
• Modely návštěvníků webu (4)
• Úkoly návštěvníků na webu (5)
• Analýza konkurence (6)
• SWOT analýza (7)
• Možnosti získávání obsahu (8)
• Nároky na budoucí rozvoj webu (9)
• Kolik webů vytvořit a jaké návštěvníky získávat (10)
• Analýza klíčových slov (11)
• Návrh obsahu, funkcí a základní struktury (12)
• Návrh struktury webu a navigace (13)
• Návrh funkčních prvků (14)
• Volba technického řešení (15)
• Výběr dodavatele (16)
• Postup při vývoji a nasazení webu (17)

 Seriál o budování firemního webu píší konzultanti společnosti H1.cz s.r.o., která poskytuje analytické, poradenské a vzdělávací služby v oblasti internetového marketingu a tvorby WWW stránek.