Одностраничный сайт

для студии подкастов

«HI-FI Studio»

Лендинг

Сайт под ключ

Tilda

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

Ко мне обратились основатели студии подкастов и видеосъемки «HI-FI Studio» с запросом на редизайн старого сайта. Задача — разработать функциональный и понятный одностраничный сайт на платформе Tilda, а также подключить сервис онлайн-бронирования «YCLIENTS» для автоматизации процесса записи клиентов.

Задача

Клиент

Компания «HI-FI Studio»

Проект

Одностраничный сайт

Год

2024

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

Исследование ЦА и конкурентов, сбор семантического ядра

Написание продающих текстов с упором на маркетинг

Создание прототипа

Создание мудборда с ассоциативным рядом и референсами

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

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

Адаптивная верстка на Тильде со сложной анимацией

Базовое SEO и технические настройки

Подключение сервиса онлайн-бронирования «YCLIENTS»

Вводные

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

Начало работ

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

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

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

/01

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

Аналитика

Проводить глубинный анализ ЦА было несложно, так как у компании за 2 года работы насчитывалось 130+ отзывов, на основе которых я сформировала примерный портрет типичного клиента и выявила его боли, потребности, возражения, важные критерии для принятия решения.

Но этим никого не удивишь, и для отстройки от конкурентов нужно что‑то более интересное, что будет лучше отвечать потребностям ЦА.

/02

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

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

Далее приступила к написанию продающих текстов с упором на маркетинг. На сайте сделали акцент на таких отличиях компании, как: присутствие операторов 100% времени съемки, возможность бесплатной трансформации локаций под запросы клиентов и нарезка рилс из подкаста без потери качества.

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

Оформила тексты в прототип (схематичную версию сайта) и записала видео-презентацию. Макет был принят практически без правок.

/03

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

мудборд

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

Для заголовков применила игривый и молодежный шрифт «Soyuz Grotesk», а для наборного текста — понятный и легко считываемый «Onest».

/04

Дизайн

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

Так как записанные подкасты почти всегда нарезают на Reels и выкладывают в Нельзяграмме, решила сделать его центральным образом, с которым на ассоциативном уровне связаны все элементы дизайн-макета.

Использовала сложную сетку с собственной системой направляющих, чтобы сделать проект более интересным и необычным. В основу дизайна заложен «блочный стиль» с отсылкой к «bento ui», что придает макету интерфейсности и схожести с мобильным приложением.

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

/05

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

Верстка и функционал

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

Также разработала 4 адаптивные версии: 2 под планшеты и 2 под смартфоны, чтобы сайт был удобным на любом устройстве.

/06

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

Завершение

Разработка лендинга заняла около 1 месяца. Заказчики остались довольны сотрудничеством.

студия-подкастов.рф

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

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

Результат

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

Закрывает посетителей на бронирование студии в сервисе YCLIENTS, либо на оставление заявки на бесплатную консультацию

Повышает уровень лояльности и доверия посетителей за счет продуманного и современного дизайна

Позволяет отстроиться от конкурентов

Эффективно доносит ценность услуг студии

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

Максимально упрощает путь пользователя за счет интуитивно понятного интерфейса