Usa Firefox per creare semplici mockup

Pencil è uno strumento wireframing che possiamo usare per tracciare un mock up dell'interfaccia utente della nostra applicazione. La cosa bella 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 metallica è importante per consentire agli utenti di concentrarsi sull'elemento importante della pagina. La creazione di uno schizzo approssimativo 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 vuole 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"> "Disegni a matita".

Questo è ciò che assomiglia a Brizzly. È un'applicazione web piuttosto interessante che aggrega Facebook e Twitter in un'unica pagina.

Questo è il risultato finale del wireframe. Le forme principali in questo wireframe sono, rettangoli, caselle di testo e schede. La prossima sezione dell'articolo darà un semplice esempio su come creare ogni forma.

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.

Ridimensiona il rettangolo in base a larghezza e altezza appropriate.

Possiamo personalizzare il testo, il bordo e il colore di sfondo di qualsiasi forma in Matita. Fare clic con il tasto destro sul rettangolo e selezionare "Proprietà" per aprire le finestre Proprietà. Questa è la schermata delle proprietà dello sfondo. Imposta il colore di sfondo Rettangolo su bianco (#FFFFFF).

Fare clic sulla scheda 'Bordo' e regolare le proprietà del bordo. Impostare il colore del bordo su nero (# 000000) e modificare il peso 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.

Creare schede

Le schede home, bozza e immagine sono tre schede sovrapposte l'una sull'altra. Trascina tre "Tabs Panel" nel rettangolo. Ridimensiona ogni scheda in modo che ciascuna scheda sia affiancata.

Apri la schermata delle proprietà del testo per regolare il colore del carattere della scheda "Immagini" e "Bozza". Impostalo su Grigio (# 989898).

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 per Firefox per creare un wireframe migliore

link
Scarica Pencil
Scarica Colorzilla
W3C HTML Cheat Sheet di colore