Metalogopedia nasce da una frase della cliente, logopedista a Viterbo: la logopedia è un viaggio, uno spazio che prende per mano e accompagna. In un mercato locale dove gli studi comunicano la competenza in modo freddo o si affidano agli aggregatori, abbiamo costruito tutto il sito attorno a questa idea: non un elenco di prestazioni, ma il racconto di un percorso. Da qui discende ogni scelta, dall'identità fino alla singola animazione.
Il marchio è una bussola che racchiude, nel proprio spazio negativo, le onde della voce. Un solo segno tiene insieme i due assi del brand: la direzione, cioè la rotta e la meta del viaggio, e lo strumento, cioè la voce. La bussola promette un percorso con una meta, le onde rappresentano la disciplina.
Da questa sintesi nasce tutto il resto: la metafora del viaggio, la barchetta che ritorna nel sito, perfino i due colori del marchio che diventano la palette. La scelta non è decorativa, parla all'utente reale: un genitore che cerca una direzione in un momento di incertezza, e a cui il segno dice che una rotta esiste e che qualcuno la conosce.
I colori sono due e derivano entrambi dal logo: un petrolio profondo e un azzurro chiaro, legati ai cammini sul lago di Bolsena e alla dimensione marina del viaggio. Il fondo non è un bianco clinico ma una tinta calda, color pergamena, pensata per l'utente reale, spesso un genitore in apprensione: un ambiente caldo riduce la distanza di uno spazio sanitario.
L'azzurro non decora, segnala: orienta l'attenzione dove serve, con contrasti calibrati sui requisiti WCAG. La tipografia lavora a due voci: un lineare senza grazie per informazioni e interfaccia, un carattere con grazie in corsivo per titoli e momenti identitari. Una è infrastruttura, l'altra accento. Insieme dicono la stessa cosa del logo: rigore e calore, competenza e accoglienza.
Il neumorphism è uno stile in cui gli elementi non stanno sopra lo sfondo, ma sembrano emergere dalla sua materia: una doppia ombra, chiara e scura, simula un rilievo morbido, un pulsante che pare gonfiarsi, un campo scavato al suo interno. Va calibrato con cura, perché usato male diventa illeggibile.
La scelta qui non è estetica ma psicologica. L'utente è spesso un genitore in apprensione, e la forma comunica prima delle parole: spigoli vivi e bianco clinico raccontano ambulatorio e distanza, le superfici morbide raccontano accoglienza. È la traduzione visiva di una frase della cliente, entrare nello studio prima ancora di suonare il citofono. Le ombre sono calcolate sulla tinta calda del fondo, i pulsanti si incavano al tocco, e il testo vive su un livello a parte, sempre nitido.
Se il logo è una bussola che custodisce le onde, la barca ne è la versione in movimento. Una barchetta di carta attraversa la pagina tracciando la propria scia: a ogni tappa rivela un valore del metodo e infine esce dal margine, a dire che il percorso prosegue oltre lo schermo. Lo stesso elemento ricompare all'invio del modulo, quando il messaggio salpa.
Non è un vezzo: è la metafora del viaggio resa concreta, un filo visivo che accompagna chi legge da una sezione all'altra senza mai spingere. La scia è disegnata con GSAP e DrawSVG, sincronizzata con lo scorrimento; ogni movimento rispetta la preferenza di sistema per il movimento ridotto, con un'alternativa statica completa. La barca è vettoriale, quindi nitida a ogni risoluzione e leggera da caricare, e lo stesso segno torna nel logo e nei contatti, a chiudere il cerchio del racconto.
Sotto la superficie morbida c'è uno stack scelto per tre obiettivi: velocità, autonomia, privacy. Il sito è costruito con Astro in architettura a isole, pagine statiche e leggerissime; lo stile con Tailwind, le animazioni con GSAP e DrawSVG, lo scorrimento con Lenis, tutto pubblicato su Cloudflare Pages. I contenuti vivono su Sanity, così Mary scrive e pubblica i suoi articoli in autonomia; il sito è bilingue, con l'inglese tradotto a mano.
La privacy è una scelta di partenza: font self-hosted senza il CDN di Google Fonts, statistiche senza cookie con Counterscale, anti-spam invisibile Turnstile, email via Resend, doppio consenso per i dati di salute e pagine legali complete. Per farsi trovare espone dati Schema.org, è su Google e Bing con IndexNow e un llms.txt per gli assistenti AI. Il risultato su Lighthouse: 100 in accessibilità, best practice e SEO, e 97 in performance.
Il logo tiene insieme voce e viaggio; la palette ne discende; la tipografia ordina; le superfici accolgono; il movimento racconta il percorso. Nessuna scelta è arbitraria: il nome scelto confrontando finalisti e rischi, la palette ricondotta ai due colori del logo, i testi riscritti sul registro reale della cliente. Oggi Metalogopedia è online su metalogopedia.it: non un catalogo di prestazioni, ma uno studio che, anche da schermo, prende per mano e accompagna.
Lingua
