I migliori tool per mockup e wireframe

Nella prima fase di ideazione dei progetti web, mockup e wireframe sono dei metodi validi per tra­sfor­ma­re in realtà le proprie idee. Infatti, già prima di ci­men­tar­si nella rea­liz­za­zio­ne tecnica vera e propria, entrambi i modelli di prototipo aiutano a con­cre­tiz­za­re idee e pensieri. Così nascono i primi schizzi e le prime bozze, che assumono le sembianze dei progetti futuri e portano avanti il processo di sviluppo.

Mockup e wireframe non sono dei validi aiuti solo durante la fase di pro­get­ta­zio­ne, ma sono anche un buon mezzo per far vi­sua­liz­za­re meglio ai propri clienti le idee e i piani futuri. Il più delle volte le prime bozze nascono con matita e carta o su un editor del PC, ma si uti­liz­za­no spesso anche programmi di grafica come Photoshop o Fireworks, malgrado la rea­liz­za­zio­ne manuale non risulti sempre la più ef­fi­cien­te. In questo caso aiutano tool specifici per wireframe o mockup.

Mockup e wireframe fun­zio­na­no di­ver­sa­men­te, come anche discusso nel nostro articolo di ap­pro­fon­di­men­to, ma quali sono le dif­fe­ren­ze tra questi due metodi? Con i wireframe ci si concentra mag­gior­men­te sull’User Ex­pe­rien­ce Design, cioè sul garantire un’espe­rien­za d’uso ottimale. Ri­cor­ren­do ai wireframe, si crea una bozza della de­scri­zio­ne del progetto con la rap­pre­sen­ta­zio­ne grafica di funzioni e layout, quindi si tratta so­prat­tut­to di una prima verifica dell’idea e della sua rea­liz­za­zio­ne. In linea teorica i mockup sono il passaggio suc­ces­si­vo ai wireframe, perché si basano sulla loro struttura. Inoltre entra in gioco il design: colore, ti­po­gra­fia, immagini ed elementi grafici mostrano l’aspetto prov­vi­so­rio dell’ap­pli­ca­zio­ne web pro­get­ta­ta. Un mockup è più det­ta­glia­to di un wireframe, ma non è ancora una versione de­fi­ni­ti­va. Tuttavia, proprio durante i discorsi con i clienti rap­pre­sen­ta un modo pratico per mostrare lo stile del futuro sito. Gli strumenti pre­sen­ta­ti qui per la pro­to­ti­piz­za­zio­ne si adattano a seconda dei casi per i wireframe, i mockup o entrambi.

Balsamiq  è uno tra i più co­no­sciu­ti strumenti sul mercato per la pro­to­ti­piz­za­zio­ne, che si concentra sul wi­re­fra­ming. Gli utenti di­spon­go­no di un’ampia scelta di elementi di base che, insieme agli elementi di na­vi­ga­zio­ne, agli spazi per le immagini e i video, ai moduli e a tanto altro, si possono spostare sulla su­per­fi­cie di disegno tramite drag&drop e rea­liz­za­re così un proprio wireframe. È possibile anche una for­mat­ta­zio­ne dei moduli (colore, di­men­sio­ni) e ogni utente può crearne di propri. Passo dopo passo emerge un wireframe pro­fes­sio­na­le. Grazie ad una pratica funzione di commento si ag­giun­go­no singoli elementi con spie­ga­zio­ni; Balsamiq è in generale facile da uti­liz­za­re e mira ad un’in­ter­fac­cia chiara e ad una ca­te­go­riz­za­zio­ne com­pren­si­bi­le dei singoli elementi. Non c’è modo però di inserire in­te­ra­zio­ni nel prototipo, ma si possono collegare tra di loro più tab. Il design sobrio di Balsamiq sembra essere stato disegnato a mano e offre perciò una buona pa­no­ra­mi­ca senza dettagli superflui. Quindi è una soluzione più adatta per le prime fasi di sviluppo. Gli svi­lup­pa­to­ri di Balsamiq Studios offrono due versioni del tool di wi­re­fra­ming: un’ap­pli­ca­zio­ne per il desktop chiamata “Mockups 3”, sca­ri­ca­bi­le per Windows, Mac e Linux, e un’ap­pli­ca­zio­ne basata sul Cloud “my­Bal­sa­miq”. Dopo la re­gi­stra­zio­ne, gli utenti hanno a di­spo­si­zio­ne un account gratuito di test per 30 giorni, dopo si dovrà pagare una licenza, i cui costi aumentano in base al numero degli utenti e dei progetti. Chi volesse creare i suoi wireframe solo online con la web app, può gestire con la versione di base 3 progetti attivi. Potete trovare una versione demo gratuita sul sito di Balsamiq.

Il tool Axure si adatta sia alla creazione di semplici wireframe che a quella di prototipi più det­ta­glia­ti. Con un’ampia varietà di funzioni, Axure fa parte dei tool pro­fes­sio­na­li per il mockup di un sito. I prin­ci­pian­ti devono tenere in conto che ci vorrà un po’ di tempo per capirne l’uso, per scoprirne tutte le funzioni e avere così un quadro generale del programma. Il tool per mockup offre un’ampia scelta di elementi già pronti, con­fi­gu­ra­bi­li tutti a seconda delle proprie esigenze. Inoltre c’è la pos­si­bi­li­tà di inserire azioni semplici, come sug­ge­ri­men­ti per usare il tool, un menu di na­vi­ga­zio­ne o lightbox. Così Axure è una buona al­ter­na­ti­va al click dummy, che si applica so­prat­tut­to per i primi test di usabilità. Il programma non dispone solo di una funzione di commento, ma tutte le spie­ga­zio­ni e le note a piè di pagina possono essere esportate in un secondo momento in CSV o PDF, così da avere il proprio progetto anche su carta. Inoltre, il tool favorisce il lavoro in team, infatti più utenti possono lavorare nello stesso momento ad un mockup senza in­ter­fe­ri­re con le modifiche apportate dagli altri. Anche Axure mette a di­spo­si­zio­ne una versione di test gratuita per 30 giorni, mentre le versioni Pro, Team e En­ter­pri­se sono a pagamento; l’uso del programma per gli studenti è gratuito.

Il tool per mockup Pencil è un progetto open source e l’unico della nostra lista che mette a di­spo­si­zio­ne una versione per desktop com­ple­ta­men­te gratuita. Malgrado non serva la licenza per poter uti­liz­za­re il programma, sono di­spo­ni­bi­li tutte le funzioni im­por­tan­ti che servono per la creazione di un mockup pro­fes­sio­na­le. Anche Pencil fornisce un’ampia scelta di modelli: com­ples­si­va­men­te ci sono più di 300 forme pre­im­po­sta­te, più di quelle offerte dagli altri tool di pro­to­ti­piz­za­zio­ne e, qualora ce ne fosse bisogno, sul sito dello svi­lup­pa­to­re se ne trovano anche altre. Oltre a molte forme, elementi per diagrammi e icone clipart vet­to­ria­li, c’è la pos­si­bi­li­tà di creare di­ret­ta­men­te nella finestra del programma diagrammi e schemi. No­no­stan­te la grande varietà di funzioni, gli utenti si orientano in fretta nell’in­ter­fac­cia utente chiara. Grazie alla struttura intuitiva e al pratico editor drag&drop, anche i prin­ci­pian­ti imparano in fretta. Creando più pagine e col­le­gan­do­le tra di loro, si ri­pro­du­co­no le funzioni della pagina futura e semplici modi di utilizzo. Pencil è un tool open source gratuito, ma non si ga­ran­ti­sce che il programma continui ad essere svi­lup­pa­to in futuro. Infatti negli ultimi anni non sem­bre­reb­be che ci siano stati movimenti sul sito e dal 2013 non stati ri­la­scia­ti più ag­gior­na­men­ti o nuove versioni. Malgrado questi svantaggi e l’assenza di una do­cu­men­ta­zio­ne valida, Pencil rimane una buona al­ter­na­ti­va ai tool per mockup e wireframe a pagamento. L’ap­pli­ca­zio­ne desktop gratuita, di­spo­ni­bi­le per Windows, Mac e Linux, è presente anche come com­po­nen­te ag­giun­ti­vo per il browser su Mozilla Firefox.

Moqups rientra tra i tool per mockup più famosi ed è un’ap­pli­ca­zio­ne web semplice. Con questo programma è possibile creare mockup online in modo efficace e veloce poiché, all’apertura dell’app in HTML5, l’utente si trova di­ret­ta­men­te nell’ambiente di lavoro e può co­min­cia­re ad usarlo. Anche qui un menu chiaro, una struttura semplice e il pratico editor drag&drop con­sen­to­no di orien­tar­si fa­cil­men­te nel programma. Da una selezione di modelli già pronti ed elementi già impostati, l’utente sceglie gli elementi più adatti per i suoi scopi, li ordina e li configura a proprio pia­ci­men­to: proprio queste pos­si­bi­li­tà di con­fi­gu­ra­zio­ne sono molto ap­prez­za­te su Moqups. La presenza di in­nu­me­re­vo­li funzioni, features ag­giun­ti­ve e opzioni di design con­sen­to­no di creare una struttura per­so­na­liz­za­ta per singoli elementi e mockup completi. Questo tool per mockup offre meno elementi pre­im­po­sta­ti rispetto ad altre ap­pli­ca­zio­ni simili, ma in compenso mette a di­spo­si­zio­ne molte funzioni per adattare la bozza del sito a seconda delle proprie esigenze. Anche su Moqups è possibile creare più pagine con­tem­po­ra­nea­men­te e col­le­gar­le tra di loro; lo strumento si adatta quindi bene alla creazione di mockup semplici e click dummies. Nella versione gratuita gli utenti devono fare i conti con alcune li­mi­ta­zio­ni, ma a pesare è so­prat­tut­to la mancata pos­si­bi­li­tà di poter esportare le bozze create. Infatti per poter salvare i mockup in un file PDF o JPEG, si deve passare alla variante a pagamento, che mette a di­spo­si­zio­ne tutta la gamma di funzioni. Ci sono tre diversi pacchetti, tra cui quello base consente di rea­liz­za­re 10 progetti e mette a di­spo­si­zio­ne 1 GB di spazio.

Il tool di pro­to­ti­piz­za­zio­ne Moc­king­bird è anche una semplice ap­pli­ca­zio­ne web, che funziona senza dover essere in­stal­la­ta sul proprio computer. È un programma ideale per iniziare, ma si adatta anche per gli utenti avanzati. Per iniziare l’utente sceglie tra gli elementi già pre­im­po­sta­ti quelli più adatti e li sposta fa­cil­men­te sull’editor nella posizione de­si­de­ra­ta tramite drag&drop. Com­ples­si­va­men­te si può optare tra 90 diversi moduli e com­po­nen­ti, ma Moc­king­bird convince anche grazie alla sua struttura sensata, oltre che a una buona e com­pren­si­bi­le ca­te­go­riz­za­zio­ne. Inoltre c’è una pratica funzione di ricerca e l’utente può creare più pagine, anche se non è possibile col­le­gar­le tra di loro. Una feature par­ti­co­la­re di questo tool: Moc­king­bird consente l’uso di un sistema di griglia (usato in quasi tutti i siti moderni), che si può usare su tutte le pagine create. Se si pre­sup­po­ne uno schema di questo tipo già in questa prima fase, ciò per­met­te­rà di ri­spar­mia­re tempo in un’ela­bo­ra­zio­ne suc­ces­si­va del layout. Questo strumento è di­spo­ni­bi­le in una versione gratuita, ma come su Moqups, molte funzioni im­por­tan­ti come la pos­si­bi­li­tà di salvare ed esportare i mockup sono comprese solo nell’edizione a pagamento. Con il pacchetto di base si possono rea­liz­za­re 3 progetti.

Wireframe.cc è, rispetto agli altri, un tool mi­ni­ma­li­sta per creare wireframe chiari ed efficaci. Infatti l’utente ha a di­spo­si­zio­ne meno funzioni rispetto agli altri strumenti indicati nella nostra lista. Wireframe.cc è più adatto per un approccio veloce e semplice. In un tempo re­la­ti­va­men­te breve vengono creati layout chiari e specifici, anche senza disporre di una grande scelta di elementi pre­im­po­sta­ti. Su Wireframe.cc l’utente ri­di­men­sio­na e modella con il mouse la finestra nella forma e nelle di­men­sio­ni de­si­de­ra­te, mentre grazie al menu a tendina sceglie il tipo di elemento più adatto, ad esempio slide, campi testuali o un elemento immagine. Grazie alla pos­si­bi­li­tà di poter scegliere tra diverse di­men­sio­ni delle pagine, si creano frame per il desktop o per i di­spo­si­ti­vi mobili. Questo tool di wi­re­fra­ming prende per mano l’utente durante l’intero processo di creazione: anche per adattare gli elementi si scelgono le opzioni più adatte da una lista, che propone il tool. Tramite una gamma limitata di funzioni e le pos­si­bi­li­tà per creare una struttura di base, Wireframe.cc porta in primo piano la fun­zio­na­li­tà di una pagina. Il focus è sull’idea vera e propria, da cui non bi­so­gne­reb­be lasciarsi distrarre con elementi non necessari. La con­di­vi­sio­ne e il com­men­ta­re in team procedono fa­cil­men­te. I wireframe creati hanno un proprio URL e possono essere salvati e inviati. Il tool di pro­to­ti­piz­za­zio­ne è a di­spo­si­zio­ne gra­tui­ta­men­te nella versione di base, mentre nella versione premium ci sono ancora ulteriori funzioni per l’in­te­ra­zio­ne, il pro­to­col­lo, i processi e l’espor­ta­zio­ne ob­bli­ga­to­ria, che è possibile solo a pagamento, come su tutti gli altri tool della lista. La fase di test dura 7 giorni e i prezzi dei pacchetti salgono all’aumentare del numero di utenti e dello spazio richiesto.

Per non spendere troppo tempo nello sviluppo e nella rea­liz­za­zio­ne manuale di una bozza, conviene usare dei tool per wireframe e mockup, che ga­ran­ti­sco­no un lavoro ef­fi­cien­te in tutti gli stadi di sviluppo. Non solo è più facile creare la prima bozza, ma dopo si hanno anche più pos­si­bi­li­tà di mettere di­ret­ta­men­te in pratica i sug­ge­ri­men­ti ricevuti dal feedback dei clienti. Infine, un tool di pro­to­ti­piz­za­zio­ne pro­fes­sio­na­le si occupa di una migliore rap­pre­sen­ta­zio­ne degli aspetti pro­get­ta­ti, dei contenuti e delle funzioni, prima di passare alla creazione degli elementi strut­tu­ra­li. Le numerose features degli strumenti pre­sen­ta­ti risultano par­ti­co­lar­men­te utili per chi lavora in team.