[jwplayer mediaid=”2200″ width=”760″ height=”510″]
Ogni volta che iniziamo a sviluppare un sito web, dovremo partire dal Wireframe.
Il Wireframe dovrebbe indicare la struttura delle pagine, dovrebbe indicare la posizione degli elementi, senza la presenza di colori o dettagli grafici. Deve solo dare una rappresentazione logica delle pagine.
Esistono diversi programmi che ci permettono di creare dei Wireframe. Oggi volevo presentarvene uno completamente online, realizzato in HTML5.
Il sito in questione è www.moqups.com e vi permette di creare i vostri Wireframe.
Fra le sue caratteristiche, troviamo la possibilità di eliminare gli elementi premendo il tasto “canc” o posizionarne di nuovi prendendoli dalla barra di sinistra e trascinandoli nell’area di lavoro.
Per ogni elemento possiamo modificare alcune proprietà, come il colore, il bordo, le dimensioni e gli angoli.
Il tool comprende molti strumenti come barre di scorrimento, finestre di avviso, griglie, immagini, breadcrumb, bottoni, grafici a torta, mappe e caselle di testo.
Una volta creato il nostro Wireframe, possiamo scaricarlo o condividerlo.
Consiglio anche la demo online di Balsamiq (https://www.balsamiq.com) Pur essendo una demo permette di importare/esportare il progetto in xml, quindi è una demo completamente funzionante. 😉
I wireframe o mockup sono passaggio fondamentale per creare un buon preogetto perchè si vanno ad identifare elementi e layout del progetto web o mobile che sia. Io uso anche cacoo (www.cacoo.com) ma indipendentemente dallo strumento l’importante è curare questo aspetto.
Vi riporto uno degli ultimo mockup che ho fatto che poi i grafici e i programmatori hanno realizzato 🙂
es. di mockup: https://demo.intera.it/isolfin/mockup/
versione live: https://www.isolfin.it/