GMX StudioNº 012026Parigi / Lionetokens.css
Direzione artistica
Uno studio, un fondo, un accento. Quello che segue non è un moodboard: ogni colore, ogni carattere e ogni dimensione di questa pagina è letto dal file che leggono tutte le pagine del sito.
- 01Un solo fondo
- 02Palette
- 03Caratteri
- 04Dimensioni
- 05L’allungamento
- 06Effetti
- 07Rendering
- 08Superfici
- 09Movimento
- 10Decisioni permanenti
Un solo fondo
Ogni pagina poggia sullo stesso quasi-nero, qualunque tema preferisca il dispositivo del visitatore: una fotografia è l’unica cosa illuminata. Una pagina fa eccezione: il portfolio, disegnato come un foglio stampato, e il PDF che se ne ricava.
Palette
Un fondo, un pannello in rilievo, due neutri caldi per il testo e un oro. Niente è nero puro o bianco puro, così una fotografia non incontra mai un bordo più freddo di sé. Il rosso dice solo che qualcosa è andato storto. Sulla carta l’oro si scurisce: quello brillante lì non si legge.
--ground--panel--mute--dim--ink--gold--error--paper--paper-2--paper-ink--gold-deepCaratteri
Tre caratteri, ognuno con un compito. Druk, pesante e condensato, per tutto ciò che è un titolo; Inter per le frasi, le etichette e i pulsanti; G2 Hyper solo per i dettagli di una fotografia — fotocamera, obiettivo, pellicola, esposizione — e i chip che li filtrano.
GMX STUDIO
Aa Bb Cc — composto per essere letto.
Leica M6 · HP5+ · 1/125 f/8
Dimensioni
Sei dimensioni e nessun’altra. Tre per i titoli — la copertina, il titolo di una pagina, una sezione — che crescono con lo schermo; una per le frasi; una per le etichette; una per i dettagli di una fotografia.
--hero-fontArchivio--title-fontProgetti--section-fontLavori scelti--body-fontUna fotografia mantiene i propri colori.--label-fontEdizione 07 / 30 · 50 × 70 cm--detail-fontLeica M6 · Summicron 35mm f/2
L’allungamento
I titoli sono disegnati un terzo più alti del loro carattere. L’altezza è nei file dei font stessi: un titolo occupa il suo vero spazio sulla pagina e nulla viene deformato dopo. I grandi numeri degli album aggiungono un allungamento proprio.
--display-tall 1.34 · --number-tall 1.58 · tools/fonts/stretch_font.py
Effetti
Ciò che la home fa a una fotografia sotto il puntatore: la stessa immagine vista attraverso dodici strumenti. Sono disegnati qui dal vivo, su una fotografia vera, dal codice della home.
01Termico 1- 02Termico 2
- 03Termico 3
- 04Noir
- 05CRT
- 06Cianotipo
- 07Infrarosso
- 08Raggi X
- 09Glitch
- 10VHS
- 11Grana
- 12ASCII
Rendering
La pagina fotografia disegna il proprio sfondo dal vivo — pioggia, curve di livello, anelli, flusso, tratteggio, creste, strati, tracce — e le pagine contatti e 404 un cartellone nell’acqua ferma. Scegline uno, e una palette: ognuna prende il nome da ciò attraverso cui l’immagine sembra vista.
Superfici
Dove regge il fondo, e dove subentra la carta.
Movimento
Due velocità. Quella rapida per uno stato che cambia sul posto — un link che si accende, un pulsante sotto il puntatore; quella lenta per tutto ciò che si muove o appare — un menu che si apre, un’immagine che cambia. Tutte le animazioni si fermano se il visitatore ha chiesto meno movimento.
--dur-fast 200ms--dur-slow 400msDecisioni permanenti
- ILe fotografie mantengono i propri colori. Nessun filtro, nessun duotono, nessuna correzione colore dello studio.
- IILe etichette sono piccole maiuscole, disegnate alte. Servono a essere verificate, non lette.
- IIIUn solo accento. Un secondo colore svuoterebbe di senso il primo.
- IVNiente si muove da solo, tranne dove il movimento è il soggetto.
