рекламный лендинг с двумя флайтами первого экрана для «мангазея на речном»
«Мангазея на Речном» — город-курорт с бульваром и набережной, перетекающей в променад легендарного Северного вокзала. Лендинг раскрывает идею круглогодичного курорта у большой воды, в окружении парков
идея первого экрана
Для проекта «Мангазея на Речном» была выбрана атмосферная эстетика русского Севера. Этот образ объединяет интерьеры и ландшафт жилого комплекса, а также все креативные и рекламные материалы.
В интерактивном коллаже первого экрана с эффектом дыхания использован метафорический поток воздуха и волны на большой воде в виде струящейся и обволакивающей ткани. В качестве узнаваемых элементов коллажа в композиции сочетаются парусники, крупные камни, кустарники, бутоны цветов, ели, карельский мрамор, краснокнижный дятел, который обитает в соседних парках. И главный акцент сделан на знаковом фасаде и шпиле Северного речного вокзала
В интерактивном коллаже первого экрана с эффектом дыхания использован метафорический поток воздуха и волны на большой воде в виде струящейся и обволакивающей ткани. В качестве узнаваемых элементов коллажа в композиции сочетаются парусники, крупные камни, кустарники, бутоны цветов, ели, карельский мрамор, краснокнижный дятел, который обитает в соседних парках. И главный акцент сделан на знаковом фасаде и шпиле Северного речного вокзала
технология оживления первого экрана
Для первого экрана лендинга использована анимационная секвенция. Она позволяет создать красивое и плавное «дыхание» всех объектов коллажа.
Секвенция также стала решением и другой задачи: мы хотели, чтобы у пользователя была возможность управлять всеми элементами коллажа с помощью скролла. Элементы первого экрана раздвигаются по движению мышки, скорость их раскрытия ограничена, чтобы не нарушать состояния умиротворения. Таким образом, мы добились погружения в атмосферу сайта города-курорта.
Через дальнейший скролл происходит переход на второй экран сайта: благодаря секвенции элементы коллажа плавно уходят в стороны, оставляя чистый экран в фирменном зеленом цвете бренда девелопера
Секвенция также стала решением и другой задачи: мы хотели, чтобы у пользователя была возможность управлять всеми элементами коллажа с помощью скролла. Элементы первого экрана раздвигаются по движению мышки, скорость их раскрытия ограничена, чтобы не нарушать состояния умиротворения. Таким образом, мы добились погружения в атмосферу сайта города-курорта.
Через дальнейший скролл происходит переход на второй экран сайта: благодаря секвенции элементы коллажа плавно уходят в стороны, оставляя чистый экран в фирменном зеленом цвете бренда девелопера
рекламная кампания
Лонч сайта происходил одновременно с запуском наружной рекламы, которая выполнена в аналогичной концепции
первый экран для второго флайта
Для этого сайта создано оригинальное и редкое решение — второй вариант первого экрана, который становится основным при смене рекламных креативов в наружной рекламе. Для него была сделана анимация, работающая при помощи скролла пользователя и создающая эффект присутствия. Пользователь словно проходит сквозь парк и выходит к тихой водной глади на берегу города-курорта. Когда пользователь скроллит дальше, на него наезжает логотип Мангазея в виде буквы М и через нее пользователь попадает на второй экран лендинга
первый экран для второго флайта
Управление сайтом при помощи скролла происходит и на втором экране. По мере скроллинга текст плавно заливается белым цветом
речной вокзал
Атмосферу города-курорта продолжает экран, посвященный речному вокзалу. Пользователь в деталях может рассмотреть здание из коллажа на первом экране.
Композиция фотографий также поддерживает многослойность и многогранность, заданную в начале
Композиция фотографий также поддерживает многослойность и многогранность, заданную в начале
параллакс-эффект
Все элементы сайта имеют параллакс-эффект с легкогим плавающим движением, напоминающий покачивание на волнах.
Одним из основных разделов сайта стал раздел «Путешествие по району». Фотографии и видео плавно левитируют. При клике на фото открывается страница с тематическими локациями, а при клике на «+» у фото — открывается описание каждой локации
Одним из основных разделов сайта стал раздел «Путешествие по району». Фотографии и видео плавно левитируют. При клике на фото открывается страница с тематическими локациями, а при клике на «+» у фото — открывается описание каждой локации
интерактивная карта
Пользователь может настроить представление информации о локации так, как ему удобно: посмотреть все инфраструктурные точки, почитать о них, выбрать только интересующие его категории
интерактивные элементы и cta
На каждой странице сайта размещены сообщения call to action, которые одновременно и функциональные, и декоративные.
Кнопки плавно левитируют, продолжая концепцию «дыхания» сайта и привлекая к себе внимание пользователя.
Некоторые кнопки расположены на направляющей в виде круга, которые напоминают круги на воде. При клике на кнопку, она двигается по заданной траектории и открывает текст сообщения. Тексты не повторяются и разработаны специально для каждого раздела.
Кнопки плавно левитируют, продолжая концепцию «дыхания» сайта и привлекая к себе внимание пользователя.
Некоторые кнопки расположены на направляющей в виде круга, которые напоминают круги на воде. При клике на кнопку, она двигается по заданной траектории и открывает текст сообщения. Тексты не повторяются и разработаны специально для каждого раздела.