***** Articolo proveniente dal sito di Francesco Ficetola *****
I mockup sono utili per capire cosa effettivamente vogliono i vostri clienti e per farsi una prima idea di progettazione della User Interface, sia essa web o mobile.
Infatti, è partendo da una rappresentazione grafica, magari di impatto, che il cliente riesce a “toccare con mano” ciò che vuole e su cui si può anche condurre una intervista per la raccolta dei requisiti di business.
Spesso si confondono le definizioni di mockup, wireframe e prototype; ecco un ottimo articolo che ne chiarisce le differenze: WireFrame, Prototype e Mockup – Dove sta la differenza.
Dunque, per la presentazione di mockup di una vostra applicazione, vi consiglio di utilizzare alcuni software, semplici ed immediati (alcuni li trovate negli articoli linkati in seguito in “Riferimenti utili”).
Per la realizzazione di un “concept” preliminare della user experience, capire dove posizionare gli elementi grafici sulle vostre pagine e come impostare la navigazione, è consigliabile realizzare un primo prototipo “statico” con Balsamiq Mockup. Questo utile software, free per il primo mese, ma accessibile come prezzo nella sua versione completa, vi permette di creare in pochi passi le varie schermate, mettendovi a disposizione dei widget abbastanza comuni nelle nuove applicazioni, sia web che mobile. Il risultato sarà un mockup statico, da esportare in PDF o in formato immagine.
Esiste anche una ricca collezione di template condivisi da altri web designer e che potete consultare qui: MockupToGo Balsamiq.
Se la grafica dell’applicazione non è molto complessa, potete addirittura esportare il tutto in HTML, utilizzando un altro software, ossia Napkee. Quest’ultimo prende in input i sorgenti di Balsamiq ed esporta il tutto in formato HTML, generando anche i CSS e i Javascript e fornendo un minimo di interattività per alcuni componenti (come tab, accordion, select, link, ecc.). I risultati non sempre sono ottimi, anche perché Napkee è ancora in versione alfa. Può essere utile per pagine semplici e potete comunque agire su HTML e CSS/Javascript generati, modificandoli a mano.
Purtroppo, al momento si può soltanto partire dal sorgente statico Balsamiq, importarlo in Napkee e generare gli HTML, ma non il contrario.
Se il mockup statico non basta e vi occorre realizzare un prototipo interattivo più complesso (prototype), allora smanettate a livello di codice. Cercate qualche libreria di stile, come Metro UI, set di widget in stile Windows 8, che utilizza Bootstrap e JQuery.
Riferimenti utili:
- WireFrame, Prototype e Mockup – Dove sta la differenza/li>
- I migliori strumenti per il Mockup e il Workflow online
- 10 Completely Free Wireframe and Mockup Applications
- Gui Prototyping Tools
Software per la realizzazione di mockup per la UI presentation by Francesco Ficetola is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.francescoficetola.it.
Permissions beyond the scope of this license may be available at http://www.francescoficetola.it/?p=2592.
Software per la realizzazione di mockup per la UI presentation by Francesco Ficetola is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.francescoficetola.it.
Permissions beyond the scope of this license may be available at http://www.francescoficetola.it/?p=2592.
----------------------------------
PostLink: [UI] Software per la realizzazione di mockup per l’UI presentation
SitoWeb: Francesco Ficetola - Information Engineer & IT Specialist