Immaginate di entrare all’interno di una casa ampia, spaziosa, luminosa ma… arredata davvero male. Come minimo, vi sentireste spiazzati e un po’ persi: perché mai quel mobile è finito in quella precisa stanza, dove sembra totalmente fuori contesto? Ecco, questo è ciò che succede a un sito web progettato senza un mock-up, che oltre a essere un concetto base del web design è anche estremamente utile quando ci si occupa di contenuti.
Il mock-up è infatti uno degli strumenti che permette di vedere chiaramente come un sito web/i contenuti di un sito web saranno organizzati e posizionati. È alla base del branding, perché consente di avere una panoramica completa di come i nostri testi e le nostre sezioni si presentano e si “vendono” al pubblico. Ma cerchiamo di capirci di più.
Che cos’è il mock-up?
Ancora una volta partiamo da una definizione: il mock-up è la rappresentazione grafica di come una pagina/un sito web/un’app si presenteranno nella sua forma finale. Chiaramente si tratta di un modello visivo statico, dunque non funzionale: una specie di mappa sul futuro del nostro sito.
Per i contenuti funziona allo stesso modo. Costruire il mock-up, infatti, permette di pensare, soppesare e posizionare ogni parola nel modo più opportuno, mettendosi nei panni del pubblico e cercando di capire cosa gli serve. Non a caso, il mock-up è uno degli strumenti che più si usa quando ci si occupa di microcopywriting.
Mock-up per i siti web: cosa includono?
Andiamo ora ad analizzare nello specifico il mock-up, partendo da cosa dovrebbe comprendere. In sostanza, quando si progetta un sito web e si punta a realizzarne un progetto grafico, bisognerebbe cercare di non mettere né troppe cose, né troppo poche. Ma come si fa a capire cosa è importante e cosa no?
Semplice: mettendosi nei panni dell’utente. Dal punto di vista del web design, dunque, va da sé che il mock-up debba includere spazi per immagini, per video, moduli, pulsanti, footer, header ed eventuali e tutto ciò che riguarda l’impaginazione e la gerarchia visiva. Grande spazio dovrebbe essere dato alla coerenza ottica: il sito web, in sostanza, deve essere equilibrato e guidare lo sguardo dell’utente in modo fluido, senza brusche interruzioni.
Dal punto di vista del content design, invece, il mock-up deve comprendere i testi chiave, le parole che andranno a posizionarsi nella barra di navigazione e in generale tutti i claim, le frasi e le presentazioni di ogni singola sezione del sito. Sono molto, molto lontani i tempi del Lorem Ipsum: oggi il mock-up deve soppesare sin da subito ogni singolo termine, tenendo conto del tono di voce, e della user experience.
Quando si realizza il mock-up per il sito web?
C’è un momento preciso in cui si dovrebbe realizzare un mock-up? La risposta giusta è: dipende. Se stiamo parlando del mock-up prettamente legato al web-design, allora occorre svilupparlo durante il processo di creazione del sito web, subito dopo la fase di ideazione e ricerca e prima della prototitpazione e della programmazione.
Per quanto riguarda il content design, il mock-up è utile anche nella fase di lancio di un sito web, in fase di rebranding e/o anche soltanto per dare un certo tipo di ordine a specifiche pagine e specifici testi. Creare uno schema visivamente organizzato, infatti, ci aiuta a metterci nei panni del cliente/utente e a capire cosa dovrebbe catturare la sua attenzione.
Per riuscire a sfruttarlo meglio è bene avere già un’idea delle reader personas e delle buyer personas: solo sapendo a chi stiamo parlando/vendendo, infatti, possiamo pensare di usare testi e sezioni del sito web per avviare un dialogo efficace e significativo.
L’importanza del mock-up per il branding
Come abbiamo già detto, il mock-up è fondamentale in diverse fasi di sviluppo del sito web o della strategia di content e microcopy. Ciò che non abbiamo chiarito è che, in realtà, talvolta il mock-up passa in secondo piano perché si tende a dare più spazio al wireframe, ovvero il modello iniziale e sintetico di progettazione del sito/della pagina
Farlo passare in secondo piano è, però, un errore abbastanza grosso perché il mock-up restituisce la sostanza e tratteggia in modo il più possibile accurato il risultato finale del sito/pagina/contenuto tenendo conto di chi ne usufruirà e di cosa proverà.
Per questo è essenziale per il branding: se fare branding, infatti, significa sapersi raccontare (anche e soprattutto attraverso il transmedia storytelling), avere di fronte un mock-up ben fatto significa “leggere” il primo capitolo della nostra storia, quel C’era una volta che può accattivare l’utente/cliente e convincerlo che facciamo proprio al caso suo.
Come si crea un mock-up?
Ma come si fa a creare un mock-up? Generalmente, riproducendo una versione esatta del sito/contenuto/pagina facendo un disegno (anche semplicemente uno schizzo) che lo divida in parti. Nel web design si possono distinguere elementi come immagini, pulsanti di navigazione, call to action, testi e vari layout.
Nel content design, invece, si può buttare già uno schizzo tenendo in considerazione le parole chiave da inserire nel titolo, l’esplosione in titoli 2 e titoli 3, l’eventuale call to action a metà/a fine testo e/o i termini da utilizzare in diverse sezioni e sotto-sezioni.
In generale, è bene cercare di realizzare una sorta di disegno accurato che faccia capire cosa ha senso tenere e cosa ha senso togliere. Sia nel web design che nel content design si può (e si deve) tenere conto delle combinazioni di colori, dei caratteri tipografici e delle disposizioni/delle grandezze di testi, titoli ed elementi multimediali.
Gli strumenti per creare il mock-up
Chiaramente, una volta capita l’importanza del mock-up, ci si può voler cimentare nella sua creazione. In generale, è meglio lasciare questo lavoro a web designer, content designer ed esperti del mondo della comunicazione, ma conoscere gli strumenti per realizzare i singoli modelli è comunque molto molto utile. L’offerta sul web è abbastanza ampia, ma, secondo il nostro parare, gli strumenti migliori restano:
-
- Balsamiq: intuitiva e molto semplice, Balsamiq è un’applicazione che permette di creare dei mock-up per mezzo di widget predefiniti, con dei semplici drag-and-drop;
- Adobe XD: un vero e proprio software che non crea solo semplici mock-up, ma permette di gestire e progettare wireframe, prototipi e molto altro, attingendo sia a componenti pre-sviluppati che a librerie di terze parti;
- Figma: invece, Figma è uno strumento freemium che permette di creare mock-up collaborando con diverse persone. Offre anche diverse altre funzionalità e widget particolari, che rendono più verosimile il progetto grafico;
- Sketch: solo per Mac, Sketch permette di creare mock-up con un sistema end-to-end intuitivo.Consente a più persone di collaborare e permette di accedere a una libreria piena di widget, componenti ed estensioni sviluppate da terze parti.
Il consiglio, in ogni caso, resta quello di farsi consigliare da esperti del settore, che sapranno come sviluppare per bene il sito/la pagina/il contenuto nel modo più performante possibile.
Mock-up e content strategy: nesso inscindibile
Quando si crea/si rivoluziona un sito web che ha come obiettivo quello di parlare all’utente nel modo più chiaro e accattivante possibile, si possono incontrare molti ostacoli e si possono fare molti errori. Succede, è completamente normale. Tuttavia, è anche completamente normale cercare di minimizzarli.
Il mock-up permette di fare proprio questo: consentendo di visualizzare il sito/pagina/contenuto in anticipo, permette di ridurre al minimo gli errori. È per questo che è essenziale per la content strategy: aiuta a percepire chiaramente il peso di ogni singola parola e di capire come viene recepita.
Per chi lavora nel mondo della comunicazione e usa le parole per creare contenuti che piacciono a Google e agli utenti, il mock-up è a dir poco imprescindibile. Dunque, non sottovalutatelo!
