12 tool per creare wireframe

I wireframe possono fare la differenza quando decidi di lavorare in modo serio e organizzato. Ma come si creano? Con quali tool? Ecco una serie di consigli per lavorare come un professionista.

I tool per creare wireframe sono indispensabili per creare una bozza del tuo sito, per sviluppare un valido discorso di usabilità e sottolineare problemi che è meglio risolvere. Attraverso questi schemi puoi progettare al meglio il tuo angolo di web.

 tool per creare wireframe
Progetta un grande sito web.

Come sono fatti i wireframe? Non sono molto piacevoli da vedere perché rappresentano bozze con blocchi incolore. Puoi utilizzare un qualsiasi programma di fotoritocco per generare un wireframe ma ci sono strumenti che ti possono aiutare.

Cos’è e a cosa serve un mockup: definizione

Spesso chi inizia a lavorare in questo settore punta all’azione pura e semplice. Quindi crea un sito web dal nulla, senza una base di partenza. In realtà questo è un errore, dovrebbe far capo a un wireframe. Vale a dire un diagramma che illustra il layout di una pagina web utilizzando forme diverse e semplificate per rappresentare testo, immagini, video, elementi funzionali e di navigazione.

La progettazione dei prototipi grafici gioca un ruolo importante in ogni progetto di sviluppo web. Non è un’attività legata al lavoro in agenzia, il wireframe è qualcosa che può aiutarti a risparmiare tempo e denaro. Soprattutto oggi che usabilità, SEO, soddisfazione dell’utente e design sono correlati.

Differenza tra mockup e wireframe

Questo è uno dei punti essenziali per iniziare: capire la differenza tra questi due elementi. Wireframe e mockup non sono la stessa cosa: il primo riguarda la definizione appena data, è uno scheletro che schematizza posizione dei vari elementi. Il secondo rappresenta il modello come dovrebbe essere e presentarsi.

Differenza tra mockup e wireframe
Ecco un esempio di mockup.

Ma tutto questo è veramente utile? Perché occuparsi di ogni passaggio? Il prototipo di un sito web consente di risparmiare i costi di una comunicazione errata o un uso complesso di un sito web. Tu pensi di rendere un’azione semplice.

E invece non è così, mi dispiace. Se pianifichi le pagine più importanti puoi avere una risorsa in più. Ma come creare un wireframe? Ecco i tool essenziali per creare.

Da leggere: prepara il tuo sito al mobile first indexing

FlairBuilder, uno dei migliori tool per wireframe

Iniziamo con un’ottima applicazione (a pagamento) web based per creare wireframe, prototipi di siti web e bozze di applicazioni iPhone. FlairBuilder è uno degli strumenti principali nel settore del web designer. Guarda questo esempio.

schema sito web
Un esempio di schema FlairBuilder per creare app.

Con i template puoi creare schemi adatti a ogni lavoro. Se vuoi fare un sito web semplice o un ecommerce, o magari un blog personale, sei nel posto giusto.

Pencil Project: software mockup generator gratis

Ecco Pencil Project, componente browser (ma c’è anche la versione standalone) che ti aiuta a progettare il tuo sito web. Rilasciato con licenza GPL version 2, Pencil Project mi piace perché è uno strumento facile, immediato e open source.

Tool online semplice e veloce per prototipi

L’idea che suggerisce Mockingbird è quella di essere uno strumento professionale e rapido da usare. Non c’è niente da installare, è tutto web e facile da esportare in PDF o PNG. Anche in questo caso ci sono diverse soluzioni di pagamento.

Il tuo web application wireframe tool: Balsamiq

Sembra un disegno ma è un wireframe creato con Balsamiq. Ecco un tool ideale (a pagamento) per far lavorare insieme product manager, designer, sviluppatori e clienti prima di scrivere il codice ed evitare di perdere tempo per correzioni inutili.

Cosa puoi fare con Balsamiq? Tutto, hai un tool per creare strutture utili per qualsiasi progetto. Puoi collaborare con il tuo team e scegliere tra web app e software desktop.

Fare mockup per app, siti, iPhone: MockFlow

Con MockFlow hai praticamente tutto quello che ti serve e le interfacce che sono dinamiche. L’account a pagamento (4,91 dollari al mese) permette di creare un numero infinito di progetti e di chiamare a raccolta tutti i collaboratori di cui hai bisogno. L’account gratuito, invece, ha come limite un progetto e 2 collaboratori.

Le risorse giuste per fare wireframe. Vuoi imparare a fare i progetti al meglio? Ti consiglio prima di tutto di dare uno sguardo a questa risorsa: wireframes.tumblr.com. Qui trovi praticamente ciò che ti serve per schematizzare e disegnare ogni cosa. Non perdere questa risorsa.

Frame box: tool online per creare wireframe free

La semplicità diventa strumento per fare schemi e schizzi del sito web da creare. Con framebox.org non devi fare altro che iniziare a organizzare il tuo disegno per poi portare tutto nello sviluppo del codice HTML, CSS e design.

Cacoo, software per creare wireframe e mappe

Crea wireframe e diagrammi modificabili online da più persone contemporaneamente. Con Cacoo, infatti, le modifiche effettuate dagli utenti appaiono in tempo reale sul progetto. L’account può essere gratuito o a pagamento (4.95 dollari al mese).

mappe mentali e diagrammi
Non solo mockup con Cacoo.

L’aspetto interessante di Cacoo? Oltre alle schematizzazioni per creare siti web puoi generare una marea di grafici differenti, dai diagrammi di flusso alle infografiche. Si presenta anche come programma per fare mappe mentali.

Strumento professionale per progetti web: Axure

Axure è un tool per creare wireframe e progettare interfacce di siti web con animazioni e contenuti dinamici. Sembra un disegno fatto su un pezzo di carta.

In realtà qui siamo di fronte a un file digitale che puoi modificare, appuntare, arricchire con note di qualsiasi genere… Uno strumento da professionista.

Il sito diventa wireframe con un browser plugin

Bottone da aggiungere sul tuo browser per trasformare ogni sito web in un wireframe semolificato: ecco Wirify. Lo so, adesso ti starai chiedendo quali sono i motivi per fare un passo indietro e trasformare un sito web in un wireframe.

Dovrebbe essere il contrario ma il team di Wirify ha la risposta che cerchi. In realtà con questa soluzione puoi usare esempi virtuosi per iniziare una nuova avventura.

Wireframe.cc, tool free online senza download

Una piccola rivoluzione. Quest’applicazione online (wireframe.cc) non ha bisogno di download, non devi fare login e lasciare la tua email per iscriverti. Devi solo entrare e iniziare a disegnare. Per condividere con i colleghi basta salvare e usare l’URL.

Mockup tool per website con template pronti

Questo tool per wireframe e mockup Possiede le caratteristiche dei wireframe tool visti finora ma la sezione dedicata al supporto (forum, snippet, tutorial) è ben fornita.

Inoltre ci sono diverse soluzioni di pagamento, oltre a una versione gratuita che permette di creare un solo progetto di 5 pagine. Insomma, iPlotz è una bella realtà.

Carta e penna per creare il mockup del sito

Aspetta… prima di metterti a lavoro non ti dimenticare gli strumenti indispensabili per creare wireframe: carta e penna! No, non sto scherzando. Questo può essere il punto di partenza per creare un blog, un sito di successo o un portale ben fatto.

disegno mockup
Ecco un esempio di base per i tuoi disegni – Scarica qui la base.

Magari hai bisogno di un modello PDF da stampare per rendere più semplice le operazioni di disegno. Nessun problema, puoi scaricare tutto da questo articolo di Smashing Magazine, praticamente la base per creare wireframe di app, siti e blog.

Da leggere: migliori tool per ridurre peso delle immagini

I tuoi tool per creare wireframe: opinioni?

Ci sono tanti tool per creare wireframe, ma sono sicuro che puoi aggiungere molto a questa lista. In che modo? Elencano gli strumenti che usi per disegnare schemi.

Questi software gestiscono le pianificazioni, gli elementi necessari per dare al tuo blog uno status superiore. Allora, lascia la tua esperienza nei commenti.

8 COMMENTI

  1. Interessante articolo Riccardo!
    Io per la prototipazione utilizzo Mockflow (con abbonamento), che tra le tante ti pemette di inserire anche immagini, tanto da realizzare un prototipo di sito molto simile a quello reale.

    Sarà interessante testare anche gli altri, che non conosco!
    ciao!

    • Sì, Mockflow è uno dei migliori. Ti ringrazio per il commento e fammi sapere (eventualmente) come ti trovi con altri strumenti.

  2. Complimenti per il blog e per l’articolo.

    Voglio esprimere la mia opinione riguardo ai tool che hai citato per fare wireframe visto che lavoro come project manager.

    pencil è senza ombra di dubbio il migliore free, veloce e immediato, permette di esportare nei formati più utilizzati, quindi può tranquillamente fare quello che fanno gli altri a pagamento con fee mensili. Ovviamente la mia opinione va considerata in base al mio utilizzo degli wireframe, ovvero per la creazione di novisual per website, quindi non posso sapere quali sono i migliori per usi differenti.

    Comunque ribadisco che pencil è: facile, intuitivo e Open source.

    • Uno strumento per creare wireframe gratis e con uno stile professionale: impossibile chiedere qualcosa in più. Grazie per il consiglio.

  3. Io come wireframe utile per creare presentazioni facili, intuitive e d’effetto consiglio http://www.prezi.com
    Dategli un occhio e scrivete qualche vostro parere, io francamente l’ho trovato molto bello da vedere, usare e il risultato finale è ottimo.

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here