Cele mai bune resurse pentru a schița rețelele pe bază de rețea

Procesul de proiectarea unei interfețe începe întotdeauna cu generație de idei. Aceasta include vizualizarea, cercetarea altor site-uri și prototiparea rapidă. Această fază de idei devreme este crucială pentru să înțeleagă aspectul și experiența utilizatorului pe care intenționați să le construiți. Deci, cum ar trebui să efectuezi de fapt lucrările de tip wireframing pe un nou proiect?

Sunt un fan al hârtiei tradiționale și al creionului cu instrumente suplimentare, după cum este necesar. Dar transmisie digitală este, de asemenea, mare, și este o opțiune viabilă pentru designeri moderni. În acest articol, aș dori să împărtășesc cele mai bune resurse pentru ambele tehnici pentru a vă ajuta să vă creați propria dvs. grinzi pe bază de rețea UI.

Early UI / UX Conceptualizare

Să începem prin clarificarea diferențelor dintre a cadru de sarma și a prototip. Aceste două cuvinte sunt adesea folosite interschimbabil, deoarece se referă la același proces.

A cadru de sarma este a schiță statică unică din interfața de utilizare a unei pagini Web sau a unei aplicații. Poate să aibă indicații pentru a explica textul butonului, marginile, dimensiunile elementelor sau chiar animațiile. Dar firmele sunt doar proiecții brute pentru pagini individuale.

În mod similar, a prototip este ca un diagramă care arată modul în care diferitele pagini leagă împreună. Deci, un prototip conectează cablurile pentru a demonstra modul în care diferite butoane sau legături ar trebui să conducă la alte pagini.

Aceste definiții nu sunt sculptate în piatră, unii designeri ar putea avea o terminologie proprie și pot să nu fie de acord cu formularea mea exactă. Dar așa mi-am văzut în mod obișnuit descrise, iar câți designeri înțeleg acești termeni cel mai bine.

Deci, ce ar trebui să faci exact cu aceste piese conceptuale timpurii? Sunt cu adevărat necesare? Aș spune că prototiparea nu este întotdeauna necesară, dar este o idee foarte bună, mai ales pentru proiectarea aplicațiilor cu interacțiuni complexe.

Dar frământări este întotdeauna o idee bună pentru fiecare proiect nou. Te ajută se concentreze pe imaginea de ansamblu fără a vă îngrijora detaliile. Aveți un simț al modului în care este prezentată pagina globală și acest lucru este neprețuit atunci când proiectați un aspect concret.

Obiectivele pentru acoperirea prin cabluri

De fiecare dată când începeți un nou proiect, trebuie să vă contemplați ceea ce încerci să rezolvi. Fiecare site este construit cu un scop specific în minte. Multe site-uri au chiar multiple obiective în care unele obiective sunt mai importante decât altele.

Utilizați fireframing ca un ghid pentru a vă ajuta să găsiți cea mai bună strategie pentru captarea obiectivului (obiectivelor) unui site web. Acest lucru probabil că nu se va întâmpla pe prima rețea wireframe, așa că fii pregătit schițați o mulțime de idei diferite.

Căutați alte site-uri similare și scrieți cele mai bune caracteristici ale acestora. Analizați modul în care este organizat conținutul și modul în care vă deplasați prin fiecare pagină.

Gândiți-vă la fire de rețea de la un interactiv. Acestea nu sunt doar imagini frumoase. Sunt reprezentări ale interfețelor digitale și doriți să vă schimbați ideile în acest sens.

Utilizarea resurselor pe bază de grilă, indiferent dacă sunt făcute din hârtie sau digitale, poate ajuta foarte mult în schițarea rapidă. Acum, haideți să verificăm cele mai bune resurse pentru crearea cadrelor wireframes.

Grid Sketchpads

Puteți începe întotdeauna cu schițe de miniatură de bază pe hârtie de imprimantă doar pentru a harta ideilor aspru. Personal, de obicei, încep să lucrez pe hârtie pentru imprimante, pentru că în acest fel sunt mai puțin preocupat de grilaje și multe altele generând idei.

Schițe de grila de dotare sunt cel mai bun mod de a merge dacă doriți curata o idee, și să-i dau mai multă structură. Rețeaua vă ajută estimați distanțele dintre elemente pe pagină și creați un fel de simetrie în cadrul de sârmă.

Există multe produse excelente acolo, dacă doriți porniți firmele pe hârtie, de exemplu, Padul Rhodia Dot vine în diverse dimensiuni pentru uzul cotidian. Este doar cu 80 de pagini, dar acest lucru este destul de tipic pentru majoritatea sketchbook-urilor.

Un alt produs foarte cool și personalizabil este Dotgrid. Toate articolele lui Dotgrid sunt mai scumpe decât cărțile Rhodia, dar ele vin cu mai multe materiale și modele personalizate de acoperire.

Dotgrid acceptă chiar comenzi speciale care te lasă creați-vă propriul schițat personalizat. Fiecare carte conține sub 100 de coli, astfel incluzând partea frontală și din spate veți obține aproximativ 200 de pagini pentru schița rețelei.

Câteva schite de carte cu alte puncte dotate pe care vreau să le menționez include gheața Behance Dot, care este legată de hardcover și spirală, deși conține doar 50 de coli de hârtie.

Responsabil Design Sketchbook este una dintre cele mai bune resurse pentru web designeri. Niciun designer de produse nu ar avea nevoie de o schiță de design receptivă, dar designerii web beneficiază foarte mult de libertatea de a generează idei la diferite lățimi ale dispozitivelor pe partea de sus a unui aspect de rețea.

Aceste plăcuțe de design receptive au de asemenea 50 de pagini în valoare de 100 de pagini, dar fiecare pagină are patru grile diferite receptive reprezentând puncte de interferență diferite în designul receptiv: desktop, laptop, tabletă și smartphone.

Deși designul este mai slab comparativ cu cărțile Dotgrid, nimeni altcineva nu a luat în considerare schițe de răspuns pentru designerii de web. Dacă vă aflați într-un astfel de lucru, merită să comandați unul pentru un test.

Dacă sunteți într-adevăr lucruri lucrate manual, și nu doriți să cheltuiți bani, puteți, de asemenea tipăriți propriile pagini de rețea cu interfață Sketch. Acest site gratuit oferă diferite șabloane de rețea pe care le puteți imprima și utilizați pentru firmele trase manual.

Rețelele au dimensiuni A4 și US pentru diferite stiluri de hârtie pentru imprimante. Puteți alege din mai multe opțiuni, cum ar fi șabloanele pentru un browser web complet sau alte ecrane iPhone.

Toate aceste opțiuni sunt minunate și merită explorate dacă te afli creionul creionului. Hârtia este unul dintre cele mai ușoare medii pentru a obține rapid idei noi, deci este de multe ori alegerea preferată chiar și de designerii UI.

Instrumente digitale și aplicații web

Există atât de multe programe excelente de tip wireframing, încât acestea pot fi greu acoperite fără a risca paralizia de analiză, așa că, pentru moment, să ne concentrăm pe unele dintre cele mai bune opțiuni pentru grilaj pe bază de fireframing.

În primul rând, aș dori să menționez că puteți utiliza instrumentele Adobe cum ar fi Illustrator creați propriile fire de rețea. Acest lucru nu face parte din fluxul de lucru al tuturor și Illustrator cu siguranță nu este gratuit. Dar dacă deja lucrați cu Adobe Creative Cloud, ar putea fi un loc bun pentru a începe.

1. Moqups

Moqups este unul dintre cele mai bune instrumente online pentru wireframing. Lucrați cu un editor vizual și o bibliotecă de materiale pentru a trage și a lăsa pe toată pagina.

Fiecare nou proiect Moqups are un rețea predefinită, și utilizează linii violete luminate pentru a vă ajuta să fixați elementele în aliniere. Este un instrument web foarte bun care face proiectarea cu o rețea mult mai ușoară.

Site-ul funcționează în mod implicit pe un plan gratuit, care limitează utilizatorul la obiecte de 300 de pagini. Site-ul are opțiuni premium, dar plata unei taxe lunare ar putea fi mai enervantă decât să mergi cu instrumente Adobe sau o achiziție unică de Sketch.

2. Grilă Papr

Aplicația web Grid Papr este complet gratuită și oferă conturi publice și private pentru rețelele dumneavoastră. Creați un nume pentru proiectul dvs. și obțineți propria adresă URL unică pentru caracterele pe care le puteți edita de pe orice computer.

Fiecare nou cadru vine cu o grilă care vă permite să executați clic pe grilă pe toate elementele. Caracteristicile sunt simple, dar sunt suficiente creați o rețea wireframe în câteva minute. Doar trageți orice doriți pe pagină și urmați grila pentru a crea o rețea de bare stelare.

3. Wireframe.cc

Wireframe.cc este unul dintre instrumentele cele mai simple și foarte minime pe care le puteți utiliza pentru sincronizarea prin fir. Dispune de a interfață fără interfață cu grilă pre-construită și bare de instrumente organizate. Pur și simplu faceți clic și trageți pentru a crea elemente noi pe panza. De asemenea, puteți salva și distribui munca dvs..

Acesta este un alt instrument oferit gratuit cu planuri opționale premium. Fiecare plan este facturat lunar, așa că este foarte asemănător cu Moqups în structura prețurilor. Instrumentul gratuit este utilizabil din orice calculator fără un cont.

4. Pasărea de muc

Mockingbird este o altă opțiune extraordinară, care oferă mult mai multe caracteristici decât majoritatea instrumentelor de sincronizare. Puteți începe gratuit, dar procesul este limitat la 7 zile. Acest lucru poate fi o neplăcere pentru unii utilizatori, dar instrumentul este cu adevărat incredibil și rulează în toate browserele.

Mockingbird are o bibliotecă nesfârșită de elemente UI, cum ar fi file, acordeoane, meniuri derulante, playere video și legături simple de text. Grila implicită utilizează sistemul de grilă 960gs, dar puteți alege de la 12, 16 și 24 de coloane.

Cuvintele finale

Indiferent dacă alegeți o scanare tradițională sau digitală, este vorba întotdeauna de calitatea producției. Există multe lucruri de învățat atunci când faceți astfel de activități, pentru a găsi orice unealtă vă simte cel mai confortabil pentru dvs..

Mutarea înainte este cel mai bun lucru de făcut trebuie doar să înceapă trunchierea. Obțineți o senzație pentru ceea ce vă place cel mai bine (pe suport de hârtie sau digital) și faceți-o singură. Resursele din acest articol ar trebui să vă ofere mai mult decât suficiente pentru a începe să vă instalați propriile interfețe digitale.

(Coperta foto de Oykun Yilmaz)