Restyling del sito per Prospettiva Masotto, render e viste 3D.
Nicolò è un giovane geometra che realizza virtual staging, planimetrie arredate e render di nuove costruzioni per agenzie immobiliari, tecnici e costruttori. Il sito su Squarespace non rendeva giustizia ai lavori: un solo URL indicizzato in maniera errrata, un titolo senza parole chiave e il confronto prima/dopo affidato a un widget esterno a pagamento.
L’ho rifatto su Craft CMS mantenendo la pagina unica, come chiesto dal cliente, ma con contenuti modificabili sezione per sezione, un prima/dopo costruito su misura e un form preventivo pensato per chi ha fretta.
LA STORIA
Un problema reale,
una soluzione concreta.
Tre punti cardine: cosa non funzionava nel vecchio sito, come l’ho ricostruito e cosa è cambiato.
Un sito che nascondeva il lavoro migliore.
Per chi vende render, il sito è il portfolio. Quello vecchio, su Squarespace, aveva un title fatto di solo slogan e il confronto prima/dopo (il pezzo più convincente di tutto il lavoro) caricato da un widget di terze parti che a volte si bloccava e che per di più era a pagamento su una piattaforma terza.
Chi arrivava dalle ricerche trovava poco, e chi voleva un preventivo non aveva un percorso chiaro per chiederlo.
Un solo URL indicizzato
In sitemap c’era soltanto /home: per Google il sito era una pagina con uno slogan, oltrettutto l'url produceva un redirect al dominio di primo livello.
Prima/dopo esterno
Il confronto tra stanza vuota e arredata dipendeva da un widget Elfsight, con il suo peso e i suoi limiti.
Nessuna parola chiave
Il title non diceva né cosa si vende né a chi: virtual staging, planimetrie, render non comparivano.
Una pagina sola, costruita bene.
Il cliente voleva restare su una pagina, con design semplice e pulito, e aveva ragione: chi lo cerca vuole vedere i lavori e chiedere un prezzo, non navigare. Ho riscritto la struttura in sette sezioni (prima ne avevamo ipotizzate dieci, ma era "troppa roba"), tutte modificabili dal pannello di Craft, ognuna in una sua scheda.
Nicolò ha deciso la direzione grafica con alcuni consigli: palette chiara perché la versione scura risultava respingente, griglia regolare 4:3 al posto del masonry, nessun prezzo in pagina e nessuna recensione inventata.
Prima/dopo nativo
Comparatore scritto da zero, senza widget esterni: funziona con il dito, con il mouse e da tastiera.
Galleria lavori
Griglia regolare con planimetrie e lightbox nativa, gestita come elenco di blocchi dal CMS.
Form preventivo
Servizi selezionabili con un tocco, validazione accessibile, conferma automatica al cliente.
Migrazione senza perdite
Redirect 301 da /home alla nuova pagina, per non perdere l’unico URL già indicizzato.
Un portfolio che si fa trovare e si fa contattare.
Il sito è più leggero, veloce, accessibile e finalmente leggibile per i motori di ricerca, con dati strutturati che descrivono lo studio e i servizi. Il cliente aggiorna lavori, FAQ e contatti da solo.
0
Widget esterni per il prima/dopo
7
Sezioni, contro le 10 della prima bozza
AA
Contrasto e controlli secondo le WCAG
Analisi
Collegato a servizi di analisi di Google (Search Console, GA4...)
Cosa c’è sotto
una pagina sola.
Un sito monopagina non è un sito semplice: ogni dettaglio pesa di più.
Immagini ottimizzate
AVIF e WebP con dimensioni dichiarate e caricamento differito; l’immagine principale arriva per prima.
Critical CSS
Lo stile essenziale è incorporato nella pagina, il resto arriva dopo, già compresso.
Accessibilità
Controlli alti almeno 44 px, focus sempre visibile, rispetto di chi riduce le animazioni.
Form protetto
Honeypot, limite di invii per indirizzo e validazione ripetuta lato server.
Dati strutturati
Schema ProfessionalService e Person per descrivere a Google chi è lo studio e cosa offre.
Ricostruibile da zero
Struttura e contenuti si ricreano con due comandi: nessuna configurazione fatta a mano e dimenticata.
Tecnologie scelte
per durare.
Lo stesso stack che uso per i progetti più grandi, ridotto all’essenziale.
Craft CMS
Backend e gestione contenuti
Twig
Templating frontend
Alpine.js
Interattività UI
Tailwind CSS
Stilizzazione
Vite
Build e critical CSS
GitLab CI
Deploy automatico su staging e produzione
