Case study · Sito vetrina · AI e automazione
Nexiro
Chi vende automazione e intelligenza artificiale ha un problema di parole: tutti dicono le stesse. Il sito doveva far vedere il risultato prima della tecnologia, e restare nero, luminoso e calmo.
- Progetto
- Nexirobrand concept
- Settore
- AI e automazioneper freelance e PMI
- Tipo
- Sito vetrinauna pagina, in italiano
- Cosa abbiamo fatto
- Design, sviluppo, copydal template al prodotto
- Tecnologie
- Framereffetti nativi, video, ticker
Il punto di partenza
Vendere l'AI senza dire «AI» tre volte a riga
Un'agenzia che costruisce automazioni e agenti intelligenti per freelance e piccole imprese. Il pubblico non è tecnico: vuole sapere cosa cambia nella sua giornata, non quale modello gira dietro. E in un mercato dove ogni sito promette «rivoluzione», la calma è una scelta di posizionamento.
Il sito doveva quindi dire tre cose semplici, mostrare i risultati (risposte automatiche, contenuti, un collega digitale) e mettere le persone dietro le macchine. Su fondo nero, con una sola luce.
01
Il risultato prima della tecnologia
«Semplifica il lavoro. Amplifica il risultato.» Tre frasi, nessun termine tecnico, e la parola AI evidenziata una volta sola.
02
Riconoscersi negli strumenti
I loghi di Slack, WhatsApp, Notion, Gmail che scorrono: il visitatore vede quello che usa già e capisce dove si aggancia l'automazione.
03
Le persone dietro
«Dietro ogni automazione, ci siamo noi.» Il team con nome e ruolo, prima delle domande frequenti.
Cosa abbiamo costruito
Nero, una luce, e i risultati in fila
Una pagina sola: apertura, automazioni, contenuti generati, agenti, team, domande, chiamata.
01
Tre frasi e un'onda di luce
Tutto lo schermo è nero, tranne un'onda di luce che sale dal basso e la parola AI in un riquadro blu. Il titolo è una promessa in tre righe, sotto un solo tasto: «Lavoriamo insieme».
Niente immagini di robot, niente cervelli luminosi. La luce basta.
02
Le automazioni, con i loghi che scorrono
«Automatizziamo il tuo lavoro e i tuoi processi» e sotto un nastro di loghi: gli strumenti che il cliente usa già, con quello al centro illuminato. Poi tre schede: automazioni su misura, integrazione con i tuoi tool, risposte automatiche h24.
La scheda delle risposte ha un microfono e un'onda sonora: «riconosce anche la voce».
03
Shooting e video, senza shooting
Le immagini generate con l'AI disposte a semicerchio, come una ruota che gira. Sotto, un video a tutta larghezza con una vignetta scura ai bordi.
È il modo più diretto di vendere contenuti generati: mostrarli, non descriverli.
04
Il tuo prossimo collega è un agente
Gli agenti presentati come colleghi con un nome e un compito: Customer AI Agent, Content Creation Agent, AI Survey & Research Bot, Scheduler, Sales Assistant. Ogni scheda ha un'anteprima dell'interfaccia.
Un servizio con un nome si ricorda; una lista di funzionalità no.
05
Dietro ogni automazione, ci siamo noi
Un ventaglio di telefoni con le foto del team e le etichette dei ruoli, poi le persone con nome e funzione, e le domande frequenti. Chi compra automazione vuole sapere chi risponde quando qualcosa si rompe.
In chiusura, la stessa chiamata dell'apertura: «Pronto a far crescere il tuo business con l'AI?».
Da telefono il titolo va su quattro righe, l'onda resta, e il nastro dei loghi mette lo strumento evidenziato al centro dello schermo.
Come è fatto
Sotto il cofano: luce, vetro e un nastro
Sei effetti di Framer, uno alla volta. Niente WebGL: gradienti, sfocature e trasformazioni.
- Framer
- Gradienti radiali e conici
- backdrop-filter
- Ticker
- Video
- Appear
Semplifica il lavoro.
Amplifica il risultato.
Con l’AI
L'onda di luce in apertura
Cosa vedi. Un arco di luce viola che sale dal fondo nero e respira piano. La parola AI pulsa nel suo riquadro blu.
Come è fatto. Nessuna immagine animata: un cerchio enorme spostato sotto il bordo dello schermo, riempito con un gradiente radiale dal viola al trasparente, e un bordo superiore bianco con un'ombra luminosa. Il respiro è una scala dell'8% avanti e indietro.
12 bracci · rotate() · perspective
La ruota di immagini a semicerchio
Cosa vedi. Le immagini generate stanno su un semicerchio e girano insieme, come i raggi di una ruota, con una leggera prospettiva.
Come è fatto. Dodici bracci con la stessa origine, ognuno ruotato di 20 gradi in più del precedente; l'immagine in punta è ruotata all'indietro dello stesso angolo per restare dritta. Un contenitore con perspective dà la profondità; a girare è solo il genitore.
Ticker
mask-image · loop · fuoco al centro
Il nastro dei loghi con il fuoco al centro
Cosa vedi. I loghi degli strumenti scorrono senza fine, sfumano ai bordi, e quello che passa al centro si accende di viola.
Come è fatto. Un componente Ticker duplica la fila e la fa scorrere; una mask-image a gradiente sfuma i lati. Il fuoco è un alone fisso al centro sopra il nastro: sono i loghi a passargli sotto, non l'alone a inseguirli.
Email, form, messaggi vocali, WhatsApp: i flussi lavorano per te 24/7.
backdrop-filter: blur(14px) · bordo 1px al 20%
Le schede di vetro sopra la luce
Cosa vedi. Le schede sono trasparenti: la luce colorata sullo sfondo passa attraverso, sfocata. Al passaggio del mouse si alzano e il bordo superiore si illumina.
Come è fatto. Fondo bianco al 6% con backdrop-filter: blur e un bordo di un pixel al 20%. In pagina ce ne sono più di cento. L'evidenziazione in alto è una riga di un pixel con gradiente da trasparente a bianco a trasparente, che compare nello stato hover.
18 barre · ritardo negativo · alternate
Il microfono e l'onda sonora
Cosa vedi. Nella scheda delle risposte automatiche un microfono pulsa e un'onda sonora si muove, come se stesse ascoltando.
Come è fatto. Diciotto barre con la stessa animazione di altezza, in avanti e indietro, ognuna con un ritardo negativo diverso: partono già sfasate e non si allineano mai. Il microfono ha un'ombra che si espande e svanisce.
preload="none" · muted loop · vignetta
Lo showreel che non pesa
Cosa vedi. Un video a tutta larghezza, muto, in loop, con i bordi che sfumano nel nero. Parte quando lo vedi.
Come è fatto. Il video è dichiarato con preload="none": non scarica un byte finché non serve. La vignetta è un gradiente radiale sovrapposto, dal trasparente al nero. Il tasto play ha un anello che si allarga e sparisce.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per chi vende tecnologia
AI, automazione, software: se il tuo prodotto è difficile da spiegare, queste decisioni contano più del resto.
01
Vendi il risultato, non la tecnologia
«Semplifica il lavoro. Amplifica il risultato.» Il cliente compra la sua giornata migliore, non un modello.
02
Mostra gli strumenti che usa già
I loghi di Slack, WhatsApp e Notion valgono più di «ci integriamo con tutto». Chi si riconosce, resta.
03
Mostra l'output, non il processo
Le immagini generate a semicerchio dicono «shooting senza shooting» meglio di un paragrafo sull'AI generativa.
04
Dai un nome a ogni servizio
Customer AI Agent, Content Creation Agent: un servizio con un nome e un compito si ricorda e si chiede.
05
Metti le persone dopo le macchine
Chi compra automazione teme di restare solo con un bot. Il team con nome e ruolo, prima delle domande frequenti, risponde a quella paura.
Il prossimo potrebbe essere il tuo
Vendi qualcosa di difficile da spiegare?
Software, AI, consulenza, servizi tecnici: se il problema del tuo sito è far capire in cinque secondi cosa fai, ripartiamo da lì. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti