Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. UX
Design

10 sfaturi pentru crearea de Wireframes cu Illustrator

by
Length:MediumLanguages:

Romanian (Română) translation by Cath Vectorielle (you can also view the original English article)

Adobe Illustrator este în revenire în lumea de web design. Nu numai că SVG devine frecvent utilizat on-line, dar mai mulți şi mai mulți designeri folosesc vectori pentru wireframing. Următoarele sfaturi te vor ajuta să profiţi din plin de Illustrator ca un instrument de wireframing.

Wireframingul este despre lucru rapid şi iterarea rapidă. Scopul nu este de a crea interfeţe atractive; prioritatea numărul unu este de a proiecta informaţii şi experienţă.

1. Treci pe monocrom

Wireframingul face clară ierarhia pe o pagină web; Acesta demonstrează vizual ordinea în care utilizatorii trebuie să prelucreze informaţia disponibilă. Dacă dorești ca utilizatorii să proceseze titlul înainte de a apăsa butonul "Cumpără acum", titlul trebuie să fie atuul butonului cerând mai multă atenţie.

Această ierarhie vizuală poate fi definită în mai multe moduri. Am putea folosi dimensiunea pentru a face titlul mai de impact, am putea folosi poziţionarea (prin plasarea înainte de buton). Am putea folosi culoarea, contrastul şi o serie de alte lucruri, dar acest lucru în wireframing ar face doar lucrurile mai confuze.

Prin eliminarea culorii din ecuație, relaţia vizuală definită de poziţie, dimensiune şi (dacă dorești să faci un pas in plus) de contrast, este mult mai curată.

Paleta monocromatică în tonuri calde  al lui Eric Miller la  design-ul lui de UX Kits

Noi nu construim kituri de UI drăguțe pixel-perfect aici. Rămâi la o gamă limitată de griuri, apoi utilizează culori doar pentru etichete şi note.

2. Păstrează Layers pentru scopuri specifice

Vorbind de etichete, note şi comentarii, este o idee bună pentru de-a plasa fiecare dintre acestea pe un layer dedicat. Acelaşi lucru este valabil pentru orice altceva care are un scop specific; cum ar fi comportamentul, interacţiunea, gesturile şi aşa mai departe.

Plasează elementele vizuale pe un singur layer, comportamentul pe un altul şi etichete pe altul, astfel încât să poţi comuta cu uşurinţă vizibilitatea lor atunci când este necesar.

3. Simboluri pârghie

D.R.Y. este folosit în general ca un termen de programare, dar la fel se aplică și la fluxul de lucru de design. În orice wireframe dat, vom folosi şi refolosi anumite obiecte. Transformă aceste obiecte în simboluri şi orice modificare a unuia se va reflecta instantaneu în restul.

De exemplu, aici este un câmp de formular simplu:

Haide să-l tragem în panoul Symbols (Shift + Command + F11)

Putem trage de-acum acest simbol din panoul Symbols, ori de câte ori ne place, pe planşa de lucru. Făcând dublu clic pe oricare dintre ele, îl vom izola (e ceva de genul ca și la obiecte grupate) asa că îl putem edita. Orice modificări pe care le facem, în acest caz de rotunjire colțuri ale dreptunghiului, va fi aplicată pentru fiecare dintre simbolurile de câmp formular pe care le-am folosit.

Odată ce avem o colecție de simboluri, putem, de asemenea, să le salvăm ca un set:

Acest lucru ne va permite să le încărcăm în alte fişiere în viitor.

Dacă vrei să înveţi mai multe despre panoul cu simboluri, aruncă o privire peste Quick Tip: Working With Symbols in Adobe Illustrator.

4. Săgeţile sunt perfecte pentru indicat

Un mare sfat este de a întrebuinţa vârfuri de săgeată pe contururi, ceva disponibile în Illustrator gata de folosit din CS5. Wireframes sunt oportunitatea ideală pentru a descrie vizual interacţiuni, fluxul de aplicare, navigare şi mişcare.

În aceste zile putem uşor adăuga vârfuri de săgeată la contururi, direct de la panoul Stroke.

Putem edita chiar şi sursa Illustrator "Arrowheads.ai" , aşa cum explică Ryan Cornwell, si adăuga propriile noastre vârfuri de săgeată în amestec.

Notă: În mod enervant, instrumentul Eyedropper nu  aplică săgeţile împreună cu alte stiluri de contur, deci nu este la fel de uşor de duplicat efectul pe care l-ai ales. Dar totusi, sunt perfecte pentru wireframing.

5. Aplicare pe grilă pentru spaţierea unificată şi dimensionare

În multe feluri, acest lucru urmează din nefolosirea culorilor. Dimensiunile unificante şi spaţierea elimină un element de distragere a atenţiei din wireframe, ajutându-ne vizual să ne concentrăm pe ceea ce este important.

Nu contează dacă dimensiunile exacte nu reflecta ceea ce  va UI fi în continuare pe această rută; atâta timp cât rămân  ierarhia şi relaţiile adevărate, suntem pe o cale bună.

Aplică o grilă pe planşa ta de lucru mergând la View > Show Grid Selectând View > Snap to Grid va fi util să poziţionezi obiectele cu precizie.

Pentru a specifica exact cum vrei grila ta să arate (şi adu-ți aminte, nu îți bați capul pentru mici detalii aici), du-te în  Illustrator > Preferences > Guides & Grid. Odată ce te afli acolo se poate defini distanţa dintre liniile de grilă, apoi specifică cât de multe subdiviziuni dorești în cadrul acestor linii.

Notă: Simte-te liber să colorezi grila ta în altceva decât gri; Acesta nu va fi parte din produsul final.

6. Utilizează stiluri grafice pentru butoane flexibile

În funcţie de nivelul de fidelitate (cât de fidel site-ului final vrei să fii) poți avea text real, de exemplu, pe butoane. Pentru a face aceste butoane să crească şi să se micșoreze în funcţie de conţinutul lor, nu folosi obiecte,ci stiluri grafice.

Să începem cu un şir de text de umplutură.

Acum hai sa deschidem panoul Appearance accesând  Window > Appearance..

Utilizând panoul Appearance, poţi adăuga mai multe culori de umplere la un singur obiect. Putem stratifica aceste umpleri colorate în ordinea în care dorim să le afişăm; în această imagine poţi vedea mai multe, toate îngrămădite una pe alta.

De acum, am nevoie doar de două umpleri, aşa că haide să adăugăm o culoare întunecată pentru text, apoi o culoare pală pentru fundal.

În prezent, nu putem vedea fondul gri pal, pentru că este exact aceeași formă ca umplutura cea mai de sus. Cu toate acestea, putem izola şi manipula fiecare umplutură separat. Selectează umplutura de jos în panoul Appearance, apoi du-te la  Effect > Convert to Shape > Rounded Rectangle...

Introdu unele setări, oricare crezi tu de cuviinţă, doar asigură-te că dimensiunea este în raport cu obiectul la care se aplică.

Umplerea gri palid pe partea de jos acum a luat forma unui dreptunghi rotunjit, relativ la dimensiunea textului. Un buton! Pentru a aplica acest aspect la alte obiecte, deschide panoul Graphic Styles şi trage butonul întreg în el. Înfățisările tale vor fi salvate ca un stil care se poate reutiliza.

De exemplu, aici este un şir lung de text. Cu textul selectat, fă clic pe stilul grafic nou creat (pe care am făcut dublu clic şi l-am redenumit) să-l aplici imediat.

7. Configurează câteva Artboards frecvent utilizate

Viteza este numele jocului cu wireframing! Schițezi o compoziție, treci mai departe, schițezi o alta, treci mai departe. Prin urmare, are sens pentru a avea puncte de plecare gata făcute, care le poți accesa cu uşurinţă. S-ar putea să funcţioneze cel mai bine pe o planşetă masivă mai mult, trăgând obiectele finalizate într-un fişier separat, sau poate preferi să lucrezi direct pe planşe de lucru dimensionate în mod corespunzător.

De exemplu, Iată o compoyiţie cu un ecran iPad (1536x2048px) şi patru ecrane iPhone 4S  (640x960px), deşi ai posibilitatea să pregăteşti un fişier cu orice număr de ecrane de dispozitive pentru exemplu . Fie setezi manual dimensiunile tale preferate, fie alegi dintre oricare presetare disponibilă opţiunile planşei de lucru:

Include orice ghiduri comune, nume de layere, simboluri etc. care le-ai putea utiliza, apoi salvează totul ca şablon pentru utilizări viitoare (File > Save as Template..) Acest punct de plecare va fi disponibil pentru tine, accesând File > New from Template.., complet, cu toate bucăţile şi părticelele lăsate acolo.

8. Foloseşte TextExpander pentru text de umplutură

Illustrator nu vine cu instrumente pentru textul de umplutură. Există unele script-uri cu care te poţi juca, dar cel mai simplu mod pentru a obţine text de umplutură în Wireframes-urile din Illustrator este de a utiliza TextExpander.

Notă: dacă eşti utilizator de Windows, PhraseExpress oferă funcţii similare cu TextExpander

Adaugă o serie de fragmente de text care le vei găsi utile frecvent pentru wireframes (cum ar fi un titlu mare, un titlu scurt, corpuri de texte de diferite lungimi, text tipic de buton , elementele de meniu şi aşa mai departe) astfel încât acestea sunt uşor accesibile în Illustrator.

Definind o fraza-cheie pentru fiecare fragment, TextExpander va înlocui această frază cu conţinut ori de câte ori o tastezi, economisind o groază de timp. Utilizează opţiunile de dosar pentru a te asigura că aceste fragmente vor avea efect doar în Illustrator, dacă vrei.

Pentru a afla mai multe despre optimizarea muncii tale cu TextExpander, aruncă o privire peste Master TextExpander With These Helpful Tips & Tricks..

9. Practică denumirile de fişier logice

Capacitatea de a vizualiza rapid schimbări şi idei este la inima wireframingului, dar acest lucru poate duce la un morman imens de fişiere dezorganizate, daca nu esti atent. Cheia este de a salva etapele importante și cu convenții de denumire fişiere logice.

De exemplu, am putea dori să înceapă fiecare nume de fişier cu numele paginii pe care lucrăm. Atunci ar putea fi înşelept să foloseţti un fel de variantă de nume, după care numărul versiunii: pagină-variantă-versiune.ai

De exemplu, am putea lucra pe o pagină de destinaţie; una care se concentrează pe promovare fie unei campanii de e-mail, sau a unei cărţi electronice. Am putea avea nume de fişiere, cum ar fi:

Nu numai că astfel se păstrează dosarele de proiect organizate, dar acţionează ca o formă manuală de versionare. Matt Smith discută ideea în amănunt în articolul  Wireframing With Illustrator and InDesign.

10. Salvează în Dropbox pentru versionare uşoară

Ducând ideea de versionare chiar mai departe, salvarea fișierelor direct în Dropbox va elimina această sarcină din lista de sarcini complet. Chiar şi planul gratuit de Dropbox va stoca o copie a fișierelor de fiecare dată, pentru 30 de zile.

De asemenea, Layervault oferă minunăţii similare în planul său  gratuit.

În orice caz, acest lucru este util mai ales dacă colaborezi cu o echipă. Cu toţi membrii lucrând dintr-o locaţie centrală, cu opţiunea de a restabili orice versiune dacă cineva face ceva necorespunzător,această metodă este ideală pentru lucrul în echipă.

Concluzia

Multe dintre aceste sfaturi sunt în întregime personalizate pe propriul meu flux de lucru şi poate nu se aplică perfect la felul tău de a face lucrurile. Cu toate acestea, sper că ţi-au declanşat cel puţin curiozitatea, făcându-te să te gândeşti la modul în care să construieşti wireframe-urile pentru machetele de web . Dacă ai orice alte sfaturi proprii, te rog să le postezi la comentarii!

Lecturi suplimentare

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.