screenshot della pagina home nuova di francescapinton.it

FrancescaPinton.it – design e sviluppo del tema custom wordpress

FrancescaPinton.it – design e sviluppo del tema custom wordpress

restyle, Tema Custom, Web design

In questo articolo parlerò di come ho analizzato le criticità del tema WordPress precedente e studiato la grafica del nuovo tema custom WordPress per il sito francescapinton.it ispirandomi ai prodotti beauty recensiti dalla cliente. 

La cliente e la richiesta

La cliente è una giovane influencer con una grande passione per il mondo del beauty. Ha deciso di creare un blog per condividere le sue opinioni, recensire prodotti di make-up e skincare, e connettersi con altre persone interessate al settore. Attraverso il blog ed i sociali mira a imparare, raccontare le sue scoperte, e farsi conoscere in un ambiente che le permette di esprimere la sua creatività senza i limiti imposti dai social media. 

Guardate il suo sito francescapinton.it !

Il blog inizialmente fu aperto dalla cliente stessa in autonomia come progetto iniziale personale, funzionale ma con evidenti difetti grafici e tecnici; avendo aumentato il numero di visualizzazioni e di iscritti, la cliente ha richiesto di avere un sito personale e più accattivante che rispecchiasse un’armonia serena e fosse rilassante a prima vista.

Il precedente tema WordPress

Come già anticipato il precedente tema WordPress presentava diverse irregolarità tecniche compromettendo la UE (User Experience) dei visitatori. Vediamo di seguito alcuni estratti del precedente tema e della sua organizzazione delle pagine:

screenshot della pagina home/blog vecchia di francescapinton.it
screenshot della pagina archivio chi sono vecchia di francescapinton.it
screenshot della pagina iscriviti vecchia di francescapinton.it

Come possiamo vedere la pagina home (prima immagine) non era una vera e propria home page ma invece era stato impostato il blog con gli articoli, esattamente come inizialmente pensato per le prime versioni di WordPress ma abbandonato ormai da diversi anni.

Guardando la testata delle pagine vediamo che non è presente un logo di immagine ma solo il pay-off scelto dalla cliente; inoltre il menu presentava in home la pagina del blog, in recensioni ed informazioni le rispettive pagine di archivio con le suddette categorie come ricerca preimpostata, la pagina chi sono (seconda immagine) in realtà era l’archivio con l’unico articolo con categoria chi-sono, mentre prodotti preferiti e iscriviti in realtà era la stessa pagina con il form di sottoscrizione impostato dal plugin mailpoet e quindi con un layout non in armonia con il resto del sito.

screenshot di un articolo vecchio di francescapinton.it

Gli articoli, la sezione più importante del sito in questione, si presentavano come nell’immagine precedente ovvero una testata molto semplice contenente titolo, autore, data e categoria.

L’articolo prendeva il contenuto libero inserito tramite Gutenberg e finiva infine con il form di iscrizione del plugin mailpoet con un font e grandezza non concorde con il resto della pagina.

La side-bar invece è stata preimpostata con diversi link social (alcuni dei quali inutilizzati) mentre l’archivio è stato suddiviso per mensilità di pubblicazione, poco intuitivo per la sua navigazione da parte dei visitatori.

Il nuovo sito web : il tema custom WordPress per francescapinton.it

Per il tema custom mi sono ispirato alle etichette dei profumi ricopiando il bordo bianco spesso e definito con al centro il nome del prodotto. 

Ho scelto inoltre di dare più spazio tra gli elementi delle pagine rispetto al tema precedente e dandogli un tono più elegante ed armonioso.

Di seguito le sezioni del nuovo tema WordPress custom creato per la cliente:

screenshot della pagina home nuova di francescapinton.it
screenshot della pagina chi sono nuova di francescapinton.it
screenshot della pagina blog nuova di francescapinton.it
screenshot della pagina iscriviti nuova di francescapinton.it

In ordine abbiamo la nuova home page dove si evince la testata rivisitata con il logo riscritto in corsivo ed il menu rivisitato e semplificato, i titoli delle pagine ora sono sempre in centro con le immagini in evidenza scelte dal cliente.

Di seguito la pagina chi sono  che ora è una pagina a se stante.

Il blog degli articoli riposizionati in 3 colonne (una su mobile) con a fianco la side-bar notevolmente snellita; per gli articoli è stato ridisegnato un design accattivante che ricorda le buste da lettera e richiamare le sezioni iniziali delle pagine con il distintivo bordo bianco.

Infine è stato ridefinito il carattere dei testi per le sezioni di sottoscrizione come nella pagina iscriviti.

screenshot della sezione footer nuova di francescapinton.it

Il footer è stato ridisegnato in negativo rispetto alla testata delle pagine con il menu del footer con le pagine che sono state create di pivacy policy e cookie policy che prima erano assenti.

screenshot di un articolo nuovo di francescapinton.it

Per gli articoli invece è stato scelto di modificare la line-height, font, colore dei titoli e altezza degli spazi tra i paragrafi al fine di non intaccare l’organizzazione dei contenuti pensato negli articoli precedenti. 

Anche negli articoli è stata impostata la stessa side-bar più “pulita” rispetto al tema precedente.

Anche se non si vede nell’immagine anche gli articoli hanno la stessa testata scelta per le pagine.

screenshot della pagina login nuova di francescapinton.it

Ho scelto inoltre di personalizzare la pagina di login di WordPress.

Nel mio prossimo articolo parlerò di come ho personalizzato la parte di back-end per la UE della mia cliente.

Conclusioni

Per il sito francescapinton.it ho studiato e personalizzato il suo nuovo tema custom WordPress tenendo in considerazione le indicazioni iniziali della cliente riguardo a dei contenuti armonici, di ordine e che fosse in linea con i siti web dei competitor e delle grandi marche di prodotti di cosmesi.

Al fine di rispecchiare le richieste della cliente mi sono ispirato alle etichette dei profumi ricopiando il bordo bianco spesso e definito con al centro il nome del prodotto. 

Ho scelto di dare ampi spazi tra gli elementi testuali ed in pagina iniziale per dare un senso di “respiro” e spazio, enfatizzando gli elementi che la compongono per aumentarne l’importanza.

Nella pagina blog ho scelto di riproporre l’omonimo taglio a V delle buste da lettera, dando quindi un taglio austero ed ordinato restando in armonia con il bordo bianco scelto per le hero-section ed i colori tenui per tutti gli elementi e sfondi.

Nel prossimo articolo parlerò delle parti di back-end di WordPress per la UE (user experience) della cliente al fine di compilare al meglio i contenuti delle pagine tramite Gutenberg.

Se anche tu desideri una consulenza per la realizzazione di bozze grafiche per il tuo sito web o per il tuo progetto clicca il bottone sottostante, sarò felice di ascoltarti e collaborare con te!