GMX StudioNº 012026París / Lyontokens.css
Dirección artística
Un estudio, un fondo, un acento. Lo que sigue no es un moodboard: cada color, cada tipografía y cada tamaño de esta página se lee del archivo que leen todas las páginas del sitio.
- 01Un solo fondo
- 02Paleta
- 03Tipografía
- 04Tamaños
- 05El estiramiento
- 06Efectos
- 07Renderizados
- 08Superficies
- 09Movimiento
- 10Decisiones permanentes
Un solo fondo
Todas las páginas descansan sobre el mismo casi negro, sea cual sea el tema que prefiera el dispositivo del visitante: una fotografía es lo único iluminado. Una página es la excepción: el portafolio, dibujado como una hoja impresa, y el PDF que guarda.
Paleta
Un fondo, un panel en relieve, dos neutros cálidos para el texto y un oro. Nada es negro puro ni blanco puro, para que una fotografía nunca encuentre un borde más frío que ella. El rojo solo dice que algo falló. Sobre el papel, el oro se oscurece: el brillante no se lee allí.
--ground--panel--mute--dim--ink--gold--error--paper--paper-2--paper-ink--gold-deepTipografía
Tres tipografías, cada una con una tarea. Druk, pesada y condensada, para todo lo que es un título; Inter para las frases, las etiquetas y los botones; G2 Hyper solo para los detalles de una fotografía — cámara, objetivo, película, exposición — y los chips que los filtran.
GMX STUDIO
Aa Bb Cc — compuesto para leerse.
Leica M6 · HP5+ · 1/125 f/8
Tamaños
Seis tamaños y ninguno más. Tres para los títulos — la portada, el título de una página, una sección — que crecen con la pantalla; uno para las frases; uno para las etiquetas; uno para los detalles de una fotografía.
--hero-fontArchivo--title-fontProyectos--section-fontObra seleccionada--body-fontUna fotografía conserva sus propios colores.--label-fontEdición 07 / 30 · 50 × 70 cm--detail-fontLeica M6 · Summicron 35mm f/2
El estiramiento
Los títulos están dibujados un tercio más altos que su tipografía. La altura está en los propios archivos de la fuente: un título ocupa su espacio real en la página y nada se deforma después. Los grandes números de álbum añaden su propio estiramiento.
--display-tall 1.34 · --number-tall 1.58 · tools/fonts/stretch_font.py
Efectos
Lo que la portada hace con una fotografía bajo el puntero: la misma imagen vista a través de doce instrumentos. Se dibujan aquí en directo, sobre una fotografía real, con el código de la portada.
01Térmico 1- 02Térmico 2
- 03Térmico 3
- 04Noir
- 05CRT
- 06Plano
- 07Infrarrojo
- 08Rayos X
- 09Glitch
- 10VHS
- 11Grano
- 12ASCII
Renderizados
La página de fotografía dibuja su fondo en directo — lluvia, curvas de nivel, anillos, flujo, sombreado, crestas, estratos, trazos — y las páginas de contacto y 404 una valla en agua quieta. Elige uno, y una paleta: cada una lleva el nombre de aquello a través de lo que parece verse la imagen.
Superficies
Dónde se mantiene el fondo y dónde toma el relevo el papel.
Movimiento
Dos velocidades. La rápida para un estado que cambia en su sitio — un enlace que se enciende, un botón bajo el puntero; la lenta para todo lo que se mueve o aparece — un menú que se abre, una imagen que cambia. Todas se detienen si el visitante ha pedido menos movimiento.
--dur-fast 200ms--dur-slow 400msDecisiones permanentes
- ILas fotografías conservan sus propios colores. Sin filtro, sin duotono, sin etalonaje de la casa.
- IILas etiquetas son pequeñas mayúsculas, dibujadas altas. Están para comprobarse, no para leerse.
- IIIUn solo acento. Un segundo color vaciaría de sentido al primero.
- IVNada se mueve por sí solo, salvo donde el movimiento es el tema.
