Многостраничный сайт

для музыкального трио

«КонтраBand»

Многостраничник

Сайт под ключ

Tilda

Посмотрите проект

Ко мне обратился основатель музыкального трио из Москвы «КонтраBand». Стояла задача разработать креативный сайт, который в понятной форме преподнесет основную информацию о группе и подчеркнет премиальность услуг.

Задача

Клиент

Музыкальное трио «КонтраBand»

Проект

Многостраничный сайт

Год

2025

Что было сделано

Анализ ЦА и конкурентов

Глубинное интервью (видеосозвон)

Написание текстов и создание прототипа

Видеосозвон с просмотром референсов для нащупывания стилистики проекта

Создание дизайн-концепции проекта (первые 2-3 блока)

Создание дизайн-макета главной страницы

Создание дизайн-макета внутренних страниц

Создание дизайн-макета адаптивных версий

Верстка на Тильде с адаптацией, анимацией и тех. настройками

Вводные

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

Начало работ

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

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

Создала персональную страницу под проект в «Yonote», где систематизировала все материалы: ссылки на видео-презентации и макеты, а также на договор, акты и чеки, чтобы клиент в любой момент смог обратиться к ним.

/01

Аналитика

Чтобы сайт выполнял поставленную задачу, важно разобраться, на какую аудиторию он работает и с какими конкурентами «соперничает» за внимание потребителя.

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

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

/02

Тексты & Прототип

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

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

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

Раскрыла 3 ключевых преимущества трио: взаимодействие с залом (работа не со сцены), наличие театрального & полуциркового представления (помимо музыкального) и зажигательный репертуар.

Вызвала доверие с помощью блока о сотрудничестве участников группы с известными артистами / компаниями.

Указала условия сотрудничества (длительность, бронирование, райдеры и прочее).

Сделала метафоричный и яркий призыв к действию.

/03

Референсы

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

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

Важно сочетать как креатив и анимации, так и эстетику, аккуратность

Нравятся шрифты с засечками

Нужно использовать интересные детали, которые станут «изюминкой» проекта.

/04

Дизайн

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

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

/04

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

Дизайн

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

Добавила необычные для сайтов детали: резные рамки для фотографий, образ контрабаса, силуэты теней от растений.

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

/04

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

Дизайн

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

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

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

/04

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

Анимации

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

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

/04

Анимации

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

/04

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

Дизайн

А еще я сделала отдельные страницы под все программы: «Основная», «A la Russe» и «Италия». Там всецело раскрыла их с помощью блоков с видеороликами и фотографиями.

/04

Дизайн

Записала подробную видео-презентацию дизайна с обоснованием решений и отправила заказчику на согласование. Макет приняли без правок.

/05

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

Верстка

После утверждения дизайн-макета, приступила к верстке на платформе Tilda.

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

/06

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

Завершение и отзыв

Заказчик остался на 100% доволен сотрудничеством и записал аудио-отзыв, где поблагодарил за пунктуальность, четко выстроенные процессы и креативность.

kontraband.site

Ссылка на проект

Сайт находится сейчас под полным управлением заказчика и может отличаться от изначального макета и функционала*

Результат

Понятно и емко систематизирует информацию о музыкальном трио и возможностях сотрудничества.

Формирует премиальный онлайн-имидж, который соответствует уровню целевой аудитории проекта.

Доносит ценность и особенности услуг «КонтраBand».

Повышает уровень лояльности посетителей.

По итогу клиент получил сайт, который: