1 DRTVZTERVEK MOCKUP WIREFRAME KSZTSE AbonyiTth Andor Mockup

1 DRÓTVÁZTERVEK (MOCKUP, WIREFRAME) KÉSZÍTÉSE Abonyi-Tóth Andor

Mockup 2 Az eszköz egy modellje, amit oktatási, demonstrációs, használhatósági elemzési, promóciós és egyéb célokra is felhasználható. http: //www. smallsurfaces. com/wp-content/uploads/2008/09/pho_5 -1. jpg http: //www. interaction-design. org/images/screendumps/mockup_webpage. gif http: //www. hiwtc. com/photo/products/17/01/01/10194. jpg

Mockup, wireframe, drótváz 3 Nem működő prototípus Példa a drótváz használatra a webfejlesztésben Drótváz terv Arculatterv http: //www. designquote. net/profile/46389/

Drótváztervezési praktikák 4 Digitális drótváz előnyök � Törlés � Áthelyezés drótvázon belül és drótvázak közt � Átméretezés � Háttéranyagok gyors beillesztése � Sablonok � Minták kéznél vannak � Dinamikusság imitálása � Elemek könnyebb átemelhetősége � Egyszerűbb archiválás � Más is könnyedén belenyúl http: //ergomania. eu/drotvaztervezesi-praktikak/

Drótváztervezési praktikák 5 Digitális drótváz hátrány � Nincs mindig kéznél � Gépi környezet blokkolhatja a kreativitást � Kevésbé hatékony a közös gondolkozásban � Lassabban készül � Nagy a kísértés a túlzott kidolgozásra � Sok drótváz nehezebben átlátható � Kevésbé játékos http: //ergomania. eu/drotvaztervezesi-praktikak/

Drótváztervezési praktikák 6 Mi nincs a drótvázon? � Színárnyalatok � Betűtípusok � Végleges képek � Pontos arányok � Szép ikonok � Végleges elhelyezés, arányok http: //ergomania. eu/drotvaztervezesi-praktikak/

Mivel készítsünk Mockupot? 7 Számos alkalmazás megfelelő lehet, ezek között vannak ingyenes és fizetős megoldások is. Érdemes itt körülnézni: � http: //webification. com/best-mockup-design-tools- roundup Személyes javaslat: � http: //lumzy. com/app/

8 Gyakorlás Készítsük el az alábbi mockup-okat!

Blog 1. 9

Blog 2. 10

Mi lehetett (volna) ennek az oldalnak a drótvázterve? Valósítsd meg! 11

12 Vége