Seriál Firemní web

Díl 18: Jak pracovat s maketami stránek

David Špinar, 10.4.2007

V předchozích dílech seriálu jsme si ukázali, jak důležitá je příprava základní struktury webu. V tomto díle se strukturami pokročíme - nadefinujeme si struktury jednotlivých klíčových stránek a znázorníme je v tzv. maketách (wireframes).

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í 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ů.

Kapitoly

Služby H1.cz

Analýzy pro tvůrce a majitele webových stránek

Webovým autorům nabízíme širokou škálu poradenských služeb orientovaných na přístupnost, použitelnost a design WWW stránek.

Odkazy

© 2007 H1.cz s.r.o., všechna práva vyhrazena.