Come nasce il sito web di uno scrittore

A inizio anno (sì, siamo già a metà) io e Chiara Chinellato abbiamo inaugurato la versione definitiva di The Sign of the Two, un progetto che ci ha tenute impegnate per molti mesi, pellegrine lavoratrici tra bettole etniche e locali in quel di Padova.

Condividiamo l’amore per le parole, io e Chiara, e quello per la comunicazione, e per i libri, e per il cibo (e per altre cose che non si possono nominare). Abbiamo riunito parole, libri, comunicazione e le abbiamo avvicinate al nostro lavoro. Ci siamo dette: sappiamo fare questo e quello, e il nostro sogno è fare bei libri, perché non contribuire di più?

Però siamo strane, quindi non potevamo limitarci a redigere una lista di servizi e aprire un service editoriale uguale a mille altri. E dovendoci occupare del branding altrui, abbiamo pensato di fare la stessa cosa con la nostra idea: abbiamo rubato l’identità a Sherlock e Watson e siamo diventate le nuove inquiline del 221B di Baker Street. Gli altri personaggi – Irene Adler, Moriarty e Mrs Hudson (altri ne verranno, forse?) – sono stati impiegati, a seconda di attitudini e personalità, per descrivere i pacchetti tematici di servizi che offriamo.

E poi? I clienti. I clienti sono le persone che rendono possibile la nostra auto-narrazione all’interno dell’universo letterario di Arthur Conan Doyle, cui siamo affezionate. Lavoriamo, ma vogliamo anche divertirci, e loro vivificano la nostra storia, permettendoci di continuare a raccontarla, avventura dopo avventura.

Non scriviamo avventura a caso, sappiatelo, perché qualche settimana dopo il nostro debutto siamo state contattate da uno scrittore che voleva migliorare la sua presenza online in vista dell’uscita del nuovo libro. Gli siamo state consigliate da un’amica e si è convinto a scriverci dopo aver letto la nostra presentazione.

Questo temerario è Stefano Santarsiere, autore del romanzo La mappa della città morta, in libreria da febbraio per Newton Compton. Mettetevi comodi, perché vi racconteremo il suo, e il nostro, viaggio.

Premesse e richieste del cliente

Stefano Santarsiere non è un esordiente: ha pubblicato racconti, una serie in digitale, un romanzo. Nel 2015 ha scelto di auto-pubblicare un thriller con Kindle Direct Publishing, per vedere come andava, e ha avuto successo. La storia, la prima con protagonista Charles Fort, il copywriter del mistero, è piaciuta così tanto ai lettori che è stata notata dagli scout della Newton Compton.

Il 25 febbraio 2016, quasi un anno dopo, sarebbe uscito lo stesso libro con il titolo La mappa della città morta e Stefano voleva un nuovo sito che descrivesse meglio la sua seconda vita da scrittore, dato che quello vecchio era datato e con pagine statiche in HTML.

Le richieste con cui ha bussato al nostro studio erano poche e precise: voleva un sito moderno, voleva che fosse responsive e voleva mantenere il vecchio dominio. Ci ha mostrato quelli di alcuni colleghi di scuderia, ma abbiamo pensato che sviluppare un sito ufficiale su Blogger con un tema di dieci anni prima non si addicesse alla nostra filosofia creativa.

(Se non sai che cos’è il design responsive, guarda questa serie di GIF.)

Anatomia di uno scrittore

A Stefano serviva un nuovo sito, dicevamo, ma non solo. Dovevamo lavorare al suo brand e all’immagine che meglio lo rappresentasse online. Prima di pensare e progettare lo spazio web, quindi, dovevamo conoscere il protagonista del nostro “caso”.

Occuparsi di personal branding, infatti, non significa mentire o costruire un’immagine fasulla delle persone. Significa rendere loro giustizia, presentarle per come sono davvero, cercare di avvicinare e unire tutti gli elementi che ne compongono la presenza online con la personalità che hanno offline.

È un lavoro di conoscenza, mediazione e narrazione tramite segni, immagini, parole e stile. Il brand non è solo il logo, o il design del sito, o la foto del profilo Facebook, o il tweet di Twitter, o il post sul blog, ma tutto, tutto, tutto quello che siamo, scriviamo e facciamo in rete. E tutto quello che le persone percepiscono e pensano di noi.

Stefano Santarsiere non era l’unico scrittore di thriller / romanzi d’avventura italiano e, se gli slogan promozionali dell’editore non l’aiutavano a distinguersi (“Un grande thriller”, “Un esordio potente”), avremmo dovuto occuparcene noi, “con altri mezzi”, adattandoci al prodotto (sì, il libro) che era già stato preparato da qualcun altro.

Anatomia di un brand

Per prima cosa ci siamo dedicate a “scoprire” Stefano. Chi era, qual era il suo stile online, quali i suoi profili social, com’era il suo sito, che contenuti aveva, cosa si diceva di lui. Poi abbiamo vagliato il materiale, decidendo cosa mantenere (la pagina Facebook, il profilo Twitter, il dominio già indicizzato del sito) e cosa rivedere (praticamente tutto il resto) (sì, siamo crudeli). Infine abbiamo preparato una lista di cose da aggiungere, modificare, implementare e abbiamo organizzato tutti questi elementi in due documenti, una “brand board” per il branding e una mappa del sito, da presentare al nostro autore.

Come prima cosa abbiamo pensato al logo: trattandosi del brand di uno scrittore, non volevamo qualcosa di troppo elaborato e grafico. Dopo alcune prove con simboli e colori, abbiamo quindi optato per una soluzione molto minimale che usasse il nome dell’autore, giocando su font di “pesi” (più o meno grassetto, insomma) e colori diversi per nome e cognome. Presumendo che lo avremmo dovuto usare su fondi sia chiari sia scuri, ne abbiamo preparate due versioni, più una terza con il nome su due righe per la versione mobile, da visualizzare meglio su display di dimensioni ridotte.

E visto che eravamo ormai imbarcate nella perigliosa impresa di scegliere i font, abbiamo proseguito domandandoci quanti e quali usarne per i testi. Per i titoli abbiamo scelto lo stesso del logo (con alcune lievi difficoltà che vi raccontiamo più sotto); per le call to action, ovvero gli inviti a compiere una certa azione, come cliccare su un bottone o aprire una pagina, abbiamo optato per un altro font senza grazie, il Raleway, scegliendo invece un classico, solido font Serif, il Merriweather, per i paragrafi di testo. Discorso a parte per la composizione del “Taccuino di Charles Fort”, per il quale abbiamo dovuto decidere se attribuire una calligrafia a Charles, e se sì quale.

Nel progettare il logo abbiamo dovuto porci anche la questione dei colori: volevamo che la comunicazione coordinata trasmettesse un senso di modernità e dinamismo, ma allo stesso tempo che fosse seria e professionale, coerente con la persona di Stefano Santarsiere. Usando la copertina del libro come riferimento, abbiamo campionato un bel giallo brillante e carico, da usare come colore primario insieme al nero; per i dettagli a contrasto (call to action, link, titoli degli articoli del blog e dei widget della sidebar) abbiamo scelto un azzurro cielo che si opponesse in modo chiaro ma non troppo violento al giallo.

Insieme ai colori ci siamo occupate di individuare alcuni pattern da usare in modo ricorrente per identificare le comunicazioni relative al libro non solo sul sito. Per il pattern principale la scelta migliore ci è sembrata quella di usare una parte dell’immagine di copertina, il dettaglio che riproduce un’antica mappa, lavorando su tonalità e luminosità per ottenere uno sfondo abbastanza scuro da poterci scrivere sopra, ma non così scuro da nascondere il disegno della mappa. Per il pattern secondario, che sarebbe poi venuto utilissimo per la sezione del “taccuino” del sito, ci siamo fatte ispirare dall’idea dell’antico manoscritto, scegliendo la texture (manipolata) di un foglio di carta color avorio, simile a quelli dei taccuini da viaggio Midori.

Da ultimo ci siamo occupate delle immagini: per non appesantire il sito, che volevamo veloce da caricare, abbiamo scelto un ritratto dell’autore e un’immagine del libro (in realtà due, una orientata verso destra e una verso sinistra). Per le pagine del taccuino di Charles ci siamo invece sbizzarrite, creando una serie di immagini ad hoc che movimentassero la pagina e rendessero più autentica l’impressione di taccuino di viaggio.

(Vuoi vedere la brand board di Stefano Santarsiere? La trovi su Pinterest!)

Anatomia di un sito

Un sito non è per sempre, e prima o poi bisogna cambiarlo, aggiustarlo o rifarlo daccapo. Ma “la grafica non mi piace più”, “voglio provare quella nuova piattaforma”, “mi annoio” non sono ragioni sufficienti: la pianificazione di un sito deve basarsi su un ragionamento più ampio e comincia proprio dall’analisi delle richieste e degli obiettivi. Per questo lavoro, per esempio, gli obiettivi erano: creare un’immagine professionale per l’autore e presentare al pubblico La mappa della città morta, che non era un romanzo autoconclusivo, ma il primo di una serie.

Inoltre, quando si progetta un sito ci sono elementi da tenere in considerazione e altre domande da fare o farsi: qual è il budget, come il sito deve rappresentare il cliente, cosa devono trovare i visitatori, come differenziarlo dalla concorrenza, la disponibilità del cliente (per l’aggiornamento del blog, per esempio), ecc.

Quali sono gli step che abbiamo compiuto per realizzare il sito di Stefano? In sintesi, eccoli:

✓ Il tipo di sito: considerando che si tratta del sito di uno scrittore, ma che deve focalizzarsi di volta in volta sul nuovo libro in uscita, ci serviva un sito dinamico da aggiornare facilmente, e che l’autore, una volta terminata la fase di affiancamento, potesse gestire in autonomia;

✓ La piattaforma: viste le considerazioni precedenti, la scelta è caduta su WordPress, che abbiamo installato nello spazio hosting del sito precedente;

✓ Architettura dei contenuti: una volta deciso cosa mettere nel sito, dovevamo decidere dove. Ci siamo dilettate nel content design, stabilendo una gerarchia tra i contenuti da inserire e selezionando per ciascuno il posto giusto. Perché la homepage fosse immediata e non distraesse il visitatore con troppi elementi tra cui muoversi, abbiamo deciso di tenerne solo tre: un’immagine grande in apertura, la presentazione del libro e una biografia breve dell’autore. Da ciascuna di queste abbiamo tracciato dei percorsi per raggiungere aree di informazioni dettagliate su pagine di secondo livello: particolari sul romanzo, una biografia più ampia, notizie sulle pubblicazioni precedenti di Santarsiere, e soprattutto il blog. Il blog ci è servito come raccoglitore di approfondimenti legati a diversi aspetti del lavoro dell’autore (come autopubblicare un libro, come creare un personaggio solido, ecc.), ciascuno dei quali poteva essere usato come contenuto indipendente da condividere e promuovere via social network.

✓ Scelta del template: dopo aver deciso la struttura dei contenuti (e non prima, anche se la tentazione sarebbe stata quella) ci siamo messe alla ricerca del template. La scelta di impiegare un template precostituito si è basata su due necessità espresse dal cliente: da un lato mantenere i costi entro un certo budget, dall’altro essere online in tempi molto ristretti. Abbiamo selezionato un tema “one-page”, ossia con la homepage suddivisa in diverse sezioni, che avesse però la possibilità di creare anche pagine tradizionali.

✓ Modifiche: il template è stato personalizzato per uniformarsi all’identità visiva stabilita in precedenza, con font, colori e immagini definite dalla fase di branding; sono inoltre state fatte modifiche strutturali per adattarlo alle specifiche esigenze di contenuti (dimensioni dei testi e delle immagini, link, eccetera).

✓ Fase beta: per essere certe andare online in concomitanza con l’uscita del libro nelle librerie, abbiamo suddiviso la pubblicazione in due fasi, una beta e una finale. Per la fase beta ci siamo assicurate che ci fossero gli elementi essenziali: homepage con libro e autore, possibilità di scaricare un estratto e acquistarlo su Amazon, contatti.

✓ Fase finale: per la fase finale abbiamo aggiunto il blog, le sottopagine relative alla bibliografia dell’autore e alla rassegna stampa, e la sezione del Taccuino, che abbiamo inserito anche in homepage.

I problemi affrontati

Per non tediarvi troppo, vi racconteremo soltanto i principali, dato che le modifiche al tema sono state numerosissime e i problemi altrettanti.

✓  I colori della copertina
Come creare una palette di colori convincente, partendo da quel marrone non proprio piacevolissimo? Doveva essere una palette adatta a presentare questo libro, ma che potesse rappresentare l’autore nel tempo, a prescindere dal resto della produzione. Insomma, doveva essere versatile.

✓ I font
Cercare i font adatti per un brand può richiedere ore, giorni, settimane, anche quando si ha un catalogo tipografico di tutto rispetto diviso tra libri, Mac e Pinterest. Sherlock si era innamorata subito dell’accoppiata Big John e Slim Joe, ma Watson ha fatto tristemente notare che, pur essendo gratuiti, questi font non avevano le lettere accentate e gli apostrofi.

Per un momento hanno pensato di trovarne altri, ma hanno cambiato idea presto perché erano troppo belli e alla bellezza non si resiste. Erano due, erano sans serif, erano moderni, e utilizzarli all’interno del sito avrebbe creato un piacevole contrasto con i colori e i pattern à la Indiana Jones.

✓ I copy
Sherlock e Watson hanno accettato la sfida dei font senza accenti e apostrofi, ma avrebbero dovuto pensare a copy che non ne contenessero. Ovviamente, prima di avere una provvidenziale illuminazione, i primi dieci testi contenevano almeno uno di questi segni grafici. Inconvenienti del mestiere.

✓ Responsive
Nel 2016 un sito non può non essere responsive, e questo perché gli utenti che navigano con il cellulare o il tablet sono sempre di più, e perché Google altrimenti ti penalizza e finisci nella decima pagina di una query che nessuno cercherà mai.

Il template che avevamo scelto lo era, tuttavia quando si fanno modifiche sostanziali bisogna sempre controllare che la resa sia ottimale su qualsiasi dispositivo. Mentre lavoravamo a questo progetto, quindi, avevamo le scrivanie sommerse da computer di diverse dimensioni, almeno tre diversi modelli di iPhone e altrettanti iPad e tablet, per non farsi mancare nulla. Quando si dice apple whores.

✓ Il taccuino di Charles Fort
La seconda grande sfida dopo John e Joe è stata la realizzazione del taccuino di Charles Fort, il protagonista del libro. Dovevamo scegliere cosa raccontare (riscrivere la linea del tempo con le date precise, non sempre specificate nel testo), quando fermarci nella narrazione per non spoilerare la storia, come farlo restando fedeli al carattere e allo stile del personaggio.

Ma soprattutto dovevamo dare l’impressione che la pagina web fosse davvero un taccuino di viaggio: non solo con la texture per lo sfondo (usata anche nella pagina Rassegna Stampa, dato che si parla sempre di blog, giornali e riviste), ma anche grazie alle memorabilia che Charles avrebbe tenuto all’interno (il biglietto del viaggio, una cartolina, qualche foto, delle liste, una mappa) e al font per le date che somigliasse a quello degli stampini usati spesso dai collezionisti di traveler’s notebook.

In più, quale font per la firma di Charles e la sua scrittura? Domande a cui, forse, non si poteva rispondere da sobrie.

Follow-up

Sopravvissute a mesi di lavoro, consegnato il sito finito e bellissimo, più splendente di un abito lavato con Perlana, abbiamo spiegato al nostro gentile e paziente committente (davvero!) come usarlo: come creare una nuova pagina, quali sono gli elementi irrinunciabili, come gestire i menu, come scrivere e ottimizzare un post, le giuste dimensioni delle immagini, come utilizzare i plugin principali e altre cose indispensabili per usare correttamente e senza drammi il suo nuovo spazio web.