Pencil è uno strumento wireframing che possiamo usare per tracciare un mock up dell'interfaccia utente della nostra applicazione. Il bello di Pencil è che è leggero, facile da usare e strettamente integrato con Firefox. Oltre a tutto ciò è un'applicazione gratuita open source! Alla fine dell'articolo vi daremo una semplice demo su come usare Pencil per creare un wireframe simile a Brizzly.
Perché creiamo wireframe?
Un wireframe è uno schizzo di un'idea di layout di pagina. Un wireframe si concentra sulla progettazione delle informazioni di una pagina per garantire che il design si adatti a ciò di cui l'utente ha bisogno. Un wireframe di solito consiste di diverse forme (come scatole, ovali e diamanti) per rappresentare elementi di contenuto, funzionali e di navigazione. Queste forme mostra il loro posizionamento sulla pagina.
All'inizio può sembrare una perdita di tempo creare abbozzi grezzi di una pagina. Una cornice di filo è importante per consentire agli utenti di concentrarsi sull'elemento importante della pagina. La creazione di uno schizzo preliminare di una pagina, senza elementi visivi di fantasia, sposta l'attenzione dell'utente su elementi importanti come il dimensionamento, il layout e il posizionamento dei componenti della pagina. Inizieremo a comprendere meglio ciò che il cliente desidera e ha bisogno del software quando l'utente inizia a concentrarsi sugli elementi importanti di una pagina. La creazione di una struttura wireframe consente a te e ai tuoi utenti di collaborare in modo efficace e identificare tempestivamente potenziali problemi di progettazione.
Iniziare con la matita
Scarica la pagina dei componenti aggiuntivi di Pencil from Pencil. Una volta installato Pencil, è accessibile da "Strumenti"> "Disegno a matita".
Creare un rettangolo
La prima fase della creazione di una forma di cornice metallica consiste nel trascinare una forma dal menu "Raccolte forme" sulla tela.
Creare schede
Le schede home, draft, picture sono tre schede che sono impilate l'una sull'altra. Trascina tre 'Tabs Panel' nel rettangolo. Ridimensiona ogni scheda in modo che ciascuna scheda sia affiancata.
Creare testo
Trascina la forma 'Testo' nell'area di disegno per creare ciascun menu. Possiamo regolare l'aspetto del testo accedendo alla finestra delle proprietà del testo.
Consigli utili per cambiare colore
Il colore è una delle parti più essenziali nella realizzazione di un piacevole wireframe. Il modo più preciso per cambiare il colore di una forma è specificando il codice HTML del colore. Capire il codice HTML per un colore particolare può essere difficile. Possiamo usare il cheat HTML color da w3cschools.com per cercare il codice HTML giusto per un colore particolare.
Ci piace anche usare colorzilla per scegliere i colori dallo schermo e usarlo in Matita. Fai clic sull'icona a forma di occhio nell'angolo in basso a sinistra di Firefox per scegliere il colore sullo schermo. Possiamo anche aprire il selettore di colori di ColorZilla facendo doppio clic sull'icona a forma di collirio. Basta copiare incollare il codice esadecimale nel codice HTML a colori di Matita.
Conclusione
La matita è uno strumento per il wireframing facile da usare. L'integrazione della matita con Firefox ci consente di utilizzare altri plugin di Firefox per aiutare a creare un wireframe migliore
link Scarica Pencil Scarica Colorzilla W3C HTML Cheat Sheet di colore
