Utilizați Firefox pentru a crea machete simple
Creionul este un instrument de scanare pe care putem folosi pentru a schița o machetă a interfeței de utilizare a aplicației noastre. Lucrul minunat despre Pencil este că este ușor, ușor de folosit și integrat strâns cu Firefox. Pe deasupra este o aplicație gratuită open source! La sfârșitul acestui articol vă vom da o simplă demonstrație despre modul de utilizare a creionului pentru a crea o bridă.
De ce creăm rame de tip wireframes ?
Un cadru wireframe este o schiță a unei idei de aspect al unei pagini. Un cadru wireframe se concentrează pe designul informațional al 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, 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 vă permite 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 vrea cu adevărat și 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ă colaboreze eficient și să identificați problemele de design potențiale devreme.
Noțiuni de bază cu creion
Descărcați Pencil from Pencil's add ons page. Odată 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 da un exemplu simplu de a crea fiecare formă.
Crearea unui dreptunghi
Primul pas de a crea o formă de cadru de sârmă este să trageț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 dreptunghiulară î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.
Crearea filelor
Filele de domiciliu, 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 text 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ățile textului.
Sfaturi utile pentru schimbarea culorii
Culoarea este una dintre cele mai importante elemente î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. Faceți clic pe pictograma dropper ochi 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 picătură. Trebuie doar să copiați codul Hex în cod HTML al creionului.
Concluzie
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
