Adobe Illustrator se confruntă cu o revenire în lumea designului web. Nu numai că SVG devine frecvent utilizat online, dar tot mai mulți designeri folosesc vectori pentru wireframing. Următoarele sfaturi vă vor ajuta să profitați la maximum de Illustrator ca instrument de wireframing.

Wireframing înseamnă să lucrați rapid și să iterați rapid. Scopul nu este de a crea interfețe atractive; prioritatea dumneavoastră numărul unu este de a proiecta informații și experiență.

1. Go Monochrome

Wireframele clarifică ierarhia pe o pagină web; ele demonstrează vizual ordinea în care utilizatorii ar trebui să proceseze informațiile disponibile. Dacă doriți ca utilizatorii să proceseze titlul înainte de a apăsa butonul „cumpără acum”, titlul trebuie să „învingă” butonul prin faptul că solicită mai multă atenție.

Această ierarhie vizuală poate fi definită în mai multe moduri. Am putea folosi dimensiunea pentru a face titlul să aibă mai mult impact, am putea folosi poziționarea (plasându-l înaintea butonului). Am putea folosi culoarea, contrastul și o serie de alte lucruri, dar făcând acest lucru într-un wireframe nu face decât să facă lucrurile mai confuze.

Îndepărtând culoarea din ecuație, relația vizuală definită de poziție, dimensiune și (dacă doriți să faceți un pas în plus) contrast, este mult mai curată.

Nu construim aici kituri UI frumoase, perfecte la nivel de pixel. Rămâneți la o gamă limitată de griuri, apoi folosiți culoarea doar pentru etichete și note.

2. Păstrați straturile pentru scopuri specifice

Pe când vorbim de etichete, note și comentarii, este o idee excelentă să le plasați pe fiecare dintre ele pe un strat dedicat. Același lucru este valabil și pentru orice altceva care are un scop specific; cum ar fi comportamentul, interacțiunea, gesturile și așa mai departe.

Placeți elementele vizuale pe un strat, comportamentul pe altul, iar etichetele pe altul, astfel încât să puteți comuta cu ușurință vizibilitatea lor atunci când este nevoie.

3. Folosiți simbolurile

D.R.Y. este utilizat în general ca un termen de programare, dar este la fel de aplicabil și la fluxul de lucru de proiectare. În orice wireframe dat, vom folosi și reutiliza anumite obiecte. Transformați aceste obiecte în simboluri și orice modificare pe care o faceți la unul dintre ele se va reflecta instantaneu în restul.

De exemplu, iată un câmp simplu de formular:

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

Acum putem trage acest simbol din panoul Symbols, de câte ori dorim, pe artboard. Făcând dublu clic pe oricare dintre ele, le vom izola (un pic ca pe obiectele grupate) pentru a le putea edita. Orice modificare pe care o facem, în acest caz rotunjirea colțurilor dreptunghiului, va fi aplicată fiecăruia dintre simbolurile câmpului de formular pe care le-am folosit.

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

Aceasta ne va permite să le încărcăm în alte fișiere pentru viitor.

Dacă doriți să aflați mai multe despre paleta de simboluri, aruncați o privire la Sfat rapid: Lucrul cu simbolurile în Adobe Illustrator.

4. Vârfurile de săgeată sunt perfecte pentru a indica

Un sfat grozav este acela de a profita de vârfurile de săgeată de traseu, ceva ușor disponibil în Illustrator direct din cutie începând cu CS5. Wireframe-urile sunt ocazia ideală de a descrie vizual interacțiunile, fluxul aplicației, navigarea și mișcarea.

În zilele noastre putem adăuga cu ușurință vârfuri de săgeată la trăsături, direct din panoul Stroke.

Potem chiar să edităm fișierul sursă Illustrator „Arrowheads.ai”, așa cum a explicat Ryan Cornwell, și să adăugăm propriile noastre vârfuri de săgeată la amestec.

Nota: În mod enervant, instrumentul dropper nu aplică vârfurile de săgeată împreună cu alte stiluri de trăsături, așa că nu este atât de ușor pe cât ar putea fi să duplicați efectul pe care l-ați ales. Dar, cu toate acestea, sunt perfecte pentru wireframing.

5. Snap to Grid for Unified Spacing and Sizing

În multe feluri, acest lucru este o continuare a nefolosirii culorilor. Unificarea dimensiunilor și a spațierii elimină un element de distragere a atenției din wireframe-uri, ajutându-ne să ne concentrăm vizual asupra a ceea ce este important.

Nu contează dacă dimensiunile exacte nu reflectă cum va arăta interfața de utilizare mai departe; atâta timp cât ierarhia și relațiile rămân adevărate, suntem în regulă.

Aplicați o grilă la Artboard-ul dvs. accesând View > Show Grid. Selectarea View > Snap to Grid vă va ajuta să vă poziționați obiectele cu precizie.

Pentru a specifica exact cum doriți să arate grila dvs. (și nu uitați, nu urmăriți detalii minuscule aici) mergeți la Illustrator > Preferences > Guides & Grid… Odată ajuns acolo, puteți defini distanța dintre liniile grilei, apoi precizați câte subdiviziuni doriți în cadrul acestor linii.

Nota: Simțiți-vă liber să vă colorați grila în altceva decât în gri; aceasta nu va face parte din produsul final.

6. Folosiți stiluri grafice pentru butoane flexibile

În funcție de nivelul de fidelitate (cât de fidel față de site-ul final pe care îl urmăriți), puteți avea text real în interiorul, de exemplu, al butoanelor. Pentru ca aceste butoane să crească și să se micșoreze în funcție de conținutul din interiorul lor, nu folosiți obiecte, ci stiluri grafice.

Să începem cu un șir de text fictiv.

Acum să deschidem panoul Appearance (Aspect), accesând Window > Appearance (Fereastră).

Utilizând panoul Appearance, puteți adăuga mai multe umpluturi la un obiect. Putem suprapune aceste umpluturi în ordinea în care dorim să fie afișate; în această imagine puteți vedea mai multe, toate îngrămădite una peste alta.

Pentru moment, avem nevoie doar de două umpluturi, așa că să adăugăm o umplutură întunecată pentru text, apoi o culoare mai palidă pentru fundal.

În prezent, nu putem vedea fundalul gri deschis, deoarece are exact aceeași formă ca și umplutura superioară. Cu toate acestea, putem izola și manipula fiecare umplutură separat. Selectați umplutura de jos în panoul Appearance (Aspect), apoi mergeți la Effect > Convert to Shape > Rounded Rectangle…

Introduceți câteva setări, orice considerați potrivit, asigurați-vă doar că dimensiunea este relativă la obiectul căruia îi aplicăm acest lucru.

Umplutura gri deschis din partea de jos a luat acum forma unui dreptunghi rotunjit, în raport cu dimensiunea textului. Un buton! Pentru a aplica acest aspect și altor obiecte, deschideți panoul Graphic Styles și trageți în el întregul buton. Aspectul său va fi salvat ca un stil pe care îl puteți refolosi.

De exemplu, iată un șir mai lung de text. Cu textul selectat, faceți clic pe stilul grafic nou creat (pe care am făcut dublu clic și l-am redenumit) pentru a-l aplica instantaneu.

7. Configurarea unor artboard-uri utilizate în mod obișnuit

Rapiditatea este numele jocului cu wireframing! Mâzgăliți un layout, treceți mai departe, mâzgăliți altul, treceți mai departe. Prin urmare, are sens să aveți un punct de plecare gata făcut pe care îl puteți accesa cu ușurință. S-ar putea să considerați că lucrați cel mai bine mai întâi pe un artboard masiv, trăgând obiectele finalizate într-un fișier separat, sau s-ar putea să preferați să lucrați direct cu artboard-uri de dimensiuni corespunzătoare.

Iată, de exemplu, un layout cu un ecran de iPad (1536x2048px) și patru ecrane de iPhone 4S (640x960px), deși puteți pregăti un fișier cu orice număr de exemple de ecrane de dispozitive. Fie setați manual dimensiunile preferate, fie alegeți din oricare dintre presetările disponibile din Artboard Options:

Includeți orice ghidaje comune, nume de straturi, seturi de simboluri etc. pe care s-ar putea să le folosiți, apoi salvați totul ca șablon pentru utilizare viitoare (File > Save as Template..) Acest punct de plecare vă va fi apoi disponibil dacă veți accesa File > New from Template…, complet cu toate bucățile pe care le-ați lăsat acolo.

8. Utilizați TextExpander pentru text fictiv

Illustrator nu vine cu niciun instrument pentru text fictiv. Există câteva scripturi cu care merită să vă jucați, dar cel mai simplu mod de a introduce text fictiv în wireframe-urile Illustrator este să folosiți TextExpander.

Nota: dacă sunteți utilizator de Windows, PhraseExpress oferă o funcționalitate similară cu TextExpander

Adaugați o serie de fragmente de text pe care vă găsiți că le folosiți în mod obișnuit pentru wireframe-uri (cum ar fi un titlu mare, un titlu scurt, o copie a corpului de diferite lungimi, text tipic pentru butoane, elemente de meniu și așa mai departe), astfel încât acestea să fie ușor disponibile din Illustrator.

Prin definirea unei fraze cheie pentru fiecare fragment, TextExpander va înlocui acea frază cu conținutul dvs. ori de câte ori o tastați, economisind saci de timp. De asemenea, puteți utiliza opțiunile de dosar pentru a vă asigura că aceste fragmente au efect numai în Illustrator, dacă doriți.

Pentru a afla mai multe despre optimizarea fluxului de lucru TextExpander, aruncați o privire la Master TextExpander With These Helpful Tips & Tricks.

9. Practicați denumirea logică a fișierelor

Să fiți capabil să vizualizați rapid schimbările și ideile se află în centrul wireframing-ului, dar acest lucru poate duce la o grămadă uriașă de fișiere dezorganizate dacă nu sunteți atent. Cheia este de a salva în etape semnificative și cu convenții logice de denumire a fișierelor.

De exemplu, am putea dori să începem fiecare nume de fișier cu numele paginii la care lucrăm. Apoi, ar putea fi rațional să folosim un fel de nume de variantă, după care numărul versiunii: page-variant-version.ai

De exemplu, am putea lucra la o pagină de destinație; una care se concentrează pe promovarea fie a unei campanii de e-mail, fie a unui ebook. Am putea avea nume de fișiere de genul:

Nu numai că acest lucru menține dosarele de proiect organizate, dar acționează ca o formă de versionare manuală. Matt Smith discută mai mult despre această idee în articolul său Wireframing With Illustrator and InDesign.

10. Save in Dropbox for Easy Versioning

Scoateți ideea de versionare chiar mai departe, salvarea fișierelor direct în Dropbox va elimina complet această sarcină din lista de sarcini. Chiar și planul gratuit de la Dropbox va stoca o copie a fișierelor dvs. de fiecare dată când le salvați, timp de treizeci de zile.

La fel, Layervault oferă o minunăție similară în planul său gratuit.

În ambele cazuri, acest lucru este deosebit de util dacă colaborați cu o echipă. Faptul că toți membrii lucrează dintr-o locație centrală, cu opțiunea de a restaura orice versiune dacă cineva face ceva ciudat, este ideal pentru munca în echipă.

Concluzie

Multe dintre aceste sfaturi sunt în întregime personale pentru propriul meu flux de lucru și s-ar putea să nu se traducă perfect în propriul dvs. mod de a face lucrurile. Cu toate acestea, sper ca măcar să vă stârnească o oarecare curiozitate, pentru a vă face să vă gândiți la modul în care realizați wireframe-urile web. Dacă aveți alte sfaturi proprii, vă rugăm să le împărtășiți în comentarii!

Lecturi suplimentare

• Wireframing With InDesign and Illustrator
• Wireframing With Illustrator and InDesign (diferență subtilă!)
• A Beginner’s Guide to Wireframing
• Illustrator and Arrowheadsheads

.