Best Practices: il Web Designer e l'utilizzo del Wireframe

Lavorando nel campo del web ci si accorge molto spesso che manca uno strumento essenziale: capire da subito cosa ha in mente il cliente.

Si fanno (o si dovrebbero fare) ore di analisi preliminari per mettere insieme tutti i punti e per sbrogliare ogni minimo caso "sospetto", proprio quello che potrebbe mandare in crash tutto il sistema.
Purtroppo queste situazioni cambiano di cliente in cliente e di progetto in progetto e la cosa migliore da fare è quella di mettere da parte delle "Best Practices" da applicare a nuovi lavori.

Da oggi iniziamo questo nuovo capitolo per condividere con tutti i metodi e strumenti che potrebbero - secondo noi - facilitare il lavoro di grafico, di analista programmatore o di semplice appassionato al mondo del web.

Cominciamo col discutere di grafica e più precisamente del ruolo del Web Designer ossia colui che "disegna" la grafica di un sito web.

Torniamo per un attimo al progetto di un sito: il cliente sa (o dovrebbe sapere) quali funzionalità implementare nel suo futuro sito e il primo approccio serve proprio a stabilire cosa vuole che sia sviluppato. Dopo aver creato un documento di massima - che a volte coincide con il preventivo del sito - la palla passa al Web Designer. Il suo lavoro prima di tutto sarà quello di capire come il cliente immagina il suo sito e poi come collocarci graficamente tutte le varie sezioni e quindi rendere operative le funzionalità previste.

Molto spesso il grafico è costretto a preparare infinite bozze per spostare gli elementi del sito da una parte all'altra o semplicemente per cambiare le "sfumature" di uno sfondo di un bottone... (credetemi, succede!)

Ma quale potrebbe essere l'alternativa?

Prima di tutto bisogna stabilire con il cliente in che modo posizionare i vari elementi nel sito. Attenzione: questo non serve solo al grafico come punto di partenza ma anche ai programmatori che potranno iniziare un'analisi sulla logica da applicare al sito.

Uno dei metodi più frequenti è quello di usare Microsoft PowerPoint o applicazioni simili per creare pseudo-pagine web posizionando gli elementi geometrici nelle varie slides e creando collegamenti tra di loro. Potrebbe essere un'alternativa ma non è flessibile.

Quello che consigliamo è l'utilizzo del Wireframe ossia una bozza elettronica del sito composta da vari blocchi che costituiranno gli elementi del sito stesso (form, video, testo...). Consente di tradurre in immagine la struttura del sito ed è fondamentale per il cliente che in questa fase può fare apportare modifiche in modo veloce e senza stravolgere tutto il lavoro di design, codice e soprattutto in minor tempo e costi.

Uno strumento che consigliamo per la creazione dei Wireframe è MockFlow che permette di creare online un vero e proprio "Real-Time Design Collaboration" ossia lavorare con il cliente su bozze concrete stabilendo da subito interazioni e componenti da usare senza installare nulla sui propri pc. Si possono aggiungere note, commenti, inserire tutti gli elementi HTML e creare una propria libreria.

I costi sono i punti di forza: esiste una versione BASIC GRATUITA dove basta creare il proprio account e si potranno creare 4 pagine e condividerle con 2 utenti. La versione PREMIUM è invece illimitata nella creazione delle pagine e nella condivisione e offre 500 MB di spazio per lo storage dei dati; costa solo 50$ / l'anno

E' uno strumento molto utile che vi farà risparmiare tempo e denaro. E' ideale anche per il design di Software ma per fortuna li non ci sono molte pretese da parte dei clienti.