GMX StudioNº 012026Paris / Lyontokens.css
Direction artistique
Un studio, un fond, un accent. Ce qui suit n’est pas une planche d’ambiance : chaque couleur, chaque caractère et chaque taille de cette page est lu dans le fichier que lisent toutes les pages du site.
- 01Un seul fond
- 02Palette
- 03Caractères
- 04Tailles
- 05L’étirement
- 06Effets
- 07Rendus
- 08Surfaces
- 09Mouvement
- 10Décisions permanentes
Un seul fond
Chaque page repose sur le même presque-noir, quelles que soient les préférences de l’écran du visiteur : une photographie y est la seule chose éclairée. Une page fait exception — le portfolio, dessiné comme une feuille imprimée, et le PDF qu’il enregistre.
Palette
Un fond, un panneau en relief, deux neutres chauds pour le texte et un or. Rien n’est noir pur ni blanc pur, pour qu’une photographie ne rencontre jamais un bord plus froid qu’elle. Le rouge ne dit que ce qui a échoué. Sur le papier, l’or s’assombrit : le vif ne s’y lit pas.
--ground--panel--mute--dim--ink--gold--error--paper--paper-2--paper-ink--gold-deepCaractères
Trois caractères, chacun avec une tâche. Druk, gras et condensé, pour tout ce qui est un titre ; Inter pour les phrases, les étiquettes et les boutons ; G2 Hyper seulement pour les détails d’une photographie — appareil, objectif, film, exposition — et les puces qui les filtrent.
GMX STUDIO
Aa Bb Cc — composé pour être lu.
Leica M6 · HP5+ · 1/125 f/8
Tailles
Six tailles et aucune autre. Trois pour les titres — le titre d’accueil, le titre d’une page, une section — qui grandissent avec l’écran ; une pour les phrases ; une pour les étiquettes ; une pour les détails d’une photographie.
--hero-fontArchives--title-fontProjets--section-fontTravaux choisis--body-fontUne photographie garde ses propres couleurs.--label-fontÉdition 07 / 30 · 50 × 70 cm--detail-fontLeica M6 · Summicron 35mm f/2
L’étirement
Les titres sont dessinés un tiers plus hauts que leur caractère. La hauteur est dans les fichiers de police eux-mêmes : un titre occupe sa vraie place sur la page et rien n’est déformé après coup. Les grands numéros d’album ajoutent leur propre étirement.
--display-tall 1.34 · --number-tall 1.58 · tools/fonts/stretch_font.py
Effets
Ce que la page d’accueil fait à une photographie sous le pointeur : la même image vue à travers douze instruments. Ils sont dessinés ici en direct, sur une vraie photographie, par le code de la page d’accueil.
01Thermique 1- 02Thermique 2
- 03Thermique 3
- 04Noir
- 05CRT
- 06Plan
- 07Infrarouge
- 08Rayons X
- 09Glitch
- 10VHS
- 11Grain
- 12ASCII
Rendus
La page photographie dessine son fond en direct — pluie, courbes de niveau, anneaux, flux, hachures, crêtes, strates, traces — et les pages contact et 404 un panneau debout dans l’eau calme. Choisissez-en un, et une palette : chacune porte le nom de ce à travers quoi l’image semble vue.
Surfaces
Là où le fond tient, et là où le papier prend le relais.
Mouvement
Deux vitesses. La rapide pour un état qui change sur place — un lien qui s’allume, un bouton sous le pointeur ; la lente pour tout ce qui bouge ou apparaît — un menu qui s’ouvre, une image qui change. Toutes s’arrêtent si le visiteur a demandé moins de mouvement.
--dur-fast 200ms--dur-slow 400msDécisions permanentes
- ILes photographies gardent leurs couleurs. Aucun filtre, aucun duotone, aucun étalonnage maison.
- IILes étiquettes sont de petites capitales, dessinées hautes. Elles sont là pour être vérifiées, pas lues.
- IIIUn seul accent. Une deuxième couleur viderait la première de son sens.
- IVRien ne bouge de soi-même, sauf là où le mouvement est le sujet.
