Drótváz Gerstweiler Anikó Éva 2012. 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.

Az előadások a következő témára: "Drótváz Gerstweiler Anikó Éva 2012. 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."— Előadás másolata:

1 Drótváz Gerstweiler Anikó Éva 2012. május 3.

2 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

3 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

4 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 https://www.wireframes.org/ - online

5 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)

6 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.

7 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ó

8 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

9 Példa I.

10 Példa II.

11 Példa III.

12 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

13 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

14 Felhasznált segédanyagok http://en.wikipedia.org/wiki/Website_wireframe http://www.gdoss.com/web_info/PRI_wireframes.pdf http://www.foreui.com/articles/Fidelity_independent_ wireframe.htm http://www.foreui.com/articles/Fidelity_independent_ wireframe.htm