Creionul este un instrument de încadrare prin cablu pe care îl putem folosi pentru a schița o machetă a interfeței de utilizare a aplicației noastre. Lucrul grozav despre Pencil este că este ușor, ușor de utilizat și strâns integrat cu Firefox. În plus, este o aplicație gratuită open source! La sfârșitul articolului, vă vom oferi o demonstrație simplă despre cum să utilizați Pencil pentru a crea un Brizzly ca wireframe.
De ce creăm wireframes?
Un wireframe este o schiță a unei idei de aspect de pagină. Un wireframe se concentrează pe proiectarea informațiilor unei pagini pentru a se asigura că designul se potrivește cu ceea ce are nevoie utilizatorul. Un cadru de sârmă constă de obicei din diferite forme (cum ar fi cutii, ovale și diamante) pentru a reprezenta elemente de conținut, funcționale și de navigație. Aceste forme afișează plasarea lor pe pagină.
La început poate părea o pierdere de timp creând schițe brute ale unei pagini. Un cadru de sârmă este important pentru a determina utilizatorii să se concentreze asupra elementului de importanță de pe pagina dvs. Crearea unei schițe brute a unei pagini, fără elemente vizuale fanteziste, îndreaptă atenția utilizatorului asupra elementelor importante, cum ar fi dimensionarea, aspectul și plasarea componentelor paginii dvs. Vom începe să obținem o mai bună înțelegere a ceea ce clientul își dorește și are nevoie cu adevărat din software atunci când utilizatorul începe să se concentreze asupra elementelor importante ale unei pagini. Crearea unui cadru de sârmă vă permite utilizatorilor dvs. și dvs. să colaborați eficient și să identificați din timp potențialele probleme de proiectare.
Noțiuni introductive despre creion
Descărcați Pencil din pagina de adăugare a Pencil. După ce instalați Pencil, acesta este accesibil din „Instrumente”> „Pencil Sketching”.
Așa arată Brizzly. Este o aplicație web destul de interesantă care agregează Facebook și Twitter într-o singură pagină.
Acesta este rezultatul final al cadrului de sârmă. Principalele forme din acest wireframe sunt, dreptunghiuri, casete de text și file. Următoarea secțiune a articolului va oferi un exemplu simplu cum să creați fiecare formă.
Crearea unui dreptunghi
Primul pas al creării unei forme de cadru de sârmă este să trageți o formă din meniul „Colecții de forme” pe pânză.
Redimensionați dreptunghiul la o lățime și înălțime adecvate.
Putem personaliza textul, marginea și culoarea de fundal a oricărei forme în creion. Faceți clic dreapta pe dreptunghi și selectați „Proprietăți” pentru a deschide ferestrele Proprietăți. Acesta este ecranul de proprietăți de fundal. Setați culoarea de fundal dreptunghi la alb (#FFFFFF).
Faceți clic pe fila „Border” și reglați proprietățile borderului. Setați culoarea chenarului la negru (# 000000) și modificați greutatea chenarului la 1.
Ecranul proprietăților textului ne permite să personalizăm tipul fontului, dimensiunea, stilul, greutatea, culoarea, luminozitatea și opacitatea textului.
Crearea filelor
Filele de acasă, schiță, imagine sunt trei file care sunt stivuite una peste alta. Trageți trei „Panou de file” în dreptunghi. Redimensionați fiecare filă astfel încât fiecare filă să se afișeze una lângă alta.
Deschideți ecranul cu proprietăți de text pentru a regla culoarea fontului din fila „Imagini” și „Schiță”. Setați-l la Gri (# 989898).
Crearea textului
Trageți forma „Text” pe pânză pentru a crea fiecare meniu. Putem ajusta aspectul textului accesând fereastra de proprietăți a textului.
Sfaturi utile pentru schimbarea culorii
Culoarea este una dintre cele mai esențiale părți în furnizarea unui wireframe plăcut. Cel mai precis mod de a schimba culoarea unei forme este prin specificarea codului HTML al culorii. Descoperirea codului HTML pentru o anumită culoare poate fi dificilă. Putem folosi foaia de trucuri color HTML de la w3cschools.com pentru a căuta codul HTML potrivit pentru o anumită culoare.
De asemenea, ne place să folosim colorzilla pentru a alege culorile de pe ecran și să le folosim în creion. Faceți clic pe pictograma picătorului din colțul din stânga jos al Firefox pentru a alege culoarea pe ecran. De asemenea, putem deschide selectorul de culori ColorZilla făcând dublu clic pe pictograma drop of eye. Doar copiați lipiți codul Hex în codul HTML color Pencil.
Concluzie
Creionul este ușor de utilizat instrument de încadrare prin sârmă. Integrarea creionului cu Firefox ne face posibilă utilizarea altor pluginuri Firefox pentru a ajuta la crearea unui wireframe mai bun
Link-uri
Descărcați Creion
Descărcați Colorzilla
Foaie de trucuri color W3C HTML
