Ogni volta che vuoi ascoltare musica devi tirare fuori il telefono. Sblocchi, apri Spotify, cerchi la playlist — e nel frattempo arrivano le notifiche, i messaggi, il lavoro. La musica doveva essere una pausa. Il Bluetooth l'ha trasformata in un'altra scusa per guardare lo schermo.
KERN nasce da un'idea semplice: la musica dovrebbe vivere nello speaker, non nel telefono. Ho costruito il brand e la landing page partendo da quel principio — prima il posizionamento emotivo, poi le feature tecniche. Il risultato è una pagina che vende una filosofia prima di vendere un prodotto.
Lo schermo del telefono è luminoso, sempre acceso, invadente. Ho scelto il nero #0A0A0C come sfondo per comunicare l'opposto: presenza silenziosa, nessuna distrazione. Non è una scelta estetica — è una dichiarazione di posizionamento contro il digital overload.
Tutti i brand tech usano il blu freddo — Bluetooth, Spotify, Apple. Il coral è caldo, analogico, quasi fisico. Si oppone al linguaggio visivo del digitale e avvicina KERN al mondo del lifestyle e del design d'oggetto. Bang & Olufsen, non JBL.
Il serif in un prodotto tech è una scelta deliberata. Comunica premium, artigianalità, lifestyle — gli stessi valori di un brand di moda o di design italiano. Il sans-serif nel corpo garantisce leggibilità. Il contrasto tra i due crea gerarchia visiva senza bisogno di colore.
Nessun framework, nessun plugin, nessun build step. Il codice gira direttamente nel browser, si carica in meno di un secondo, non ha fragilità da aggiornamenti. È la stessa filosofia del prodotto: togliere ciò che non serve per far funzionare meglio ciò che resta.
La headline non vende le specifiche tecniche — vende la libertà. "La tua musica, dentro." non è una descrizione del prodotto, è il beneficio emotivo. Le feature (64GB, IP67, 24h) arrivano dopo, come conferma razionale di una scelta già emotivamente fatta.
L'utente capisce il prodotto e la promessa entro 3 secondi dall'atterraggio
La hero non mostra le specifiche — mostra il beneficio. "La tua musica, dentro." è posizionamento puro. Il speaker in secondo piano a destra lascia spazio al messaggio senza nasconderlo.
Ogni card ha una funzione narrativa precisa: problema, prova visiva, soluzione
La griglia a tre colonne nella sezione Design racconta la proposta di valore in modo modulare. Card testo + immagine prodotto + card testo: il centro è sempre la prova fisica, non la parola.
"Senza notifiche. Senza Bluetooth. Senza telefono." — il brief in un tag
Il tag coral sovrapposto all'immagine lifestyle sintetizza il posizionamento più velocemente di qualsiasi paragrafo. È pensato per essere letto in un secondo e ricordato per un giorno.
Tre sezioni diverse, tre schermi diversi — il layout regge su ogni dispositivo
Il CSS è scritto mobile-first con breakpoint min-width a 480px, 700px e 880px. Nessun adattamento a posteriori — la struttura parte dallo schermo più piccolo e si espande verso il desktop.
Il prodotto viene usato dove vive il target: a casa, senza fretta
I mockup lifestyle raccontano il target senza descriverlo. Donna al tavolo, caffè, ambiente domestico caldo — il coral dello schermo buca il contesto naturale senza stridere. È il risultato di un posizionamento coerente dall'identità all'immagine.
L'iPhone appoggiato sul MacBook racconta la continuità desktop-mobile
Il mockup non è in studio — è sul tavolo di lavoro. Questa scelta comunica autenticità e mostra come il sito risponde in modo coerente su entrambi i device, senza versioni semplificate o layout tagliati.
L'utente sta per premere "Acquista KERN" — la pagina l'ha già convinto prima
La sezione Buy non usa dark pattern né urgenza artificiale. Prezzo visibile, tre garanzie, un solo bottone. La conversione è il risultato naturale di un percorso narrativo costruito dall'alto — non di un trick alla fine.
GSAP ScrollTrigger attiva ogni reveal solo quando l'elemento entra nel viewport
Le animazioni non sono decorative — guidano l'attenzione. Parallax sull'hero, fade-up sulle sezioni, contatori animati sugli stat, Swiper infinito sul press strip. Tutto con GSAP, zero librerie aggiuntive.
Aprili con Chrome DevTools — Lighthouse · Network · Accessibility
Lavoriamo insieme
Prenota una call gratuita di 45 minuti. Ti faccio le domande giuste — poi ti dico onestamente se e come posso aiutarti.
Nessun form. Una conversazione.
Tutti i progetti