Share
După schițare, există un ultim lucru pe care ar trebui să lucrați înainte de a începe să proiectați (deși, desigur, acest lucru face parte din proiectare). Wireframing este în esență un ghid vizual pentru un site web care vă ajută să vă uitați la aspect fără să vă gândiți la estetica proiectului.
Cum ar trebui să arate un cadru wireframe va varia în mod sălbatic, în funcție de cine vorbiți. Aveți mai multe opțiuni atunci când creați rame de tip wireframe - de la modul în care vă afișați ramele de tip wireframes, la software-ul cu care le creați.
Atunci când creați rame de tip wireframes, trebuie să lucrați cu aspect și cu conținutul pe care l-ați pregătit anterior. Ideea unui cadru wireframe - ca livrare către un client, sau doar ca un pas suplimentar pe care ați prefera să-l luați - este să puteți afișa aspectul vizual și fluxul unei pagini de web, înainte de a vă împotmolit cu designul detalii cum ar fi culoarea, tipografia sau orice alte falii vizuale.
Cea mai bună modalitate de a vă deplasa la crearea cadrelor digitale pentru proiectul dvs. este să vă deplasați direct din faza de schițare. În acea secțiune ar fi trebuit să jucați deja cu aspectul, dar crearea unui cadru digital este o modalitate mult mai profesionistă de a vă alinia ideile despre structura și fluxul paginii dvs. web.
Când creați cadre creative, doriți să vă asigurați că utilizați conținutul real pe care l-ați pregătit mai aproape de începutul proiectului. Personal, prefer să proiectez fire de rețea care nu conțin nimic care ar putea influența un client în a gândi că se iau decizii de proiectare care vor afecta aspectul proiectului. Prin urmare, întotdeauna mă asigur că desenez un cadru wireframe care se concentrează doar pe conținutul proiectului și modul în care conținutul este prezentat pe pagină.
Un exemplu wireframe creat folosind aplicația Desktop Balsamiq. Conținutul care este bine scris și afișat într-un mod util și relevant pentru cei care îl vor citi, va duce întotdeauna la un design mai bun și la o experiență online. O rețea wireframe bine concepută este cea care ține cont de faptul că conținutul este cel mai important lucru pe pagină și este simpatizant să afișeze acel conținut într-un mod potrivit pentru proiect și pentru utilizatorii finali.
Stadiul de tip wireframe al unui proiect se va referi foarte mult la editarea și lucrul cu conținutul dvs. mai aproape de începutul proiectului. Ca un scurt exemplu, în acel moment ați lucrat din greu pentru a vă asigura că conținutul va fi ușor de citit prin utilizarea corectă a titlurilor și a listelor. Proiectarea unei rețele de tip wireframe înseamnă transportarea acelui conținut (în paragrafe, titluri, liste și orice alt mod pe care ați ales să-l formatați în conținut) în cadrul dvs. wireframe și privind modul în care puteți începe să creați vizual relațiile dintre fiecare bit de conținut, conectând punctele până când aveți o reprezentare vizuală a modului în care acel conținut ar putea arăta pe o pagină.
Pentru a vă menține structurile fără fir fără design și concentrarea conținutului, lucrul cu blocuri este o modalitate foarte ușoară de a separa părți dintr-o pagină pentru anumite zone de conținut.
Într-un sens practic acest lucru înseamnă că, dacă, de exemplu, v-ați dorit un antet standard în partea de sus a paginii, atunci ați adăuga un bloc la partea de sus a design-ului dvs. wireframe. Dacă, strict, de exemplu, ați dorit să adăugați un logo și o zonă de navigare în antet, atunci ați plasa blocuri adiționale pentru aceste elemente în interiorul antetului designului dumneavoastră wireframe.
Apoi, puteți utiliza blocuri pe tot restul designului wireframe, continuând să separați zonele pentru anumite fragmente de conținut.
Blocurile nu trebuie să fie doar o pătrată literală monocromă sau dreptunghiulară - de îndată ce aveți o idee despre aspectul dvs. de bază cu blocurile pe care le-ați adăugat, nu ezitați să utilizați conținutul dvs. real în locuri care vor fi utile. De exemplu, utilizați conținutul real pentru elementele de navigare, o introducere la o pagină, titlurile și așa mai departe. Acest lucru vă ajută cum puteți începe să vedeți vizual modul în care conținutul funcționează împreună în aspectul pe care îl creați.
Când vă proiectați carcasele, asigurați-vă întotdeauna că etichetați zonele sau secțiunile pe care le plasați în cadrul dvs. wireframe. Deși ați putea înțelege ceea ce denotă un anumit bloc (mai ales atunci când conținutul real nu este plasat acolo), un client sau un coleg nu poate și ar trebui să faceți cât mai clară posibil ca ei să înțeleagă ceea ce se uită la.
Atunci când vă proiectați cadrele wireframes, un lucru pe care ar trebui să-l gândiți este fluxul paginii - uitați-vă la modul în care conținutul este așezat pe pagină și cum curge dintr-o secțiune a conținutului în alta.
Scopul aici este să vă asigurați că conținutul citește corect și că ochiul se mișcă fluid dintr-o secțiune în alta. Acest lucru este deosebit de important atunci când aveți pagini grele de conținut - utilizatorii ar trebui să poată să se deplaseze cu ușurință de la o secțiune la alta, fără a fi o experiență jignitoare. Dacă paginile sunt prea ocupate și nu au un fel de flux adecvat, utilizatorii vor fi dezactivați de ceea ce pare a fi un proces dificil de înțeles sau de urmat.
O idee este să vă gândiți la ceea ce ați face în mod intuitiv atunci când navigați pe un site web - începeți să priviți spre logo și antet, apoi până la poziția principală și urmând conținutul principal, trecând treptat spre o bara laterală și așa mai departe.
Când proiectați un site web, este aproape imposibil să creați un cadru wireframe separat pentru fiecare etapă pe care site-ul ar putea să o schimbe, cum arată sau se potrivește împreună. În schimb, având în vedere fluxul de design și de conținut, vă puteți uita la un debit receptiv la designul wireframe.
Acesta a fost un sfat pe care l-am luat de la Sarah Parmenter, "Discursul zilnic", în care Sarah a explicat cum adaugă numerele la carcasele sale, care ajută un client să înțeleagă cum pot fi stocate conținutul și elementele pe un ecran mai mic. Acest lucru este cu adevărat util, deoarece va ajuta un client să înceapă să înțeleagă și despre ierarhia conținutului, de asemenea, ceea ce înseamnă că puteți începe să vă uitați la orice capcane sau provocări posibile atunci când lucrați cu reacție foarte devreme în proiect - ceva care vă poate salva mult timp mai târziu în proiect.
Când proiectați fire de rețea, aveți o cantitate ridicată de opțiuni atunci când vine vorba de software-ul pe care îl puteți utiliza. Personal, cred că există trei opțiuni clare care par a fi cele mai populare, în special în industria web.
Atunci când proiectați o rețea wireframe, soluția cea mai simplă este să lucrați cu o aplicație grafică pe care o cunoașteți deja - sau cel puțin ați folosit puțin înainte. Aceasta înseamnă că nu există o curbă de învățare prea mică sau deloc, astfel încât să puteți sperăm că vă veți descurca mai repede cu proiectarea firelor de rețea.
Cea mai ușoară modalitate de a proiecta cu software-ul grafic este să utilizați instrumentele de formă și text, folosind aceste pentru a crea blocuri de bază, precum și zone specifice cu conținut real. Amintiți-vă să etichetați blocurile dvs. wireframe folosind instrumentul de text în timp ce mergeți de-a lungul.
Aceasta poate fi o surpriză pentru unii, deoarece Keynote și Powerpoint sunt de obicei folosite pentru crearea de prezentări. Cu toate acestea, ele sunt instrumente cu adevărat puternice și ușor de utilizat pentru a crea alte lucruri, inclusiv fire de rețea. Utilizând instrumentele implicite care vă sunt disponibile în aplicațiile în sine, puteți să creați cu ușurință cu ușurință fireframe profesionale.
Preferința mea personală, Balsamiq Mockups este o aplicație dedicată creării de fire wireframe. Această aplicație face cu ușurință proiectarea rețelelor dvs. și dispune de o mulțime de resurse la dispoziția dvs. pentru a glisa și a lăsa rapid elementele pe care doriți să le plasați.
Un lucru pe care-l iubesc despre Balsamiq Mockups este acela că folosește un stil dur, schițat, care se împrăștie cu adevărat să arate că firmele sunt doar acelea - o idee de aspect care ar putea fi apoi tradusă într-un design adecvat. Aveți opțiunea de a alege între o simțire mai standard față de firele de rețea precum și finisarea schițată, dacă simțiți că un client ar fi mai receptiv la asta.
Odată cu introducerea kiturilor de interfață cu utilizatorul, este de asemenea foarte ușor să începeți proiectarea de fire complexe complexe pe o varietate de aplicații. De la kituri complete pe care le puteți descărca pentru a fi folosite ca PSD în Photoshop, seturile care vă ajută să creați cadre în Keynote mult mai ușor - există ceva pentru a vă ajuta.
Accentsconagua