Studio
Una pipeline RAW non distruttiva nel browser: la sfida era il colore.
- Anno
- 2026
- Progettazione
- 12 settimane
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Product design
- Design dell'interfaccia
- Sviluppo
- Elaborazione delle immagini
Prodotto sviluppato da Kayzen Web, servito su un indirizzo di anteprima Vercel in attesa del dominio definitivo.
- catena cromatica da un capo all'altro
- ICC
- accessibilità Lighthouse
- 97/100
- best practice LighthouseIl nostro punteggio più basso su questo criterio: l'elaborazione RAW nel browser si appoggia ad API che Lighthouse segnala; lo mostriamo così com'è invece di togliere la funzionalità, e la revisione è pianificata.
- 73/100
Cosa c'era da risolvere.
Il contesto
Studio è un'applicazione di sviluppo fotografico online: importazione RAW, correzioni non distruttive, gestione del colore ICC da un capo all'altro ed esportazione in più formati.
Il vincolo
I fotografi non cambiano strumento per comodità. Due punti bloccanti: la fedeltà cromatica (un file che esce con una dominante è inutilizzabile) e il carattere non distruttivo, cioè la possibilità di tornare su qualunque regolazione sei mesi dopo.
La risposta
Il colore è stato affrontato prima dell'interfaccia. Profilo d'ingresso della fotocamera, spazio di lavoro lineare, profilo d'uscita scelto all'esportazione: la catena è esplicita e mostrata all'utente. Le regolazioni sono salvate come un elenco di operazioni, mai applicate al file sorgente.
I punteggi rilevati alla consegna.
Punteggi Lighthouse del sito in produzione. Li pubblichiamo così come sono: quando uno è basso, la causa e il piano di correzione sono spiegati più sotto invece di essere taciuti.
Ogni scelta di design, e il suo perché.
Interfaccia scura neutra
Grigio rigorosamente neutro attorno all'immagine, senza alcuna dominante. Un'interfaccia colorata falsa la percezione del bilanciamento del bianco: è la prima regola dei software di fotoritocco, e prevale su qualsiasi considerazione estetica.
Istogramma sempre visibile
Fisso in cima al pannello delle regolazioni, con avviso di clipping. È lo strumento di misura del fotografo; nasconderlo dietro una scheda sarebbe come riporre la livella nella cassetta degli attrezzi.
Le scorciatoie da tastiera del mestiere
Le scorciatoie riprendono quelle dei software di riferimento. Imporre una nuova grammatica a un utente esperto significa chiedergli di disimparare: il costo del cambio supera il guadagno.
Palette del progetto
Grigio neutro 900
#18181B
Sfondo dell'area di lavoro
Grigio neutro 700
#3F3F46
Pannelli
Malva
#A78BFA
Accento, selezione
Rosso clipping
#EF4444
Avviso sulle alte luci
Sistema tipografico
Titoli
Inter 600
Testo corrente
Inter 400
Valori numerici a larghezza fissa: un cursore il cui valore cambia larghezza viene percepito come impreciso.
Cosa c'è sotto il cofano.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Decodifica RAW in WebAssembly
La decodifica dei formati proprietari (CR3, NEF, ARW) gira in WebAssembly in un worker. Il thread principale resta libero: i cursori rispondono durante la decodifica di un file da 60 megapixel.
Rendering su GPU con WebGL
Le correzioni sono applicate tramite shader sulla scheda grafica. Un passaggio su CPU avrebbe reso l'anteprima inutilizzabile a questa risoluzione.
Cronologia delle operazioni, non dei pixel
Ogni regolazione è una voce in una pila di operazioni serializzabile. Tornare indietro, applicare un trattamento a una serie, esportare un preset: tutto deriva da questa struttura.
Come il sito si fa trovare.
SEO di acquisizione, non di prodotto
L'applicazione stessa non è indicizzabile, e non deve esserlo. Il posizionamento riguarda le pagine di presentazione e i confronti, dove avviene la scoperta.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
97/100 nonostante un'interfaccia per esperti
Ogni cursore è un input nativo con etichetta, valore annunciato e passo da tastiera. Le interfacce di fotoritocco se ne dispensano quasi tutte; non c'era alcuna ragione tecnica per farlo.
Cosa è stato consegnato.
- Presentazione
- Applicazione di fotoritocco
- Formati e compatibilità
- Prezzi
Lo svolgimento del progetto.
Catena cromatica
Profili d'ingresso, spazio di lavoro, profili d'uscita.
Decodifica
WebAssembly, worker, anteprima rapida.
Rendering
Shader WebGL, istogramma, clipping.
Interfaccia
Pannelli, scorciatoie, cronologia.
Cosa ci chiedono spesso.
Altri lavori
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Sicurezza offensiva e SaaSSentinel by Kayzen
Vendere un prodotto di sicurezza agli ingegneri: ogni affermazione doveva essere dimostrabile.
Dati e servizio meteoMétéo Climat France
358 pagine indicizzabili, una mappa animata su 72 scadenze e nemmeno una riga di framework.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.