23Jul
Creionul este un instrument de scanare pe care îl putem folosi pentru a schița o machetă a interfeței de utilizare a aplicației noastre. Lucrul minunat despre creion este că este ușor, ușor de utilizat și integrat strâns cu Firefox. Pe deasupra este o aplicație open source gratuită!La sfârșitul articolului vă vom da o simplă demonstrație cu privire la modul de utilizare a creionului pentru a crea un cadru de tip wireframe asemănător cu Brizzly.
De ce creăm fire de rețea?
Un cadru wireframe este o schiță a unei idei de aspect al unei pagini. Un cadru wireframe se concentrează pe proiectarea informației unei pagini pentru a se asigura că designul se potrivește cu ceea ce are nevoie utilizatorul. O schemă de sârmă constă, de obicei, din forme diferite( cum ar fi cutii, oale ș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 vă ajuta utilizatorii să se concentreze asupra elementului de importanță pe pagina dvs. Crearea unei schițe brute a unei pagini, fără elemente vizuale fanteziste, schimbă atenția utilizatorului asupra elementelor importante cum ar fi dimensionarea, dispunerea și plasarea componentelor paginii. Vom începe să înțelegem mai bine ce client doresc cu adevărat și că are nevoie de software-ul atunci când utilizatorul începe să se concentreze pe elementele importante ale unei pagini. Crearea unui cadru de sârmă vă permite să colaborați eficient cu utilizatorii dvs. și să identificați problemele de design potențiale devreme.
Începeți cu creionul
Descărcați creionul de pe pagina Pencil's add ons. După ce instalați Pencil, acesta este accesibil din "Instrumente" & gt;"Creionul creionului".
Asa arata Brizzly. Este o aplicație web destul de interesantă care agregă Facebook și Twitter într-o singură pagină.
Acesta este rezultatul final al ramei de sârmă.Principalele forme din acest cadru sunt: dreptunghiuri, cutii de text și file. Următoarea secțiune a articolului va oferi un exemplu simplu de a crea fiecare formă.
Crearea unui dreptunghi
Primul pas al creării unei forme de cadru de sârmă este să glisați o formă din meniul "Forma colecțiilor" pe panza.
Redimensionați dreptunghiul la o lățime și înălțime corespunzătoare.
Putem personaliza textul, marginea și culoarea de fundal a oricărei forme în Pencil. Faceți clic dreapta pe dreptunghi și selectați "Proprietăți" pentru a deschide ferestrele de proprietăți. Acesta este ecranul cu proprietățile de fundal. Setați culoarea de fundal dreptunghiului în alb( #FFFFFF).
Faceți clic pe fila "Frontieră" și ajustați proprietățile marginii. Setați culoarea de margine la negru( # 000000) și modificați greutatea marginii la 1.
Ecranul pentru proprietățile textului permite personalizarea tipului, dimensiunii, stilului, greutății, culorii, strălucirii și opacității fontului.
Crearea filelor
Tab-urile de acasă, schiță, imagine sunt trei file care sunt stivuite unul peste celălalt. Trageți trei panouri "Tabs" în dreptunghi. Redimensionați fiecare filă astfel încât fiecare filă să fie afișată una lângă cealaltă.
Deschideți ecranul cu proprietățile textului pentru a ajusta culoarea fontului fila "Imagini" și "Schiță".Setați-l la Gri( # 989898).
Crearea textului
Glisați forma "Text" pe pânză pentru a crea fiecare meniu. Putem ajusta aspectul textului accesând fereastra cu proprietăți de text.
Sfaturi utile pentru schimbarea culorii
Culoarea este una dintre cele mai esențiale în livrarea unei plăci de sârmă plăcute. Modul cel mai precis de a schimba culoarea unei forme este prin specificarea codului HTML al culorii. Stabilirea codului HTML pentru o anumită culoare poate fi dificilă.Putem folosi foaia de cheat de culoare HTML de la w3cschools.com pentru a căuta codul HTML corect pentru o anumită culoare.
De asemenea, ne place să folosim colorzilla pentru a alege culorile de pe ecran și a le folosi în Creion. Dați clic pe pictograma dropperului 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-eye. Trebuie doar să copiați codul Hex în cod HTML al creionului.
Concluzii
Creionul este ușor de folosit. Integrarea creionului cu Firefox ne permite să folosim un alt plugin Firefox pentru a vă ajuta să creați o schemă mai bună a rețelei
Link-uri
Descărcați Creion
Descărcați Colorzilla
W3C HTML Color Cheat Sheet
