Egy dr\u00f3tv\u00e1zat \u00f6sszekeverni egy protot\u00edpussal olyan, mint ha egy h\u00e1z tervrajz\u00e1t kevern\u00e9nk a bemutat\u00f3 mintah\u00e1zzal. Az el\u0151bbi csak egy terv pap\u00edron, ami azt mutatja meg, hogy mik\u00e9nt kellene fel\u00e9p\u00fclnie a h\u00e1znak, m\u00edg ut\u00f3bbi egy olyan h\u00e1z, amelyb\u0151l kider\u00fcl, milyenek lesznek egy adott ingatlanfejleszt\u00e9s keret\u00e9ben meg\u00e9p\u00fcl\u0151 h\u00e1zak. Egy dr\u00f3tv\u00e1z, egy protot\u00edpus \u00e9s egy mockup m\u00e1st \u00e9s m\u00e1st kommunik\u00e1l, elt\u00e9r\u0151 c\u00e9lokb\u00f3l. Ez\u00e9rt azt\u00e1n m\u00e1shogy is n\u00e9znek ki.<\/p>\n\n\n\n
Mi is az a dr\u00f3tv\u00e1z?<\/h2>\n\n\n\n
A dr\u00f3tv\u00e1z a weboldal kis pontoss\u00e1g\u00fa \u00e1br\u00e1zol\u00e1sa, a design csontv\u00e1za, mely tartalmazza az inform\u00e1ci\u00f3k f\u0151 strukt\u00far\u00e1j\u00e1t, a tartalmi csoportokat. Vil\u00e1gosan kommunik\u00e1lnia kell teh\u00e1t, hogy<\/p>\n\n\n\n
- melyek a tartalom f\u0151 csoportjai<\/strong> (azaz v\u00e1laszt ad a mi k\u00e9rd\u00e9sre),<\/li>
- milyen az inform\u00e1ci\u00f3k, illetve a weboldal strukt\u00far\u00e1ja<\/strong> \u00e9s fel\u00e9p\u00edt\u00e9se (v\u00e1lasz a hol k\u00e9rd\u00e9sre),<\/li>
- mik\u00e9nt alakul a felhaszn\u00e1l\u00f3 \u00e9s a fel\u00fclet k\u00f6z\u00f6tti interakci\u00f3<\/strong> (v\u00e1laszt ad a hogyan k\u00e9rd\u00e9sre).<\/li><\/ul>\n\n\n\n
A dr\u00f3tv\u00e1z teh\u00e1t nem csak \u00e9rtelmetlen sz\u00fcrke dobozok \u00f6sszevisszas\u00e1ga, m\u00e9g ha els\u0151re az avatatlan szemek sz\u00e1m\u00e1ra \u00edgy is t\u0171nik. A dr\u00f3tv\u00e1z a webdesignnak tulajdonk\u00e9ppen a gerince, melynek \u00e1br\u00e1zolnia kellene a v\u00e9gs\u0151 term\u00e9k minden fontos elem\u00e9t.<\/p>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/drotvaz-prototipus-mockup.jpg\")
Dr\u00f3tv\u00e1z, protot\u00edpus, mockup – mi a k\u00fcl\u00f6nbs\u00e9g k\u00f6z\u00f6tt\u00fck a webdesignban?<\/figcaption><\/figure><\/div>\n\n\n\n Akadnak, akik kifejezetten \u00fagy fogalmazz\u00e1k meg a dr\u00f3tv\u00e1z l\u00e9nyeg\u00e9t, hogy az egy pillanatk\u00e9p a fel\u00fclet \u00e9s a felhaszn\u00e1l\u00f3 k\u00f6z\u00f6tti interakci\u00f3 folyamat\u00e1r\u00f3l<\/strong>.<\/p>\n\n\n\n
Mi\u00e9rt van sz\u00fcks\u00e9g dr\u00f3tv\u00e1zra?<\/h4>\n\n\n\n
Egy dr\u00f3tv\u00e1z seg\u00edts\u00e9g\u00e9vel egy alapvet\u0151en elvont, \u00edr\u00e1sos weboldalt\u00e9rk\u00e9pet tudunk m\u00e1r vizu\u00e1lis form\u00e1ba alak\u00edtani. Ez\u00e1ltal sokkal k\u00f6nnyebben \u00e9s gyorsabban \u00e1ttekinthet\u0151 \u00e9s meg\u00e9rthet\u0151 az elk\u00e9pzel\u00e9s. A csapat, az \u00fcgyfelek \u00e9s a felhaszn\u00e1l\u00f3k m\u00e1r a munka kezdeti szakasz\u00e1ban is \u00e9rtelmezni tudj\u00e1k a seg\u00edts\u00e9g\u00e9vel a design-elk\u00e9pzel\u00e9seket, valamint visszajelz\u00e9st adhatnak. Hab\u00e1r els\u0151re tal\u00e1n felesleges plusz munk\u00e1nak t\u0171nik, de sok probl\u00e9ma \u00e9s k\u00f6lts\u00e9g kik\u00fcsz\u00f6b\u00f6lhet\u0151 vele.<\/p>\n\n\n\n
A dr\u00f3tv\u00e1z megmutatja, hogy mib\u0151l is fog \u00e1llni a weboldal tartalma, milyen funkci\u00f3k jelennek meg majd rajta, \u00e9s ezek milyen m\u00f3don tal\u00e1lkoznak a felhaszn\u00e1l\u00f3i ig\u00e9nyekkel<\/strong>. Seg\u00edts\u00e9g\u00e9vel m\u00e1r a munka kezdeti szakasz\u00e1ban el lehet d\u00f6nteni, hogy j\u00f3 lesz-e a design, arra van-e sz\u00fcks\u00e9g, ami k\u00e9sz\u00fcl. Sokkal f\u00e1jdalmasabb, ha ez akkor der\u00fcl ki, amikor m\u00e1r gyakorlatilag elk\u00e9sz\u00fclt egy weboldal. Egy dr\u00f3tv\u00e1z olcs\u00f3n \u00e9s gyorsan fel\u00e9p\u00edthet\u0151 (ak\u00e1r egy pap\u00edr \u00e9s egy toll seg\u00edts\u00e9g\u00e9vel).<\/p>\n\n\n\n
Egy dr\u00f3tv\u00e1znak 3 c\u00e9lja biztosan van:<\/h4>\n\n\n\n
- Bemutatja a tartalmat \u00e9s a weboldal funkci\u00f3it<\/strong> a designt megel\u0151z\u0151en.<\/li>
- Seg\u00edt a designer sz\u00e1m\u00e1ra az elk\u00e9pzel\u00e9sei kommunik\u00e1l\u00e1s\u00e1ban<\/strong> az \u00fcgyf\u00e9l fel\u00e9.<\/li>
- Fel\u00e9p\u00edti a weboldal inform\u00e1ci\u00f3s architek\u00far\u00e1j\u00e1t<\/strong>.<\/li><\/ul>\n\n\n\n
Mik\u00f6zben egy dr\u00f3tv\u00e1zn\u00e1l nem kell minden r\u00e9szletet kifejteni, vil\u00e1gosan be kell mutatni a v\u00e9gs\u0151 designt, annak minden fontos elem\u00e9vel egy\u00fctt. Ezzel tulajdonk\u00e9ppen a projekt t\u00e9rk\u00e9pe<\/strong> k\u00e9sz\u00fcl el, t\u00f6bbek k\u00f6z\u00f6tt azok sz\u00e1m\u00e1ra, akik a fejleszt\u00e9sen k\u00f6z\u00f6sen dolgoznak (fejleszt\u0151k, vizu\u00e1lis designerek, sz\u00f6veg\u00edr\u00f3k, projektmanagerek). Olyan mint egy v\u00e1ros t\u00e9rk\u00e9pe, ahol m\u00e1r minden utca l\u00e1that\u00f3, de az eg\u00e9sz j\u00f3val egyszer\u0171bb, mint maga a v\u00e1ros m\u0171holdr\u00f3l f\u00e9nyk\u00e9pezve.<\/p>\n\n\n\n
Egy dr\u00f3tv\u00e1znak alapvet\u0151en 3 f\u0151 eleme van<\/h4>\n\n\n\n
- Inform\u00e1ci\u00f3s design<\/strong> – mely tartalmazza a f\u0151 inform\u00e1ci\u00f3kat, v\u00e1zolja az oldal fel\u00e9p\u00edt\u00e9s\u00e9t.<\/li>
- Navig\u00e1ci\u00f3s design<\/strong> – megjelen\u00edti az \u00e1tfog\u00f3 \u00e9s a m\u00e1sodlagos navig\u00e1ci\u00f3s elemeket.<\/li>
- Vizu\u00e1lis design<\/strong> – a felhaszn\u00e1l\u00f3i fel\u00fclet le\u00edr\u00e1s\u00e1t \u00e9s grafik\u00e1kat is tartalmaz.<\/li><\/ul>\n\n\n\n
Hogyan n\u00e9z ki a dr\u00f3tv\u00e1z?<\/h4>\n\n\n\n
A dr\u00f3tv\u00e1zak jellemz\u0151en gyorsan elk\u00e9sz\u00fclnek, a munka f\u0151leg a csapattagok k\u00f6z\u00f6tti kommunik\u00e1ci\u00f3b\u00f3l \u00e9s egy\u00fctt gondolkod\u00e1sb\u00f3l \u00e1ll \u00f6ssze. Maga a dr\u00f3tv\u00e1z megrajzol\u00e1sa kifejezetten r\u00f6vid ideig tart. Jellemz\u0151en fekete-feh\u00e9r-sz\u00fcrke sz\u00ednekben k\u00e9sz\u00fcl el, \u00e9s az olyan elemek, melyek kidolgoz\u00e1sa id\u0151ig\u00e9nyes (ikonok, k\u00e9pek), csak egy egyszer\u0171s\u00edtett form\u00e1ban jelennek meg. Teh\u00e1t p\u00e9ld\u00e1ul a k\u00e9pek hely\u00e9n n\u00e9gyzetek l\u00e1that\u00f3k.<\/p>\n\n\n\n
Mivel statikus \u00e9s fix interakci\u00f3kat tartalmaz, ez\u00e9rt ki kell eg\u00e9sz\u00edteni sz\u00f6veggel, melyek magyar\u00e1zz\u00e1k az interakci\u00f3k l\u00e9nyeg\u00e9t<\/strong>. Ugyanakkor adott esetben lehet kev\u00e9sb\u00e9 form\u00e1lis a megjelen\u00e9s, ak\u00e1r v\u00e1zlatok is lehetnek a csapaton bel\u00fcli kommunik\u00e1ci\u00f3 megk\u00f6nny\u00edt\u00e9s\u00e9re, ahol a v\u00e1lasz maga a gyorsan elk\u00e9sz\u00edtett dr\u00f3tv\u00e1z.<\/p>\n\n\n\n
Friss\u00edt\u00e9s, 2021.08.16.:<\/em><\/p>\n\n\n\n
Hogyan rajzolj meg egy dr\u00f3tv\u00e1zat? L\u00e9p\u00e9sr\u0151l l\u00e9p\u00e9sre<\/h3>\n\n\n\n
Mivel minden weboldal n\u00e9mileg elt\u00e9r\u0151, ez\u00e9rt b\u00e1r rutinb\u00f3l fel lehet \u00e9p\u00edteni egy dr\u00f3tv\u00e1zat, azonban nem \u00e1rt n\u00e9ha alaposabban \u00e1tgondolni, mi is az optim\u00e1lis megold\u00e1s egy adott weboldaln\u00e1l. Hiszen el\u0151fordulhatnak egyedi ig\u00e9nyek, k\u00f6vetelm\u00e9nyek, saj\u00e1tos probl\u00e9m\u00e1kra kell megold\u00e1st tal\u00e1lni. Milyen l\u00e9p\u00e9sek vezetnek teh\u00e1t egy k\u00e9s\u0151bb hat\u00e9kony weboldalt eredm\u00e9nyez\u0151 dr\u00f3tv\u00e1z kialak\u00edt\u00e1s\u00e1hoz?<\/p>\n\n\n\n
1. Az inform\u00e1ci\u00f3s architekt\u00fara fel\u00e9p\u00edt\u00e9se<\/h4>\n\n\n\n
Min\u00e9l t\u00f6bb id\u0151t ford\u00edtsz a megfelel\u0151 inform\u00e1ci\u00f3s architekt\u00fara kialak\u00edt\u00e1s\u00e1ba<\/a>, ann\u00e1l kevesebb gondod lesz a dr\u00f3tv\u00e1z k\u00e9sz\u00edt\u00e9se sor\u00e1n. Miel\u0151tt neki\u00e1lln\u00e1l a v\u00e1zlatok elk\u00e9sz\u00edt\u00e9s\u00e9nek, gondold \u00e1t a k\u00f6vetkez\u0151 k\u00e9rd\u00e9seket?<\/p>\n\n\n\n
- Kik a felhaszn\u00e1l\u00f3id?<\/li>
- Mit akarsz el\u00e9rni a weboldaladdal?<\/li>
- Milyen cselekv\u00e9seket hajtsanak rajta v\u00e9gre a felhaszn\u00e1l\u00f3k?<\/li>
- Mit\u0151l egyedi a term\u00e9ked?<\/li><\/ul>\n\n\n\n
Ha nem tudod, hogy n\u00e9z ki egy inform\u00e1ci\u00f3s architekt\u00fara, akkor itt l\u00e1that\u00f3 r\u00e1 egy p\u00e9lda:<\/p>\n\n\n\n
![\"Inform\u00e1ci\u00f3s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/informacios-architektura.png\")
Inform\u00e1ci\u00f3s architekt\u00fara<\/figcaption><\/figure><\/div>\n\n\n\n Ez alapj\u00e1n m\u00e1r pontosan lehet l\u00e1tni, hogy mikor, minek kellene megjelenni a felhaszn\u00e1l\u00f3k kijelz\u0151j\u00e9n. A k\u00f6vetkez\u0151 l\u00e9p\u00e9sben el kell rendezni ezeket az elemeket.<\/p>\n\n\n\n
2. Az elemek fontoss\u00e1gi sorrendj\u00e9nek \u00e1tgondol\u00e1sa<\/h4>\n\n\n\n
Meg kell hat\u00e1rozni azt, hogy mely elemek mennyire fontosak, \u00e9s ez alapj\u00e1n kialak\u00edtani a sorrendj\u00fcket.<\/p>\n\n\n\n
3. A b\u00f6ng\u00e9sz\u0151ablak vagy az eszk\u00f6z oldalar\u00e1ny\u00e1nak meghat\u00e1roz\u00e1sa<\/h4>\n\n\n\n
Nem kell ennek az oldalar\u00e1ny-meghat\u00e1roz\u00e1snak pontosnak lennie, k\u00fcl\u00f6n\u00f6sen akkor, ha csak k\u00e9zzel rajzolod fel a dr\u00f3tv\u00e1zat. Ha pontosabb rajzra t\u00f6rekszel, akkor asztali g\u00e9pen gyakori t\u00f6r\u00e9spont az 1024×768 pixel vagy az 1920×1080 pixel. Mobilon az adott eszk\u00f6zt\u0151l f\u00fcgg, v\u00e1lassz egyet, melyre optimaliz\u00e1lni akarsz.<\/p>\n\n\n\n
![\"Dr\u00f3tv\u00e1z](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/04\/drotvaz-papiron.jpg\")
Dr\u00f3tv\u00e1z pap\u00edron<\/figcaption><\/figure><\/div>\n\n\n\n 4. Rajzold be a navig\u00e1ci\u00f3s men\u00fct \u00e9s a keres\u00e9st<\/h4>\n\n\n\n
Ha m\u00e9g nincs meg a navig\u00e1ci\u00f3d helye, akkor gondold \u00e1t, hogy milyen t\u00edpus\u00fa megold\u00e1s m\u0171k\u00f6dhet az oldalon: lehet horizont\u00e1lis vagy vertik\u00e1lis, ezt jelezd egy t\u00e9glalappal a megfelel\u0151 helyen. Amennyiben rejtett navig\u00e1ci\u00f3t haszn\u00e1lsz, att\u00f3l f\u00fcgg\u0151en rajzold kinyitva vagy bez\u00e1rva, hogy mire \u00f6sszpontos\u00edtasz \u00e9ppen.<\/p>\n\n\n\n
A keres\u00e9si funkci\u00f3t egy nagy\u00edt\u00f3val \u00e9s egy t\u00e9glalappal jelezd, amennyiben fontos, akkor rajzold meg a tal\u00e1lati list\u00e1t is.<\/p>\n\n\n\n
![\"Dr\u00f3tv\u00e1z-kezdem\u00e9ny\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/drotvaz-kezdemeny.png\")
Dr\u00f3tv\u00e1z-kezdem\u00e9ny<\/figcaption><\/figure><\/div>\n\n\n\n 4. Azonos\u00edtsd be \u00e9s rajzold meg a nagyobb elemeket!<\/h4>\n\n\n\n
Olyan elemekre kell gondolni, mint a fejl\u00e9c, a k\u00e9pek, a sz\u00f6vegt\u00f6rzs. A fejl\u00e9cet jelezheted egy vastagabb vonallal, a sz\u00f6veget egym\u00e1s alatti vonalakkal, m\u00edg a k\u00e9peket n\u00e9gyzetekkel, melyekbe egy x ker\u00fcl.<\/p>\n\n\n\n
5. Rajzold meg a r\u00e9szleteket!<\/h4>\n\n\n\n
Most ker\u00fclnek sorra az olyan elemek, mint a gombok, leny\u00edl\u00f3 men\u00fck, r\u00e1di\u00f3gombok, \u0171rlapmez\u0151k, stb. Amennyiben t\u00f6bb oldalt is megrajzolsz, melyek egy folyamat r\u00e9szeit alkotj\u00e1k, akkor folyamatjelz\u0151ket \u00e9s p\u00e1rbesz\u00e9dablakokat is \u00e1br\u00e1zolnod kell.<\/p>\n\n\n\n
Ekkor m\u00e1r l\u00e1that\u00f3, hogy mi \u00e9s hol fog megjelenni a kijelz\u0151n. Most k\u00e9sz\u00edtsd el ugyanannak az oldalnak t\u00f6bb dr\u00f3tv\u00e1z\u00e1t is. Ezeket a terveket m\u00e9g nem kell min\u0151s\u00edteni, mert az a c\u00e9l, hogy k\u00fcl\u00f6nb\u00f6z\u0151 elk\u00e9pzel\u00e9sek jelenjenek meg a pap\u00edron. Ezek k\u00f6z\u00fcl azt\u00e1n majd ki lehet v\u00e1lasztani a legjobbat. Ha ez megvan, akkor a pap\u00edrr\u00f3l m\u00e1r \u00e1tker\u00fclhet a dr\u00f3tv\u00e1z v\u00e1zlata a sz\u00e1m\u00edt\u00f3g\u00e9p kijelz\u0151j\u00e9re.<\/p>\n\n\n\n
N\u00e9h\u00e1ny tipp dr\u00f3tv\u00e1z-k\u00e9sz\u00edt\u00e9shez<\/h3>\n\n\n\n
- L\u00e1sd vil\u00e1gosan a c\u00e9lokat<\/strong>! – Mit akarsz el\u00e9rni a dr\u00f3tv\u00e1z l\u00e9trehoz\u00e1s\u00e1val? <\/li>
- El\u0151sz\u00f6r pap\u00edron alkoss<\/strong>! – Ha el\u0151sz\u00f6r pap\u00edron rajzolod meg az elk\u00e9pzel\u00e9seket, az igen hasznos tud lenni. A kezdeti szakasz c\u00e9lja az, hogy min\u00e9l t\u00f6bb \u00f6tletet \u00f6sszegy\u0171jts. Ezt a legjobban a pap\u00edrra tervez\u00e9s teszi lehet\u0151v\u00e9. Min\u00e9l t\u00f6bb verzi\u00f3t hozz l\u00e9tre, de egyikben se \u00e1ss m\u00e9lyre!<\/li>
- Megfelel\u0151 m\u00e9ret\u0171 v\u00e1szonra rajzolj<\/strong>! – K\u00fcl\u00f6nben k\u00e9s\u0151bb k\u00e9nytelen leszel az eg\u00e9sz elrendez\u00e9st m\u00f3dos\u00edtani. A hib\u00e1s elrendez\u00e9s hib\u00e1s vizu\u00e1lis hierarchi\u00e1hoz vezet, \u00e9s k\u00e9s\u0151bb \u00e1t kell alak\u00edtani minden elem elhelyez\u00e9s\u00e9t. <\/li>
- R\u00e1csba rendezd<\/strong>! – Az egyes elemeknek mozgathat\u00f3nak, v\u00e1ltozathat\u00f3nak, cser\u00e9lhet\u0151nek \u00e9s m\u00e9retezhet\u0151nek kell lenni\u00fck. A r\u00e1cs haszn\u00e1lata j\u00f3 megold\u00e1s a dr\u00f3tv\u00e1zakn\u00e1l, mert k\u00f6nnyen v\u00e1ltoztathat\u00f3 az ig\u00e9nyeknek megfelel\u0151en. <\/li>
- T\u00f6rekedj k\u00f6vetkezetess\u00e9gre<\/strong>! – A k\u00f6vetkezetess\u00e9g mindig kulcsfontoss\u00e1g\u00fa t\u00e9nyez\u0151: a fel\u00fclet egyes elemeinek, a gomboknak, a c\u00edmk\u00e9knek minden oldalon azonos m\u00f3don kellene megjelenni\u00fck. <\/li>
- Folyamatban gondolkodj, ne \u00f6n\u00e1ll\u00f3 oldalakban<\/strong>! – A felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny egy \u00fat, amin a l\u00e1togat\u00f3 halad, mik\u00f6zben haszn\u00e1lja a term\u00e9ked. A term\u00e9k tervez\u00e9s\u00e9nek c\u00e9lja, hogy ez az \u00fat akad\u00e1lymentes legyen. Ezt csak \u00fagy \u00e9rheted el, ha interakci\u00f3kban gondolkodsz, nem pedig \u00f6n\u00e1ll\u00f3 oldalakban. Teh\u00e1t mindig l\u00e1tni kell, hogy egy adott oldal mik\u00e9nt viszonyul a t\u00f6bbihez.<\/li>
- M\u00e1r a folyamat elej\u00e9n legyen k\u00e9sz a tartalom<\/strong> – Mindig jobb a v\u00e9gleges sz\u00f6veggel dolgozni a tervez\u00e9sn\u00e9l, mint lorem ipsummal. Hiszen l\u00e1tod, hogy hol passzol a designba \u00e9s hol nem, r\u00e1ad\u00e1sul visszajelz\u00e9seket is nagyobb es\u00e9llyel kapsz, ha k\u00e9sz sz\u00f6veget haszn\u00e1lsz tesztel\u00e9sre. Ha m\u00e9g nincs meg a v\u00e9gleges sz\u00f6veged, akkor is \u00e9rdemes valami v\u00e1zlatot k\u00e9sz\u00edteni, mely hasonl\u00f3 lesz m\u00e9retben, tartalomban \u00e9s st\u00edlusban a v\u00e9glegeshez.<\/li>
- Sz\u00edneket csak akkor haszn\u00e1lj, ha sz\u00fcks\u00e9ges<\/strong>! – Dr\u00f3tv\u00e1zakn\u00e1l a designerek \u00e1ltal\u00e1ban nem haszn\u00e1lnak sz\u00edneket, mert zavar\u00f3ak lehetnek. Ugyanakkor nem tilos a sz\u00ednek haszn\u00e1lata, csak ritk\u00e1n \u00e9s k\u00f6vetkezetesen kell \u0151ket alkalmazni. P\u00e9ld\u00e1ul kiemelhetsz vel\u00fck fontos elemeket.<\/li>
- Haszn\u00e1lhat\u00f3 legyen, ne sz\u00e9p<\/strong>! – A dr\u00f3tv\u00e1zakn\u00e1l nincs \u00e9rtelme id\u0151t vesztegetni a vizu\u00e1lis r\u00e9szletek kidolgoz\u00e1s\u00e1ra, mert nem ez a c\u00e9lja, hanem az \u00f6tletek kommunik\u00e1l\u00e1sa. Min\u00e9l kezdetibb szakaszban j\u00e1rsz, ann\u00e1l kev\u00e9sb\u00e9 kell kidolgozottnak lenni a dr\u00f3tv\u00e1znak.<\/li>
- F\u0171zz\u00e9l hozz\u00e1 \u00edr\u00e1sos megjegyz\u00e9seket<\/strong>! – Ez\u00e1ltal a t\u00f6bbiek k\u00f6nnyebben meg\u00e9rtik, hogy mikor mit akarsz a designnal el\u00e9rni.<\/li><\/ol>\n\n\n\n
Friss\u00edt\u00e9s, 2022.04.25.:<\/em><\/p>\n\n\n\n
H\u00e1ny dr\u00f3tv\u00e1zra lesz sz\u00fcks\u00e9ged?<\/h3>\n\n\n\n
T\u00f6bb t\u00e9nyez\u0151t\u0151l is f\u00fcgg, hogy h\u00e1ny dr\u00f3tv\u00e1zra lesz sz\u00fcks\u00e9ged egy weboldal elk\u00e9sz\u00edt\u00e9s\u00e9n\u00e9l. Az egyik t\u00e9nyez\u0151, hogy mekkora weboldalr\u00f3l van sz\u00f3. \u00c1ltal\u00e1ban a nagyobb weboldalak eset\u00e9ben t\u00f6bb dr\u00f3tv\u00e1zzal kell el\u0151\u00e1llni, mint a kisebbekn\u00e9l. De ez nem minden esetben igaz. Mert alapvet\u0151en azon m\u00falik a sz\u00e1muk, hogy milyen a weboldal strukt\u00far\u00e1ja, hogyan vannak elrendezve az oldalak, h\u00e1ny szintje van az oldalaknak.<\/p>\n\n\n\n
Az egy\u00e9bk\u00e9nt nem felt\u00e9tlen\u00fcl jobb, ha sok-sok dr\u00f3tv\u00e1zat k\u00e9sz\u00edtesz, mert nem biztos, hogy sz\u00fcks\u00e9ged lesz mindre. A weboldaltulajdonosok nem is igaz\u00e1n l\u00e1tj\u00e1k \u00e1t a rengeteg dr\u00f3tv\u00e1zat, csak akkor nyer \u00e9rtelmet sz\u00e1mukra az eg\u00e9sz, ha ezek meg vannak m\u00e1r t\u00f6ltve tartalommal. Teh\u00e1t, ahhoz, hogy m\u00e1r l\u00e1that\u00f3 legyen a design, n\u00e9h\u00e1ny dr\u00f3tv\u00e1z elegend\u0151 lesz.<\/p>\n\n\n\n
A pontos v\u00e1laszhoz el kell rendezni a weboldal tartalm\u00e1t, fel kell v\u00e1zolni az oldalt\u00e9rk\u00e9pet. Ebben megjelennek a sz\u00fcks\u00e9ges oldalak \u00e9s az aloldalak, lehet\u0151leg kateg\u00f3ri\u00e1kba rendezve, mely m\u00e1r utal arra is, hogy vizu\u00e1lisan mik\u00e9nt fog megjelenni az eg\u00e9sz. Ha sok oldalt\u00edpust, azaz kateg\u00f3ri\u00e1t sorolsz fel, akkor mindegyikhez kellene egy dr\u00f3tv\u00e1zat k\u00e9sz\u00edteni. Ezt a sz\u00e1mot azonban le lehet sz\u0171k\u00edteni, csak „modul\u00e1risan” kell gondolkodni.<\/p>\n\n\n\n
Teh\u00e1t nem oldalr\u00f3l oldalra k\u00e9sz\u00edted el az eg\u00e9sz projektet, hanem olyan modulokban kellene gondolkodnod, melyeket azt\u00e1n \u00fajra felhaszn\u00e1lhatsz t\u00f6bbf\u00e9le oldalon is. Ezzel r\u00e1ad\u00e1sul k\u00f6vetkezetesebb\u00e9 \u00e9s v\u00e1lik a design, ami jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt eredm\u00e9nyez.<\/p>\n\n\n\n
5 dr\u00f3tv\u00e1zra minden weboldalnak sz\u00fcks\u00e9ge van<\/h4>\n\n\n\n
Ha m\u00e9g mindig bizonytalankodsz, hogy h\u00e1ny dr\u00f3tv\u00e1zat k\u00e9sz\u00edts, akkor \u00e9rdemes az alapvet\u0151 dr\u00f3tv\u00e1zakkal elindulni. Ezekb\u0151l \u00f6t van:<\/p>\n\n\n\n
- F\u0151oldal<\/strong> – navig\u00e1ci\u00f3val \u00e9s l\u00e1bl\u00e9ccel, valamint minden sz\u00fcks\u00e9ges elemmel. \u00c9rdemes lehet t\u00f6bb verzi\u00f3t is elk\u00e9sz\u00edteni.<\/li>
- Mobilos f\u0151oldal<\/strong> – sokan m\u00e9g mindig asztali g\u00e9pes megjelen\u00e9sben gondolkodnak, ez\u00e9rt fontos k\u00fcl\u00f6n megeml\u00edteni a mobilos f\u0151oldalt is. Minden asztali g\u00e9pes verzi\u00f3nak legyen mobilos v\u00e1ltozata is, melyn\u00e9l figyelembe veszed az elt\u00e9r\u0151 interakci\u00f3s k\u00f6vetelm\u00e9nyeket.<\/li>
- M\u00e1sodlagos oldalak<\/strong> – ezek azok az oldalak, melyekre a f\u0151oldalr\u00f3l egy kattint\u00e1ssal \u00e9rkezik a felhaszn\u00e1l\u00f3. Itt m\u00e1r j\u00f3l haszn\u00e1lhat\u00f3 a modul\u00e1ris megold\u00e1s. <\/li>
- Kapcsolati vagy r\u00f3lunk oldal<\/strong> – egyik vagy m\u00e1sik, vagy mindkett\u0151 minden weboldalon szerepelni szokott. Az\u00e9rt is fontos, hogy legyen dr\u00f3tv\u00e1zuk, mert az egyik legfontosabb, legl\u00e1togatottabb oldaladr\u00f3l van sz\u00f3.<\/li>
- Blogoldal<\/strong> – ha inform\u00e1ci\u00f3s weboldalad van, p\u00e9ld\u00e1ul egy c\u00e9ges oldal, akkor a blogoldalad dr\u00f3tv\u00e1z\u00e1ra is sz\u00fcks\u00e9ged lesz. Ebb\u0151l lehet, hogy kett\u0151 is kelleni fog: az egyik a blogposzt oldala, a m\u00e1sik pedig a blogbejegyz\u00e9sek felsorol\u00e1s\u00e1nak oldala.<\/li><\/ul>\n\n\n\n
Tov\u00e1bbi dr\u00f3tv\u00e1zak a nagyobb weboldalak eset\u00e9ben<\/h4>\n\n\n\n
N\u00e9h\u00e1ny weboldal eset\u00e9ben persze sokkal t\u00f6bbf\u00e9le oldal is megjelenik m\u00e9g, melyekhez szint\u00e9n kell dr\u00f3tv\u00e1zat k\u00e9sz\u00edteni. Ilyen lehet:<\/p>\n\n\n\n
- Szolg\u00e1ltat\u00e1sok vagy \u00e1rak oldala<\/li>
- Egyedi elemek: foglal\u00e1s, fot\u00f3gal\u00e9ria, stb.<\/li>
- T\u00e9rk\u00e9p oldal<\/li>
- Web\u00e1ruh\u00e1zakn\u00e1l megrendel\u00e9shez kapcsol\u00f3d\u00f3 oldalak<\/li>
- Feliratkoz\u00f3 oldal<\/li>
- Bejelentkez\u00e9si oldal<\/li><\/ul>\n\n\n\n
Pontos sz\u00e1mot nem lehet mondani teh\u00e1t, mert a weboldal ig\u00e9nyei d\u00f6ntik el, hogy h\u00e1ny dr\u00f3tv\u00e1zzal \u00e1llsz el\u0151. Az mindenesetre kev\u00e9s lesz, ha csak a f\u0151oldalr\u00f3l k\u00e9sz\u00edtesz egyet. Ugyanakkor t\u00falz\u00e1sba sem \u00e9rdemes esni, mert nincs sz\u00fcks\u00e9g minden egyes oldal dr\u00f3tv\u00e1z\u00e1ra. A modul\u00e1ris megold\u00e1s sokat seg\u00edt, mert bizonyos elemeket \u00edgy csak \u00e1t kell emelned a k\u00fcl\u00f6nb\u00f6z\u0151 oldalak dr\u00f3tv\u00e1z\u00e1hoz. <\/p>\n\n\n\n
Milyen eszk\u00f6z\u00f6ket haszn\u00e1lhatunk dr\u00f3tv\u00e1z elk\u00e9sz\u00edt\u00e9s\u00e9hez?<\/h3>\n\n\n\n
K\u00e9zi v\u00e1zlat<\/h4>\n\n\n\n
Az indul\u00e1skor – amikor az \u00f6tleteket gyorsan fel kell v\u00e1zolni – a legegyszer\u0171bb eszk\u00f6z a pap\u00edr \u00e9s a ceruza. \u00cdgy negyed \u00f3ra b\u00e1rmikor \u00f6sszedobhatsz egy haszn\u00e1lhat\u00f3 dr\u00f3tv\u00e1zat. Els\u0151sorban akkor praktikus a haszn\u00e1lata, amikor hirtelen kipattan a fejedb\u0151l az \u00f6tlet, \u00e9s nem akarod veszni hagyni. <\/p>\n\n\n\n
Egy k\u00e9zzel k\u00e9sz\u00edtett v\u00e1zlat eset\u00e9ben nem kell m\u00e9g a r\u00e9szletekkel foglalkoznod, olyan egyszer\u0171en fejezheted ki magad, ahogy csak j\u00f3lesik. B\u00e1rmikor elkezdhetsz rajzolni, ak\u00e1r egy telefonh\u00edv\u00e1s, ak\u00e1r egy meeting k\u00f6zep\u00e9n. <\/p>\n\n\n\n
R\u00e1ad\u00e1sul van egy tov\u00e1bbi el\u0151nye is annak, hogy nem kezded el digitaliz\u00e1lni az elk\u00e9pzel\u00e9seid m\u00e1r az els\u0151 perct\u0151l fogva. Az, hogy ez\u00e1ltal t\u00f6bb \u00f6tletet felvonultathatsz, \u00e9s majd ezek k\u00f6z\u00fcl a legjobbat kiv\u00e1lasztva kezdesz csak bele egy digit\u00e1lis alap\u00fa dr\u00f3tv\u00e1z elk\u00e9sz\u00edt\u00e9s\u00e9be.<\/p>\n\n\n\n
Hab\u00e1r a dr\u00f3tv\u00e1zak jellemz\u0151en fekete-feh\u00e9rek, hasznos lehet ak\u00e1r az is, ha m\u00e1sodik k\u00f6rben el\u0151veszed a sz\u00edneket, hogy felh\u00edvd a figyelmet a design egyes r\u00e9szeire.<\/p>\n\n\n\n
![\"Sz\u00ednes](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/04\/szines-drotvaz.jpg\")
Sz\u00ednes dr\u00f3tv\u00e1z<\/figcaption><\/figure><\/div>\n\n\n\n T\u00e1bla haszn\u00e1lata<\/h4>\n\n\n\n
A pap\u00edr ut\u00e1n a t\u00e1bl\u00e1kra v\u00e1zolt dr\u00f3tv\u00e1z is n\u00e9pszer\u0171 megold\u00e1s, ami ugyanazt tudja, mint a pap\u00edr alap\u00fa, csak f\u00fcgg\u0151leges a fel\u00fclet \u00e9s k\u00f6nnyebben megoszthat\u00f3k \u00e1ltala az elk\u00e9pzel\u00e9sek a csapattagokkal. A t\u00e1bl\u00e1ra felrajzolt dr\u00f3tv\u00e1zakn\u00e1l sem kell maxim\u00e1lis r\u00e9szletess\u00e9gre t\u00f6rekedni.<\/p>\n\n\n\n
Pap\u00edrkiv\u00e1g\u00e1sok<\/h4>\n\n\n\n
L\u00e9tezik egy olyan megold\u00e1s is, ahol a v\u00e1zlat alapj\u00e1n v\u00e1gjuk ki a pap\u00edr egy r\u00e9sz\u00e9t vagy r\u00e9szeit. A kiv\u00e1gott r\u00e9szeket azt\u00e1n fel lehet haszn\u00e1lni k\u00fcl\u00f6nb\u00f6z\u0151 dr\u00f3tv\u00e1zak l\u00e9trehoz\u00e1s\u00e1ra, ezeket cser\u00e9lgetni lehet, illetve m\u00e1r megjelenik \u00e1ltala az interaktivit\u00e1s is.<\/p>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/04\/papirkivagasos-drotvaz.jpg\")
Pap\u00edrkiv\u00e1g\u00e1sok haszn\u00e1lata<\/figcaption><\/figure><\/div>\n\n\n\n Digit\u00e1lis eszk\u00f6z\u00f6k<\/h4>\n\n\n\n
Ugyanakkor persze a dr\u00f3tv\u00e1z elk\u00e9sz\u00edt\u00e9s\u00e9re is megvannak a megfelel\u0151 digit\u00e1lis eszk\u00f6z\u00f6k, melyekkel elnyerheti v\u00e9gs\u0151, digit\u00e1lis form\u00e1j\u00e1t a dr\u00f3tv\u00e1z. Sokan nem is haszn\u00e1lnak egy\u00e1ltal\u00e1n pap\u00edrt, hanem egyb\u0151l egy szoftverhez ny\u00falnak. <\/p>\n\n\n\n
Ilyen p\u00e9ld\u00e1ul a<\/p>\n\n\n\n
- UXPin<\/a><\/li>
- Balsamiq<\/a><\/li>
- Sketch<\/a><\/li>
- Adobe XD<\/a><\/li>
- Axure<\/a><\/li><\/ul>\n\n\n\n
\u00e9s m\u00e9g sz\u00e1mtalan egy\u00e9b szoftver, melyekn\u00e9l el\u0151re elk\u00e9sz\u00edtett elemek seg\u00edts\u00e9g\u00e9vel viszonylag gyorsan elk\u00e9sz\u00edthet\u0151 egy dr\u00f3tv\u00e1z.<\/p>\n\n\n\n
![\"Dr\u00f3tv\u00e1z](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/axure-drotvaz-keszites.jpg\")
Dr\u00f3tv\u00e1z k\u00e9sz\u00edt\u00e9s az Axure seg\u00edts\u00e9g\u00e9vel<\/figcaption><\/figure><\/div>\n\n\n\n A dr\u00f3tv\u00e1zak teh\u00e1t, mint l\u00e1that\u00f3, m\u00e9g nem tesztel\u00e9si c\u00e9lokat szolg\u00e1lnak, hab\u00e1r seg\u00edthetnek az els\u0151, gyors visszajelz\u00e9sek begy\u0171jt\u00e9s\u00e9ben. A webdesign sor\u00e1n rendk\u00edv\u00fcl hat\u00e9konyak, \u00e9s a projektek kezdeti szakasz\u00e1ban szinte megker\u00fclhetetlenek.<\/p>\n\n\n\n
Mi az a mockup?<\/h2>\n\n\n\n
Tulajdonk\u00e9ppen itt a mintadarabr\u00f3l<\/em> van sz\u00f3, \u00e9s nincs igaz\u00e1n j\u00f3 magyar megfelel\u0151je, \u00edgy az angol sz\u00f3t haszn\u00e1ljuk a gyakorlatban. A dr\u00f3tv\u00e1z \u00e9s a protot\u00edpus k\u00f6z\u00f6tt helyezkedik el az \u00e1br\u00e1zol\u00e1s pontoss\u00e1g\u00e1t illet\u0151en. A mockup nagyon gyakran egy vizu\u00e1lis v\u00e1zlat, illetve<\/strong> maga a vizu\u00e1lis design<\/strong>. Egy j\u00f3l elk\u00e9sz\u00edtett mockup bemutatja az inform\u00e1ci\u00f3k elrendez\u00e9s\u00e9t, vizu\u00e1lisan megjelen\u00edti a tartalmat \u00e9s az alapvet\u0151 funkci\u00f3kat, de csak statikus m\u00f3don.<\/p>\n\n\n\n
Akkor haszn\u00e1lhat\u00f3 j\u00f3l, ha m\u00e9g a kezdeti id\u0151szakban be szeretn\u00e9nk mutatni, mik\u00e9nt fog kin\u00e9zni a webdesign. Mivel kiz\u00e1r\u00f3lag statikus a megjelen\u00e9se, \u00edgy j\u00f3val gyorsabban \u00e9s olcs\u00f3bban elk\u00e9sz\u00edthet\u0151, mint egy protot\u00edpus. Ugyanakkor seg\u00edts\u00e9g\u00e9vel m\u00e1r sok visszajelz\u00e9st lehet szerezni.<\/p>\n\n\n\n
L\u00e9nyeges, hogy a mockup m\u00e9g nem interakt\u00edv, mint a protot\u00edpus, \u00edgy nem der\u00fcl ki bel\u0151le, hogy mik\u00e9nt fog a v\u00e9gs\u0151 term\u00e9k m\u0171k\u00f6dni<\/strong>. Megfelel\u0151 ugyanakkor a UX-elk\u00e9pzel\u00e9sek tesztel\u00e9s\u00e9re, v\u00e1ltoztat\u00e1s\u00e1ra. Amikor a fejleszt\u00e9s m\u00e9g olyan szakaszban j\u00e1r, ahol v\u00e1ltoz\u00e1sokra lehet sz\u00e1m\u00edtani, akkor j\u00f3 megold\u00e1s a mockup haszn\u00e1lata. Ha viszont m\u00e1r sz\u00fcks\u00e9g van arra, hogy vil\u00e1gosan l\u00e1that\u00f3v\u00e1 v\u00e1ljanak a felhaszn\u00e1l\u00f3i interakci\u00f3k, megkezd\u0151dj\u00f6n a tesztel\u00e9s, el kell k\u00e9sz\u00edteni a protot\u00edpust.<\/p>\n\n\n\n
Mi az a protot\u00edpus?<\/h2>\n\n\n\n
A protot\u00edpus a legt\u00f6bb weboldal fejleszt\u00e9se sor\u00e1n az\u00e9rt fontos l\u00e9p\u00e9s, mert sz\u00fcks\u00e9g lehet r\u00e1 a felhaszn\u00e1l\u00f3i interakci\u00f3k \u00e9s folyamatok megismer\u00e9se \u00e9rdek\u00e9ben. A protot\u00edpus m\u00e1r egy m\u0171k\u00f6d\u0151 modellje, interakt\u00edv szimul\u00e1ci\u00f3ja egy alkalmaz\u00e1snak vagy weboldalnak<\/strong>, mely m\u00e1r tesztelhet\u0151 felhaszn\u00e1l\u00f3kkal. Itt a v\u00e9gterm\u00e9k egy magas min\u0151s\u00e9g\u0171 \u00e1br\u00e1zol\u00e1s\u00e1r\u00f3l van sz\u00f3, mely bemutatja a felhaszn\u00e1l\u00f3i fel\u00fclet interakci\u00f3it is.<\/p>\n\n\n\n
Egy protot\u00edpus seg\u00edts\u00e9g\u00e9vel a felhaszn\u00e1l\u00f3k<\/p>\n\n\n\n
- megismerkedhetnek a tervezett felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nnyel,<\/li>
- tesztelhetik a f\u0151 interakci\u00f3kat<\/strong> a v\u00e9gterm\u00e9khez hasonl\u00f3 m\u00f3don.<\/li><\/ul>\n\n\n\n
A protot\u00edpus teh\u00e1t a felhaszn\u00e1l\u00f3 \u00e9s a fel\u00fclet k\u00f6z\u00f6tti v\u00e9gs\u0151 interakci\u00f3k szimul\u00e1ci\u00f3ja<\/strong>. Sz\u00fcks\u00e9g lehet r\u00e1, ha vannak a weboldalon anim\u00e1ci\u00f3k, t\u00f6bb navig\u00e1ci\u00f3s lehet\u0151s\u00e9g, \u00f6sszetett munkafolyamatok, illetve ha nem megszokott a viselked\u00e9se a weboldalnak. Amennyiben fontos a r\u00e9szletek megismer\u00e9se \u00e9s kidolgoz\u00e1sa, akkor \u00e9rdemes protot\u00edpust k\u00e9sz\u00edteni. Ugyanakkor fontos k\u00e9rd\u00e9s, hogy mennyi id\u0151 \u00e9s p\u00e9nz \u00e1ll rendelkez\u00e9sre a fejleszt\u00e9sn\u00e9l.<\/p>\n\n\n\n
A protot\u00edpus m\u00e9g nem a v\u00e9gterm\u00e9k, nem pontosan \u00fagy n\u00e9z ki, mint a v\u00e9gs\u0151 weboldal, de ahhoz nagyon hasonl\u00f3. Itt m\u00e1r nem egy sz\u00fcrke, v\u00e1zlatos megjelen\u00e9sr\u0151l van teh\u00e1t sz\u00f3, hanem egy interakt\u00edv, kattinthat\u00f3, sz\u00ednes, reszponz\u00edv megjelen\u00e9sr\u0151l. Bemutatja, hogy mik\u00e9nt lehet interakci\u00f3ba l\u00e9pni a v\u00e9gterm\u00e9kkel, \u00e9s az mik\u00e9nt fog reag\u00e1lni.<\/p>\n\n\n\n
Az interakci\u00f3k kivitelez\u00e9s\u00e9nek ez\u00e9rt m\u00e1r kell\u0151 gondoss\u00e1ggal kell zajlania, hogy megjelen\u00e9s\u00fck hasonl\u00f3 legyen a v\u00e9gs\u0151 \u00e9lm\u00e9nyhez. Ugyanakkor a fel\u00fclet \u00e9s a backend folyamatok k\u00f6z\u00f6tti kapcsolat m\u00e9g nem ker\u00fcl kialak\u00edt\u00e1sra<\/strong> a k\u00f6lts\u00e9gek cs\u00f6kkent\u00e9se \u00e9s a fejleszt\u00e9s gyors\u00edt\u00e1sa \u00e9rdek\u00e9ben.<\/p>\n\n\n\n
Sok \u00fcgyf\u00e9l zavarba j\u00f6n a protot\u00edpussal val\u00f3 tal\u00e1lkoz\u00e1skor, mert \u00fagy l\u00e1tj\u00e1k, hogy a weboldal nem m\u0171k\u00f6dik, vagy nem \u00fagy n\u00e9z ki, ahogy kellene. A feladata azonban az, hogy kider\u00fclj\u00f6n, mik\u00e9nt tud kapcsolatba l\u00e9pni a felhaszn\u00e1l\u00f3 a fel\u00fclettel, \u00edgy tesztelhet\u0151 a UX \u00e9s a UI is, felfedezhet\u0151k \u00e9s jav\u00edthat\u00f3k a bugok az \u00e9les\u00edt\u00e9s el\u0151tt.<\/p>\n\n\n\n
A protot\u00edpusokkal m\u00e1r teljes \u00e9rt\u00e9k\u0171 felhaszn\u00e1l\u00f3i (usability) teszteket lehet v\u00e9gezni, visszajelz\u00e9seket lehet kapni<\/strong>, j\u00f3l vizsg\u00e1lhat\u00f3 a seg\u00edts\u00e9g\u00e9vel a fel\u00fclet haszn\u00e1lhat\u00f3s\u00e1ga m\u00e9g azel\u0151tt, hogy a fejleszt\u00e9s tulajdonk\u00e9ppen elkezd\u0151dne.<\/p>\n\n\n\n
A protot\u00edpusok k\u00e9sz\u00edt\u00e9se meglehet\u0151sen k\u00f6lts\u00e9ges \u00e9s id\u0151t rabl\u00f3 form\u00e1ja a design kommunik\u00e1l\u00e1s\u00e1nak. \u00c9rdemes ez\u00e9rt olyan protot\u00edpusokat k\u00e9sz\u00edteni, melyek alapjai (HTML \u00e9s a CSS k\u00f3d) azt\u00e1n k\u00e9s\u0151bb felhaszn\u00e1lhat\u00f3k a fejleszt\u00e9s sor\u00e1n. K\u00fcl\u00f6n\u00f6sen az egyszer\u0171bb projektek eset\u00e9n lehet hasznos a protot\u00edpusok haszn\u00e1lata.<\/p>\n\n\n\n
Alapvet\u0151en megk\u00fcl\u00f6nb\u00f6ztet\u00fcnk low-fidelity \u00e9s high-fidelity protot\u00edpusokat<\/strong>. Az el\u0151bbin\u00e9l a designer a dr\u00f3tv\u00e1z oldalait protot\u00edpusokk\u00e1 alak\u00edtja, m\u00edg ut\u00f3bbin\u00e1l a mockupot alak\u00edtj\u00e1k \u00e1t protot\u00edpuss\u00e1. Az hogy melyikre van sz\u00fcks\u00e9g, att\u00f3l f\u00fcgg, hogy milyen r\u00e9szletess\u00e9g sz\u00fcks\u00e9ges ahhoz, hogy bemutathassuk a term\u00e9ket vagy a szolg\u00e1ltat\u00e1st egy j\u00f3l \u00e9rthet\u0151, interakt\u00edv m\u00f3don. N\u00e9ha felesleges egy high-fidelity kialak\u00edt\u00e1sra id\u0151t \u00e9s p\u00e9nzt pazarolni.<\/p>\n\n\n\n
Egy protot\u00edpus alapvet\u0151en egy tesztel\u00e9si lehet\u0151s\u00e9g<\/strong>, melynek r\u00e9v\u00e9n j\u00e1tszhatsz a weboldallal. Min\u00e9l el\u0151bb elkezd\u0151dik \u00e1ltala a tesztel\u00e9s, ann\u00e1l biztosabb, hogy nem fordul rossz ir\u00e1nyba a design. A gyakori tesztek r\u00e9v\u00e9n kisz\u0171rhet\u0151k a bugok a UX-b\u0151l, \u00e9s min\u00e9l t\u00f6bbet tesztelsz, ann\u00e1l t\u00f6bb inform\u00e1ci\u00f3t kapsz m\u00e9g az \u00e9les\u00edt\u00e9s el\u0151tt. Ez\u00e1ltal elker\u00fclhet\u0151k a hib\u00e1k a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyben, a negat\u00edv visszajelz\u00e9sek, az hogy az emberek nem \u00e9rtik a weboldalad, nem jutnak el a konverzi\u00f3ig.<\/p>\n\n\n\n
Friss\u00edt\u00e9s, 2021.10.20.:<\/em><\/p>\n\n\n\n
Milyen gyakori hib\u00e1k jellemz\u0151k a protot\u00edpusokra?<\/h3>\n\n\n\n
Mik\u00f6zben nincs egyetlen t\u00f6k\u00e9letes kivitelez\u00e9se a protot\u00edpusoknak, felsorolhat\u00f3k olyan hib\u00e1k, melyek gyakran megjelennek ezekn\u00e9l. Az ilyen hib\u00e1k pedig lass\u00edtj\u00e1k a design k\u00e9sz\u00edt\u00e9s\u00e9t.<\/p>\n\n\n\n
Pontos c\u00e9l n\u00e9lk\u00fcli protot\u00edpus-k\u00e9sz\u00edt\u00e9s<\/h4>\n\n\n\n
Ha nem tudod, hogy mit akarsz kezdeni a protot\u00edpussal, akkor az m\u00e1r eleve hib\u00e1nak tekinthet\u0151. De milyen c\u00e9lokr\u00f3l is van sz\u00f3? Egy \u00faj weboldal haszn\u00e1lhat\u00f3s\u00e1g\u00e1t akarod vele tesztelni? Vagy a v\u00e1s\u00e1rl\u00f3i utat a weboldalon a rendel\u00e9sig? Azt is fontos tudni, hogy kik is a megrendel\u0151k \u00e9s milyen id\u0151keret \u00e1ll rendelkez\u00e9sre. Ha ezek vil\u00e1gosak, akkor ir\u00e1nyt mutatnak az elk\u00e9sz\u00edt\u00e9sn\u00e9l. Egy c\u00e9l emellett lehet\u0151v\u00e9 teszi azt is, hogy m\u00e9rni tudd a hat\u00e9konys\u00e1got. <\/p>\n\n\n\n
T\u00fal hamar v\u00e1gsz bele<\/h4>\n\n\n\n
Gyakran el\u0151fordul, hogy m\u00e9g azel\u0151tt v\u00e1gnak bele egy protot\u00edpus elk\u00e9sz\u00edt\u00e9s\u00e9be, hogy a designerek alaposan \u00e1tgondolt\u00e1k volna, hogy milyen desingmegold\u00e1sokat lenne \u00e9rdemes haszn\u00e1lni. Megnyitnak egy eszk\u00f6zt, amivel a protot\u00edpus elk\u00e9sz\u00edthet\u0151, \u00e9s azt rem\u00e9lik, hogy ebben majd valahogy megform\u00e1l\u00f3dik a design. Ezek az eszk\u00f6z\u00f6k azonban m\u00e1r a r\u00e9szletekre f\u00f3kusz\u00e1lnak, \u00edgy a gondolkod\u00e1s, az \u00f6tletel\u00e9s folyamata elmarad, vagy t\u00fal r\u00f6vid ideig tart. \u00cdgy egyszer\u0171en felhaszn\u00e1lj\u00e1k az els\u0151 designmegold\u00e1st, mely automatikusan ad\u00f3dik, \u00e9s ami sem nem a legjobb, sem nem a legeredetibb. <\/p>\n\n\n\n
Teh\u00e1t m\u00e9g akkor is, ha gyors protot\u00edpus-k\u00e9sz\u00edt\u00e9sbe v\u00e1gsz bele, el\u0151tte k\u00e9sz\u00edtsd el a k\u00fcl\u00f6nb\u00f6z\u0151 design-lehet\u0151s\u00e9gek v\u00e1zlatait, dr\u00f3tv\u00e1zait, mockupjait. Lehet, hogy azt gondolod, \u00edgy hosszabb ideig tart a design elk\u00e9sz\u00edt\u00e9se, val\u00f3j\u00e1ban azonban id\u0151t sp\u00f3rolsz vele, \u00e9s jobb lesz a v\u00e9geredm\u00e9ny.<\/p>\n\n\n\n
Rossz protot\u00edpus-k\u00e9sz\u00edt\u0151 eszk\u00f6zt haszn\u00e1lsz<\/h4>\n\n\n\n
A v\u00e1laszt\u00e1s el\u0151tt \u00e1t kell gondolni, hogy milyen r\u00e9szletezetts\u00e9g\u0171 protot\u00edpusra van sz\u00fcks\u00e9g. A legt\u00f6bben persze azt az eszk\u00f6zt haszn\u00e1lj\u00e1k, amit megszoktak, kedvelnek, vagy egyszer\u0171en csak azt az egyet tudj\u00e1k haszn\u00e1lni. Ez azonban nem felt\u00e9tlen\u00fcl megfelel\u0151, mert lehet, hogy egyszer\u0171, k\u00e9p-alap\u00fa protot\u00edpusra van sz\u00fcks\u00e9g, de az is lehet, hogy k\u00f3d-alap\u00fara.<\/p>\n\n\n\n
Ha egy low-fidelity protot\u00edpus is megfelel\u0151, akkor ak\u00e1r egy t\u00e1bl\u00e1t \u00e9s tollat is haszn\u00e1lhatsz, vagy csak pap\u00edrt \u00e9s ceruz\u00e1t. Viszont egy high-fidelity protot\u00edpus eset\u00e9ben, melynek val\u00f3snak kell kin\u00e9znie \u00e9s sz\u00fcks\u00e9g van a teljes interaktivit\u00e1sra, m\u00e1r m\u00e1st eszk\u00f6zt kell ig\u00e9nybe venni. <\/p>\n\n\n\n
Placeholder sz\u00f6vegeket \u00e9s k\u00e9peket haszn\u00e1lsz a val\u00f3s helyett<\/h4>\n\n\n\n
A protot\u00edpusoknak \u00e1ltal\u00e1ban olyan k\u00f6zel kell \u00e1llniuk megjelen\u00e9s\u00fckben \u00e9s funkci\u00f3ikban a v\u00e9gs\u0151 term\u00e9khez, amennyire csak lehets\u00e9ges. Ha Lorem Ipsumot haszn\u00e1lsz, akkor arr\u00f3l ord\u00edt, hogy m\u00e9g csak egy tesztverzi\u00f3, \u00edgy azt\u00e1n elt\u00e9r\u00edtheti a tesztel\u00e9st. <\/p>\n\n\n\n
Nem interakt\u00edv a protot\u00edpusod<\/h4>\n\n\n\n
Egy protot\u00edpusnak m\u00e1r val\u00f3s felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt kell k\u00edn\u00e1lnia. Ennek \u00e9rdek\u00e9ben \u00fagy kell reag\u00e1lnia a felhaszn\u00e1l\u00f3i cselekv\u00e9sekre, mint a v\u00e9gs\u0151 designnak. Ha nem interakt\u00edv protot\u00edpust haszn\u00e1lsz, akkor elvesz\u00edted a lehet\u0151s\u00e9get, hogy felm\u00e9rd a weboldal funkci\u00f3inak haszn\u00e1lhat\u00f3s\u00e1g\u00e1t, p\u00e9ld\u00e1ul hogy l\u00e1sd mik\u00e9nt m\u0171k\u00f6dik egy leny\u00edl\u00f3 men\u00fc a val\u00f3s\u00e1gban. Egy interakt\u00edv protot\u00edpus r\u00e1ad\u00e1sul megk\u00f6nny\u00edti a fejleszt\u00e9si folyamatot is.<\/p>\n\n\n\n
K\u00e9s\u0151n k\u00e9rsz visszajelz\u00e9seket<\/h4>\n\n\n\n
A legjobb megold\u00e1s egy magasabb szintre emelni a designt, ha visszajelz\u00e9seket k\u00e9rsz a folyamat sor\u00e1n. Ez\u00e9rt mutasd meg a protot\u00edpust min\u00e9l el\u0151bb m\u00e1soknak is, \u00edgy id\u0151ben kider\u00fclnek a hib\u00e1i. Ha k\u00e9slekedsz ezzel, akkor lehet, hogy egy t\u00fal dr\u00e1ga hib\u00e1ba futsz bele. <\/p>\n\n\n\n
Elbizonytalan\u00edt, ha nem m\u0171k\u00f6dik a design<\/h4>\n\n\n\n
Egy tesztel\u00e9s ut\u00e1n kider\u00fcl, hogy a design m\u0171k\u00f6dik-e vagy sem. Ha ut\u00f3bbir\u00f3l van sz\u00f3, akkor azt nem buk\u00e1sk\u00e9nt kell meg\u00e9lni, hiszen pont az\u00e9rt k\u00e9sz\u00fclt el a protot\u00edpus, hogy ez kider\u00fclj\u00f6n. A protot\u00edpus k\u00e9sz\u00edt\u00e9se az\u00e9rt van, hogy k\u00fcl\u00f6nb\u00f6z\u0151 \u00f6tletek, felt\u00e9telez\u00e9sek m\u0171k\u00f6d\u0151k\u00e9pess\u00e9g\u00e9t megvizsg\u00e1ld a gyakorlatban, \u00e9s ne csak a k\u00e9sz term\u00e9kn\u00e9l der\u00fclj\u00f6n ki, hogy haszn\u00e1lhatatlan. Fogd fel a sikertelen tesztet egy tanul\u00e1si lehet\u0151s\u00e9gnek, \u00edgy a k\u00f6vetkez\u0151 protot\u00edpusn\u00e1l ki tudod k\u00fcsz\u00f6b\u00f6lni a hib\u00e1kat.<\/p>\n\n\n\n
Milyen eszk\u00f6z\u00f6kkel k\u00e9sz\u00edthet\u0151 el egy protot\u00edpus?<\/h3>\n\n\n\n
A protot\u00edpusok elk\u00e9sz\u00edt\u00e9s\u00e9hez is haszn\u00e1lhat\u00f3 azon eszk\u00f6z\u00f6k egy r\u00e9sze, melyeket m\u00e1r a dr\u00f3tv\u00e1zn\u00e1l is eml\u00edtett\u00fcnk. Ilyen p\u00e9ld\u00e1ul <\/p>\n\n\n\n
InVision<\/a><\/strong> – egy n\u00e9pszer\u0171 felh\u0151 alap\u00fa platform. Lehet\u0151v\u00e9 teszi a felhaszn\u00e1l\u00f3k egy\u00fcttm\u0171k\u00f6d\u00e9s\u00e9t, az \u00f6tletek tesztel\u00e9s\u00e9t. Sz\u00e9les v\u00e1laszt\u00e9kot k\u00edn\u00e1l sablonokb\u00f3l a kezd\u0151k sz\u00e1m\u00e1ra. El\u00e9rhet\u0151 OS X-re, Windowsra \u00e9s b\u00f6ng\u00e9sz\u0151b\u0151l is. Tervezhet\u0151 vele dr\u00f3tv\u00e1z \u00e9s protot\u00edpus is. Egy protot\u00edpus ingyenesen elk\u00e9sz\u00edthet\u0151 vele.<\/p>\n\n\n\n
Marvel<\/a><\/strong> – felh\u0151 alap\u00fa protot\u00edpus-k\u00e9sz\u00edt\u00e9st k\u00edn\u00e1l, csapatok sz\u00e1m\u00e1ra is. Mobilos t\u00e1mogat\u00e1sa is van, azaz iOS-es \u00e9s androidos alkalmaz\u00e1sban is haszn\u00e1lhat\u00f3, \u00edgy okostelefonon l\u00e1that\u00f3 egyb\u0151l az elk\u00e9sz\u00fclt protot\u00edpus. K\u00f3d n\u00e9lk\u00fcli drag and drop fel\u00fcletet haszn\u00e1l, illetve a Sketchb\u0151l \u00e9s a Photoshopb\u00f3l is megoldhat\u00f3 a mockupok import\u00e1l\u00e1sa. OS X-re, Windowsra \u00e9s b\u00f6ng\u00e9sz\u0151re is el\u00e9rhet\u0151. Egy felhaszn\u00e1l\u00f3 k\u00e9t projektet ingyen elk\u00e9sz\u00edthet rajta.<\/p>\n\n\n\n
MockPlus<\/strong><\/a> – rendk\u00edv\u00fcl felhaszn\u00e1l\u00f3bar\u00e1t, gyors \u00e9s hat\u00e9kony protot\u00edpus-k\u00e9sz\u00edt\u0151 eszk\u00f6z. A platformon sz\u00e1mtalan el\u0151regy\u00e1rtott elem el\u00e9rhet\u0151, \u00edgy gyors\u00edtva a protot\u00edpus k\u00e9sz\u00edt\u00e9s\u00e9t. A design k\u00e9sz\u00edt\u00e9se teljes m\u00e9rt\u00e9kben vizu\u00e1lis alapon t\u00f6rt\u00e9nik. El\u00e9rhet\u0151 OS X-re, Windowsra \u00e9s b\u00f6ng\u00e9sz\u0151re. Ingyenes verzi\u00f3 ugyanakkor nem \u00e1ll rendelkez\u00e9sre, az egy\u00e9ni csomag 59 doll\u00e1rba ker\u00fcl egy \u00e9vre.<\/p>\n\n\n\n
AdobeXD<\/strong><\/a> – minden az egyben megold\u00e1s UX \u00e9s UI designereknek protot\u00edpusok l\u00e9trehoz\u00e1s\u00e1hoz. Egy rak\u00e1s eszk\u00f6z \u00e9s sablon el\u00e9rhet\u0151 benne, az Adobe m\u00e1s eszk\u00f6zeivel pedig term\u00e9szetesen kiv\u00e1l\u00f3 az egy\u00fcttm\u0171k\u00f6d\u00e9se. OS X-re, Windowsra, Androidra \u00e9s iOS-re is el\u00e9rhet\u0151. Az \u00fagynevezett Starter csomag ingyenesen is el\u00e9rhet\u0151 mind egy\u00e9ni, mind c\u00e9ges felhaszn\u00e1l\u00e1sn\u00e1l.<\/p>\n\n\n\n
Figma<\/strong><\/a> – egy felhaszn\u00e1l\u00f3i fel\u00fclet k\u00e9sz\u00edt\u0151 alkalmaz\u00e1s, mely alapvet\u0151en b\u00f6ng\u00e9sz\u0151 alap\u00fa, de el\u00e9rhet\u0151 Windowsra \u00e9s OS X-re is. Egyik remek funkci\u00f3ja, hogy ha elvesz\u00edted az internetkapcsolatot, akkor is tov\u00e1bb tudsz dolgozni b\u00e1rmely dokumentumon, mely nyitva van. \u00c9l\u0151, val\u00f3s idej\u0171 egy\u00fcttm\u0171k\u00f6d\u00e9st tesz lehet\u0151v\u00e9, \u00e9s az eg\u00e9sz csapat el\u00e9rheti az \u00e1ltalad l\u00e9trehozott \u00fajrahaszn\u00e1lhat\u00f3 elemeket. A kezd\u0151 csomag itt is ingyenes.<\/p>\n\n\n\n
Axure<\/strong><\/a> – egy k\u00f6nnyen haszn\u00e1lhat\u00f3 m\u00f3dszer ak\u00e1r dr\u00f3tv\u00e1z, ak\u00e1r protot\u00edpus k\u00e9sz\u00edt\u00e9s\u00e9re. K\u00f3dmentes a haszn\u00e1lata, OS X-re \u00e9s Windowsra \u00e9rhet\u0151 el. A 30 napos pr\u00f3baverzi\u00f3 ingyenes.<\/p>\n\n\n\n
Proto.io<\/strong><\/a> – egy web-alap\u00fa alkalmaz\u00e1s, ahol szint\u00e9n minden drag and drop m\u00f3dszerrel, gombok lenyom\u00e1s\u00e1val, list\u00e1kr\u00f3l t\u00f6rt\u00e9n\u0151 v\u00e1laszt\u00e1ssal, k\u00f3dmentesen m\u0171k\u00f6dik. Ez n\u00e9ha azt eredm\u00e9nyezi, hogy kicsit neh\u00e9z megtal\u00e1lni egyes be\u00e1ll\u00edt\u00e1sokat, de viszonylag k\u00f6nnyen megtanulhat\u00f3 a haszn\u00e1lata. Interakt\u00edv protot\u00edpusok hozhat\u00f3k l\u00e9tre vele a b\u00f6ng\u00e9sz\u0151ben, illetve ugyan\u00edgy megjelen\u00edthet\u0151 mobil eszk\u00f6z\u00f6k\u00f6n is a protot\u00edpus. A legolcs\u00f3bb csomag egy h\u00f3napra 24 doll\u00e1rba ker\u00fcl.<\/p>\n\n\n\n
Flinto<\/strong><\/a> – csak Mac OS-re \u00e9rhet\u0151 el, de low, medium \u00e9s high fidelity protot\u00edpusok is k\u00e9sz\u00edthet\u0151k vele. Az indul\u00f3 \u00e1r 99 doll\u00e1r.<\/p>\n\n\n\n
- Balsamiq<\/a><\/li>
- UXPin<\/a><\/li>
- Mobilos f\u0151oldal<\/strong> – sokan m\u00e9g mindig asztali g\u00e9pes megjelen\u00e9sben gondolkodnak, ez\u00e9rt fontos k\u00fcl\u00f6n megeml\u00edteni a mobilos f\u0151oldalt is. Minden asztali g\u00e9pes verzi\u00f3nak legyen mobilos v\u00e1ltozata is, melyn\u00e9l figyelembe veszed az elt\u00e9r\u0151 interakci\u00f3s k\u00f6vetelm\u00e9nyeket.<\/li>
- El\u0151sz\u00f6r pap\u00edron alkoss<\/strong>! – Ha el\u0151sz\u00f6r pap\u00edron rajzolod meg az elk\u00e9pzel\u00e9seket, az igen hasznos tud lenni. A kezdeti szakasz c\u00e9lja az, hogy min\u00e9l t\u00f6bb \u00f6tletet \u00f6sszegy\u0171jts. Ezt a legjobban a pap\u00edrra tervez\u00e9s teszi lehet\u0151v\u00e9. Min\u00e9l t\u00f6bb verzi\u00f3t hozz l\u00e9tre, de egyikben se \u00e1ss m\u00e9lyre!<\/li>
- L\u00e1sd vil\u00e1gosan a c\u00e9lokat<\/strong>! – Mit akarsz el\u00e9rni a dr\u00f3tv\u00e1z l\u00e9trehoz\u00e1s\u00e1val? <\/li>
- Navig\u00e1ci\u00f3s design<\/strong> – megjelen\u00edti az \u00e1tfog\u00f3 \u00e9s a m\u00e1sodlagos navig\u00e1ci\u00f3s elemeket.<\/li>
- Seg\u00edt a designer sz\u00e1m\u00e1ra az elk\u00e9pzel\u00e9sei kommunik\u00e1l\u00e1s\u00e1ban<\/strong> az \u00fcgyf\u00e9l fel\u00e9.<\/li>
- milyen az inform\u00e1ci\u00f3k, illetve a weboldal strukt\u00far\u00e1ja<\/strong> \u00e9s fel\u00e9p\u00edt\u00e9se (v\u00e1lasz a hol k\u00e9rd\u00e9sre),<\/li>
![\"Protot\u00edpus](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/07\/adobexd-prototipus-keszites.jpg\")
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/09\/drotvaz-prototipus-mockup-kulonbsegek.png\")