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

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

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

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

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

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

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

Решение

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

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

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

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

Сегменты ЦА

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

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

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

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

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

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

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

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

Им важна информация о шоу-программе, активностях и хедлайнерах. Гости хотят поддержать спортсменов и посетить другие проекты экосистемы. Самые частые вопросы: где жить, комфортно ли с дитём и "а еда будет?)".

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

3) Волонтеры

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

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

Анализ

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

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

Дальше пошли в социальные сети проекта. Сайт велся нерегулярно, а нам нужна свежая информация (кровь). В них нашли обновленный контент и поняли tone of voice команды. В комментариях пристально искали вопросы, чтобы понять потребность участников.

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

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

Провальная дизайн-концепция

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

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

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

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

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

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

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

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

Финальный дизайн

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

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

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

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

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

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

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

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

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

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

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

Сразу после таймера подлетают 2 билета: для спортсмена и гостя. Каждый из билетов отрисовали в цветах внутренних страниц: у спортсменов — синий, а у гостей — розовый.

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

Кто-то верстал согласованные заказчиком страницы, кто-то отрисовывал то, что будет верстаться уже завтра. Три дизайнера работали как минимум 2 недели по 12 часов, в выходные — часов по 5. «Но это, наверное, не надо включать в статью, хаха" — Алина, дизайнер, которого подключили в работу.

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

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

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

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

Организаторы фестиваля разместили в парке Аллею Фантастов, с целью сохранить культурное наследие. Она состоит из 5 памятников отечественным писателям, 3 из которых создали в мире впервые. Средняя проходимость парка в месяц — 50.000 человек, а в день фестиваля — 25.000 человек.

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

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

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

Покреативили и в блоке социальных сетей. При наведении на площадку работает анимация, которая создает ощущение, что ты оторвал листовку и сохранил её у себя. Совсем как на остановке или в подъезде. Интерактивность в решении повышает повышает интерес к взаимодействию с сайтом.

Удобство использования

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

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

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

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

Расскажем подробно об истории фестиваля, вещь занимательная! Всё началось в 2014 году с марафона «Эльтон Ультра», который проходит в уникальном уголке России — Эльтоне.

Живописное место в Волгоградской области на границе с Казахстаном. Славится своим огромным минеральным озером и бескрайними степями. Озеро Эльтон — крупнейшее в Европе и одно из самых солёных в мире, его солёность вдвое превышает показатели Мёртвого моря.

В 2018 году марафон превратился в фестиваль и собрал участников из 55 регионов России и 12 стран мира. Фестиваль стал площадкой, где спорт переплетается с культурой и шоу. Объединил людей разной национальности и традиций. На всероссийской премии в области событийного туризма «События России 2018» фестиваль получил Гран-при и занял первое место в номинации «Спорт».

В 2022 году ULTRA100 переместился в Волжский, став площадкой для спортивных и творческих людей. Благодаря этому о городе Волжский начали узнавать туристы.

В 2024 году фестиваль собрал 14 000 гостей, 2000 спортсменов и 200 волонтеров. Он стал финалистом Всероссийского конкурса «Ты в игре» 2023−2024 в номинации «Масштаб» и подтвердил статус значимого события.

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

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

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

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

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

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

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

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

Техническая сторона

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

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

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

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

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

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

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

Результат

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

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

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

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

Отзыв заказчика

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

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

Мы уверены, что сайт будет активно работать на продвижение мероприятия и привлечение гостей, а также на привлечение ко всей экосистеме ULTRA100. Работать с вами было приятно!"

Workspace Digital Awards
Сайты / Развлечения, спорт, туризм, 3 место, 2025

смотреть также