бюджет:

150 000 ₽ — 200 000 ₽

Сроки:

решения:

Аналитика

Прототип

1,5 месяца

UX/UI Дизайн

Создание админ-панели для проектов

Вёрстка и программирование

Копирайтинг

Как только к нам поступила заявка, мы уже понимали уровень ответственности, наш Заказчик — Дени Байсаров. Было одновременно приятно и волнительно.

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

Event-агентство

UX/UI, сайт под ключ

Скриншот частичного анализа конкурентов по структуре

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

Outerra — маркетинговое event‑агентство с «внеземным» подходом к работе. Исходя из названия, необходимо было создать такой же «внеземной» проект, передав креативность бренда.

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

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

Проведены:

Исходя из проведенного анализа мы нашли и утвердили несколько решений:

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

2. Разработка pop-up окон проекта. Основная задача — отразить проекты с описанием, в котором будет не менее 800−1500 символов. Заказчику был нужен одностраничный сайт, где нецелесообразно размещать такое количество текстовой информации. Совсем убрать кейсы было нельзя, поскольку это отраслевой стандарт ниши и отражает реальный опыт компании в запуске масштабных мероприятий. Мы приняли решение разместить описание проектов во всплывающих окнах.

3. Создание трехмерного космоса на обложку. Идея возникла из позиционирования компании «Маркетинговое event-агентство с внеземным подходом к работе». Анимация призвана передать этот замысел и задать атмосферу.

Скриншот информационной архитектуры с расширением проекта в будущем.

Основная сложность в проектировании крылась в разработке pop‑up окон. Открывать поочередно 7 проектов для подробного изучения на весь экран неудобно для пользователя. А создавать километровый лендинг — плохая идея, ведь пользователи устанут скроллить до нужной услуги.

Мы заменили идею привычных всем pop-up окон на боковое открытие панели проекта. Окно с подробным описанием кейса или услуги открывается на половину ширины экрана во всю высоту, информация внутри окна скроллится, а закрыть его можно нажав на вторую часть экрана (где нет pop‑up). Это решение сделало интерфейс удобным, быстрым, наглядным.

Прототип pop-up окна услуги Event-management

Дизайн раскрытого меню проекта event-агентства Outerra

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

Это натолкнуло на идею, сделать кастомный курсор на сайте проекта.

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

Реализация Preloader на сайте.

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

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

Дизайн-концепция блока услуг проекта Outerra

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

Анимация блоков призыва проекта Outerra

Дизайн блока с этапами работы.

Сайт был реализован чистым кодом и размещен на CMS WordPress. Основной задачей было не только создать сайт, но и разработать для заказчика админ‑панель для управления проектом и обновления кейсов в будущем. Мы создали кастомное решение для быстрой и удобной загрузки кейсов.

Скриншот админ-панели на WordPress — создание нового кейса в Outerra.

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

Также на стадии обсуждения двусторонние партнёрские отношения с Event‑агентством Outerra =) Ждите дополнения!

3CD8C8

0047DD

7638D6

141414

5551F7

Нам очень важно ваше мнение

Оцените кейс

Спасибо за просмотр

WebValley Studio

Alexey Gamov

Alena Panyushkina

Alena Panyushkina

Maria Drokina

Dmitry Navalov