Drótváz, mockup, prototípus. Melyik mire való és miben segítik a weboldal készítést és tervezést. Hogyan könnyítik meg az ügyfél és a webes munkáját? Melyik, hogyan segíti a közös munkát és milyen módon tudjuk vele hatékonyabbá tenni a közös együttműködést?

Miért jó a drótváz, prototípus és a mockup készítés?

Mi az a drótváz Mockup tervezés célja Prototípus jelentősége

A statikus weboldal és az dinamikus weblap készítés igen széleskörű fejlesztői folyamat, amely mögött sok-sok órányi webprogramozás és komoly szakértelem bújik meg. Azonban fontos megértenünk, hogy már önmagában a két weblap készítési megoldás között is vannak különbségek. Még általában egy statikus weboldal csupán fix elemeket tartalmaz, addig egy dinamikus összetettebb honlap már élő tartalmak, interaktív elemek és speciális funkciók is megjelennek. Ebből persze azonnal világossá is válik, hogy mind időben, mind pedig anyagi ráfordításban az összetettebb rendszerek költségesebbek.

A fejlesztési szakasz azonban több részből tevődik össze minden esetben. A dinamikus honlapoknak van egy látható része, amit az oldal tulajdonosa és a látogatók is látnak: ezt nevezzük frontendnek és van egy hátsó, nem látható "motorja", ami a működését biztosítja, ez pedig a backend. Bár vannak speciális esetek, amikor az egyik a másik nélkül is elboldogul (pl online szórólap, egyszerűbb landing page vagy a rendszer API) az általános weboldalakhoz mindkettőre szükség van.

Statikus vagy dinamikus weboldal? Mi a különbség?

A legfontosabb dolog, hogy azt döntsük el, mire is van szükségünk. Ha elegendő számunkra, hogy a céges adatainkat online is viszont lássuk a vállalatunk bemutatkozásával, egy darab statikus képgalériával és az elérhetőségi adatainkkal, akkor tökéletesen megfelel számunkra a gyorsan és olcsón elkészíthető statikus weboldal is. Itt azonban nem tudjuk a tartalmat szerkeszteni, adatokat tárolni és híreket, blogposztokat sem tehetünk közzé. Ez tulajdonképpen, csupán egy modern, webcímen is elérhető, online névjegykártya a cégünkről, vállalkozásunkról és szolgáltatásainkról. Legnagyobb hátránya, hogy a rajta lévő tartalmat mi magunk nem tudjuk szerkeszteni, változtatni. Ha mégis ilyenre lenne szükségünk, akkor a webesünkkel kell felvenni a kapcsolatot.

Azonban, ha szeretnénk képeket feltölteni, a tartalmat módosítani, blogposztokat, híreket felvenni és kezelni, felhasználói adatokat tárolni esetleg online rendeléseket felvenni is, akkor csak is az dinamikus weboldal jöhet szóba. A mai modern tartalomkezelő rendszerek (CMS-ek) már mind ebbe a kategóriába tartoznak. Ugyanígy komolyabb rendszerben kell gondolkoznunk, ha más online szolgáltatást kínálunk látogatóinknak. Ezek ára sokkal változóbb, mint a statikus oldalaké, hiszen minden funkció egyedileg fejlesztendő le és annak komplexitása befolyásolja a rá fordítandó munkaórák számát is.

Így tervezzünk saját online megjelenést

Legyen szó akár egy statikus weboldalról, akár egy komplex dinamikus weblapról, mindkettő komoly munkálatokat igényel annak megtervezésekor is. Ha a háttér funkciókat és a komoly backend munkát nem is vesszük figyelembe, akkor is ezernyi kérdés merül fel. A honlapunk külseje ugyanis az elsődleges dolog, amivel az oda látogatók szembesülnek. Ha nem megfelelő az elrendezés, rossz a strukturálás és nem logikus a felépítés, a látogatók gyorsan elhagyják az oldalunkat. Ugyanez a helyzet akkor is, ha túl összetett és szerteágazó funkcionalitással akarjuk a maximális élményt elérni.

A weboldal megtervezése tehát egy komoly munkafolyamat, amely a weboldal egyszerű megtervezésével, vagyis a megálmodással kezdődik. Ezt sokszor az ügyféllel együtt szokták papíron, elnagyolt formában, akár több verzióban is elkészíteni, de nem minden esetben van erre a lépésre szükség. A vázlat csupán segítség, hogy a következő lépéseket is megkönnyítse és összhangba hozza a webdesigner és az ügyfél elképzelését. Ezután következik a számítógépes elrendezés, azaz a drótváz megalkotása, amit egy mockup követ, még végül megvalósul az első prototípus, amelynek rendkívüli jelentősége van az alkotási folyamat során. Végül pedig megvalósul a termék, ami átadás után már is használható és népszerűsíthető.

Mi az a drótváz vagyis a wireframe?

Még egyes helyeken egy vázlat is megelőzi a drótváza, máshol teljesen elmosódnak a határok e két fázis között, hiszen egy weboldal drótváza is megtervezhető már papíron is. A wireframe-t azonban összekeverni a mockup-pal vagy a prototype-al már nagy hiba volna, ugyanis ezek egymásra épülő folyamatok, amelyek a weboldal fejlesztési útját követik. Ezen az úton válik az egyszerű vonalakból, színes ábra, majd pedig tökéletes grafika. Ez utóbbi után pedig már csak életre kell majd kelteni azt a webfejlesztők által.

A drótváz tehát egy kezdetleges terve a weboldalnak, amely még csak az elemek elhelyezkedését tartalmazza szimbolikusan. Ezen megjelennek a különböző tartalmi csoportok és az egyes interakciós műveletek kiinduló pontjai is. Egy-egy drótváz tehát nem csupán vonalak és dobozok értelmetlen halmaza, hanem a webdesign alapja is egyben, amely minden fontos elemet tartalmaz, amit a végső termék is fog.

Miért van szükségünk erre a vázlatszerű szerkezetre?

A drótváz tulajdonképpen egy weboldal térkép grafikus változata, amely segíti mind a webdesigner, mind pedig az ügyfél munkáját egy egyszerű, letisztult és áttekinthető formában. Előnye, hogy az elemek könnyedén mozgathatók és ebben a fázisban még rendkívül gördülékenyen meg a szerkezet átalakítása és esetleges újratervezése is. Bár sokan szeretik megspórolni ezt a plusz munkát, az enélkül végzett fejlesztés általában kaotikusan végződik és bőven kifizetődik, ez a minimális előkészület az utólagos toldozáshoz és foldozáshoz és az újrafejlesztéshez képest.

Egy klasszikus wireframe alapvetően három különböző, fő elemből tevődik össze. Az információs design vázolja az oldal felépítését és tartalmazza a főbb információkat, a navigációs design a különböző navigációs elemeket, még a vizuális design a felhasználói felület leírását és a grafikákat tartalmazza.

Drótváz vagy más néven wireframe készítése

Sokáig tart a drótváz elkészítése?

A drótváz általában gyorsan elkészül és a többségük csupán alapvető színeket tartalmaz, esetenként csupán a fekete és fehér színekből tevődik össze, mégis tökéletesen tudja szimbolizálni egy-egy tartalmi blokk elhelyezkedését, méreteinek arányát és esetleges interaktivitását is. Bár a drótvázat hozzáértő kezek készítik, előfordul, hogy már a megrendelő ügyfél is hoz magával egy vázlatot az elképzeléséről. Néha már a papírra vetett vagy egyszerű képszerkesztővel készített honlap vázlat is képezheti a wireframe alapját vagy egészét is.

Azonban a webdesignerek előszeretettel készítenek dinamikusan is működő vázakat, az erre a célra létrehozott programok segítségével. Ilyen népszerű alkalmazások az Axure, az Adobe XD, a Sketch és az UXPin is. Windows rendszeren az Adobe XD, míg Macintoshon a Sketch a legnépszerűbb.

Mi az a mockup és milyen célt szolgál?

Bár a mockup sok kisebb cégnél vagy egyéni webfejlesztés során teljesen kimaradó fázis, mégis rendkívül fontos lehet egy komplexebb rendszer esetén. A mockup tulajdonképpen egy olyan minta, amely valahol a drótváz és a prototípus között helyezkedik el félúton. Már sokkal több, mint egy vázszerkezet, amely csupán vonalakból és minimális színezésből áll, de még nem tökéletes, bemutatásra szánt design, amit akár egy tesztközönség elé is lehetne tárni. Tehát úgy kell elképzelni a mockupot, mint egy vizuális vázlatát a későbbi, végleges designak.

A mockup lényegesen többet mutat a weboldalból mint a wireframe, ezért az ügyfelek ezt már sokkal jobban szokták értékelni. Még a drótváz ránézésre csak egy vonalakból és négyzetekből álló, értelmetlen vázlat, addig már ezt a mintadarabot egy laikus, az oldal megálmodásában részt nem vevő személy is véleményezni és értékelni tudja. Bár nem minden esetben adják ki a mintadarabot a fejlesztés ezen fázisában, mégis nagy jelentőséggel bír a webdesign életében.

Mi a különbség a mockup és a prototípus között?

Valószínűleg még egy hozzá nem értő sem keverne össze egy drótvázat egy prototípussal, azonban a mockuppal már más a helyzet. Ez a design változat már sokkal jobban hasonlít a végleges változatra, azzal a különbséggel, hogy ez még mindig csak egy vizuális vázlat. Bár a mintadarab már jól előkészítve képes bemutatni az információk pontos elrendezését és megmutatni a tartalmakat és alapvető funkciókat, mégis ezt csak statikusan teszi.

Vagyis már a véglegesnek gondolt külalak, nem működő változataként tekinthetünk rá. Mivel még mindig csak egy statikus változatról van szó, az ügyfél még szabadabban dönthet a sokszorta olcsóbb módosítgatásról, mint a prototípus vagy a végleges változat esetén. Bár a prototípussal ellentétben, ez nem egy interaktív design, így sajnos nem derül ki belőle, hogy miként fog pontosan működni a végleges termék, mégis számtalan előnnyel rendelkezik.

A külalak, a felhasználói élmény és a letisztultság ugyanis nagyszerűen tesztelhető ebben a változatban is. Érdemes akkor alkalmazni, amikor a fejlesztésnek még a kezdeti szakaszában járunk és nem biztos, hogy a tervezett funkciók mind bekerülnek majd a végleges változatba, ahogyan az sem, hogy nem lesznek-e még esetleg újabb elemek. Itt a véglegeshez nagyon közeli állapotban dönthet még a megrendelő a módosításokon, a rendkívül fontos prototípus elkészítése előtt.

Mockup készítés, tervezés - Weboldal grafikai terve

A prototípusok (prototype) jelentősége a webdesign-ban

A weblap készítés egyik legfontosabb eleme a prototípus elkészítése. Ezt érdemes akkor is kérni, ha a fejlesztők nem ragaszkodnak hozzá. Nagyban hozzájárul ugyanis a végleges felhasználói élmény teszteléséhez és még az átadás előtt lehetőségünk van a végleges változatot átnézni. A prototype ugyanis már sokkal több, mint egy mockup és mérföldekre van már egy egyszerű wireframe-től.

Ebben a változatban már tesztelhetőek a főbb funkciók és interakciók, miközben a végleges grafikai állapotokat és elrendezést szemléljük. Fontos azonban megjegyezni, hogy ez még nem a végtermék, még mindig csak egy bemutatóra szánt változatról van szó, amely messzemenőleg meghaladja egy drótváz minimalista megjelenését. A funkciók még csak a képernyő képek közti váltásokhoz elegendőek, így például nem működnek az űrlapok, a regisztráció és az animációk sem, a frontend és a backend munkálatokat, ennek a változatnak az elfogadása után érdemes megkezdeni.

A prototpus tehát nem más, mint egy mükődő grafikai terv még a programozási fázis előtt. Nagyon szeretik az ügyfelek, hiszen itt már szinte mükődő weboldalt látnak.

Megéri-e a prototípusokba fektetni időt, pénzt és energiát?

Természetesen mindig a webes projekt nagysága és az ügyfél pénztárcája a mérvadó, de amennyiben lehetőség van rá, akkor erősen ajánlott a prototípust elkészíteni. A felhasználó élmények ellenőrzése és a felhasználói felület átláthatósága ugyanis csak ilyen módon tesztelhető még a kódolás előtt. Bár sok olyan prototípus készül, amely már HTML és CSS kódokat is használ amelyeket aztán felhasználhatnak majd a végleges projektben is.

Léteznek olyan megoldások, amelyek a drótvázat alakítják át prototípusokká, ezeket low-fidelity-nek nevezzük és vannak high-fidelity prototype-ok, amelyeknél a mockupból válik prototípus. Ennek kiválasztásában a webfejlesztők és a projekt menedzserek közösen dönthetnek az ügyfél igényei szerint. A prototípus tesztelés közben pedig kiderülhetnek olyan apró hibák, amit az éles oldalon már nem engedhetnénk meg, így minden szempontból csak is előnyünk származik ha igényeljük ezt a szolgáltatást.

Egy ingyenes példa arra, hogy hogyan kell elképzelni egy prototípust. A lentiek mellett még rengeteg lehetőség van, amivel még jobban lehet szemléltetni, hogy hogyan is fog kinézni a weboldalunk vagy a mobil applikációnk.

Prototpus készítés, tervezés - Grafikai terv életre kel

Mivel tudunk prototípust készíteni?

Nagyon sok eszközzel tudunk létrehozni jobbnál, jobb bemutatókat. Köztük vannak olyanok, amikkel már vázlatnál is találkozhattunk. Például: Axure, az Adobe XD, a Sketch és az UXPin is ilyen. Nagyon népszerű még a Figma és az Invision is.

Érdemes mindegyiket kipróbálni és amelyik legjobban kézreáll, annál maradni. Nekem az Adobe XD vált be a legjobban. Egyrészt már benne van az Adobe csomagban, megvan az átjárás a kedvenc programjaimmal és folyamatosan fejlesztenek bele jobbnál-jobb funkciókat.

Így lett egy egyszerű grafitceruza rajzból weboldal

Talán hosszadalmasnak tűnik ez a folyamat, de egy komoly vállalkozás megérdemli, hogy végiglépdelve bejárja a webdesign fázisok minden lépcsőfokát a füzetbe rajzolt vázlatoktól, a digitális drótvázakon át, a mockup elkészültéig, amit már csak a prototípus és a végleges változat követ. A prototípusok elfogadása után pedig már csak a webprogramozás, az élesítés és a látogatók bevonzása, valamint a profit realizálása marad hátra.

Legyen a komoly vállalkozásával egyenértékű weboldala!

Kérje személyre szabott ajánlatomat!



Ossza meg ismerőseivel, ha tetszett!

Letisztult, reszponzív és egyedi weboldal készítés korszerű megoldásokkal. Keressen bizalommal.

ajánlatkérés