Marilyn 2.0: редизайн сайта для платформы автоматизации интернет-рекламы
От креатива к эффективности: как mymarilyn.ru сменил кожу, сохранив ДНК
Разработка на Юми; Наполнение; Базовая seo-оптимизация; Дизайн райта; Фирменный стиль, 3D модели; Верстка; Программирование; Регистрация сайта в 2ГИС, Яндекс бизнес; Настойка аналитики
Клиент
Мarilyn — это платформа автоматизации интернет-рекламы, которая объединяет управление рекламными кампаниями, аналитику и отчётность в едином интерфейсе.
Как это было
Директор «Пятого измерения»
Когда клиент впервые пришёл к нам в 2019 г., он хотел яркий, нестандартный сайт — что-то,
что запомнится. Мы сделали дерзкий вариант: тёмный фон с неоново-синими акцентами — выглядело
как «цифровая вселенная» рекламных технологий; изометрические иллюстрации — словно интерфейс
системы собран из кибер модулей.; сложная анимация...
Клиент был в восторге — мы тоже!
Первая версия сайта прожила 3 года, а затем клиент пришел к нам снова!
Почему понадобился редизайн?
Клиент эволюционировал:
- Сместил фокус на B2B-сегмент (требовалась строгость + экспертный контент) Нужна лёгкость восприятия, а не «вау эффект» к которому стремились в первой версии сайта.
- Запустил блог с объемными статьями и сложной структурой материала — тёмный фон мешал чтению (а блог стал ключевым инструментом).
- Клиент начал использовать персонажа «Мерилин» девушку-ассистента в статьях, но на сайте она выглядела чужой.
Задача
Создать дизайн где:
- Лёгкость восприятия сложных данных
- Гибкость для контент-стратегии
- Узнаваемость
- Использование фирменного персонажа
Решение
Как мы нашли баланс между креативом и функционалом
1.Визуальный код
- Мы сохранили узнаваемость, но переработали стиль. (оставили прежний логотип и сохранили акцентные цвета родственные первой версии сайта)
- Светлая тема + чёткая типографика — теперь контент читается легко.
- Персонажи Мери и Вася (система и помощник) — стали «лицом» продукта и сдел
- Микроанимации — например, Мери «получает» письмо когда вы отправляете заявку через форму.
База иллюстраций
База иконок
Новый дизайн
2. Гибкая структура: «Конструктор» для контента
-
30+ модульных секций — как «кирпичики LEGO» для сборки страниц.
-
Готовые шаблоны для статей — можно комбинировать тексты, графики, CTA.
-
Адаптивные блоки — на ПК и мобильном всё выглядит идеально.
Взгляните, как собирается новая страница из готовых модульных секций.
Адаптивный дизайн
-
Desktop
-
Tablet
-
Phone
Все модульные секции полностью адаптивные. Для наглядности, они собранны на “Странице стилей”.
Информационные страницы собранные при помощи модульных секций
Результат
Дизайн, который принёс победу
- Рост времени на сайте на 40% (благодаря читаемости)
- Блог стал драйвером лидов (статьи легко вписываются в новые секции)
- Для маркетологов — ясность
- Для блога — гибкость
- Для бренда — узнаваемость
- 1-е место в «Рейтинге Рунета» (2022) — за лучший B2B-дизайн.