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:

• Coerenza: i servizi per wireframing rendono semplice testare e provare le diverse varianti possibili di una soluzione di progettazione senza richiedere tempi prolungati e risorse dispendiose. É molto semplice sperimentare i vari tipi di design e i vari layout senza spreco di tempo
• Pianificazione: i wireframe del design dei siti sono estremamente utili anche quando hai bisogno di comunicare le idee iniziali che riguardano il tuo progetto agli altri membri del tuo team, ai tuoi clienti o agli sviluppatori. Il prototipo di un sito può rappresentare la base per stabilire miglioramenti e perfezionamenti, così come la struttura dei contenuti, il layout generale, la posizione degli elementi principali, ed altri tipi di requisiti del progetto.
• Facilità di navigazione: un wireframe aiuta i progettisti a pianificare, sviluppare e posizionare gli elementi per la navigazione sul web, in modo rendere migliore l'esperienza che i visitatori fanno del sito. Con la creazione di wireframe e prototipi di pagine di siti stampabili, si possono effettuare in anticipo test di prova e analizzare quale tipo di soluzione per il design sarebbe meglio adottare.
• Annulla infinito: i servizi per il prototyping ti permettono di ripristinare e tener traccia della storia completa delle modifiche di design effettuate in precedenza, consentendoti di poter ripristinare ciascuna di esse.
• Realismo: possono essere creati modelli di prova del sito da utilizzare nei test iniziali con gli utenti che sembrano siti web reali.
• Collaborazione e condivisione: chiunque può essere coinvolto. Raggiungi altri progettisti o colleghi per ricevere i loro feedback. Puoi condividere il tuo wireframe con clienti ed acquirenti, per mostrare loro i progressi del tuo lavoro di progettazione.
• Gratis: risparmia. Si: non hai bisogno di spendere nulla per utilizzare qualunque strumento per il prototyping descritto in questa guida.

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:

• Tipo di software: scaricabile / o web-based (se scaricabile, è specificato il sistema operativo supportato.
• Libreria GUI di simboli: bottoni pronti per l'uso disponibili gratuiti, barre di scorrimento, menu ed altri oggetti per disegnare i wireframe.
• Wireframe interattivi: modelli cliccabili di siti, che permettono di simulare la navigazione tra le pagine.
• Collaborazione in tempo reale: interazione con clienti e collaboratori e possibilità di ricevere feedback in tempo reale.
• Formati per esportazioni: formati supportati per esportare progetti di wireframe.
• Limitazioni dell'account: restrizioni di utilizzo previsti per gli account free (se disponibili), come tempo di utilizzo, numero di wireframe che puoi creare, ecc..

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:

Servizi Gratuiti Per Wireframing e Web Site Prototyping - Tabelle Comparative

Servizi Gratuiti Per Wireframing e Web Site Prototyping

1. Gliffy

   

   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/
   
   
   
   
   
   

2. Jumpchart

   

   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/
   
   
   
   
   
   

3. MockFlow

   

   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/
   
   
   
   
   
   

4. iPlotz

   

   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/
   
   
   
   
   
   

5. Mocklinkr

   

   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/
   
   
   
   
   
   

6. Pencil Project

   

   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
   
   
   
   
   
   

7. Lumzy

   

   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/
   
   
   
   
   
   

8. Mockingbird

   

   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/
   
   
   
   
   
   

9. FluidIA

   

   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/
   
   
   
   
   
   

10. Balsamiq Mockups

    

    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
    
    
    
    
    
    

11. Serena Prototype Composer

    

    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/
    
    
    
    
    
    

12. Napkin

    

    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/