Wireframe
Autor: Lukáš Závodný
Klíčová slova: informační architektura, wireframe, model, internet, stránka, web, online, navigace,struktura webu, plán, náčrt, webdesign
Synonyma: drátěný model
Související pojmy:
nadřazené - webdesign
podřazené - ---
Úvod
Wireframy (,,drátěné modely“) slouží jako pomůcka při tvorbě internetových stránek. Jsou to v podstatě náčrty a plány podle kterých by měla být stránka zhotovena a zároveň slouží k tomu, aby si zadavatel utvořil zevrubnou představu o jeho budoucích stránkách. Vzhled wireframů a propracovanost se může měnit v závislosti na rozsahu stránek a na jejich komplikovanosti, ale vždy by měly být přehledné a ne příliš složité k pochopení. Kromě rozvržení prvků na stránkách a jejich uspořádání se zde už jednotlivé části popisují. Takže se vlastně jedná o návrh poskládaný z čar a textu. Jejich tvorbou se zabývá informační architekt.
Informační architektura
Velmi úzce souvisí s wireframy, proto zde udělám jen krátký úvod. Úkol IA je v uspořádání velkého množství dat, nebo informací do přehledných celků, ve kterých je snadné orientovat se a nalézt to co hledáme bez velkých komplikací. IA se při tvorbě internetových stránek soustředí na: • Organizaci obsahu do kategorií • Pojmenování kategorií • Návrhu struktury a navigace • Návrhu informačního rozložení na stránkách • Zpracování informací pro efektivní vyhledávání
Informační architektura. Symbio [online]. 1999 [cit. 2012-05-19]. Dostupné z: http://www.symbio.cz/slovnik/informacni-architektura.html
Proč se vytváří wireframy?
Odpověď je poměrně jednoduchá, před většinou činností je si třeba nejdříve připravit nějaké podklady, nebo nástroje, stejně tak je tomu při tvorbě stránek. Je zde mnoho důvodů, proč je dobré si nejdříve vytvořit wireframy. Jeden z důvodů je, že si klient utvoří představu a zároveň je zde velmi jednoduché změnit něco, co se klientovi nelíbí, nebo by o chtěl jinak. Z toho důvodu, že stačí něco překreslit, nebo přepsat, než přeprogramovat část fungující stránky. Další důvod je, že se vývojáři a designeři mohou věnovat své práci a nemusí se starat o to kde má co být. Takže se jim ulehčí práce. Wireframe nám také umožní rychle promítnout svoje nápady a představy na papír před sebe a můžeme zjistit, zda by to bylo výhodné.
Typy wireframů
Textový wireframe: Tvořený především textem. Dozvíme se zněj jen hrubé rysy a slovně vyjadřuje co je možné a co není na stránce uplatnit. Stručný wireframe: Kromě stručného textu se již objevují různá pole, která nám umožňují pochopit zamýšlenou strukturu stránky a některé funkce, ovšem stále se jedná o velmi zevrubný návrh. Podrobný wireframe: Tento návrh už je rozpracován do detailů. Jsou zde ucelené návrhy jednotlivých stránek s doslovnými popisky a funkčními prvky. Dále jsou zde rozpracovány navigační prvky, odkazy, nadpisy, popisy co jaký prvek dělá a jak se chová při interakci, aj. Tento druh se využívá u rozsáhlých projektů, kvůli jeho podrobnosti. Proklikávací wireframe: Tento wireframe je v podstatě podobný jako v předchozím bodě, až na tu odlišnost, že se nejedná o statické nákresy, ale jsou zde funkční navigační prvky. Např.: Můžeme kliknout na tlačítko na stránce a dostaneme se na stránku další. Tato forma wireframu je ovšem možná pouze v elektronické podobě.
Wireframe webu. Symbio [online]. 1999 [cit. 2012-05-19]. Dostupné z: http://www.symbio.cz/slovnik/wireframe-webu.html
Programy pro tvorbu wireframů
Existuje jich nespočet a jako u většiny programů se dělí na placené a volně šiřitelné. Zde chci uvést několik z nich. Placené: Axure RP – jedná se o program, který využívá velká část úspěšných společností. Umožňuje použití widgetů, knihoven a hlavní dokumenty k zefektivnění práce. Také umožňuje přidat popisky všude kde je to třeba. Balsamiq Mockups – program vytvořený především k rychlému, ale hrubému wireframu stránky. Disponuje různými šablonami, takže vytváření je opravdu rychlé. HotGloo – tento editor se vyznačuje jednoduchým a interaktivním ovládáním, které je snadné se naučit. Disponuje také časovými harmonogramy.
Volně šiřitelné: Mockingbird – existuje zatím pouze jako beta verze, ovšem nevyžaduje instalaci a je dostupný online. Bez registrace si můžete vytvořit wireframe stránek. Práce v něm je velice jednoduchá a nevyžaduje vysokou počítačovou gramotnost. Cacoo – opět online editor, umožňující i vlastnoruční kreslení a pomocí chatu komunikovat s jinými právě online uživateli.
WALKER, Tom. 15 Best Wireframing Tools for Designers. Tripwire magazine [online]. 2010 [cit. 2012-05-19]. Dostupné z: http://www.tripwiremagazine.com/2010/04/15-best-wireframing-tools-for-designers.html WATSON, Thomas. Wireframe tools: the top 10 solutions. .net [online]. 2011 [cit. 2012-05-19]. Dostupné z: http://www.netmagazine.com/features/wireframe-tools-top-10-solutions
Zdroje
CHAPMAN, Cameron. 35 Excellent Wireframing Resources. Smashing Magazine [online]. 2009 [cit. 2012-05-19]. Dostupné z: http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
Informační architektura. Symbio [online]. 1999 [cit. 2012-05-19]. Dostupné z: http://www.symbio.cz/slovnik/informacni-architektura.html
WALKER, Tom. 15 Best Wireframing Tools for Designers. Tripwire magazine [online]. 2010 [cit. 2012-05-19]. Dostupné z: http://www.tripwiremagazine.com/2010/04/15-best-wireframing-tools-for-designers.html
WATSON, Thomas. Wireframe tools: the top 10 solutions. .net [online]. 2011 [cit. 2012-05-19]. Dostupné z: http://www.netmagazine.com/features/wireframe-tools-top-10-solutions
Wireframe webu. Symbio [online]. 1999 [cit. 2012-05-19]. Dostupné z: http://www.symbio.cz/slovnik/wireframe-webu.html
