| WIREFRAME, MOCKUP SI PROTOTIP: CARE ESTE DIFERENTA? Profesor: Obada LivbaNotiuni si concepte Pentru cei neinitiati, wireframes-urile, machetele $i prototipurile ar a fisinonime. Ele sunt folosite in mod interschimbabil de CAtre incepatori si este de inteles. Dar pentru dezvoltatorii de produse $i design-eri din spatiul digital, aceste reultate woe | [ow | [soe Fredwin cl nteemecen (=e) ALE: stadille inc iente ale dezvoltarii produsului, in special aplicatile web, mobile §I native. 4 ; a in acest context, acestea sunt de obicei definite dupa cum % A, urmeaza ‘© Un wireframe este o sch’ rapid a unui produs menit& sé transmit functionalittile doit. ‘* 0 machetd este un design realist al unui produs conceput ute | ote [ents] pentru a aduna feedback cu privire la elementele sale vizuale. i auieaee zs ‘© Un prototip este o simulare interactiva a unui produs conceput pentru a testa experienta utilizatorului Ce inseamna UX $i UI design? Ux este acronimul pentru User Experience, iar Ul este prescurtarea folosita pentru User Interface Abba) eee, PrototypeCe etse un wireframe? Este primul pas in crearea oricrui site web. De fapt, este o schita ™ aib-negru, nedetalot, despre cum va arta Vihoru| sie. Seopul pines) ASS este de a contura structura site-ului $i abordarile de baza ale designului, De exemplu, daca va fi un site cu mai multe pagini sau cu 0 Logo singura pagina. Ce blocuri se vor plasa pe flecare pagina? Cum vor fi interconectate aceste pagini? Wireframes-urile ajutd sa fie reflectate vizual toate ideile cientului, s8 se sven | sn | srt discute si s8 se facd cu ugurint& modificri fn structura vitorului site | web. Exist sute de programe diferite care pot fi folosite pentru a crea eres th Ae wireframes, Majoritatea designerilor web preferd aceste programe: * Sketch; : + Wireframe.ce + Miro; * Draftium, {in practic8, majoritatea designerilor web deseneazdi mal Intl schita pe hartie, apoi o transfera intr-unul dintre programele de mai sus. Cand wireframe-ul este gata, I partajeazé cu alfi membri a echipei, il arata clientllor $1 il editeaz. Nu dureaz€ mult timp, dar nu trebuie s& sri Sable atest Wc Heol dort ficient. areal un cite sesh lowkc, WontCe este o macheta? O machetd este un design static de inaltd fidelitate al viitorului site web. Este o modalitate de a arta cum va arta designul final al site-ului 7 F web dupa dezvoltarea sa, De regula, o macheta se face in urmatoarele - ree aaa scopuri: « prezentare pentru membrii echipel sau clienfi pentru a vizualiza proiectut; « prezentare pentru clienti Machetele nu sunt interactive. Acestea sunt facute pentru a intelege exact cum va ardita site-ul, daca schema de culori aleasdi este potrivita ete. Exist mai multe programe populare folosite pentru a face machete, cum ar fi * Adobe Photoshop + Adobe ilustrator * Figma * Sketch + Put it on; * Proto.io. ‘n plus, exist€ programe cu gabloane de machete gata faicute. Folosindu-le, se pot vedea cum va aréita designul in diferite ‘medii: pe laptopuri, smartphone-uri, ceasuri etc.Ce este un prototip? Un prototip afigeazd toate elementele si interconexiunile principale care vor fi_ prezente in’ proiectul final. De fapt, este o versiune aproape gata a site-ului. Daca dorim sa cream un site web eficient $i bine conceput, Drototipul este o necestate, In acest caz, pute! testa complet site-ul dvs Putefi evalua capacitatea de utilizare inainte de lansare. Datori prototipurilor, este posibil s& acceptam in prealabil interfata cu utilizatorul 58 nu pierdem timpul cu editarea site-ului web finalizat. Putem oferi prototipuri pentru testare unui grup de utilizatori, deoarece pe intreaga interfaté se poate face click. Puteti crea prototipuri folosind diferite programe: * Principle * Origami + Axure RP + Figma * Draftium Instrumentele de mai sus sunt populate printre designerii web profesionisti $i U/UX. Dar daca nu ai prea mult& experienta in web design, exista programe mai simple. Be exemplu, putem utiliza Draftium/Figma, care functioneaz bine atat pentru wireframes (schie), ct gi pentru prototipuri. Desi are o interfala alb-negru, include zeci de blocuri diferite. In cateva minute, puteti crea un prototip pe are se poste face cick, 1! putem arta colegio sau centilor $1 face modificaDiferente: © Macheta vs Prototip - Diferenta cheie dintre machete $i prototipuri este cé machetele nu sunt interactive. De fapt, acestea sunt necesare doar pentru a demonstra designul si sunt imagini la dimensiune completa ale viitorului site web. Un prototip este un produs aproape complet, pe care se poate face click $i este functional. il putem testa, il putem prezenta clientilor pentru aprobare etc. © Wireframe vs Prototip - Un wireframe este, de fapt, o schit alb-negru cu fidelitate scdzuta a viitorului site. Este necesar pentru a intelege cum va fi site-ul gi structura acestuia. Un prototip este un proiect aproape gata, colorat si pe care se poate face click. © Machete vs Wireframes - Un wireframe este o schita pentru o reprezentare schematic a viitorului site web. il putem folosi pentru a aranja aproximativ blocurile, pentru a arata interconectarea lor si pentru a decide ce pagini avem nevoie pe site. O machet este o reprezentare color a site-ului. De obicei, se face pentru aprobarea abordarilor de design alese, a schemei de culori etc.Referinte utile: © Tutorial video — cum cre&im primul wireframe? -https://wwwyoutube.com/watch?v=apH7-KEWZRI ° Ghid de utilizare wireframe.ce https://www.youtube.com/watch?v=fkSmTmOhVPO ® Schit& rapida in wireframe|ec https://www.voutube.com/watch?v=Inh325YOCZ ® Sfaturi pentru schifarea wireframelor - hittos://www.voutube.com/watch 2v=ykHClaOUUI8 ° $abloane de wireframe https://www.storyboardthat.com/ro/crea%c8%9bi/wireframe-%c8%99abloane © Figma pentru incepatori https://www.youtube.com/watch?v=Fhe4o FBccU&t=2393s o Prototipare cu Figma https://www.youtube.com/watch?v=bFkkiRIRcok ° Prototipare cu Figma https://www.voutube,com/watch ?v=zCS64252C1M » Prototipare cu Mockup hittps://www.youtube.com/watch 2v=hiCSXeK9ABQ » Tutorial de proiectare a interfetei de utilizare - site-ul din Wireframe https://www.youtube.com/watch?v=_P3CrgFiXhg&t=482s