Un ghid cuprinzător pentru wireframing în dezvoltarea produsului
Publicat: 2018-04-13Un proiect de dezvoltare web are multe în comun cu construirea unei case. Când construiești o casă, alegi în mod firesc cea mai bună persoană care poate face această treabă. V-ați dori pe cineva cu experiență, cunoștințe profunde și ați dori să vă asigurați că constructorul are procesul potrivit pentru a finaliza lucrarea în timpul stabilit și într-un buget sancționat. Ce te face să fii sigur de asta? Un plan, nu? Ei bine, în domeniul dezvoltării web este vorba de wireframing.
Cuprins
Ce este wireframing?
Cu cuvinte simple, wireframing este o ilustrare a unei pagini web. Un wireframe este un aspect al unei pagini web care articulează ce fel de elemente de interfață își vor găsi locul pe paginile importante. Este o parte importantă a procesului de proiectare a interacțiunii.
Scopul major al wireframing-ului este de a oferi o înțelegere vizuală a unei pagini în cea mai incipientă etapă a unui proiect pentru a obține aprobarea tuturor părților interesate și a membrilor unei echipe de proiect. Wireframes-urile sunt, de asemenea, folosite pentru a crea navigarea globală și secundară pentru a vă asigura că terminologia și structura încorporate în site corespund așteptărilor utilizatorilor.
Diferența dintre wireframes, machete și prototipuri?
Cadru de sarma
Un cadru de sârmă este la fel ca un schelet sau o structură de bază a unui site. Wireframingul este mai preocupat de funcționalitate. De exemplu, un wireframe al unui site sau al unei aplicații va reprezenta navigarea, butoanele principale, coloanele etc. Poate fi echivalat cu un plan al unui design arhitectural.
Să batjocorească
Mockup-urile, pe de altă parte, sunt reprezentări mai realiste ale produselor. Spre deosebire de o machetă wireframe se concentrează pe detalii. Toate aspectele precum culorile, fonturile, pictogramele, diagramele, imaginile sunt luate în considerare.
Prototip
Prototipurile oferă o reprezentare vizuală de înaltă fidelitate a proiectului dumneavoastră. Vă puteți gândi la un prototip ca la un plus valoros la o machetă. Prototipul, după cum sugerează și numele, arată exact cum va arăta produsul. Prototiparea implică conectarea wireframe-ului, conectarea butoanelor la paginile de destinație respective, stratificarea meniurilor derulante etc.
Pentru a simplifica și mai mult, acestea sunt toate etapele procesului de proiectare a produsului, începând de la schițare (o fază primară cea mai simplă a proiectării – desenul manual) terminând cu crearea unui prototip.
Wireframing pentru o aplicație mobilă
Wireframing pentru o aplicație mobilă oferă beneficii similare cu cele ale realizării acesteia pentru un site web. Oferă o idee clară despre cum va arăta o aplicație și cum va funcționa. Nimănui nu-i place să cumpere o idee vagă. Wireframing oferă o mare ușurință în timpul tranziției proiectului. De asemenea, reduce costul total al dezvoltării produsului, deoarece modificările pot fi făcute într-un stadiu incipient.
Un lucru important de reținut atunci când faceți wireframing pentru o aplicație mobilă este să luați în considerare platforma (iOS sau Android) pe care vă veți lansa produsul. 
Lucruri importante de reținut în timpul realizării wireframei
În timp ce creați wireframe, este important să rețineți că acestea sunt doar ghiduri pentru a afla unde vor apărea pe pagină conținutul principal și elementele de navigare ale site-ului dvs. Deoarece scopul ilustrației nu este reprezentarea unui design vizual, este întotdeauna de preferat să fie simplu. Economisește timp și eforturi. Iată câteva sfaturi care vă vor fi utile în timpul wireframing:
- Începeți cu wireframes simple, de joasă fidelitate.
- Evitați utilizarea culorilor. Poate doriți să rămâneți la tonuri de gri pentru a reprezenta diferența.
- Nu este nevoie să folosiți imagini. Folosiți doar o formă geometrică în loc de imagini pentru a oferi o idee generală.
- Utilizați fontul generic și păstrați-l același pe tot parcursul în timpul realizării. Tipografia nu este o parte esențială a procesului.
- Nu este nevoie să încadrați fiecare pagină.
Wireframingul este o procedură de gândire a problemelor și de specificare a interfețelor. Amintiți-vă, ca și alte forme de proces de dezvoltare, wireframing-ul poate avea pericolele sale dacă nu este făcut în mod corespunzător.
Elemente esențiale exemplificate în wireframes
Elementele wireframing depind în mare măsură de tipul de site pe care doriți să îl construiți, de cerințele clienților, printre altele. Cu toate acestea, există anumite elemente care sunt adesea încorporate ca elemente standard de wireframing, cum ar fi Antet, Subsol, Logo, Câmp de căutare, Sisteme de navigare, Conținutul corpului, Butoanele de partajare, Breadcrumbs.
Tipuri de wireframes
Wireframes-urile pot diferi de la procesele lor de producție (schițe pe hârtie vs imagini desenate de computer) la cantitatea de detalii pe care o conțin. Cei doi termeni folosiți pe scară largă pentru a desemna producția de wireframing sunt – wireframe joasă și de înaltă fidelitate.
- Wireframes de joasă fidelitate – Sunt ușor și rapid de dezvoltat. Ele ajută la facilitarea comunicării în echipă. Adesea, wireframes-urile de joasă fidelitate conțin imagini simple, textul lorem ipsum ca umplutură.
- Wireframes de înaltă fidelitate – Sunt mai potrivite pentru documentare datorită nivelului lor ridicat de detalii. Aceste wireframes conțin informații despre fiecare element mic de pe pagină.
De ce creăm wireframes?
Iată câteva beneficii semnificative ale wireframing-ului:
- Wireframingul joacă un rol esențial în comunicare în timpul dezvoltării web sau a aplicațiilor. Oferă o oportunitate tuturor părților interesate; clienți, dezvoltatori, designeri pentru a vizualiza și a obține o imagine clară a structurii site-ului web.
- Este mai ușor să comunicați și să vă transmiteți ideile cu wireframes.
- Wireframes-urile adaugă claritate proiectelor, de asemenea, vă permite să lucrați prin toate interacțiunile și nevoile de aspect.
- Wireframing-ul facilitează dezvoltarea conținutului.
- Wireframes-urile determină clientul să se gândească la cerințele lor și îl ajută să-și definească obiectivele proiectului și obiectivul principal.
- Vă ajută să colectați feedback despre produsul dvs. într-un stadiu foarte incipient.
- Wireframes-urile permit designerilor să creeze machete pentru multe secțiuni ale site-ului web, ceea ce duce la un proces creativ mai fluid.
Pași importanți în procesul de wireframing
Câțiva pași importanți pe care trebuie să îi urmați în timpul procesării wireframing includ:
- Cercetare – O mică idee despre modul în care alți designeri fac wireframing vă va ajuta foarte mult să găsiți o inspirație.
- Selectați-vă instrumentul - Există mai multe instrumente disponibile pentru a crea wireframes. Puteți alege unul în funcție de confortul dvs.
- Configurați o grilă - Există mai multe șabloane de grilă disponibile pentru descărcare gratuită, vă puteți personaliza chiar și propriul șablon de grilă cu ajutorul Telerik, UI-grid etc.
- Determinați un aspect – Așezați casete, adăugați conținut dacă este disponibil, implicați-vă clientul în această etapă pentru a comunica discrepanțe, dacă există.
- Transformă-l într-un prototip.
Câteva instrumente populare pentru a crea wireframes
Indiferent de tipul de wireframing pe care îl urmărești, de joasă fidelitate sau de înaltă fidelitate, utilizarea instrumentelor de wireframing te ajută să devii mai profesionist și să lucrezi într-un mod mai ordonat și mai organizat. Iată lista celor șapte instrumente de wireframing pe care le puteți utiliza eficient:
- Balsamiq
- Mockflow
- InVison
- Wireframe.cc
- HotGloo
- Pidoco
- Axure
Wireframingul este una dintre abilitățile esențiale pe care trebuie să le dobândești ca dezvoltator de produse. Pentru a deveni un manager de produs de succes, trebuie să dețineți o abordare holistică față de wireframing și alte abilități de dezvoltare a produselor, care reprezintă fundamentul pentru înțelegerea elementelor fundamentale ale designului de produs. Aceasta va fi cu siguranță poarta ta de acces către o carieră prosperă în dezvoltarea de produse.
Studiați online cursuri de management de produs de la cele mai bune universități din lume. Câștigă programe de master, Executive PGP sau Advanced Certificate pentru a-ți accelera cariera.
