Основной фон и тёмная печать. Связывает коллажи в единую композицию.
Концепт-кейс / 2026
ГВОЗДИ В РОЗЫСКЕ.
САЙТ КАК
МУЗЫКАЛЬНЫЙ ЗИН.
Крупная типографика, рваная бумага и следы ксероксной печати задают характер сайта. Музыка, концертный архив и жизнь группы складываются в цифровой зин — с настоящими обложками, коллажами и собственным ритмом движения.
Инициативный концепт для реальной группы. Проект создан независимо, без заказа со стороны музыкантов, и не является официальным сайтом.
Мокап на основе скриншотов реализованного сайта. Десктопная и мобильная версии.
Собрать группу в одной точке
Задача концепта — объединить музыку, концертные материалы и сообщество в одном пространстве. С первого экрана можно перейти к прослушиванию, дальше — познакомиться с релизами, посмотреть концертный архив и найти канал группы или контакт для сотрудничества.
Основой стали материалы из открытых официальных источников: публикации группы, страницы релизов и музыкальный каталог. Они определили содержание сайта. Интервью со слушателями и пользовательские тестирования в рамках проекта не проводились.
От эскиза к реализации
Выбранное направление началось с AI-эскиза: он задал контраст крупной типографики, угольного фона и бумажного коллажа. В реализации композиция была адаптирована под реальные релизы, уточнены фактуры и взаимодействия.
Самодельный зин как основа
Сайт напоминает независимое музыкальное издание: плотный набор, вырезки, грубая печать и страницы, собранные вручную. Эта эстетика проходит через всю композицию — от первого экрана до контактов.
Коллаж из гвоздей и виниловой пластинки связывает название группы с музыкальной темой. Ксероксные потёртости добавляют поверхности неоднородность, а растровые маски создают волокнистые, неровные края бумаги. Кусочки малярного скотча под углом 45° закрепляют фотографии и углы кнопок, поддерживая ощущение ручной сборки.
При всей фактурности интерфейс сохраняет ясную структуру: крупные заголовки отмечают разделы, обложки выделяют релизы, основные действия остаются заметными.
Уголь, оранжевый, бумага
Палитра строится на трёх цветах. Тёмная основа объединяет страницу, светлые поверхности создают паузы между разделами, а оранжевый выделяет действия и графические акценты.
Главные действия, бегущая строка и графические акценты.
Светлый текст и бумажные разделы. Чередование страниц цифрового зина.
Обложки сохраняют оригинальные цвета: палитра сайта служит им окружением.
Типографика с контрастом масштаба
ГРОМЧЕ.
БЛИЖЕ.
ЖИВЬЁМ.
БЛИЖЕ.
ЖИВЬЁМ.
Узкий, плотный Oswald задаёт афишный характер. Крупный набор делает название группы самостоятельным элементом композиции и обозначает переходы между разделами.
Мы всегда
где-то рядом.
где-то рядом.
Golos Text используется для описаний, навигации и кнопок. Его спокойный рисунок поддерживает чтение рядом с выразительными заголовками и насыщенной фактурой.
Основные действия — Bold 700Настоящая музыка в центре
В разделе музыки представлены EP «Содержит системные яды» и синглы «Большое ничего» и «Хуковый контент». Настоящие обложки сохранены без перекрашивания, а ссылки ведут на страницы релизов, где слушатель может выбрать музыкальную площадку.
Концертный раздел построен вокруг архивной фотографии из Money Honey. Снимок показан в чёрно-белой обработке со ссылкой на источник. За новыми анонсами сайт направляет в официальный Telegram группы.
Коллаж с гвоздями и пластинкой, бумажные фактуры, скотч и варианты знака созданы с помощью AI для этого концепта. Обложки и архивная фотография взяты из официальных источников.
Один характер на разных экранах
На широком экране название и коллаж собираются в разворот зина, а музыка — в редакционную пару текста и обложки. На телефоне контент выстраивается последовательно: название, действия, графика, релизы. Навигация сворачивается в меню; все ключевые ссылки сохраняются.
Гвозди, пластинка, бумага, скотч и гранжевые маски сгенерированы для концепта. Логотип ниже — отдельный поисковый вариант. Обложки не перекрашены, архивная фотография показана в чёрно-белой обработке с прямой ссылкой на источник.
Вариант айдентики / на рассмотрение
ГВР. ТРИ БУКВЫ, ТРИ ГВОЗДЯ.
Размер в шапке сайта.
Новый AI-концепт, не официальный знак группы.
Узкие массивные буквы и три гвоздя продолжают язык коллажа. Потёртая печать связывает знак с ксероксной фактурой сайта, а оранжевый мазок сохраняет цветовой акцент. Это растровая поисковая версия: после выбора направления нужны векторизация, оптическая доводка и отдельный упрощённый знак для совсем малых размеров.
Ещё два направления / поиск
ОДНА ГРУППА. РАЗНЫЙ ПОЧЕРК.
Текущий знак остаётся в шапке. Эти два варианта показывают другой характер: полный печатный блок и компактную монограмму. Оба — сгенерированные поисковые растры для выбора направления.
02 / НАЗВАНИЕ-ШТАМП
Полное имя группы.
Для афиши и мерча.
Две плотные строки читаются как отпечаток самодельного трафарета. Один длинный гвоздь собирает название в цельный блок. Этот вариант лучше раскрывается на крупном носителе.
03 / ГВОЗДЬ-МОНОГРАММА
Компактный знак.
Для аватара и стикера.
Связанные буквы, рубленые срезы и один согнутый гвоздь дают более жёсткую эмблему. Квадратная композиция подходит для аватара; для маленьких размеров нужна отдельная упрощённая версия.
Ксерокс оживает
Движение продолжает идею печатного зина. При загрузке заголовок и коллаж проявляются короткими дискретными кадрами, словно отпечаток постепенно набирает краску. Бумажные разделы открываются при прокрутке, а архивная фотография появляется с тем же эффектом печати.
Короткие повторные «перепечатки» добавляют несовмещение и пропуски тонера. Бегущая строка на оранжевой полосе задаёт непрерывный ритм между разделами. Кнопки, подписи и навигация остаются неподвижными.
Если в системе включено уменьшение движения, декоративные анимации отключаются: контент виден сразу, бегущая строка становится статичной.
Посмотреть анимацию на сайте ↗Моя роль
Я поставил задачу, выбрал направление «Музыкальный зин» и уточнял визуальное решение по ходу работы. Ревью касались фактур, оформления кнопок, компоновки контактов и текстов. Анимационное решение «Ксерокс оживает» я принял после просмотра реализации.
AI использовался для работы с открытыми источниками, подготовки декоративных материалов и написания кода. Анимации реализованы в Claude Code.
От визуального направления к работающему сайту
Результат проекта — адаптивный концепт с настоящими релизами, концертным архивом, мобильным меню и анимационной системой. Образ музыкального зина последовательно раскрывается в палитре, типографике, коллажах и движении.
Подготовлены демонстрационная страница, описание дизайн-решений и три поисковых варианта знака. Концепт представлен в портфолио как инициативный проект. Пользовательская валидация и оценка влияния на прослушивания не проводились.
Источники и права
Обложки и архивная фотография приведены для демонстрации дизайн-концепта со ссылками на официальные источники. Права на эти материалы и название группы принадлежат их правообладателям. Проект не аффилирован с группой.