I servizi per wireframing e web site prototyping possono aiutarti a creare una bozza dell'architettura generale del tuo sito, senza aver bisogno di dover assumere un web designer per farlo. Per questo motivo, il wireframing è la prima cosa a cui dovrebbe pensare chiunque stia pensando di progettare un nuovo sito web. In questa guida di MasterNewMedia troverai descritti i migliori servizi gratuiti disponibili, per lavori di wireframing e web site prototyping.
Photo credit: WebDesigner Depot
In generale, un wireframe vuole essere un prototipo visuale, usato nel design delle interfacce, per creare una bozza generale dell'architettura di un sito e delle relazioni tra le pagine che lo compongono, senza il bisogno di dover occuparsi delle caratteristiche specifiche della grafica dello stesso. Ecco perché si chiama ''wireframe'': delinea infatti solo le aree e le componenti principali del sito futuro, senza fornire indicazioni specifiche sui colori, la grafica, ed altri elementi particolari.
Storicamente, il termine wireframing proviene dal settore del computer design, e descrive un modo di rappresentare oggetti tridimensionali mostrandone solo i bordi, in modo da ottenere una rappresentazione rapida, anche di immagini complesse, senza dover aspettare a lungo.
Ma i wireframe non sono solo un mezzo per risparmiare tempo e per rendere più semplici lavori complessi, in quanto le loro prestazioni permettono di ottenere dei benefici che vanno oltre la semplice riduzione dei tempi di progettazione e di produzione.
Ecco alcuni degli ulteriori vantaggi pratici che puoi ottenere dall'utilizzo dei servizi per wireframimg e web site prototyping per la progettazione iniziale del tuo sito:
Per aiutarti a scegliere e identificare lo strumento per wireframing o web site prototyping ideale per te, ho fatto del mio meglio nel raccogliere ed organizzare tutti i dati importanti, che possono aiutarti a confrontare e scegliere, tra i vari servizi online, quello più appropriato per le tue esigenze.
Di seguito troverai una mappa interattiva, tabelle comparative ed un serie di mini-recensioni per rendere la tua valutazione più efficace possibile.
Ecco di seguito i criteri che ho usato per il confronto:
N.B. Il seguente elenco di servizi per wireframing è ancora incompleto. Ti consiglio di fare il bookmark di questa pagina (basta solo premere CTRL + D sulla tua tastiera se usi Windows o CMD + D se usi un Mac), visto che aggiungerò ulteriori servizi alla lista nelle prossime settimane.
Questa è la guida completa nel dettaglio:
Gliffy è un servizio web-based per il wireframing che ti permettere di creare un prototipo del tuo sito. Puoi creare wireframe sia statici che interattivi per simulare la navigazione tra le pagine web che compongono quest'ultimo ed usufruire dei vantaggi di una vasta libreria GUI di simboli grafici. Puoi anche collaborare con altre persone e ricevere feedback e commenti in tempo reale sul tuo lavoro. Quando ha finito, puoi esportare il tuo wireframe nei formati SVG, file Gliffy XML, PNG o JPG. L'account gratuito di Gliffy ti permette di creare fino a 5 wireframe senza crittografia ma è supportato dalla pubblicità.
http://www.gliffy.com/
Jumpchart è un servizio browser-based per la progettazione di siti che ti permette di creare un wireframe del tuo sito. Puoi creare sia wireframe statitici che interattivi per simulare la navigazione tra le pagine web del tuo modello. Jumpchart ti permette anche di condividere i tuoi progetti di wireframing con clienti ed acquirenti per ricevere commenti e feedback sul tuo lavoro senza ricorrere all'utilizzo di allegati per email. Se ne hai bisogno, puoi esportare i tuoi wireframe nei file CSS / XHTML o in un formato compatibile con WordPress. Jumpchart è gratuito fino ad un massimo di due wireframe condivisibili con non più di 2 collaboratori. La libreria GUI di simboli non è disponibile.
http://jumpchart.com/
MockFlow è un servizio per il web site prototyping, disponibile sia come applicazione web-based che come software per Windows e Mac. I wireframe creati con MockFlow sono interattivi e simulano la navigazione tra le pagine web. Per disegnare il tuo wireframe, puoi utilizzare la ricca libreria GUI di simboli disponibile. Quando avrai finito, potrai decidere di esportare il tuo progetto come file PPT, PDF o PNG. Tieni conto che con l'account gratuito ogni file esportato avrà un watermark. L'account gratuito su MockFlow ti permette di creare un wireframe con un massimo di quattro pagine e condivisibile con non più di due collaboratori.
http://www.mockflow.com/
iPlotz è un servizio per il wireframing che ti permette di creare modelli di siti navigabili ed applicazioni per software. Iplots è disponibile sia come servizio web-based che come software scaricabile per computer Windows e Mac. Il servizio ti mette a disposizione una ricca libreria GUI di simboli, con pulsanti predefiniti, barre di scorrimento, barre dei menu ed altri oggetti che potrai usare per disegnare il tuo modello. Puoi anche condividere il tuo progetto in modo da ricevere feedback e commenti. Quando avrai finito potrai esportare il tuo wireframe in formato PDF, PNG, JPG o HTML. L'account gratuito di iPlotz ti consente di creare un wireframe con al massimo cinque pagine navigabili.
http://www.iplotz.com/
Mocklinkr è un servizio web-based che ti permette di creare un prototipo del tuo sito disegnando un wireframe interattivo su cui potrai navigare come se fosse un sito reale. Puoi anche condividere il tuo progetto con altri collaboratori dai quali ricevere feedback direttamente grazie a Mocklinkr. L'account gratuito ti consente di disegnare fino a dieci wireframe senza alcun limite di pagina. Non è disponibile alcuna funzionalità per l'esportazione del tuo wireframe e non potrai usufruire di alcuna libreria GUI di simboli.
http://www.mocklinkr.com/
Pencil Project è un componente aggiuntivo open-source di Firefox che ti permette di creare wireframe e prototipi di siti all'interno di Firefox. Puoi creare un wireframe interattivo per simulare la navigazione tra pagine web ed utilizzando la libreria GUI di simboli puoi anche aggiungere oggetti, pulsanti, barre di scorrimento ed altri elementi per rendere il tuo wireframe ancora più realistico. Tutti i wireframe che crei potranno essere esportati in formato HTML, PDF, PNG o formati di file compatibili con MS Word e Open-Office.org. Non è disponibile alcuna funzionalità per la collaborazione.
http://www.evolus.vn/Pencil/Home.html
Lumzy è uno strumento web-based gratuito per la creazione di modelli che ti permette di ottenere un prototipo del tuo sito. Una ricca libreria GUI di simboli ti consente di aggiungere elementi grafici al tuo modello in modo da rendere il tuo progetto più realistico. Puoi anche invitare altre persone a collaborare al tuo lavoro e ricevere da loro feedback in tempo reale. Potrai esportare il tuo wireframe nei seguenti formati: PDF, PNG, JPG. I modelli interattivi non sono supportati.
http://www.lumzy.com/
Mockingbird è un servizio gratuito per wireframing che ti permette di creare un prototipo interattivo del tuo sito. Puoi disegnare il tuo sito web all'interno del tuo browser ed utilizzare l'ampia libreria GUI con molti oggetti web con cui personalizzare il tuo modello. Una volta che avrai finito il lavoro, potrai condividere il tuo progetto con altri collaboratori o esportare il tuo wireframe in formato PDF e JPG.
http://gomockingbird.com/
FluidIA è un servizio per wireframing web-based con cui creare prototipi di siti web e interfacce utenti. Ancora in fase di sviluppo FluidIA funziona correttamente solo con Firefox 2.5. Il servizio mette a disposizione la funzionalità per la collaborazione, quindi potrai condividere ed interagire con altre persone per lavorare al tuo modello. Non è disponibile alcuna libreria GUI di simboli, alcuna funzionalità per esportare il tuo progetto ed i wireframe interattivi non sono supportati.
http://www.fluidia.org/
Balsamiq Mockups è un servizio per wireframing che ti permette di creare prototipi interattivi del tuo sito. Balsamiq Mockups è disponibile sia come applicazione web-based che come software scaricabile per Windows, Mac e Linux. Il servizio ti fornisce una ricca libreria GUI di simboli, in cui sono presenti pulsanti pronti per l'uso, barre di scorrimento ed altri oggetti che potrai usare per personalizzare il tuo modello. Grazie alla funzionalità per la collaborazione, puoi condividere il tuo progetto con altri e ricevere commenti e feedback in tempo reale. Terminato il tuo lavoro, potrai esportare il tuo wireframe nei formati XML, PDF e PNG. L'account gratuito ti permette di creare un numero illimitato di wireframe per sette giorni.
http://www.balsamiq.com/products/mockups
Serena Prototype Composer è un'applicazione per Windows con cui puoi creare prototipi e wireframe interattivi del tuo sito. Il servizio ti offre una libreria GUI di simboli, in cui sono presenti, pulsanti pronti per l'uso, barre di scorrimento ed altri oggetti con cui potrai personalizzare il tuo modello. Le funzionalità per la collaborazione ti permettono di creare il tuo wireframe condividendolo con altri e ricevendo feedback e commenti sul tuo lavoro, in tempo reale, senza ricorrere alle email. Quando avrai finito potrai esportare il tuo wireframe in formato XML o come documento MS Word. Serena Prototype Composer è gratuito senza alcuna limitazione per gli account.
http://www.serena.com/products/prototype-composer/
Napkin è un servizio per wireframing basato su Java, disponibile per computer Windows, Mac e Linux. Puoi creare un prototipo del tuo sito, grazie a wireframe unicamente statici che quindi non ti permettono di simulare l'interazione tra le pagine web. Utilizzando la ricca libreria GUI di simboli, puoi aggiungere barre dei menu pronte per l'uso, pulsanti, barre di scorrimento ed altri oggetti ed elementi web al modello che avrai creato. Non è disponibile alcuna funzionalità per la collaborazione e nemmeno per l'esportazione dei tuoi wireframe. Napkin è utilizzabile in modo completamente gratuito, senza alcuna limitazione per gli account.
http://napkinlaf.sourceforge.net/
