AZ(ZZ)

Lavori

Spine Atlas

Un referto di risonanza, in 3D.

Concept · Identità visiva · UI/UX · Sviluppo WebGL · Ricerca2026Sito ↗

Un referto di risonanza è fatto di parole che quasi nessuno sa leggere: «protrusione foraminale sinistra L4-L5, 4,5 mm». Spine Atlas le trasforma in geometria: sulla colonna in 3D compare il reperto con la radice nervosa che può toccare. Attorno all’app ho costruito un’identità con la stessa regola: un solo colore, e solo per il reperto.

Identità

Il logotipo su una riga
Il logotipo su una riga
Il segno: quattro vertebre, tre dischi
Il segno: quattro vertebre, tre dischi
L’icona dell’app e la favicon
L’icona dell’app e la favicon

Due facce di un cubo e le stesse girate di mezzo giro disegnano una S sulla griglia isometrica: quattro vertebre, e tra loro tre fessure che sono i dischi. Solo bianco e nero.

Tavole

Quattro vertebre, tre dischi: una S sulla griglia isometrica.
Quattro vertebre, tre dischi: una S sulla griglia isometrica.
La costruzione: fessura g = 1,8, quelle oblique aperte a 1,12 g perché sembrano più sottili; un raggio solo, scalato secondo l’angolo.
La costruzione: fessura g = 1,8, quelle oblique aperte a 1,12 g perché sembrano più sottili; un raggio solo, scalato secondo l’angolo.
Il sistema: logotipo su una riga e in colonna, segno, segno sul magenta, icone.
Il sistema: logotipo su una riga e in colonna, segno, segno sul magenta, icone.
Un colore, un significato: il magenta segna il reperto e la radice che può toccare.
Un colore, un significato: il magenta segna il reperto e la radice che può toccare.

Il lavoro

I reperti dell’esempio, visti da dietro: i dischi coinvolti e la radice che possono toccare si accendono in magenta. Le etichette L1-L5 seguono la camera.
I reperti dell’esempio, visti da dietro: i dischi coinvolti e la radice che possono toccare si accendono in magenta. Le etichette L1-L5 seguono la camera.

Movimento

Come è nato il segno: misura, punti, quadratini, un cubo, i dischi, le correzioni ottiche
Il costruttivo, quote in magenta (reel 9:16)
Nell’app, la sezione sul disco sale da L5-S1 a L1-L2
L’app: il modulo dei reperti e la colonna intera che ruota

Sistema

void#050506
bone#F2F1EC
signal#FF2D8A

Void, il fondo della scena; bone, l’inchiostro e la carta; signal, il reperto, usato una volta. I colori dei tratti C, T, L e S (#6FB6C8, #9D8FE0, #6FC296, #DC9F6E) servono solo a leggere i dati: nel brand non entrano.

Sets GroteskTitoli ed etichette dei livelli

Your MRI report, in 3D.

Di José Solé (Dogray Foundry), da Adobe Fonts. Il sito usa tre tagli ottici, uno per dimensione; questo è il taglio L.

ArchivoTesto e modulo

Livello, tipo, posizione, lato.

Space MonoLe sovrimpressioni da lastra

AX L4-L5 · FOV 9.1 CM

Orientamento, righello, campo visivo e curve: tutto calcolato dalla camera, niente dati finti.

Come è fatta

  • Vite e three.js, JavaScript senza framework; ossa e dischi da BodyParts3D (© DBCLS, CC BY-SA 2.1 JP), 1,1 MB compressi.
  • Dischi deformati vertice per vertice; radici e sacco durale disegnati in codice, uno schema dichiarato come tale.
  • Sezione assiale con piano di taglio e shader per le facce interne; sovrimpressioni da lastra calcolate dalla camera.
  • Tutto lo stato sta nel link: nessun server, nessun dato inviato. Inglese e italiano.
  • Il segno è generato in Python dalla geometria del modello; i film del logo sono fatti in HyperFrames.

Online su spineatlas.xyz. «Carica un esempio» riempie la mappa con tre reperti lombari.