3 software per creare wireframe
Durante la progettazione di un sito web – o un’app mobile – si passa dalla cruciale fase del concept design ovvero dall’ideazione e dalla posizione degli elementi presenti all’interno delle pagine. Utilizzare i wireframe è un metodo semplice ed efficace per mettere nero su bianco le idee e per confrontarsi con il team di sviluppo e con i propri clienti.
Cos’è un wireframe?
Il wireframe (in italiano l’orripilante “modello in fil di ferro“) è un prototipo che visualizza la struttura base del sito web, ne definisce la gerarchia dei contenuti e le modalità di navigazione. L’immediatezza e la velocità di modifica ne fanno uno strumento diffuso, utile e a basso costo: cambiare la grafica definitiva di una webpage è, infatti, molto più costoso e sicuramente meno veloce.
Progettare esclusivamente gli elementi principali dell’interfaccia, attraverso i wireframe, permette di individuare facilmente i problemi legati all’interazione o alla disposizione degli oggetti. Mostrare i wireframe sia al team interno che al cliente o fare un primo test con gli utenti, permetterà di individuare e risolvere le criticità e consentirà una migliore user experience.
Oltre ai classici strumenti carta e matita, esistono in rete numerosi software gratuiti e a pagamento per la creazione di wireframe e di seguito ve ne illustro alcuni.
Balsamiq mockups
Probabilmente uno dei software più conosciuti. Offre una vasta e sempre aggiornata libreria dove si possono trovare tutti gli elementi di design utili per progettare siti web, applicazioni e molto altro. Il costo è di 79$ ed è un must have per chi si occupa professionalmente di UX e UI.
Cacoo permette di creare wireframe, mappe del sito e diverse tipologie di diagrammi. Permette di condividere i progetti in rete in modo che possano essere visti e modificati da più persone, utile quando si lavora in team. Esistono due versioni una gratuita e una a pagamento che si aggira intorno ai 50$ all’anno.
Axure
Axure permette di creare wireframe e prototipi con una vasta scelta di strumenti che permettono di seguire tutto il processo creativo di un sito web. Consente inoltre di condividere i progetti ed è disponibile in due versioni, free e a pagamento. La versione standard costa 289$.
Online troverete molti altri tool simili ai precedenti, tra cui:
In ogni caso, qualunque sia il software che sceglierete, non sottovalutate mai l’importanza dell’uso dei wireframe nel design di un sito web.
Riccardo
28 marzo 2016 at 15:21Salve, sono un web/graphic designer di 26 anni , lavoro in questo ambito da circa 2/3 anni, da sempre creo (sia in agenzia che personalmente) wireframe “a mano” molte volte aiutamdomi con codepen github e simili, a volte prendendo spunto online ma in ogni caso lavorando senza software “intermediari” nella stesura della struttura del sito.
Da un lato penso che sia stato utile in quanto mi ha permesso di conoscere meglio il codice senza troppi aiuti, dall altra parte mi sembra di intuire che la mia metodologia non è corretta e forse non al passo con quella di aziende più moderne e strutturate. Conviene utilizzare software di questo genere!? se si per quali ragioni? Grazie in anticipo
Jacopo Pasquini
28 marzo 2016 at 19:37Ciao Riccardo, il processo corretto parte sempre dallo sketch cartaceo, poi passa al disegno del wireframe tramite software (io utilizzo Balsamiq Mockups) e per finire prototipo in grafica.