Wireframy: Porovnání verzí
| (Není zobrazeno 54 mezilehlých verzí od stejného uživatele.) | |||
| Řádek 1: | Řádek 1: | ||
'''Autor:''' Václav Kůs | '''Autor:''' Václav Kůs | ||
| − | '''Klíčová slova:''' | + | '''Klíčová slova:''' wireframe, náhled webu, skica webu, projektová dokumentace nového webu |
| − | '''Synonyma:''' | + | '''Synonyma:''' skica webu, náhled webu |
'''Související pojmy:''' | '''Související pojmy:''' | ||
<blockquote> | <blockquote> | ||
| − | ''nadřazené'' - | + | ''nadřazené'' - web</blockquote> |
<blockquote> | <blockquote> | ||
''podřazené'' - ---</blockquote> | ''podřazené'' - ---</blockquote> | ||
| − | == | + | ==Charakteristika== |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Pojem wireframe (zkráceně WF, česky drátěný model) bývá v oblasti vývoje webových prezentací nebo aplikací definován jako: ''„zjednodušený model či architektonický návrh definující funkci a obsah stránek webu“''<ref>'' Wireframe webu - Slovník internetových výrazů'' [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://www.symbio.cz/slovnik/wireframe-webu.html>.</ref> Wirefram definuje textový i grafický obsah, rozmístění funkčních prvků, ale také navigaci, znění nadpisů, klíčových textů nebo tlačítek. Wireframy lze vytvářet v různých detailech. Od základního wireframe úvodní stránky, který obsahuje pouze základní rozložení prvků na stránce, až po detailní wireframe. Detailní wireframe může obsahovat položky menu, texty, velikosti obrázků a odkazy na další wireframy hlavních stránek webové prezentace. Wireframe nezahrnuje grafiku ani typografický styl, je tvořen pouze pomocí čar a textu. Nepoužívají se ani barvy, výjimkou může být pouze odlišení hypertextových odkazů. Pojem wireframe nepochází z oblasti webového vývoje. Wireframy byly původně vytvářeny pro prezentaci 3-D objektů v CAD (Computer Aided Design) softwarech. | |
| − | + | ==Použití== | |
| − | + | Wireframe je významnou součástí procesu vývoje webu, zlepšuje naplnění cílů a snižuje riziko vzniku rozdílu mezi zadáním a výsledkem. Může významně zkrátit celkovou dobu vývoje. Wireframe stránek se vytváří zpravidla před zahájením grafických prací, aby bylo možné vytvořit si představu o fungování webu. Jde o návrh, který definuje funkce a obsah stránek, označuje se také jako „projektová dokumentace nového webu“. Wireframy mohou slouží dvěma účelům: | |
| − | |||
| − | |||
| − | + | ===Rozložení obsahu a funkcionalit=== | |
| − | + | Wireframe definují rozložení obsahu a funkcionalit na jednotlivých webových stránkách. Navrhují způsob navigace uživatele webem a přispívají tak k zajištění dobré použitelnosti webového řešení. Cílem je, aby jednotlivé skupiny uživatelů webu našli snadno to co hledají. | |
| − | + | ===Komunikační nástroj=== | |
| + | Druhá funkce wireframů je sloužit jako komunikační nástroj a to tak, aby jasně prezentoval, co bude chystané webové řešení všechno obsahovat. Je to jeden z nejlepších nástrojů, jak popsat zadání klienta a dosáhnout toho, že si klient a tvůrce webu přesně rozumí. Srozumitelnost je dána mimojiné i tím, že wireframe je vizuálním nástrojem. To je velmi důležité, protože následné změny ve vytvořeném webovém řešení jsou zpravidla časově i finančně náročné. | ||
| − | == | + | ==Rozdělení== |
| − | |||
| − | + | Wireframe můžeme dělit na několik typů od nejjednoduššího nákresu až po podrobný proklikávací model informačního systému nebo rozsáhlých webových stránek. | |
| − | |||
| + | '''Textový wireframe''': slovně definuje obsah a funkční prvky stránky. Využití wireframe je spíše okrajové, řeší jen hrubé myšlenky a naznačuje co je a není možné. | ||
| − | + | '''Stručný či blokový wireframe''': definuje rozložení obsahu a funkčních prvků pomocí polí se stručným textovým komentářem. Jednotlivé bloky definují pozici a proporci textových i grafických prvků na stránce. | |
| − | |||
| − | + | '''Podrobný wireframe''': do detailu ukazuje pozice na stránce/stránkách. Může pracovat s finálními texty, obrázky, tabulkami, apod. Podrobně popisuje chování stránky, její směřování, napojení, atd. Tento druh se používá u komplikovanějších a náročnějších řešení. | |
| − | + | '''Proklikávací či hypertextový wireframe''': jedná se o ještě podrobnější WF než v předchozím bodě. Největší rozdíl je v jeho chování, předchozí varianty byly statické obrázky, kdežto zde se jedná o proklikávací model, který obsahuje provázanost a smysl celého systému. Toto řešení se používá jen v nejnáročnějších případech (intranet; extranet; B2B portál, B2C portál s napojením na informační systém, apod.). | |
| − | + | == Nástroje == | |
| − | + | MS Powerpoint, MS Word - vhodné pro tvorbu textových a hrubých blokových wireframů. | |
| − | + | MS Visio (pro Windows), OmniGraffle (pro Mac) - dokáže také export do HTML, vhodný pro podrobný a proklikávací wireframe, existují hotové wireframe vzory tzv. stencils (obrazce). | |
| − | + | SmartDraw, Axure, Adobe Flash, Adobe Illustrator nebo MS Excel. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== Poznámky == | == Poznámky == | ||
| Řádek 80: | Řádek 55: | ||
| − | == | + | ==Použité zdroje== |
| − | * | + | * VÁGNER, T. E-learning jako podpora prezenčního studia na střední škole. Brno, 2010. 58 s. Diplomová práce na Fakultě Informatiky Masarykovy univerzity. Vedoucí diplomové práce Tomáš Pitner. |
| − | + | * ŠÁCHA, D. Návrh a realizace portálu integrací webových aplikací. Brno, 2009. 36. Diplomová práce na Fakultě Informatiky Masarykovy univerzity. Vedoucí diplomové práce Pavel Minařík. | |
| − | * | + | * Co je wireframe a proč je využíván při vývoji webu. [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://blog.wsimarketing.cz/co-je-wireframe-a-proc-je-vyuzivan-pri-vyvoji-webu> |
| − | + | * Jak funguje wireframe? [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://www.symbio.cz/clanky/jak-funguje-wireframe.html> | |
| − | * | ||
| − | |||
| − | |||
| − | * | ||
Aktuální verze z 22. 5. 2012, 07:31
Autor: Václav Kůs
Klíčová slova: wireframe, náhled webu, skica webu, projektová dokumentace nového webu
Synonyma: skica webu, náhled webu
Související pojmy:
nadřazené - web
podřazené - ---
Charakteristika
Pojem wireframe (zkráceně WF, česky drátěný model) bývá v oblasti vývoje webových prezentací nebo aplikací definován jako: „zjednodušený model či architektonický návrh definující funkci a obsah stránek webu“[1] Wirefram definuje textový i grafický obsah, rozmístění funkčních prvků, ale také navigaci, znění nadpisů, klíčových textů nebo tlačítek. Wireframy lze vytvářet v různých detailech. Od základního wireframe úvodní stránky, který obsahuje pouze základní rozložení prvků na stránce, až po detailní wireframe. Detailní wireframe může obsahovat položky menu, texty, velikosti obrázků a odkazy na další wireframy hlavních stránek webové prezentace. Wireframe nezahrnuje grafiku ani typografický styl, je tvořen pouze pomocí čar a textu. Nepoužívají se ani barvy, výjimkou může být pouze odlišení hypertextových odkazů. Pojem wireframe nepochází z oblasti webového vývoje. Wireframy byly původně vytvářeny pro prezentaci 3-D objektů v CAD (Computer Aided Design) softwarech.
Použití
Wireframe je významnou součástí procesu vývoje webu, zlepšuje naplnění cílů a snižuje riziko vzniku rozdílu mezi zadáním a výsledkem. Může významně zkrátit celkovou dobu vývoje. Wireframe stránek se vytváří zpravidla před zahájením grafických prací, aby bylo možné vytvořit si představu o fungování webu. Jde o návrh, který definuje funkce a obsah stránek, označuje se také jako „projektová dokumentace nového webu“. Wireframy mohou slouží dvěma účelům:
Rozložení obsahu a funkcionalit
Wireframe definují rozložení obsahu a funkcionalit na jednotlivých webových stránkách. Navrhují způsob navigace uživatele webem a přispívají tak k zajištění dobré použitelnosti webového řešení. Cílem je, aby jednotlivé skupiny uživatelů webu našli snadno to co hledají.
Komunikační nástroj
Druhá funkce wireframů je sloužit jako komunikační nástroj a to tak, aby jasně prezentoval, co bude chystané webové řešení všechno obsahovat. Je to jeden z nejlepších nástrojů, jak popsat zadání klienta a dosáhnout toho, že si klient a tvůrce webu přesně rozumí. Srozumitelnost je dána mimojiné i tím, že wireframe je vizuálním nástrojem. To je velmi důležité, protože následné změny ve vytvořeném webovém řešení jsou zpravidla časově i finančně náročné.
Rozdělení
Wireframe můžeme dělit na několik typů od nejjednoduššího nákresu až po podrobný proklikávací model informačního systému nebo rozsáhlých webových stránek.
Textový wireframe: slovně definuje obsah a funkční prvky stránky. Využití wireframe je spíše okrajové, řeší jen hrubé myšlenky a naznačuje co je a není možné.
Stručný či blokový wireframe: definuje rozložení obsahu a funkčních prvků pomocí polí se stručným textovým komentářem. Jednotlivé bloky definují pozici a proporci textových i grafických prvků na stránce.
Podrobný wireframe: do detailu ukazuje pozice na stránce/stránkách. Může pracovat s finálními texty, obrázky, tabulkami, apod. Podrobně popisuje chování stránky, její směřování, napojení, atd. Tento druh se používá u komplikovanějších a náročnějších řešení.
Proklikávací či hypertextový wireframe: jedná se o ještě podrobnější WF než v předchozím bodě. Největší rozdíl je v jeho chování, předchozí varianty byly statické obrázky, kdežto zde se jedná o proklikávací model, který obsahuje provázanost a smysl celého systému. Toto řešení se používá jen v nejnáročnějších případech (intranet; extranet; B2B portál, B2C portál s napojením na informační systém, apod.).
Nástroje
MS Powerpoint, MS Word - vhodné pro tvorbu textových a hrubých blokových wireframů.
MS Visio (pro Windows), OmniGraffle (pro Mac) - dokáže také export do HTML, vhodný pro podrobný a proklikávací wireframe, existují hotové wireframe vzory tzv. stencils (obrazce).
SmartDraw, Axure, Adobe Flash, Adobe Illustrator nebo MS Excel.
Poznámky
- ↑ Wireframe webu - Slovník internetových výrazů [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://www.symbio.cz/slovnik/wireframe-webu.html>.
Použité zdroje
- VÁGNER, T. E-learning jako podpora prezenčního studia na střední škole. Brno, 2010. 58 s. Diplomová práce na Fakultě Informatiky Masarykovy univerzity. Vedoucí diplomové práce Tomáš Pitner.
- ŠÁCHA, D. Návrh a realizace portálu integrací webových aplikací. Brno, 2009. 36. Diplomová práce na Fakultě Informatiky Masarykovy univerzity. Vedoucí diplomové práce Pavel Minařík.
- Co je wireframe a proč je využíván při vývoji webu. [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://blog.wsimarketing.cz/co-je-wireframe-a-proc-je-vyuzivan-pri-vyvoji-webu>
- Jak funguje wireframe? [online]. [cit. 2012-05-21]. Dostupný z WWW: <http://www.symbio.cz/clanky/jak-funguje-wireframe.html>
