Siori e siore, mesdames et messieurs reggetevi forte al mouse: oggi mi spingerò oltre i confini del copywriting, per voi, solo per voi, “senza fame e senza sete e senza ali e senza rete“.

Se è vero che credo tanto nella specializzazione, è altrettanto vero che sostengo una teoria: “Bisogna sapersi arrangiare e saper fare un po’ di tutto“. Detto questo, non si offendano i web designer, che realizzano siti web di professione e, anzi, mi correggano e aggiungano pure quante più informazioni possibili a questo mio post, a cui ne seguiranno altri due. Come vi anticipavo, infatti, sto per raccontarvi qualcosa sulla grafica. Vi dirò qualcosina su come realizzare mock-up per siti web.

Iniziamo subito col capire cos’è un mock-up, chiamato anche wireframe.

Il mock-up è la rappresentazione grafica, pulita e stilizzata, del sito web. Il mock-up viene sottoposto al cliente, prima di passare alla realizzazione del template vero e proprio, per fargli capire la strategia di comunicazione del suo nuovo sito e mostrargli la disposizione dei principali elementi (Value Proposition, contatti, box social, CTA, menu etc.).

Quando un cliente mi contatta per la realizzazione ex novo del suo sito, per prima cosa studio la sua brand image, il target e quello che si vuole comunicare; dopodiché procedo con la realizzazione del mock-up. Adesso ti spiegherò, cercando di essere quanto più potabile possibile, tutti i vari passaggi per realizzare un buon mock-up per siti web. Seguimi in questo primo post e fammi tutte le domande che vuoi, se non ti è chiaro qualcosa.

Prima il brief, poi il mock-up

Te l’ho già accennato: il wireframe è solo lo step che va a concretizzare il tuo studio sul brand. L’azienda è molto social? Allora dovrai pensare, verosimilmente, a una struttura social-like con i pulsanti social above the fold, che dia ampio spazio alle immagini e che contenga, magari, un bel box di Pinterest e Instagram. L’azienda vuole aumentare i lead? Allora sarebbe ideale inserire il form per i contatti già in home page. Insomma, studiati per bene il brand e sottoponi al cliente il classico brief che usi anche per i testi. Dopodiché valuta tutti gli elementi fondamentali e decidi con attenzione dove posizionarli all’interno della pagina.

I guru americani di Marketing Sherpa (ti sarai mica perso questo super intervistone sulle landing page a Daniel Burstein?) consigliano di ragionare sull’ottimizzazione delle landing – e se consideriamo l’home page di un sito come una landing page siamo a cavallo – in questi termini:

• la gente non compra dai siti, compra dalle persone;
• non devi ottimizzare siti web. Devi ottimizzare le sequenze di pensiero;
• per ottimizzare le sequenze di pensiero, devi entrare in una conversazione;
• devi guidare la conversazione attraverso uno scambio di valore (es. Evita di inserire la scritta “Clicca qui” su un bottone. Molto meglio “Il tuo preventivo gratuito”).

Cosa ci dice la Landing Page Optimization Meta-Theory di Marketing Sherpa? Semplicemente ci suggerisce di pensare sempre prima alle persone. Infatti, prima di cercare di guidare traffico dentro a un sito, dovremmo assicurarci di avere una Value Proposition (ossia la ragione per cui il tuo cliente dovrebbe comprare qualcosa da te piuttosto che da un altro) efficace, e poi verificare che questa sia espressa in maniera chiara ed evidente.

In un prossimo articolo ti spiegherò meglio tutti i processi per ottimizzare le conversioni. In questo momento, concentriamoci sullo strutturare il mock-up in modo tale che la Value Proposition emerga al meglio. Non solo a livello di copy (non basta esplicitarla nell’header), ma anche a livello di architettura.

Il primo mock-up. Daje di carta e pennarello

Hai pensato a come comunicare al meglio la VP del tuo cliente? Hai capito qual è lo scopo che si vuole ottenere col sito? Bene. Allora sei pronto a iniziare a progettare il tuo mock-up.

Il digitale non me ne voglia, eh, ma la carta è e rimane la mia migliore amica. Per questo, prima di produrre il mock-up utilizzando le applicazione dedicate di cui ti parlerò nei prossimi post, inizio a lavorare su carta. C’è chi preferisce i fogli con le guide, tipo carta millimetrata. Io uso un semplice, gnudo e crudo foglio A4. Per disegnare mi piace il tratto deciso e scuro dei marcatori universali, tipo questi della Staedtler con punta F (non deve essere troppo sottile). Ultimo strumento fondamentale per questa fase è il righello.

Hai tutto pronto? Allora ci rivediamo la prossima settimana con la seconda parte di questo post. Nel frattempo, se vuoi lasciare il tuo contributo mi faresti tanto felicia.