Web design: progettare bene i wireframe con Mokingbird

Mondo del lavoro | ottobre 28, 2010

Web design: progettare bene i wireframe con Mokingbird

In questo blog cerco di non parlare strettamente di web design, ma non potevo restare indifferente a Mokingbird.

Quante volte nel realizzare il layout di un sito siete avete iniziato direttamente dalla bozza grafica, saltando del tutto l’importantissima fase di wireframing?

Quante volte avete dovuto spostare decine di elementi mentre cercavate la miglior struttura per la pagina?

Gli amici di Mokingbird ci vengono in aiuto con questo tool online per realizzare velocemente i wireframe e focalizzarci innanzitutto sulla parte più importante di qualsiasi sito: la struttura e il posizionamento dei contenuti.

Scopriamo insieme le caratteristiche principali con un esempio pratico.

Cos’è un wireframe

Un wireframe o fil-di-ferro è lo scheletro di un progetto. Nel caso di un sito, è lo schema della struttura che indica quali contenuti saranno presenti nel sito e la rilevanza che avrà ognuno di essi.

Per esempio, qui a fianco potete ammirare il wireframe di YouTube rispetto al risultato finale.

La caratteristica più evidente di un wireframe è che non contiene nessun elemento grafico o estetico, ma solo indicazioni nude e crude sull’ingombro e la posizione dei contenuti nel sito.

Designer vs grafico

La situazione ideale è che il sito venga progettato da due persone distinte: il designer e il grafico.

Il designer o progettista si occuperà degli aspetti che riguardano il wireframe e la fruizione del sito da parte degli utenti: reperibilità dei link, posizionamento dei contenuti per rilevanza, comportamento degli elementi interattivi, spazi, ingombri, ecc. Tutto ciò dovrebbe confluire nella realizzazione del wireframe.

Il grafico, sulla base del wireframe, si occuperà di dargli un’estetica: colori, dettagli, finiture, immagini, sfondi, ecc…

Purtroppo molto spesso questi due ruoli vengono affidati ad un’unica persona, che difficilmente potrà cavare il meglio dai due aspetti.

Come ci aiuta Mokingbird

Mokingbird, attualmente in beta, è un servizio online che permette di creare wireframe in tempi ridottissimi e pure divertendosi.

È possibile creare più pagine collegate tra loro.

Per riempirle abbiamo a disposizione una vastissima gamma di elementi Drag’n'Drop nella libreria in basso a sinistra, che include anche molti elementi e icone social come quelle per Facebook e Twitter o i controlli per i player video di Flash o YouTube.

Le misure e il testo degli elementi sono impostabili con precisione in pochi secondi. La dimensione degli elementi appare automaticamente tirandone i bordi. Se ci avviciniamo ad altri elementi, entra in azione il righello automatico con tanto di margini.

Se aggiungiamo un blocco di testo trascinandolo dalla libreria, esso conterrà già un lorem ipsum preimpostato.

Come cigliegina finale, Mokingbird permette di salvare, esportare e condividere i propri wireframe online.

Restyling veloce di un sito usando Mokingbird

Il wireframe nell’immagine precedente si riferisce alla nuova impaginazione per il sito FUrbina.it, che aveva bisogno di essere rifinito e diventare più accattivante.

Grazie a Mokingbird, lo studio del wireframe ha richiesto pochissimo tempo e ha permesso di realizzare le modifiche grafiche a colpo sicuro e senza errori.

A cosa bisogna fare attenzione?

Mokingbird è uno strumento stupendo, ma come tutti gli strumenti dipende dalla mano che lo usa: chi non ha nozioni di design e layouting difficilmente otterrà qualcosa di più di riquadri posizionati a piacere, e non in base agli obiettivi del sito e degli utenti che lo navigheranno.

Comunque l’esperienza vien studiando, e tra Mokingbird e WebWithoutWords, il portale che raccoglie wireframe di siti famosi, i designer in erba avranno di chè sperimentare.

È proprio il caso di dire “buon wireframe a tutti!”