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

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

Теперь немного о проекте, раз уж мы его так расхвалили. Начнем с того, что организаторы — мегазаряженные люди, которые продвигают идею, что спорт и шоу совместимы. Фестиваль сочетает в себе спорт: от разных видов бега до фиджитал, и большую тусовку с музыкой, активностями и летней атмосферой юга России. И все это длится 48 часов в уникальном арт-парке и за небольшие деньги.)

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

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

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

В итоге проект, который хотели легко завершить с помощью одного дизайнера за 4 недели, разрабатывали 6 недель всей командой в обнимку с сердечными каплями. (хихик)

За 6 недель разработали многостраничный сайт практически с нуля: 7 уникальных и 10 технических страниц на Tilda Publishing с использованием zero-блоков и сложной анимации. Основной упор сделали на элементы интерактивности: pop-up окна, горизонтальный скроллинг, таймер обратного отсчета.

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

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

1) Спортсмены:

любители, профессиональные атлеты и просто активные люди.

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

Наша задача — разместить ответы в одном месте и дать возможность связаться с организатором при необходимости.

2) Участники:

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

3) Волонтеры

Для этой категории важна определенность. Они хотят помогать проекту, но не понимают: «А как именно?»

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

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

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

Арт-директор подумал: «Нам нужно придумать совершенно новую концепцию с 0, сделать 10+ страниц и успеть сверстать проект за 2,5 недели. Окэээй, погнали».

А Катя расстроилась, что не оправдала ожиданий, проект ведь важный и большой. Если в цитате, то «поняла, что сон и стабильная менталка для слабаков))».

«Это были просто бессонные ночи, я ложилась с мыслями об ULTRA100 и вставала с мыслями об ULTRA100», — Катя. На создание нового дизайна оставались максимально сжатые сроки. Ушли с созвона, снесли всё, что было, и открыли чистый лист.

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

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

За основу взяли 4 цвета из фирменного стиля заказчика: кислотно-зеленый, ярко-розовый, черный и синий.

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

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

С помощью горизонтальной анимации появляется таймер на весь экран, который задерживает внимание и говорит: «Пс, стоимость скоро повысится». В таймер интегрировали фирменный элемент — маскота Атланта.

Где-то в этот момент дизайна понимаем, что мы на верном пути. Поэтому одного за другим подключаем дизайнеров из команды, чтобы успеть сделать всё в срок. Который не то чтобы далеко, а скорее, нервно дышит в затылок.

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

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

Расскажем о нескольких проектах от компании в сфере культуры.

В честь юбилея Волжского проект ULTRA100 подарил городу Ультра Арену — амфитеатр для проведения любых мероприятий: мастер-классов, спектаклей, лекториев, баттлов или выставок.

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

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

Блок об истории фестиваля поместили на отдельную страницу. Истории ULTRA100 больше 10 лет, и ее можно смотреть как настоящий фильм. Поэтому в рассказе добавили эффект пленки кинофильма, который погружает пользователя в эту атмосферу.

Для тех, кто хочет быстро найти информацию и купить билет, мы тоже продумали путь. В меню есть разделение на 2 страницы: «Спортсменам» и «Гостям». На каждой использовали индивидуальный подход для наполнения страниц контентом.

Со страницей гостей интереснее. После «Купить билет» мы сосредоточились на призыве стать частью фестиваля. Заинтересовали гостей фотографией, которая обрамляется ломаными линиями. И ведет к самым острым вопросам: стоимость, дата, время. Рассказали о наполнении фестиваля и других проектах «Ультра100», которые тоже можно посетить в рамках мероприятия.

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

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

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

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

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

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

Подпишитесь на телеграм-канал студии.

Мы разработали сайт из 17 страниц для масштабного фестиваля и экосистемы проекта с аудиторией 47 миллионов человек в медиа пространстве.

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

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

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

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