Pencil è uno strumento di wireframing che possiamo utilizzare per disegnare un modello dell'interfaccia utente della nostra applicazione. La cosa grandiosa di Pencil è che è leggera, facile da usare e strettamente integrata con Firefox. Inoltre è un'applicazione open source gratuita! Alla fine dell'articolo vi daremo una semplice demo su come utilizzare Pencil per creare un wireframe tipo Brizzly.
Perché creiamo wireframe?
Un wireframe è lo schizzo di un'idea di layout di pagina, un wireframe si concentra sul design delle informazioni di una pagina per garantire che il design si adatti a ciò di cui l'utente ha bisogno. Un wireframe di solito è costituito da diverse forme (come scatole, ovali e rombi) per rappresentare elementi di contenuto, funzionali e di navigazione. Queste forme mostrano il loro posizionamento nella pagina.
All'inizio può sembrare una perdita di tempo creare schizzi approssimativi di una pagina. Un wire frame è importante per convincere i tuoi utenti a concentrarsi sull'elemento di importanza nella tua pagina. Creare uno schizzo approssimativo di una pagina, senza elementi visivi fantasiosi, 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 vuole veramente e di cui ha bisogno dal software quando l'utente inizia a concentrarsi sugli elementi importanti di una pagina. La creazione di una struttura metallica consente a te e ai tuoi utenti di collaborare in modo efficace e di identificare tempestivamente potenziali problemi di progettazione.
Iniziare con la matita
Scarica Pencil dalla pagina dei componenti aggiuntivi di Pencil. Una volta installato, Pencil è accessibile da "Strumenti"> "Schizzi a matita".
Questo è l'aspetto di Brizzly. È un'applicazione web piuttosto interessante che aggrega Facebook e Twitter in un'unica pagina.
Questo è il risultato finale del wire frame. Le forme principali in questo wireframe sono rettangoli, caselle di testo e schede. La sezione successiva dell'articolo fornirà un semplice esempio di come creare ciascuna forma.
Creazione di un rettangolo
Il primo passaggio per creare una forma di wireframe consiste nel trascinare una forma dal menu "Collezioni di forme" sulla tela.
Ridimensionare il rettangolo a una larghezza e altezza adeguate.
Possiamo personalizzare il testo, il bordo e il colore di sfondo di qualsiasi forma in Matita. Fare clic con il pulsante destro del mouse sul rettangolo e selezionare "Proprietà" per aprire le finestre Proprietà. Questa è la schermata delle proprietà dello sfondo. Imposta il colore di sfondo del rettangolo su bianco (#FFFFFF).
Fare clic sulla scheda "Bordo" e regolare le proprietà del bordo. Imposta il colore del bordo su nero (# 000000) e cambia lo spessore del bordo su 1.
La schermata delle proprietà del testo ci consente di personalizzare il tipo di carattere, la dimensione, lo stile, il peso, il colore, la luminosità e l'opacità del testo.
Creazione di schede
Le schede home, bozza e immagine sono tre schede impilate l'una sull'altra. Trascina tre "Pannello a schede" nel rettangolo. Ridimensiona ogni scheda in modo che ogni scheda venga visualizzata fianco a fianco.
Apri la schermata delle proprietà del testo per regolare il colore del carattere della scheda "Immagini" e "Bozza". Impostalo su Grigio (# 989898).
Creazione di testo
Trascina la forma "Testo" sulla tela per creare ogni menu. Possiamo regolare l'aspetto del testo accedendo alla finestra delle proprietà del testo.
Suggerimenti utili per cambiare colore
Il colore è una delle parti più essenziali per fornire un piacevole wireframe. Il modo più preciso per cambiare il colore di una forma è specificare il codice HTML del colore. Capire il codice HTML per un colore particolare può essere difficile. Possiamo usare il cheat sheet del colore HTML da w3cschools.com per cercare il codice HTML corretto per un colore particolare.
Ci piace anche usare colorzilla per scegliere i colori dallo schermo e usarlo in Pencil. Fare clic sull'icona del contagocce nell'angolo inferiore sinistro di Firefox per selezionare il colore sullo schermo. Possiamo anche aprire il selettore di colori di ColorZilla facendo doppio clic sull'icona a goccia. Basta copiare e incollare il codice esadecimale nel codice HTML a colori di Pencil.
Conclusione
La matita è uno strumento wireframing facile da usare. L'integrazione della matita con Firefox ci consente di utilizzare altri plug-in di Firefox per creare un wireframe migliore
Collegamenti
Scarica Pencil
Scarica Colorzilla
Cheat Sheet del colore HTML W3C
