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.

www.balsamiq.com

balsamiq mockup wireframe

Cacoo

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.

www.cacoo.com

cacoo wireframe

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$.

www.axure.com

http://doctorbrand.it/wp-content/uploads/2014/03/axure-wireframe.png

 

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.

Jacopo Pasquini

Consulente e docente di marketing e comunicazione digitale, specializzato in Web Marketing e UX Design. Ho iniziato a navigare su Internet nel 1997 con un modem 56k, oggi lavoro come freelance per aziende, agenzie, università.

Newsletter

Email

3 Comments
  • Riccardo

    28 marzo 2016 at 15:21 Rispondi

    Salve, 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:37 Rispondi

      Ciao 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.