23Jul
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.
Guida introduttiva a Matita
Scarica Matita dalla pagina di componenti aggiuntivi di Matita. Una volta installato Pencil, è accessibile da "Strumenti" & gt;'Disegno a matita'.
Ecco come appare 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 tabulazioni. La prossima sezione dell'articolo darà un semplice esempio su come creare ogni forma.
Creazione di un rettangolo
Il primo passo per creare una forma di wireframe è trascinare una forma dal menu 'Raccolte forme' nell'area di disegno.
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 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 Rettangolo su bianco( #FFFFFF).
Fare clic sulla scheda 'Bordo' e regolare le proprietà del bordo. Impostare il colore del bordo sul nero( # 000000) e modificare il peso del bordo su 1.
La schermata delle proprietà del testo 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 una sull'altra. Trascina tre 'Tabs Panel' nel rettangolo. Ridimensiona ogni scheda in modo che ciascuna scheda sia affiancata.
Apre la schermata delle proprietà del testo per regolare il colore del carattere della scheda "Immagini" e "Bozza".Impostalo su Grigio( # 989898).
Creazione di testo
Trascinare la forma 'Testo' nell'area di disegno per creare ciascun menu. Possiamo regolare l'aspetto del testo accedendo alla finestra delle proprietà del testo.
Suggerimenti utili per la modifica del colore
Il colore è una delle parti più essenziali nella realizzazione di un wireframe gradevole. 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
Pencil è 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 Matita
Scarica Colorzilla
W3C HTML Cheat Sheet
