Kern
Концепт-айдентика с одним ограничением: каждый элемент должен пережить размер фавиконки, прежде чем ему разрешат существовать в размере билборда.
Концепт — собственный проект студии
- Тип проекта
- Собственный концепт
- Ограничение
- Читаемость на 16px прежде всего
- Измерялось бы
- Контраст, покрытие активов, соблюдение гайдлайна
- Статус
- Концепт — внутреннее исследование
Задача
Айдентику до сих пор показывают в масштабе, в котором её почти никогда не увидят. Знак, отлично выглядящий на слайде, превращается в пятно во вкладке браузера — а чинит это потом тот, кто экспортирует фавиконку.
Здесь порядок обратный: самый маленький и враждебный контекст — это и есть бриф.
Решение
Знак спроектирован сначала на 16px и только потом масштабирован вверх. Варианты под размеры — часть системы, а не выведены постфактум: у каждого свой явный диапазон.
Цвет задан в OKLCH: поправка контраста — это изменение одного числа, а шаги светлоты ведут себя одинаково на всех оттенках. Каждый цвет текста проверен на каждой поверхности, где ему позволено быть.
Движение логотипа — часть айдентики: задано таймингами и кривыми и с самого начала имеет reduced-motion вариант.
Типографика
Оси веса и ширины переменного шрифта во всём диапазоне.
Малый размер как ограничение
Проектирование на 16px быстро отрезает варианты. Внутренние просветы обязаны оставаться открытыми, контраст штрихов — низким, и ни одна деталь, не переживающая штрих в 2px, не попадает в знак. Выжившее обычно сильнее на любом размере.
В системе три варианта с явными границами: монограмма до 24px, компактная связка до 96px, полная выше. Границы записаны — никому не придётся решать это под дедлайн.
Компоненты системы
- 01Знак с тремя вариантами и явными диапазонами
- 02Переменная типографика на осях веса и ширины
- 03Цвет в OKLCH с проверенными парами текст/фон
- 04Заданное движение логотипа с reduced-motion версией
- 05Набор активов: SVG, фавиконки, иконки, OG-шаблоны
- 06Гайдлайн вокруг краевых случаев, а не идеального
Полосатая система
Графический язык как маска, разделитель и фон.
Технологии
- Variable fonts
- OKLCH colour
- SVG optimisation
- Figma
Направления
Следующий проект
RelayСистема автоматизации