Creare il wireframing di un sito professionale: gli strumenti giusti
Una volta realizzato il capitolato tecnico di un sito internet e il suo directory tree, comincia la fase di "wireframing" . Una tappa indispensabile per farsi un'idea più precisa dell'ergonomia del sito. Sono disponibili molti strumenti di wireframing, gratuiti o a pagamento. Semplici da usare, sono particolarmente utili ai professionisti che si occupano della realizzazione di un progetto web.
Il wireframing dei siti internet : che cos'è?
Il "wireframing" (o wire frame model) consiste nel rappresentare schematicamente l'organizzazione di un sito internet (es: directory tree), così come l'interfaccia grafica (interattività ed ergonomia).
Questa fase di schematizzazione ha luogo dopo la realizzazione del capitolato tecnico, e prima della fase di concezione vera e propria. Può essere realizzata da più persone che prendono parte al progetto (vedi più avanti). Permette tra l'altro di testare l'ergonomia del sito, di valutare il tempo necessario alal realizzazione del progetto, e di fare una stima dei costi di realizzazione associati.
Strumenti e software di wireframing
Gli strumenti di wireframing sono destinati all'insieme di professionisti riuniti attorno a un progetto di concezione web, siano essi tecnici o no. Hanno il compito di facilitare preventivamente la realizzazione delle fasi di concezione di un sito / blog / app mobile, e di assicurare una buona comprensione tra tutti i partecipanti (cliente, project manager, webdesigner, programmatore, etc.).
Hanno diverse caratteristiche (es: drag and drop), che permettono di droppare (depositare) gli elementi grafici di un sito su diverse pagine, lavorarne la dimensione, definire la posizione dei menù, etc.
Per quali professionisti?
Gli strumenti di wireframing possono essere utilizzati da diversi tipi di professionisti, e in diversi casi:
- Web project manager : prima della creazione del sito internet / blog / sito di e-commerce, vogliono proporre ai loro clienti una bozza del progetto conforme al capitolato tecnico e ai costi di quest'ultimo : directory tree e numero di pagine, disposizione dei menù, plugin, ergonomia, etc. Gli strumenti di wireframing facilitano anche la comunicazione con i webmaster nella fase di concezione del progetto.
- I professionisti della comunicazione e del marketing : che internamente e senza ricorrere ad un'agenzia web specializzata, intraprendono un progetto di creazione di sito internet / blog professionale, e hanno bisogno di rappresentarlo schematicamente.
- Utilizzo offline : presentazione di diagrammi o degli schemi.
Qualche strumento di creazione wireframe gratuito
Pencil Project
Questa estensione Open Source per Firefox (versione 4 o superiore) permette di concepire dei diagrammi e di realizzare delle interfacce utenti, grazie a tanti strumenti. Propone numerosi elementi grafici (stencil) per costruire lo schema delel pagine, e permette anche :
- la creazione di pagine multiple.
- creazione di link tra pagine.
- edizione testo direttamente sul wireframe.
- l'esportazione in formato HTML, PNG, OpenOffice.org, Word e PDF.
- Operazioni standard : allineamento, rotazione, ridimensionamento.
Sito ufficiale dell'applicazione
Lumzy
Questo strumento di creazione wireframe online (prototipi di siti web) propone una cinquantina di elementi grafici (bottoni, finestre di testo, barre di scorrimento, figure geometriche, etc.), da disporre su un workspace in drag and drop. Chiaramente è possibile creare pagine multiple (schede separate).
Una finestra che propone degli strumenti di impaginazione è disponibile per ogni elemento grafico trascinato (allineamento, colori...) e facilita la personalizzazione del progetto.
Il creatore del progetto può invitare dei terzi a partecipare per una collaborazione in tempo reale.
Lumzy integra tra l'altro un tool per ritoccare le immagini, una messaggeria istantanea, e numerosi bottoni standard (duplicazione item, sovrapposizione, blocco icone depositate).
MockFlow
In versione gratuita, questo wireframing tool online è utilizzabile per un massimo di 4 pagine, con massimo 2 collaboratori. Una configurazione sufficiente alla creazione di siti molto piccoli (preview).
Mette a disposizione molti elementi da inserire nel wireframe per schematizzare tanti progetti : applicazioni web, formulario contatti, software, etc.
Cacoo
Questo tool polivalente per la creazione di diagrammi online fornisce molti elementi da inserire, e funzioni, per creare semplicemente dei sitemap. Permette anche a più utenti di lavorare insieme e simultaneamente sullo stesso progetto.
Qualche tool di creazione wireframe a pagamento / premium
Balsamiq
Questo tool collaborativo (client desktop per Windows, Apple e Linux) permette di realizzare dei prototipi di app o siti web. L'interfaccia propone 75 comandi/azioni integrate. Balsamiq propone anche 187 icone inseribili, il che lo rende uno dei wireframing tool più completi. È proposto a 79$.
Mockingbird
Questo tool molto intuitivo di creazione e condivisione di mockup online è disponibile a 9$ al mese (due progetti, collaboratori illimitati).
iPlotz
Offline (download per OS linux, Windows, licenza a 75$) o online (a pagamento al di là di un progetto di 5 pagine), iPlotz permette di modellare e strutturare con efficacia le interfacce per diti di applicazioni web. Si rivolge ad utenti esperti, anche se è facile da usare.
Potrebbe anche interessarti
- Creare il wireframing di un sito professionale: gli strumenti giusti
- Scaricare video da un sito - Astuzie -YouTube
- Come creare un sondaggio su telegram - Astuzie -Messaggistica istantanea
- Creare un sondaggio su facebook - Astuzie -Facebook
- Sito per vedere se il pc regge un gioco - Astuzie -Videogiochi
- Come bloccare un sito su chrome - Astuzie -Google Chrome
Il documento intitolato « Creare il wireframing di un sito professionale: gli strumenti giusti » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.