Do you know wireframing?

Nella fase di impostazione strutturale di un sito web si può ricorrere a un template “preconfezionato”, naturalmente da modificare più o meno profondamente secondo i desideri e le necessità specifiche del progetto, oppure crearne uno dal nulla. Il presente articolo riguarda soprattutto quest’ultima opzione, la quale, è bene ricordarlo, prevede necessariamente il ricorso a un grafico-web designer esperto, se non alla collaborazione di due distinti specialisti.
Partire da zero significa, innanzitutto, definire nel dettaglio quante e quali pagine dovranno costituire il sito web in funzione delle informazioni e dei servizi che lo stesso dovrà offrire ai visitatori. Fatto ciò, ci si deve preoccupare di stabilire come i diversi contenuti (immagini, testi, video, banner, widget, ecc.) dovranno essere organizzati funzionalmente e graficamente all’interno delle diverse pagine – determinando così i “layout” delle stesse – e in che modo dovranno interagire.
Come qualunque web designer sa, questa fase del processo è caratterizzata da domande, scambi d’idee, appunti, sketch, diagrammi e quant’altro lo possa aiutare a sviluppare il progetto più soddisfacente ed efficace. Ecco, allora, che possono tornare molto utili specifici “tool” online deputati al “wireframing”, ossia alla creazione di “mockup” (modelli dimostrativi) relativi alle singole pagine del sito web.
Tali strumenti, elementari e molto intuitivi, in pratica permettono di disegnare facilmente e rapidamente quelli che potrebbero essere i layout delle diverse pagine del sito web, abbozzando anche i collegamenti interattivi tra l’una e le altre. L’attività risulta estremamente semplice grazie alla presenza di pagine bianche sulle quali si possono trascinare e modificare dei “gadget”, ossia dei campi predisposti a simulare i diversi tipi di contenuto (immagini, aree di testo, pulsanti, menu, linee, campi di ricerca e tanti altri). Le bozze possono quindi essere esportate in file PDF o bitmap (jpg, png…) per poter essere, per esempio, conservate sul proprio computer o trasmesse via e-mail, piuttosto che archiviate nel server del fornitore del servizio per una successiva rielaborazione, piuttosto, ancora, che condivise online con il team di collaboratori interessati e/o con il committente, i quali possono, a loro volta, intervenire attivamente su di esse per modificarle ulteriormente.
A questo punto non mi resta che citare alcune risorse online di wireframing, presumibilmente in ordine di notorietà:
:: Mockingbird;
:: Lovely Charts;
:: Cacoo;
:: Gliffy;
:: Lumzy;
:: MockFlow;
:: Simple Diagrams;
:: Denim;
:: Web Site Wireframe Tool.
Ultima nota (se negativa lo lascio stabilire a voi): quasi tutti gli strumenti menzionati sono utilizzabili – in maniera utile – a pagamento.