Wireframe visuali con Balsamiq

Un Wireframe è 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, in questo articolo vediamo come fare.

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.