Parser.dev

Una landing per developer tool: copy, motion, performance — tutto fatto a mano.

LandingMotionCopy
Cliente
Parser.dev
Ruolo
Designer · FE Dev · Copy
Durata
4 settimane
Team
1 (solo me)
Anno
2024
+47%Sign-ups beta
100Lighthouse Perf
0kbJS sopra la fold
12sAvg. time on page

Un tool per sviluppatori che odiavano le landing generiche.

Parser.dev è uno strumento di analisi e trasformazione dati per sviluppatori — JSON, CSV, YAML, tutto in un tab. Il fondatore aveva un MVP funzionante e zero iscrizioni beta. Il problema era la comunicazione.

Ho ricevuto: un Figma di massima, un documento di copy grezzo, un brief con una sola regola — niente template, niente stock, niente builder. Tutto scritto a mano.

Tecnico senza essere freddo. Veloce senza essere vuoto.

#01Scrivere per sviluppatori

I developer leggono il copy in 3 secondi e lo smontano subito se è marketing vuoto. Ogni frase doveva essere precisa e verificabile.

#02Zero JS sopra la fold

Lighthouse 100 era un requisito, non un obiettivo. Gli sviluppatori controllano le performance prima di iscriversi a qualsiasi tool.

#03Motion senza framework

Le animazioni volute erano elaborate. Risolto con CSS puro e IntersectionObserver: nessun dependency aggiunto.

Copy prima, layout dopo.

Ho scritto il copy prima di aprire Figma. Tre versioni dell'headline, testate su cinque sviluppatori con un Google Form. La versione vincente era la più tecnica — controintuitiva, ma coerente con il pubblico.

Il layout è una singola colonna con contrasto tipografico estremo. I code snippet nella hero sono funzionanti e copiabili. L'unica animazione sopra la fold è un cursore lampeggiante — CSS puro, 0kb.

Ho smesso di presentare il tool scusandomi per come si presentava. Ora mando direttamente il link.

— MARCO VILLA, FOUNDER PARSER.DEV

+47% sign-ups. Lighthouse 100.

Nei 30 giorni dalla pubblicazione, i sign-up alla beta sono cresciuti del 47% rispetto alle precedenti campagne. L'avg. time on page era 12 secondi.

Lighthouse Performance: 100/100. Zero dipendenze JavaScript sopra la fold.

[Deliverable]
  • Copy completo (headline, sottotitolo, feature list, CTA)
  • Landing page HTML/CSS vanilla
  • Animazioni CSS custom
  • Code demo interattive
  • OG image + meta SEO
▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚
GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?