Per realizzare i wireframe ed il prototipo di un sito internet esistono diversi software, oltre che diverse correnti di pensiero. In questo articolo vi racconteremo un esperimento che abbiamo fatto utilizzando WordPress.
Facciamo un breve passo indietro. Cosa sono i wireframe? Cos’è il prototipo di un sito? A cosa servono questi due strumenti?
Il wireframe
1. Cos’è il wireframe
Il wireframe non è altro che l’ossatura delle pagine di un sito. Generalmente viene realizzato in bianco e nero o in scala di grigi perchè non deve dare alcuna indicazione su quello che sarà l’aspetto grafico finale del sito, ma deve solamente far capire la posizione dei vari elementi che intendiamo mettere all’interno di ciascuna pagina.
2. A cosa serve il wireframe
Il wireframe viene utilizzato in fase di progettazione di un sito internet, per studiare la miglior soluzione possibile per disporre gli elementi all’interno delle varie pagine e fare da linea guida per il design vero e proprio del layout.
3. Come si realizza il wireframe
Come ho scritto all’inizio dell’articolo ci sono vari software e soprattutto varie correnti di pensiero sulla realizzazione dei wireframe. C’è chi preferisce lavorare con dei software specifici come Axure, Balsamiq, muse, oppure chi vuole maggiore libertà e decide di utilizzare programmi di grafica come illustrator, photoshop o fireworks.
Il prototipo
1. Cos’è il prototipo
Il prototipo è lo step successivo rispetto al wireframe e consiste in una bozza funzionante e navigabile del sito. Può essere realizzato o “montando” i wireframe, oppure utilizzando già i layout grafici finali.
2. A cosa serve il prototipo
Il prototipo è uno strumento molto utile per testare e far testare il sito in primis al cliente, ma soprattutto agli utilizzatori finali per poter ottimizzare al meglio la navigazione e la user experience e trovare e correggere sul nascere eventuali problematiche.
3. Come si realizza il prototipo
Il prototipo può essere realizzato anche in questo caso o con software appositi, gli stessi che ho citato per quanto riguarda il wireframe, oppure programmando da zero il codice HTML e CSS.
Come creare wireframe e prototipi con WordPress
Visto che ormai WordPress è diventato il nostro pane quotidiano abbiamo deciso di sfruttarne le potenzialità non solo nella fase di sviluppo finale, ma anche nella fase progettuale, in modo tale da ottimizzarne i tempi e lavorare fin da subito su una versione molto vicina a quello che sarà il prodotto definitivo.
In poche parole abbiamo utilizzato WordPress per creare prima i wireframe, a seguire il prototipo ed infine per sviluppare il sito internet vero e proprio.
1. Quali sono i vantaggi di utilizzare WordPress per creare wireframe e prototipi
Risparmio di tempo
Il primo vantaggio di cui ci siamo resi conto è stato il risparmio di tempo e di risorse. Utilizzando un solo strumento, con qualche aiutino di Photoshop, è tutto molto più rapido. Inoltre lavorando online le condivisioni ed i conseguenti feedback da parte del cliente sono stati molto rapidi.
Miglior dialogo con il cliente
Il cliente, fin dalla ase di progettazione, si è trovato ad aver a che fare con un prodotto che ha già tutte le caratteristiche funzionali del sito internet vero e proprio. Questo ha lasciato davvero pochi margini di errore e soprattutto limitato al minimo le possibili incomprensioni.
Test semplici ed attendibili
Anche i test effettuati sugli utenti durante la fase di progettazione hanno avuto delle risposte molto attendibili in relazione a quello che sarebbe stato il pordotto finale.
2. Cosa serve per creare wireframe e prototipi con WordPress
Entriamo nel vivo della fase operativa facciamo una breve lista della spesa di quello che effettivamente serve per poter sviluppare wireframe e prototipi con WordPress, dando ovviamente per scontato che lo abbiate già scaricato ed installato.
[In caso contrario fate un passo indietro e leggete questo articolo su come installare WordPress]
- Utilizzate un tema compatibile con il Visual Composer. Per semplificarci la vita e rendere il lavoro più veloce e soprattutto con una maggiore resa in termini di funzionalità siamo partiti da un tema premium acquistato su Themeforest. Abbiamo scelto Salient perchè è un tema molto facile da gestire e personalizzare, ma soprattutto compatibile con i principali plugin di WordPress tra cui il Visual Composer.
- Attivate il “Visual Composer”. Il Visual Composer è un plugin che permette la creazione delle pagine e la gestione degli spazi (righe e colonne) e degli elementi al suo interno (blocchi di testo, video galley, contact form etc..) in maniera molto semplice attraverso il drag and drop.
- Createvi set di “segnaposto” per le immagini. Lo potete fare utilizzando un qualsiasi programma di grafica. Se ve la cavate bene con Photoshop usate quello, altrimenti va benissimo anche Gimp.
3. Quali sono i passaggi
- Settate la “Palette colori” del tema utilizzando la scala di grigi, in modo tale da non dare alcuna indicazione su quello che sarà il look&feel del sito e far focalizzare chi naviherà il vostro wireframe / prototipo solo ed unicamente sulle funzionalità e la disposizione degli elementi.
- Scegliete il font da utilizzare per il “body” e per i vai titoli (“h1”, “h2”, “h3” etc..). In questa fase un font neutro come l’Open Sans andrà più che bene.
- Create le pagine del sito (pagine>aggiugni nuovo) ed il menù di navigazione (aspetto>menù) in modo tale da costruire la struttura del sito e poterne testare anche la navigazione.
- Adesso siete pronti per poter iniziare a lavorare prima sui wireframe della home e delle pagine interne, per poi legarli tra di loro – tramite menù di navigazione e/o altre tipologie di link – e realizzare un vero e proprio prototipo funzionante. Vi basterà entrare nella pagina e tramite il visual composer suddividerla nelle righe /colonne ed inserire gli elementi che volete prevedere al loro interno.
Volete un esempio concreto? Vi riporto a seguire un’immagine dove trovate le 3 fasi di lavorazione che ci hanno portato dalla definizione del wireframe + prototipo, al design del sito www.gruppocap.it che è stato poi sviluppato dal team di lavoro interno all’azienda.
Conclusioni
So perfettamente che molti di voi avranno storto il naso dalla prima all’ultima parola di questo articolo per l’uso improprio che abbiamo fatto di WordPress. Come detto all’inizio si è trattato di un esperimento che secondo noi ha avuto dei buoni risultati e che di sicuro ci porterà ad integrare WordPress anche nella fase di progettazione del sito internet.
RESTA AGGIORNATO!
Continua a seguire il nostro blog per scoprire di più sul SEO, sul Social Media Marketing, su WordPress e tanto altro! Iscriviti alla Newsletter e scarica i nostri utilissimi tools pensati appositamente per te!
