Drótváz Gerstweiler Anikó Éva május 3.
Wireframe I. Más néven képernyőterv vagy sematikus oldal Egy vizuális útmutató, amely honlapok felépítését reprezentálja Megadja: Az oldal elrendezését A tartalom elhelyezkedését beleértve a navigációs elemeket illetve ezek együttműködését
Wireframe II. Általában nem használ tipográfia stílusokat színeket grafikus elemeket mert a fő hangsúlyt a funkcionalitásra a viselkedésre és a tartalom prioritására fekteti
Megvalósítása lehet Akár egy ceruzával készített ábra Akár egy erre a célra kitalált szoftver terméke is Az utóbbi években rohamosan fejlődött a piac Axure – Windows Omnigraffle – Mac Balsamiq – platformfüggetlen Pencil project – platformfüggetlen - online
Drótváz elemei Három komponensből áll: Adattartalom megtervezése (Information design) Navigációs terv (Navigation design) Felület terv (Interface design)
Adattartalom megtervezése Az információk elhelyezése és rangsorolása, hogy az könnyen érthető legyen. Pl. Egy honlap tervezése esetén az információkat úgy kell elhelyezni, hogy az a felhasználó számára tükrözze céljait és feladatait.
Navigációs terv Vizuális elemek sokasága, amelyek lehetővé teszik a felhasználó számára az oldalak közti navigálást. Gyakran előfordul, hogy egy weblap több navigációs rendszert tartalmaz, mint pl. globális navigáció, lokális navigáció, kontextuális navigáció
Felhasználói felület terv Magában foglalja a felület elemeinek kiválasztását és elrendezését Célja az, hogy a lehető legnagyobb mértékben megkönnyítse a használhatóságot és a hatékonyságot
Példa I.
Példa II.
Példa III.
Mikor hasznájuk Többféle megközelítés: Fejlesztők – funkcionalitás felépítése Felhasználói élmény tervezők – navigálás az oldalak között Üzleti érdekeltségűek – a követelmények és a célok találkoznak-e
Fajtái A kidolgozottsági-szint szerint 2 féle lehet: Alacsony: Kevésbé részletes Gyorsabb előállítás Pl. csapat együttműködését segíti elő Magas: Részletesebb Jobban illeszkedik a tényleges megoldáshoz Tovább tart létrehozni Pl. gyakran használják dokumentálásra
Felhasznált segédanyagok wireframe.htm wireframe.htm