GMX StudioNº 012026Париж / Лионtokens.css
Арт-дирекция
Одна студия, один фон, один акцент. Дальше — не мудборд: каждый цвет, шрифт и размер на этой странице прочитан из того же файла, который читают все страницы сайта.
- 01Один фон
- 02Палитра
- 03Шрифты
- 04Размеры
- 05Вытягивание
- 06Эффекты
- 07Рендеры
- 08Поверхности
- 09Движение
- 10Неизменные решения
Один фон
Каждая страница стоит на одном и том же почти чёрном фоне, что бы ни предпочитал экран посетителя: фотография — единственное, что на нём освещено. Исключение одно — портфолио, нарисованное как печатный лист, и PDF, который оно сохраняет.
Палитра
Фон, приподнятая панель, два тёплых нейтральных тона для текста и один золотой. Ничего чисто чёрного или чисто белого, чтобы фотография никогда не встречала край холоднее себя. Красный говорит только о том, что что-то пошло не так. На бумаге золото темнеет: яркое там не читается.
--ground--panel--mute--dim--ink--gold--error--paper--paper-2--paper-ink--gold-deepШрифты
Три шрифта, у каждого одна задача. Тяжёлый узкий Druk — для всего, что является заголовком; Inter — для фраз, подписей и кнопок; G2 Hyper — только для данных снимка: камера, объектив, плёнка, экспозиция — и для фильтров-меток.
GMX STUDIO
Аа Бб Вв — набрано для чтения.
Leica M6 · HP5+ · 1/125 f/8
Размеры
Шесть размеров и никаких других. Три для заголовков — главный, заголовок страницы, раздел — растут вместе с экраном; один для фраз; один для подписей; один для данных снимка.
--hero-fontАрхив--title-fontПроекты--section-fontИзбранные работы--body-fontФотография сохраняет свои цвета.--label-fontЭкземпляр 07 / 30 · 50 × 70 см--detail-fontLeica M6 · Summicron 35mm f/2
Вытягивание
Заголовки нарисованы на треть выше своего шрифта. Высота заложена в самих файлах шрифтов: заголовок занимает на странице своё настоящее место, и ничего не растягивается задним числом. Большие номера альбомов добавляют собственное вытягивание.
--display-tall 1.34 · --number-tall 1.58 · tools/fonts/stretch_font.py
Эффекты
То, что главная страница делает со снимком под указателем: один и тот же кадр сквозь двенадцать приборов. Здесь они рисуются вживую, на настоящем снимке, тем же кодом, что и на главной.
01Тепловизор 1- 02Тепловизор 2
- 03Тепловизор 3
- 04Нуар
- 05CRT
- 06Чертёж
- 07Инфракрасный
- 08Рентген
- 09Глитч
- 10VHS
- 11Зерно
- 12ASCII
Рендеры
Страница фотографии рисует свой фон вживую — дождь, топография, кольца, поток, штриховка, хребты, пласты, следы, — а страницы контактов и 404 — щит, стоящий в неподвижной воде. Выберите один и палитру: каждая названа по тому, сквозь что видно изображение.
Поверхности
Где держится фон, а где его сменяет бумага.
Движение
Две скорости. Быстрая — для состояния, которое меняется на месте: загорающаяся ссылка, кнопка под указателем; медленная — для всего, что движется или появляется: открывающееся меню, сменяющийся снимок. Всё останавливается, если посетитель попросил меньше движения.
--dur-fast 200ms--dur-slow 400msНеизменные решения
- IФотографии сохраняют свои цвета. Никаких фильтров, дуотона, фирменной цветокоррекции.
- IIПодписи — маленькие прописные, вытянутые в высоту. Их проверяют, а не читают.
- IIIОдин акцент. Второй цвет лишил бы первый смысла.
- IVНичто не движется само по себе, кроме мест, где движение и есть предмет.
