Naše řešení
Fascinuje nás jednoduchost. Usilujeme o ni vždy a všude.Wireframe webu
Pojem wireframe (též "drátěný model") se v oblasti vývoje webových prezentací či aplikací používá pro zjednodušený model či architektonický návrh definující funkci a obsah stránek webu.
Wireframe definuje textový i grafický obsah, rozmístění funkčních prvků, ale také navigaci a znění nadpisů, klíčových textů či tlačítek (tzv. labeling). Wireframe není grafickým návrhem, neobsahuje obrázky a je tvořen pouze pomocí čar ("drátů", wires) a textu. Nepoužívá se ani barev, výjimkou je pouze odlišení hypertextových odkazů.
Vytváření wireframu přichází na řadu po vzniku úvodní analýzy a návrhu obchodních a uživatelských cílů. Zároveň však předchází fázi tvorby grafických návrhů a prezentační vrstvy webu.
Informační architekt vytvoří pomocí wireframu návod či vzor pro grafiky a vývojáře a zároveň jej využije k diskuzi s klientem. Změny a úpravy (v této fázi je žádoucí, aby k nim došlo) je daleko snažší a rychlejší zapracovat právě do wireframu než do již hotových grafických návrhů či naprogramovaných beta verzí webu.
Další výhodou je, že grafik se v případě existence wireframu může soustředit plně na svoji úlohu. Nemusí řešit, co má navrhovaná stránka obsahovat, jak mají být jednotlivé prvky rozmístěny či pojmenovány. Zároveň však nejsou grafici existencí wireframu svazováni a mohou web kreativně zpracovat. Proto si nelze při prohlížení wireframu představovat, že se jedná o finální vizuální podobu webu.
Z výše zmíněných důvodů je wireframe významnou součástí vývojového cyklu webu, který zlepšuje naplnění jeho cílů, minimalizuje riziko vzniku rozdílu mezi zadáním a výsledkem a zkracuje celkovou dobu vývoje.
Běžně jsou rozeznávány 4 základní typy wireframu webu:
- Textový wireframe - definuje obsah a funkční prvky stránky pouze pomocí slovního výčtu.
- Stručný či blokový wireframe - definuje rozložení obsahu a funkčních prvků pomocí polí se stručnou textovou informací. Jednotlivé bloky definují pozici a proporci textových i grafických prvků na stránce.
- Podrobný wireframe - určuje detailně proporci a umístění funkčních prvků, obrázků a textu. Definuje konkrétně a doslovně navigační prvky a odkazy, nadpisy a klíčové doprovodné texty. Podrobný wireframne často také obsahuje popis chování jednotlivých funkčních prvků.
- Proklikávací či hypertextový wireframe - Je rozšířenou variantou podrobného wireframu, kdy jsou jednotlivé stránky webu provázány a navigační prvky jsou funkční. Někdy je též naznačena funkce chybových či potvrzovacích hlášek.
Wireframe webu textový - ukázka
Wireframe webu podrobný (vlevo) a blokový (vpravo) - ukázka
Nejčastěji používané nástroje pro vytváření wireframů:
- MS Powerpoint, MS Word - vhodné spíše jen pro tvorbu textových či hrubých blokových wireframů.
- MS Visio (pro Windows), OmniGraffle (pro Mac) - dokáže též export do HTML, vhodný pro podrobný a proklikávací wireframe, existují též hotové wireframe vzory tzv. stencils (obrazce).
- dále též - SmartDraw, Axure, Adobe Flash, Adobe Illustrator či MS Excel.
Jak pokračovat?
- Rozhodujete se u koho necháte vytvořit váš web nebo chystáte redesign? Nepouštějte se rovnou do tvorby grafických návrhů a nepřeskakujte tak důležitou fázi návrhu informační architektury. Oslovte SYMBIO, pomůžeme vám. Využijte naší služby vypracování detailní analýzy a návrhu.
- Podívejte se na související pojmy v našem slovníku: Design patterns (návrhové vzory) a Informační architektura.
