Introduzione
Quando è iniziata la collaborazione, il brand pubblico non era all'altezza del prodotto: grafiche generiche, una presenza social messa insieme in fretta, nessun segnale chiaro della proposta AI × web3 rivolta agli sviluppatori né della narrativa sulla proprietà dei modelli. Tre rischi concreti: scarsa differenziazione in un mercato AI affollato, credibilità in calo con gli investitori, produzione di materiale comunicativo lenta e incoerente. Serviva un linguaggio visivo coeso e sistematico, capace di scalare su social, sito e sul futuro marketplace AI.
Problema
Quando è iniziata la collaborazione, il brand pubblico non era all'altezza del prodotto: grafiche generiche, una presenza social messa insieme in fretta, nessun segnale chiaro della proposta AI × web3 rivolta agli sviluppatori né della narrativa sulla proprietà dei modelli. Tre rischi concreti: scarsa differenziazione in un mercato AI affollato, credibilità in calo con gli investitori, produzione di materiale comunicativo lenta e incoerente. Serviva un linguaggio visivo coeso e sistematico, capace di scalare su social, sito e sul futuro marketplace AI.
Obiettivo
Trasformare il brand pubblico di Glades.ai in un segnale di credibilità e una leva di crescita. Distintivo. All'altezza degli investitori. Leggibile a colpo d'occhio come AI × web3 per sviluppatori. Xervum ha costruito un sistema visivo scalabile (tipografia, colore, iconografia) per velocizzare la produzione su presentazioni, social e sito, ponendo le basi per il marketplace AI e il play-to-train rivolto ai gamer.
Sfide
Dieci giorni prima dell'inizio ufficiale è arrivata la richiesta di una presentazione per investitori. Scadenza: quattro giorni. Esplorazione visiva compressa al minimo, direzione grafica fissata rapidamente per evitare rifacimenti.
Il logo usava un motivo foglia-circuito, molto dettagliato e comune nel settore. Non era possibile modificarne la forma. La sfida: alzare la qualità visiva dell'intero sistema mantenendo il simbolo intatto.
Creare una versione chiara che sembrasse comunque futuristica non era banale. Le interfacce fantascientifiche sono quasi sempre scure. Su sfondi chiari il rischio era scivolare in un'estetica sterile, da tecnologia sanitaria.
Timeline
17 mar — Richiesta urgente di una presentazione per investitori (scadenza: 21 mar).
18 mar — Ricevuti i testi in bozza per le slide.
19 mar — Consegnati 3 concept visivi. Due giri di revisione rapidi. Direzione visiva fissata entro fine giornata.
21 mar — Presentazione investitori consegnata (18 slide).
27 mar — Avvio ufficiale del progetto.
3 apr — Grafiche social consegnate.
21 apr — Restyling sito pronto per la consegna.
Stile visivo e presentazione investitori
Da zero a pronti per gli investitori in 4 giorni
introduzione
Con l'arrivo di una presentazione per investitori da finire prima della data programmata per l'avvio del progetto, Xervum ha compresso l'esplorazione in uno sprint per fissare la direzione visiva prima di toccare le slide. Il brief: estetica hi-tech e futuristica, palette che ricorda al cyberpunk, accenti tipografici ispirati al codice (leggibili), riferimenti AI/web3 con griglie, sovrapposizioni di dati e iconografia tecnica.
In meno di 48 ore la direzione era definita: texture metallica sottile per dare profondità, strutture wireframe, bagliori morbidi e il simbolo della foglia usato come motivo ambientale discreto. Direzione fissata, applicata a una presentazione da 18 slide.
La forma del simbolo è rimasta intatta. Xervum l'ha ruotato di 25°, aggiornato la palette e costruito un logotipo personalizzato per dare un carattere più adatto al pubblico gamer.
Tre esplorazioni, due giri di revisione rapidissimi. Direzione visiva fissata in meno di 48 ore.
Il sistema approvato in azione: palette cyber, micro-texture metallica e il simbolo della foglia come sovrapposizione discreta per tenere tutto coerente.
Iconografia outline con neon sottile, connettori a circuito e titoli ispirati al codice, calibrati per il contrasto su fondo scuro.
Un semplice grafico diventa un elemento visivo di impatto grazie a pannelli metallici ed effetti di luce sottili.
Contenuti social
Trasformare Contenuti Social Frammentati in un Sistema Visivo Riutilizzabile
Introduzione
Xervum ha consegnato un kit social leggero, pensato per pubblicare in modo coerente e veloce. Copertine YouTube e X, un sistema di miniature leggibile anche a dimensioni ridotte, template Canva modulari che il team può riutilizzare in autonomia.
I grafici generati dalla piattaforma sono stati standardizzati con un set di colori semantici (chart-group-0…10) mappati su una palette base. Le stesse regole valgono per grafici a cluster, istogrammi e linee di prezzo. Consegnato anche il file CSS con tutte le variabili colore.
Template Canva con post di esempio e libreria completa di risorse caricata, per comporre contenuti coerenti con il brand in poco tempo.
Copertina YouTube e template miniatura video coordinato, per una presenza canale uniforme.
Copertina profilo X/Twitter allineata alla nuova identità visiva.
I grafici di partenza: contrasto troppo basso contrasto e look incoerente con il brand.
Nuovo grafico a cluster fino a 10 gruppi, colorati tramite variabili semantiche (group-0 … group-9) richiamate in sequenza dalla palette base.
File CSS consegnato con tutte le variabili colore, pronto per l'implementazione diretta da parte del team di sviluppo.
Istogrammi e grafici di andamento aggiornati, con gerarchia visiva più chiara su sfondi scuri.
Palette cromatica verificata e corretta attraverso simulazioni per daltonismo, per rendere i grafici leggibili anche a chi ha difficoltà nella percezione dei colori.
Restyling sito
Da un template generico ad un identità futuristica
introduzione
La struttura del sito era già solida. Il lavoro si è concentrato sul restyling visivo. La versione scura è venuta naturale: costruita sugli stili già definiti per la presentazione e i materiali social.
La sfida vera è stata la versione chiara perché le interfacce fantascientifiche sono quasi sempre scure e, su sfondi chiari, il rischio concreto è di finire in un'estetica da clinica, da tecnologia sanitaria. Xervum ha lavorato con texture metalliche, contrasti decisi e una palette calibrata per tenere il design curato e proiettato in avanti. Senza passare per l'ospedale.
Il risultato è un sito visivamente forte, all'altezza dell'ambizione del brand. Consegnato come prototipo cliccabile a 1280 px, con un design system di partenza: componenti principali e variabili pronte a fare da base per il prodotto.
Registrazione della homepage che mostra il passaggio tra versione chiara e scura. I banner sovrapposti usano un effetto vetro sottile sullo sfondo fisso (griglia wireframe e simbolo della foglia) per un risultato stratificato e futuristico.
Un restyling visivo mirato può cambiare del tutto la percezione di un brand, trasformando un sito generico in un'identità riconoscibile.
L'intero sito è responsive. La pagina della documentazione API è un buon esempio di come i layout si adattano ai diversi formati di schermo.
I componenti UI sono progettati come pezzi modulari: tabelle, schede e campi di input riutilizzabili direttamente nel futuro marketplace AI.
Versione chiara e scura adattano il brand alle preferenze degli utenti, mantenendo coerenza visiva.
Le foto del team sono state ritoccate con elementi del brand. Piccoli dettagli che aggiungono cura e trasmettono qualità.
Quella che poteva essere una pagina di solo testo diventa una risorsa, con identità visiva forte. La prova che con un layout ragionato e elementi di brand coerenti, anche un contenuto semplice può comunicare solidità.
Le immagini generate con AI rafforzano il focus gamer della pagina Play to Train, con colori calibrati sul linguaggio visivo del brand.
Nella versione chiara le ombre leggere sostituiscono i bagliori della versione scura, mantenendo profondità e cura nei dettagli.
La versione chiara mantiene il design futuristico senza scivolare in un'estetica sterile e clinica.
Variabili colore semantiche mappate su una palette base condivisa rendono il passaggio tra temi semplice e diretto.
Un file Figma ben strutturato, con pagine, componenti e guida di stile organizzati in modo ordinato, rende la consegna più fluida e gli aggiornamenti futuri molto più facili da scalare.
Breakpoint e contenitori di sezione definiti per ogni dimensione di schermo danno agli sviluppatori un riferimento chiaro per adattare l'interfaccia ai vari schermi.
Pulsanti e schede nel playground componenti di Figma. I pulsanti supportano dimensioni, stati e icone variabili. Le schede hanno decorazioni attivabili (se non vedi l'animazione, alza la luminosità o spostati in un ambiente più buio: l'elemento decorativo è volutamente sottile). Il design system è costruito per il prodotto, non solo per il sito.
I feedback della community su X hanno confermato l'impatto del restyling: un'identità più pulita e curata, che ha generato interesse immediato e dato slancio al lancio.
