Mașini de site-uri web: 4 abordări populare de explorat

Mașini de site-uri web

Mașinile de site-uri web pot fi create în mai multe moduri diferite. Este adevărat că nu există „cea mai bună” abordare, dar în funcție de stilurile și preferințele anumitor designeri UI și UX (și de procesul de proiectare), unele vor funcționa mai bine decât altele.

În acest articol, vom analiza avantajele și dezavantajele a patru dintre cele mai populare opțiuni: instrumente UX complete, instrumente de machetare, instrumente de design grafic, precum și modele codificate care încep să estompeze liniile dintre machetele site-ului web și prototipuri.

Dacă sunteți în mod special în căutarea instrumentelor de wireframing, consultați această postare pe cele mai bune instrumente wireframe , sau pentru o colecție mai largă, consultați megaprezentarea noastră a cele mai bune instrumente de web design .



Generează banner JS

Faceți clic pe imagine pentru a afla mai multe și pentru a ridica biletele(Credit de imagine: Future / Toa Heftiba, Unsplash)

Nu faceți greșeala de a crede că toate machetele site-ului web sunt la fel. Deciziile simple despre platforme, fidelitate și codificare vor produce rezultate semnificativ diferite. Știți ce doriți și care sunt obiectivele dvs. înainte de a începe chiar procesul de proiectare - dacă doriți un instrument care să accepte toate cele trei faze, cel mai bine este să începeți să îl utilizați decât să treceți la jumătate. La fel, dacă aveți nevoie de o machetă stelară, complet realistă, rețineți că veți folosi un editor de design grafic la un moment dat.

cum să dezactivați instrumentul grilă de perspectivă

01. Instrumente UX de la un capăt la altul

La nivelul cel mai înalt sunt instrumente end-to-end care vizează satisfacerea întregului flux de lucru: machete, prototipuri, documentare, transferuri pentru dezvoltatori și sisteme de proiectare. UXPin a satisfăcut această nevoie de la începutul anilor 2010, dar o serie de alte mărci, cum ar fi Adobe și InVision, încearcă acum să creeze „singurul instrument care să le conducă pe toate”.

UXPin

UXPin se mândrește cu prototipuri robuste, machete, documentație și transferuri pentru dezvoltatori

Deci, cum se adună aceste instrumente doar pentru crearea machetei? Îi pot aborda fără nicio problemă - și apoi unele. Cu UXPin, de exemplu, puteți crea machete cu mai multe stări și interacțiuni. Imită chiar și unele caracteristici ale Photoshop și Sketch prin includerea unui instrument Pen.

Pe de altă parte, Studio de la InVision , permite o editare de animație destul de ingenioasă; in timp ce Adobe XD vă permite să deschideți fișiere Photoshop și Sketch în desenele dvs. XD și să aplicați culori, simboluri, gradiente liniare și stiluri de caractere.

Studio InVision

Studio by InVision își propune să creeze un flux de lucru end-to-end

Cel mai important, instrumentele end-to-end oferă acum sisteme de proiectare pentru a asigura coerența machetelor între proiecte. Sistemele de proiectare oferă tuturor o singură sursă de adevăr pentru active și principii de proiectare în toate instrumentele. Dacă intenționați să creați o mulțime de machete, această caracteristică devine aproape obligatorie.

Atunci când selectați un instrument end-to-end pentru crearea machetei site-ului dvs. web, merită să luați în considerare următoarele aspecte:

  • Fidelitate : Cât de puternic este instrumentul pentru proiectarea vizuală și a interacțiunii?
  • Coerență : Ce caracteristici asigură coerența proiectării în munca dvs.?
  • Precizie : Elementele cu care lucrați reflectă „sursa adevărului” din organizația dvs.?
  • Colaborare : Puteți colabora cu părțile interesate sau cu alți designeri?
  • Transmiterea dezvoltatorului : Cum generează instrumentul specificații și active pentru dezvoltatori?

02. Instrumente de machetare dedicate

Soluții mai puțin robuste precum Principiu , Cadru , Moqups sau Balsamiq vă poate oferi tot ceea ce aveți nevoie pentru a vă construi macheta - veți pierde doar fluxul de lucru suplimentar și caracteristicile de consistență ale designului. Aceste instrumente sunt concepute pentru a face procesul de creație cât mai ușor posibil, astfel încât să vă puteți concentra mai mult pe deciziile stilistice și mai puțin pe modul de manipulare a programului.

Instrumentele dedicate de machetare au avantaje clare: începătorii beneficiază de ușurința lor de utilizare, în timp ce experții apreciază design-urile special adaptate nevoilor lor avansate. La sfârșitul mai avansat, instrumente precum Framer și Principle sunt specializate în animații și interacțiuni pentru machete.

Cadru

Instrumente precum Framer sunt specializate în interacțiuni

La capătul inferior, Moqups și Balsamiq oferă mai multă funcționalitate decât instrumentele care nu sunt proiectate, care sunt uneori folosite pentru fireframes și machete (cum ar fi Keynote ), dar sunt limitate doar la modele de fidelitate scăzută. Cu toate acestea, ele pot fi destul de utile dacă obiectivul este de a crea fire wireframe de fidelitate foarte rapidă.

Când vine vorba de instrumente de machetă, trebuie să decideți dacă o soluție simplă de wireframing va funcționa sau dacă aveți nevoie de un design de ecran mai avansat. Indiferent de instrumentul de machetă pe care îl alegeți, asigurați-vă că sunteți dispus să acceptați pierderea fluxului de lucru colaborativ și caracteristicile de consistență a designului mai reduse oferite de instrumentele end-to-end.

03. Software de proiectare grafică

Unii designeri jură după software cum ar fi Photoshop CC , Schiță sau Illustrator CC , în special cei specializați sau familiarizați cu instrumentele care oferă control până la pixel. Platformele de design grafic funcționează cel mai bine dacă vizați cel mai înalt nivel de realism și fidelitate vizuală. Și așa cum explicăm în ghidul nostru pentru prototipare rapidă folosind Photoshop CC , poate fi mai ușor decât crezi.

Photoshop CC

Photoshop oferă un control fin, dar poate fi exagerat pentru machete simple

Lucrul în software de proiectare grafică vă oferă acces la o selecție aproape interminabilă de culori foarte definite, deci dacă lucrați în limitele unei scheme de culori rigide și prestabilite - de exemplu, în conformitate cu reguli speciale de branding - atunci aceste programe pot fi cele mai bune opțiune. Mai mult decât opțiunile de culoare, aceste programe oferă instrumente mult mai vizuale, permițându-vă să abordați detaliile.

Cu toate acestea, dezavantajul utilizării acestui tip de software este că poate fi dificil de tradus atunci când este timpul să începeți codarea designului. Ceea ce a funcționat în Photoshop s-ar putea să nu funcționeze întotdeauna în cod (elemente precum fonturi, umbre, efecte de gradient și așa mai departe), ceea ce se poate traduce în timp pierdut găsind soluții pentru faza de prototipare.

Pentru paginile cu stil mare, ar putea fi util să eliminați detaliile vizuale specifice în timpul fazei de machetă, caz în care Photoshop sau Sketch vă vor oferi cele mai multe opțiuni. În mod similar, dacă aveți de-a face cu un client dificil sau greu de mulțumit, prezentarea acestora cu o machetă superbă și impresionantă le-ar putea câștiga mai ușor.

machetele pot fi trase în UXPin

Mockup-urile create în Photoshop sau Sketch pot fi trase și aruncate în UXPin

De asemenea, merită menționat faptul că machetele create în Photoshop sau Sketch pot fi trase și aruncate în faza de prototipare cu UXPin. Acest lucru vă permite să animați cu ușurință toate straturile (fără aplatizare) cu câteva clicuri și vă asigură că nu trebuie să începeți de la zero atunci când este timpul să faceți prototip.

Dacă vizualele nu sunt singura dvs. prioritate, s-ar putea să fiți mai eficient folosind un instrument care vă permite să efectuați wireframing, machete și prototipuri într-un singur loc. Software-ul de proiectare grafică poate avea mai multe probleme decât merită pentru machete, cu excepția cazului în care căutați o vizualizare optimă - cu siguranță va trebui să comunicați regulat cu dezvoltatorul dvs., deoarece aceste instrumente nu sunt concepute pentru colaborare.

04. Mașini codate

Dacă sunteți în principal un designer și nu vă simțiți confortabil cu codificarea, atunci aceasta nu este evident o opțiune. După cum sa discutat în Ghidul machetelor , machetele codificate nu sunt alegerea implicită.

Majoritatea codificărilor pot fi amânate până la etapa de prototipare (dacă creați un prototip HTML / JavaScript) sau chiar mai târziu (dacă utilizați un instrument de prototipare). Dar, în ciuda complexității și a obstacolelor potențiale, există mulți designeri respectabili care susțin introducerea codului în faza de machetă.

În timp ce îmbunătățirile instrumentelor și tehnologiei înseamnă că se deschid din ce în ce mai multe posibilități în proiectarea aspectului, nu totul este ușor (sau chiar posibil) de recreat în cod. Pornirea în cod vă permite să știți imediat ce puteți și ce nu puteți face. Dacă sunteți confortabil cu codul, se poate susține, de asemenea, că a începe cu acest lucru este mai puțin risipitor - macheta va ajunge oricum în HTML / CSS.

Dar, așa cum am menționat anterior, machetele cu codificare nu sunt o strategie populară, din mai multe motive decât dificultatea codării. A începe să codați prea devreme vă poate limita creativitatea și disponibilitatea de a experimenta, deoarece este ușor să vă faceți griji cu privire la fezabilitatea ideilor dvs. în cod, mai degrabă decât la cât de interesante ar putea arăta.

Depinde de dvs. când introduceți codarea. Asigurați-vă că vă cunoașteți obiectivele de proiectare și țineți dezvoltatorii la curent cu modul în care acordați prioritate funcțiilor.

Citeste mai mult: