Отошли от изначальной задачи, и получилась просто песня! Кейс: фирстиль, лого и сайт для музыкальной шоу-игры

Рассказываем, как создали первый в студии анимированный логотип, брендбук превратили в гайдбук, а из многостраничника сделали сборник из лендингов. Спойлер: изначально этого не планировали ни мы, ни заказчик.

Привет! На связи Молния — веб-студия, которая создаёт креативные сайты на Тильде. Мы любим крутые и яркие проекты, в которых можно ставить творческие эксперименты. С запросом на многостраничник, лого и фирстиль к нам пришли создатели культовой игры «Кто круче?», которые решили сделать новую шоу-игру «Хитомания».

Заказчику нужен был нестандартный, но в то же время удобный для бронирования многостраничник. А в лого и фирстиле требовалось отразить вайб известных night-шоу и передать «музыкальность» происходящего.

Мы вооружились строчками из известных песен, зарядились атмосферой «Ночного шоу с Джимми Фэллоном» и передали праздничный вайб шоу-игры. И вот как это было.

От нас требовалось привлечь как можно больше любителей необычных корпоративов и праздников. Для этого на сайте нужно было рассказать о преимуществах игры и сделать из него удобный сервис для бронирования. А айдентику сделать броской и «движовой».

Этот проект не первый, который мы делали для ребят. Раньше они приходили к нам за двумя сайтами: для офлайн- и онлайн-игр проекта «Кто круче?»

После запуска двух сайтов компания пришла к нам с новым проектом. «Хитомания» — современная музыкальная шоу-игра наподобие «Студии Союз» и «Угадай мелодию». Мероприятия проходят в стильной студии с велком-зоной и при участии ведущего. Запрос был на то, чтобы сделать сайт и айдентику под стать проекту — такими же стильными и яркими.

Мы традиционно начали с лого, а далее параллельно работали над гайдбуком и многостраничником.

Все знают игру «Угадай мелодию» — именно она стала прототипом «Хитомании». Но взять элементы из стилистики проекта 90-х мы не могли, так как вайб телешоу не перекликается с концепцией в стиле late night show.

Для начала мы собрали много (очень много) референсов, чтобы наметить направление. В итоге заказчик выбрал три варианта, на которые мы опирались в разработке лого.

Первый реф — логотип с эффектом эха. Заказчику понравилась динамика лого, которая соотносится с настроением шоу-игры.

Следующие два варианта — лого в виде эквалайзера. Заказчику очень понравилась такая задумка из-за прямой ассоциации с музыкой. Но он предложил не «брать» уже существующее изображение звуковой волны. Например, как в программах по созданию музыки. Требовалось найти собственное, уникальное начертание.

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

Заказчик хотел, чтобы лого выделялось и легко запоминалось. Эффект эха — довольно популярный приём, который давно используется в логотипах компаний из разных ниш. Поэтому мы долго думали, как сделать его уникальнее, при этом сохранив читабельность текста. Остановились на градиентах в изображении слова «мания». Этот эффект отсылает к звуковым волнам, отображающим музыкальность происходящего в студии.

Во втором варианте мы также взяли за идею эффект эха, но не стали разделять слово на две части, как в прошлом варианте. Решили остановиться на дублировании слова по одному разу — сверху и снизу.

Третьим вариантом стал логотип с эквалайзером. При разработке мы столкнулись с тем, что вариантов исполнения эквалайзеров существует не так много, и они довольно однотипны. Используются либо горизонтальные полоски, сложенные вертикально с разной высотой, либо вертикальные полосы-регуляторы, напоминающие фейдер.

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

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

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

«Муар» — это лишь часть фишки логотипа. Из-за разной толщины линий логотип создаёт перемежающиеся плотности, то есть изменение площади пустых пространств между элементами. И это оптически образует новые волны.

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

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

В классическом варианте фирменный стиль описывается в брендбуке — документе с чёткими правилами использования логотипа, паттернов, цветов, шрифтов и прочих элементов стиля. Но этот вариант подходит не всем и не всегда — так случилось и с «Хитоманией». Идея проекта нестандартная, сложная и яркая, так что помещать её в строгие рамки было бы плохим вариантом.

Когда дизайнер начал работать над брендбуком, то понял, что все идеи невозможно уместить в обычный документ о шрифтах и палитрах. Мы проанализировали пожелания клиента и зафиксировали, что нельзя было использовать в визуале:

Как ни странно, эти табу породили множество идей того, как создать атмосферу праздника с помощью визуала. В ход пошли и блёстки, и римские головы, и диско-шары. Мы поняли: если ограничимся обыкновенным описанием фирменного стиля, то не сможем вместить все элементы, которые можно использовать на сайте и в соцсетях. Поэтому решили поменять подход и сделать гайдбук с уклоном на визуальный язык проекта.

Визуальный язык — это образ и впечатление, которое мы создаём у человека через «обёртку». То есть у штатных дизайнеров заказчика не будет строгих ограничений в использовании фирменных элементов.

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

Разработку гайдбука мы вели параллельно с созданием сайта. Отдельные идеи дизайнеров сайта перекочевали в гайдбук, а разработанный визуальный язык помог создать цельную картинку на многостраничнике.

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

Главным рефом стал сайт для digital-ивентов The Flow Party. Клиенту понравились динамичная загрузка экрана и сочетание шрифтовых пар. Ещё он отметил переходы между блоками, экран с 3D-фигурами и пёструю цветовую палитру.

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

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

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

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

Весь текст на сайте строится на разговорной речи, которой все пользуются ежедневно. Мы не становимся выше, ничему не учим — общаемся как свои.

На главной мы рассказали об этапах игры. С «Хитоманией» важно познакомить, поэтому мы подробно расписали, что будет происходить в студии. Эффект с наложением блока при скролле позволил разбить полотно текста на смысловые части и показать фотографии с уже прошедших мероприятий.

Когда разрабатывали структуру многостраничника, решили создать не просто внутренние страницы сайта, а «мини-лендинги» для каждого из форматов шоу. Главное отличие «рядовой» страницы и лендинга в том, что второй может существовать отдельно — без всех остальных страниц, так как на нём есть вся информация.

Сделали так, потому что заказчик планировал использовать отдельные страницы сайта в разных рекламных кампаниях — по заказу Дня рождения, корпоратива, вечеринки без повода и мероприятия для подростков. У каждого из них своя целевая аудитория.

Строчки из песен мы выбирали не рандомно. Для каждой страницы разработали отдельный оффер с песней. Трек отражает настроение «мини-лендинга», на котором находится пользователь. Например, внутренняя страница «День рождения» открывается самой известной песней на этот праздник.

Как и на главной, мы рассказываем об этапах игры, но текст блока и строчки из песен в плашках приурочены к конкретному событию — Дню рождения.

У «мини-лендингов» для других форматов шоу — свои уникальные офферы и коллажи. Это нужно, чтобы отразить атмосферу мероприятий для разной целевой аудитории. Для «белых воротничков» — «Хали-гали» и брызги шампанского.

А для тусовщиков, которым причины не нужны, — ни к чему не обязывающий оффер и не привязанный к какому-либо поводу коллаж. Зачем ждать праздника, если заряд эндорфинов нужен здесь и сейчас.

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

В результате получился многостраничник, который работает на разные ЦА. От «взрослых дядечек», «модных чикуль» до родителей подростков. Яркие цвета, активная анимация и нестандартные переходы между блоками объединяют сайт единой атмосферой праздника. А уникальные для каждого «мини-лендинга» коллажи и строчки из песен цепляют отдельные сегменты аудитории.

Этот проект оказался для нас не только креативным, но и прорывным. Мы не только вышли за рамки ТЗ от заказчика, но и за свои тоже. Сделали анимированный логотип, дали волю в создании визуального языка и превратили многостраничник в настоящий сборник из лендингов.

Заказчик же пришёл за яркой айдентикой, и в итоге получил нечто большее. Вместе с лого — «живую» заставку для дисплеев, ещё фирстиль «без рамок» и сайт, отдельные страницы которого цепляют разные ЦА.

Больше наших кейсов можно посмотреть в портфолио. А недавно мы начали делиться проектами ещё и на Dprofile. Там публикуем короткие презентации сайтов, с минимумом текста — для тех, у кого нет времени на лонгриды.