Matridage

Сайт проекта (Figma)

Суть и функциональная метафора продукта

Matridage — это концепт интеллектуального ИИ-агента для графических дизайнеров. В основу бренда и самого продукта заложен принцип классической матрёшки, однако он лишен стереотипной “сувенирной” эстетики. Я адаптировал эту метафору под высокотехнологичный сектор.

Моя задумка заключалась в том, чтобы показать многоуровневость нейросети: где малые внутренние “слои-матрёшки” — это утилитарные инструменты (подбор шрифта, генерация палитр), а большие внешние “обнимающие” слои масштабируют эти задачи, выстраивая вокруг них сложные дизайн-системы и комплексный UI-кит. Эта идея нашла отражение в главном слогане проекта: «Разбери. Настрой. Твори.»

Работа с визуальным стилем и цветом

Передо мной стояла задача объединить визуальные коды футуристичного ИИ-сервиса с этнической формой. Цветовое решение макетов работает на глубоких контрастах: теплые акцентные цвета (медно-золотой, насыщенный розовый и кибер-коралл) мягко светятся на плотном, строгом темно-коричневом фоне. Это придает странице премиальность и глубину.

Сами иллюстрации и 3D-графика выступают главными ай-стопперами: мы видим формы, силуэтно напоминающие матрёшек, но сотканные из цифровых узлов, микросхем, иконок интерфейсов и паттернов-смайликов. Таким образом дизайн сам отвечает на вопрос “Что такое кибер-матрёшка?”.

Типографика и управление вниманием

Особое внимание в проекте я уделил работе с модульной сеткой и типографической иерархией. Дизайн построен по классическому и безотказному правилу: крупный экспрессивный акцидентный шрифт работает в заголовках и огромном логотипе на главном экране (выдавая максимальный характер и дерзость бренда), в то время как основной наборный текстбран чистым, широким гротеском с прекрасной читаемостью.

Я отказался от сложных рамок и контейнеров для текстов: благодаря грамотным отступам и плотному контрасту с фоном текстовые блоки визуально самостоятельны, контенту комфортно “дышать” на экране. Пользователь без усилий сканирует Z-образный (зигзагообразный) маршрут взгляда: от мощного заголовка слева к иллюстрации справа — и так далее по странице.

Ритмика блоков и логика лендинга

Скроллинг страницы подобен постепенному раскрытию той самой матрёшки: шаг за шагом, от поверхностных функций до глубокого погружения в продукт:

1. Формулировка “Фишки”: на самом старте пользователю простым языком объясняют ядро концепции — почему именно матрешка и как работают нейро-слои.
2. Широкий акцент (Манифест): баннерный перебивочный блок с ярким паттерном “а теперь о главном” встряхивает визуальный ритм и фокусирует на предстоящем списке фич (AI изнутри, масштабирование задач, переход к автопилоту).
3. Комьюнити: карусель с плавающими аватарами снимает жесткую корпоративность, показывая живую среду создателей.
4. Финальный призыв: мягкий градиентный шейп и форма подвала призывают перейти от ознакомления к практике с мощным заголовком «Время создавать дизайн нового уровня».

Все компоненты интерфейса (кнопки с плавными обводками, абстрактные звезды-кляксы на фоне, стилистика кнопок и тегов) образуют единый визуальный язык. Ни одна деталь не выпадает из заданного тона: лендинг ведет пользователя ритмично, чередуя сплошной текст с сочными 3D-моделями и сохраняя общую монолитность презентации.