Munkájuk során a művészek és mérnökök is gyakran készítenek hevenyészett vázlatokat, úgynevezett skicceket.
audi_a5_sportback_teaser_skicc_full.jpgAudi A5 Sportback (skicc)Az alábbi videón például azt láthatjuk, ahogy a tervező mérnök papírra veti az elgondolásait egy új sportautó megjelenésével kapcsolatban.
Ilyen vázlatokat a számítógépes alkalmazások fejlesztése során is érdemes készíteni. A drótváz (vagy más néven wire-frame, vagy mock-up) készítés lényege, hogy a felmerült igények, követelmények alapján meg kell határoznunk, hogy milyen funkciók és milyen struktúrában legyenek elérhetők a felületen.
A vázlat készítése és a funkcionális követelmények meghatározása egymással szoros kapcsolatban állnak. Az összeírt adattartalom és funkcionalitás ugyanis sokszor meghatározza az elrendezést, és fordítva: az oldalvázlatok rajzolása közben új funkciók kerülhetnek az alkalmazásba.
Fontos megjegyeznünk, hogy nagyobb projektek esetén ezt a munkát az ergonómiával foglalkozó szakember (UX-specialista) végzi el, kisebb fejlesztéseknél ezt általában maga a fejlesztő készíti el.
Drótváztervet akár papír és ceruza segítségével is készíthetünk, de használhatunk speciális szoftvereket is. Ilyenek például a következők: Balsamiq Mockups , Mockup Screens, ForeUI, UXpin
Az alábbi animációban a UXpin segítségével állítottunk össze egy kis mintaprojektet. Látható, hogy az előre megadott komponensek felhasználásával nagyon gyorsan összeállíthatjuk a tervet.
A drótvázterv előnyét az jelenti, hogy viszonylag gyorsan elkészíthető, és egyszerűen módosíthatók az elemei. Természetesen a módszernek hátrányai is vannak, mert a megrendelő nem feltétlenül tudja ezen ábrákat helyesen értelmezni, így szükséges a megfelelő szóbeli, illetve írásos kiegészítés is. Gyakori, hogy az elkészült terveket prezentációs szoftverekbe illesztik, ahol ellátják megfelelő feliratokkal, szövegdobozokkal a jobb értelmezhetőség kedvéért. Arról sem szabad elfeledkezni, hogy a drótváztervek csak a felhasználó által elvégzett feladatok, folyamatok egyes lépéseire vonatkoznak, így a drótvázak mellett érdemes még folyamatábrákat és egyéb leírásokat készítenünk, mint ahogy ezt az alábbi bejegyzésben is olvashatjuk:
A drótváztervek között abból a szempontból is különbséget tehetünk, hogy milyen szinten, mekkora részletességgel dolgozták ki őket. Az alacsonyabb kidolgozású terveknél jellemzően a felület elemeinek sajátosságait jelezzük, pl. a szöveget vonalakkal, az ábrát áthúzott négyzettel, és így tovább. A magasabb kidolgozású tervekben viszont a felületet jóval pontosabban definiálják, már tartalmaz linkeket, képeket, szövegeket, színeket, sőt akár interakciókra is képes, vagyis valós időben demonstrálhatjuk az alkalmazás működését, mint ahogy azt az alábbi írásban is olvashatjuk.
A drótváztervek készítése során használható praktikákkal kapcsolatban érdemes elolvasnunk Rung András alábbi írásait, amelyekben a módszer előnyei, hátrányai és a tervezés lépései, a színek használati módjai is bemutatásra kerülnek:
Később egy konkrét példán keresztül megismerkedünk a drótvázkészítéssel, egy on-line elérhető wire-frame készítő eszköz felhasználásával.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.