tcw | Blog

Web Design & UX




Wireframe visuali con Balsamiq Mockups

Category : Grafica, Spunti · by Oct 26th, 2013

Ciao a tutti. Oggi parleremo della raffinata arte di PENSARE al sito, prima di andarlo a disegnare e successivamente a montare.

Fare una buona prototipazione significa FARE BENE LE COSE e FARLE UNA VOLTA SOLA (o quasi).

Vorrei intanto citare la buona vecchia Wikipedia, per quanto riguarda la definizione di wireframe, che

“.. indica una bozza strutturale di un sito, applicativo web o software. I wireframe sono estremamente utili in quanto permettono di individuare subito le dinamiche del progetto in termini di usabilità ed utilizzo pratico, i punti critici e quelli che richiedono uno sviluppo più accurato o miglioramenti.” 

Un Wireframe quindi è un grafico, molto semplificato, che serve per rappresentare gli spazi e le funzionalità che una pagina web dovrà avere.

Per progetti, anche di piccole dimensioni, spesso è utile realizzare un wireframe durante la progettazione, ci aiuta a:

  • chiarirci le idee sui contenuti della pagina
  • verificare che abbiamo fatto posto a tutto ciò che serve
  • comunicare il progetto ad altri (grafici e front-end developer)
  • fare tentativi per ottimizzare il posizionamento dei contenuti

In principio i web designer realizzavano i wireframe con carta e matita, cosa che possiamo pensare di continuare a fare, ma avere a disposizione uno strumento visuale, come Balsamiq Mockups, significa avere una serie di vantaggi non indifferenti, i due più importanti sono:

  • Riutilizzo di porzioni di pagina già disegnati (con carta e matita sarebbe sempre un fastidioso collage), questo abilita a lavorare per “design pattern”, modelli già pronti da adattare al contesto
  • Modifiche e adattamenti veloci, che ci permettono di comparare due soluzioni rapidamente e spostare elementi in modo efficiente

Se quanto appena detto ci ha già convinto, ma vogliamo procastinare l’acquisto di uno strumento visuale per i wireframe, possiamo utilizzare Balsamiq Mockups in modo gratuito.

Si tratta semplicemente di utilizzare la versione demo di Balsamiq Mockups, che con pochissime limitazioni ci mette in grado di creare i nostri wireframe, lavorarci per il tempo che ci serve e salvarli.

Esempio di pagina impostata tramite Balsamiq Mockups

fig01mockups

 

Alla prossima!

SHARE :

Leave a Reply

Your email address will not be published. Required fields are marked *