Главная › Кейсы › Фан-сайт Нигатива
СайтДизайнИнтерактивМузыка · Личный бренд

Фан-сайт Нигатива: сайт как фотоплёнка

Этот проект нам никто не заказывал. Мы сделали его для себя, по любви к музыке: фан-сайт краснодарского рэпера Нигатива, где вся страница проявляется, как снимок в фотолаборатории. Здесь видно, как мы думаем, когда нас не ограничивает техническое задание.

Фан-сайт Нигатива на ноутбуке и телефоне, рядом зебра Дома Маркетинга
Проект
Фан-сайт рэпера Нигатива
Сфера
Музыка · Личный бренд артиста
Что сделали
Концепция, дизайн, тексты, вёрстка, интерактив
Формат
Свой проект студии, без заказчика
Зачем

Проект по порыву души

Нигатив, он же Владимир Афанасьев из станицы Успенской, двадцать лет в русском рэпе: девятнадцать лет в группе «Триада», десять сольных релизов, первый двойной альбом в истории жанра. При этом у артиста с такой биографией в сети нет места, где его история собрана целиком и красиво. Мы решили это исправить, просто потому что нам нравится его музыка.

Без заказчика и без брифа мы поставили себе одну задачу: сделать сайт, который нельзя перепутать ни с каким другим. Не шаблон «биография, дискография, контакты», а страницу, которую хочется листать до конца и показывать друзьям.

Идея

Сайт как фотоплёнка

Ключ нашли в самом имени. Нигатив пишется через «и», и это почти негатив, фотоплёнка. Так появилась сквозная метафора: весь сайт устроен как путь снимка в лаборатории. Сначала негатив, потом контактный лист, проявка и, наконец, отпечаток.

Чёрные секции работают как плёнка, светлые как фотобумага. По краям бежит кромка с перфорацией и маркировкой «НИГАТИВ 400», поверх всей страницы едва заметно дрожит зерно. В заголовке буква «е» зачёркнута красным восковым карандашом и исправлена на «и», так фотографы подписывают контактные листы.

Главный приём первого экрана: портрет показан в негативе, а курсор работает как проявитель. Там, где проходит круг, лицо становится нормальным снимком. На телефоне круг движется за пальцем, а если его не трогать, медленно гуляет по снимку сам.

Мобильная версия фан-сайта: контактный лист, альбомы и точка росы
Мобильная версия: контактный лист, альбомы и калькулятор точки росы.
Стилистика

Цвет, шрифт и фактура

Палитра почти монохромная, как чёрно-белая плёнка. Два акцента пришли из самой фотолаборатории: красный восковой карандаш, которым обводят лучший кадр, и холодный синий цвет росы. Он отсылает к первому сольнику артиста «Точка Росы».

Плёнка#0A0B0C
Фотобумага#F2F3F1
Контактный лист#E4E6E3
Восковой карандаш#D2452E
Роса#2E6E83
Маркировка плёнки#E0A64A
Кадр 1 · проявка не закончена Точка росы Заголовки набраны узким плакатным Alumni Sans: он звучит как афиша концерта и помещает длинные названия альбомов в одну строку. Основной текст в Golos Text, служебные подписи моноширинным JetBrains Mono, как маркировка на кромке плёнки.
Что внутри

Восемь сцен одной истории

01
Проявитель
Портрет в негативе на первом экране, курсор или палец проявляет лицо внутри круга.
02
Контактный лист
Шесть кадров, шесть глав биографии. Кадр проявляется по наведению, лучший обведён красным карандашом.
03
Путь и гравюра
Хронология от казачьего хора до десятого альбома и портрет-гравюра из 154 линий разной толщины.
04
Альбомы
Двадцать две обложки нарисованы заново по названиям, при наведении из конверта выезжает пластинка.
05
Лицо из названий
Портрет набран только названиями альбомов и клипов: где на снимке свет, буквы ярче.
06
Точка росы
Живой калькулятор по формуле Магнуса: двигаешь температуру и влажность, на экране оседает туман.
07
Вне сцены
Бенто-сетка с рисованными схемами: лазерный резонатор физтеха, дуги хора, трасса дрифта.
08
Барада и клипы
Три маски пародийного трио и видеография по годам с гостями в каждом треке.
Раздел альбомов на ноутбуке и блок «Вне сцены» на телефоне
Альбомы на десктопе и блок «Вне сцены» на телефоне.

Обложки без чужих картинок. Ни одной официальной обложки на сайте нет: каждая собрана заново из названия. У «Точки Росы» по конверту стекают капли, «Белый том» и «Чёрный том» сделаны из одного кадра в позитиве и негативе, у альбома «Числа» обложка набрана цифрами, а «Кризис среднего» буквально треснул.

Факты, которые становятся игрой. Артист окончил физтех по квантовой электронике, а первый альбом назвал физическим термином. Поэтому в разделе «Точка росы» можно подставить погоду за окном и узнать, когда на улице выпадет роса. Это не украшение, а способ запомнить историю альбома.

Удобно на любом экране. Каждый приём продуман для телефона: проявитель работает от касания, контактный лист перестраивается в одну колонку, анимации отключаются, если в системе включено ограничение движения.

Итог
Идеясайт как фотоплёнка◆Интерактивпроявитель, плёнка, роса◆22 обложкинарисованы заново◆Адаптивдесктоп и телефон◆Идеясайт как фотоплёнка◆Интерактивпроявитель, плёнка, роса◆22 обложкинарисованы заново◆Адаптивдесктоп и телефон◆Идеясайт как фотоплёнка◆Интерактивпроявитель, плёнка, роса◆22 обложкинарисованы заново◆Адаптивдесктоп и телефон◆
Скриншоты

Как это выглядит

Контактный лист: шесть кадров биографии
Контактный лист
Хронология и портрет-гравюра
Путь и гравюра
Портрет, набранный названиями альбомов
Лицо из названий
Калькулятор точки росы
Точка росы
Бенто-сетка «Вне сцены»
Вне сцены
Видеография по годам
Клипы
Вывод

Что этот проект говорит о нас

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

Если у вас есть история, которую хочется рассказать не по шаблону, напишите нам. Придумаем образ, соберём контент и сделаем сайт, который люди будут листать до конца.

Неофициальный фан-сайт, не связан с артистом и его командой. Факты: русская Википедия, статья «Нигатив». Портрет: кадр из интервью «Страны FM», Wikimedia Commons, лицензия CC BY 3.0; фон удалён, снимок переведён в ч/б, гравюра и типографский портрет сделаны по нему.