Как мы разработали многостраничный сайт за 3 недели: от прототипирования до получения первых оплат и регистраций

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

ULTRA100 — первый российский мультиформатный фестиваль. Место, где спорт встречается с искусством, музыкой и шоу.

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

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

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

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

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

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

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

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

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

На втором экране мы представили фестиваль ULTRA100 с помощью фактов в цифрах. Факты и статистика создают ощущение надежности и авторитетности. Люди чаще принимают решения на основе объективных данных, чем исходя из субъективных описаний, вроде «мы лучшие».

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

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

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

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

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

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

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

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

Раздел «вопрос-ответ» на всех страницах сайта организован по 5 категориям, что упрощает пользователям поиск нужной информации. Грамотная структура FAQ с насыщением ключевыми словами положительно влияет на SEO и привлекает органический трафик, поскольку поисковые системы индексируют такой контент с высоким приоритетом.

Чтобы пользователи могли легко найти всю необходимую информацию, дизайнеры MIKHAILOV STUDIO разработали именно многостраничный сайт, полностью ориентированный на потребности пользователей, чтобы они могли легко найти всю необходимую информацию.

На странице «Об ULTRA100» подчеркнули, что это проект с конкретной целевой аудиторией и широкими возможностями для каждого гостя.

Мы добавили карту фестиваля и предусмотрели ответы на популярные вопросы — например, «будет ли еда?» — чтобы каждому было понятно, чего ожидать на месте.

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

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

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

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

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

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

«Спортсменам»

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

«Гостям»

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

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

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

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

Если вам необходим сайт или вашему текущему сайту необходим аудит арт-директора, заполните форму ниже, мы перезвоним и обсудим задачу подробнее.

Начнем сотрудничество?

Наш сайт: https://mikhailov.studio/

Связаться с арт-директором в телеграме - https://t.me/fedor_mikhailov

Новый тг-канал студии: https://t.me/mikhailov_studio