Creionul este un instrument de tip wireframing 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.
Un wireframe este o schiță a unei idei de aspect al unei pagini. Un cadru wireframe se concentrează pe designul 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 unor elemente 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.
Descărcați Pencil from Pencil's add ons page. După ce instalați creionul, acesta este accesibil din "Instrumente"> "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ă.
Primul pas de a crea o formă de cadru de sârmă este să trageți o formă din meniul "Shape Collections" 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 în negru (# 000000) și modificați greutatea marginii la 1.
Ecranul pentru proprietățile textului ne permite să personalizăm tipul, dimensiunea, stilul, greutatea, culoarea, luminozitatea și opacitatea textului.
Filele 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ăți de text pentru a regla culoarea fontului fila "Imagini" și "Schiță". Setați-l la Gri (# 989898).
Glisați forma "Text" pe pânză pentru a crea fiecare meniu. Putem ajusta aspectul textului accesând fereastra cu proprietățile textului.
Culoarea este una dintre cele mai esentiale elemente in furnizarea unui cadru incantator. 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 să o folosim în Pencil. 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.
Creionul este ușor de folosit. Integrarea creionului cu Firefox face posibil să folosim un alt plugin Firefox pentru a vă ajuta să creați o schemă mai bună
Link-uri
Descărcați creionul
Descărcați Colorzilla
W3C HTML Color Cheat Sheet
