Lavori Chi sono Competenze Blog
Instagram LinkedIn Telegram
// Mestre, Venezia - Italia
Elba 2026 - App di viaggio per l'isola d'Elba

App Mobile · Viaggio · Design + Codice

Elba 2026

Ruolo
Product Designer & Sviluppatore
Anno
2026
Tipo
App Mobile · Personale
Ruolo
Product Designer & Sviluppatore
Anno
2026
Categoria
App Mobile Viaggio Personale
Strumenti & Know how
Design System HTML / CSS / JS Supabase Open-Meteo Leaflet
In numeri
8 giorni 39 spiagge 12 tappe 0 build step

Obiettivo

All'Elba è il vento a decidere la giornata. Una baia perfetta il lunedì il martedì è impraticabile: onde, acqua torbida sotto riva, alghe spinte a terra. E quella sulla costa opposta, nello stesso momento, è uno specchio. Avevamo otto giorni, un appartamento a Capoliveri, un'auto e un programma, e il programma doveva reggere l'impatto col meteo.

Elba 2026 è l'app che ho progettato e sviluppato per quella settimana. Tiene tutto il programma, legge le previsioni ogni mattina e dice, baia per baia, se oggi è il giorno giusto. E se non lo è, dove andare al posto suo.

L'ho portata avanti da solo dall'inizio alla fine: ricerca sul campo e dataset, design system, interfaccia, codice, hosting. Un prodotto vero con una base utenti piccolissima e molto esigente: noi due, in spiaggia, in pieno sole, con una tacca di campo.

La sfida

Le app di viaggio pianificano. Nessuna decide. Il vuoto era concreto:

  • Il problema non è il piano, è la mattina - l'itinerario era già deciso in un foglio di calcolo. Quello che mancava era il giudizio di due minuti a colazione: il vento di oggi rovina la spiaggia di oggi?
  • I dati che servono non stanno su una mappa - come è esposta la baia, da quali settori il vento arriva frontale, quando se ne va il sole, dove si parcheggia e quanto costa. Nessuna app di mappe sa niente di tutto questo.
  • Doveva funzionare senza campo - sull'isola la copertura va e viene. Un'app che ha bisogno della rete per mostrarti il tuo stesso programma è inutile proprio nel momento in cui la apri.
  • Due telefoni, un programma - chi spunta una tappa o cambia una spiaggia deve aggiornare il piano per entrambi, senza account e senza che un telefono sovrascriva l'altro.

Il problema di design quindi non era "mostrare una previsione". Era trasformare una previsione in una decisione, su un telefono, con una mano sola, nella luce di agosto.

Design System

Token: un sistema di variabili a due livelli, da primitive a semantiche, accordato per l'uso all'aperto: superfici sabbia in chiaro, inchiostro in scuro, lime come accento, colori semantici per i giudizi. Ogni colore è una variabile CSS: nei componenti non c'è un solo esadecimale scritto a mano, e tutta l'app cambia tema sostituendo lo strato dei token.

Tipografia: Inter per l'interfaccia, JetBrains Mono per i dati. Il monospaziato non è decorativo: serve ad allineare in colonna velocità del vento, minuti e prezzi, invece di farli ballare da una riga all'altra.

Regole: scala di spaziature a multipli di 4, aree toccabili da 44px, contrasto AA e un tema chiaro tarato sull'unica prova che contava davvero: leggere lo schermo a mezzogiorno in spiaggia.

Il motore del vento

Una sola chiamata a Open-Meteo per sessione, su un punto al centro dell'isola, più due punti di mare a nord e a sud per l'altezza delle onde. Non una chiamata per spiaggia: su un'isola di 27 km il vento è regionale, e dieci richieste renderebbero l'app più lenta proprio dove il campo è peggiore.

Contano solo le ore dalle 9 alle 13, la finestra in cui si decide davvero dove andare. La velocità è una media semplice; la direzione è una media vettoriale. Mediare 350° e 10° in aritmetica restituisce sud, l'esatto contrario della realtà: i valori orari vengono sommati come seni e coseni e riconvertiti in un angolo.

Il giudizio incrocia il settore del vento con l'esposizione della baia e ne escono quattro stati: consigliata, da valutare, sconsigliata, mare calmo. Ogni giudizio porta con sé le parole oltre al colore, perché una pill che si capisce solo distinguendo il verde dall'ambra è una pill che, sotto il sole, non funziona.

Prima offline, condivisa per scelta

Il telefono è la fonte di verità. Spunte, note, sostituzioni e prezzi corretti si scrivono prima in locale, subito, senza rete. Le previsioni restano in cache con un orario: se la richiesta fallisce l'app mostra l'ultima lettura e lo dichiara, e se non c'è proprio niente il programma funziona lo stesso, si zittiscono solo le pill del vento.

La sincronizzazione sta sopra, non sotto. Una tabella Supabase tiene allineati i due telefoni in tempo reale, con una riga per ogni voce modificata invece di un documento unico condiviso: due persone che toccano cose diverse non si sovrascrivono mai. Le modifiche fatte offline si accodano e partono quando torna il campo.

Nessun build step. Niente npm, niente bundler, niente framework: quattro file piatti e una favicon, caricati via FTP. I file che carichi sono i file che girano, ed è anche il motivo per cui si può sistemare dal telefono, in vacanza, in cinque minuti.

Risultato

Un'app mobile finita, che è andata in vacanza con noi: 39 spiagge e 2 esperienze studiate e codificate, con esposizione, venti da evitare, fascia di sole, fondo, parcheggio, costo e servizi; otto giorni, dodici tappe, tredici serate, la mappa dell'isola, vento e mare in tempo reale, tema chiaro e scuro e una modalità offline completa.

La parte interessante non era la previsione. Era progettare un giudizio: prendere una cosa che un elbano legge nel cielo in due secondi e trasformarla in una riga sullo schermo di cui un visitatore si possa fidare. Design che risponde alla domanda che ti stavi facendo davvero.

Il programma

Otto giorni in una striscia scorrevole, una scheda per tappa. Ogni scheda mette davanti il posto, poi le quattro cose che decidono la mattina: il giudizio sul vento, lo stato del mare, la fascia di sole e il costo del parcheggio. Tutto il resto è a un tocco di distanza.

Elba 2026 - Schede del giorno e selettore degli otto giorni

Il giudizio sul vento

Una bussola e una frase in cima: da dove arriva il vento, quanto forte, mediato sulle ore che contano. Sotto, la stessa lettura applicata alla baia verso cui stai per partire: quali venti le piacciono, quali la prendono in faccia e come cambia la risposta oggi.

Elba 2026 - Barra del vento e dati di esposizione di una baia

Il cambio in due tocchi

Quando il piano non regge, un pannello dal basso ordina tutte le spiagge dell'isola per giudizio del giorno e poi per distanza, con l'originale e i suoi piani B fissi in cima. Restano selezionabili anche le spiagge scartate mesi prima: col vento sbagliato, una bocciata può diventare la scelta migliore della giornata.

Elba 2026 - Pannello per cambiare la spiaggia del giorno

Ogni posto, raccontato bene

Una pagina intera per tappa: una foto, la storia del posto, la griglia dei dati (fondo, esposizione, sole, arrivo entro, parcheggio, servizi), un prezzo che si corregge sul posto quando la realtà non è d'accordo col piano, e il percorso che si apre dritto nelle mappe. Le serate hanno lo stesso trattamento delle spiagge.

Elba 2026 - Pagina di dettaglio di una spiaggia e di una serata

Tutta l'isola

Tutte le tappe della settimana su una mappa sola: spiagge, esperienze, serate, l'appartamento e il traghetto, così la forma del programma si legge a colpo d'occhio. Accanto, le ventinove spiagge che non sono mai entrate in programma, ognuna col suo giudizio, pronte per il giorno in cui cambia tutto.

Elba 2026 - Mappa dell'isola con le tappe del programma

Tutta la settimana

La seconda vista: gli otto giorni in un elenco unico, vento e mare su ogni riga, le spunte che si portano dietro. È la sintesi che dava il foglio di calcolo, senza lo scorrimento laterale che rende un foglio di calcolo inutilizzabile su un telefono.

Elba 2026 - Vista elenco con tutti gli otto giorni

Chiaro, scuro e sole diretto

Un sistema solo, due temi, guidati interamente dai token. Il chiaro è quello che si usa davvero, è il tema pensato per uno schermo a mezzogiorno; lo scuro è quello su cui l'app passa in terrazzo dopo cena. Nessuno dei due è un ripensamento: sono stati provati entrambi sulla superficie che conta, un telefono a braccio teso.

Elba 2026 - Tema chiaro e tema scuro affiancati

Tutta l'app

Schede, elenco, mappa, pagine di dettaglio, pannello di cambio e archivio delle spiagge fuori programma: un'app piccola e coerente, che fa una cosa sola e la fa dove serve, cioè fuori, con la sabbia sullo schermo.

Elba 2026 - Panoramica delle schermate dell'app

Ti piace questo progetto? Lavoriamo insieme.

Scrivimi →