Итоги года Магвай 2023 — подарок-сказка под Новый год

1. Вводная задача от заказчика, проблематика, цели

Конец года — это не только рабочая суета и горящие головы, но и время подвести итоги, оглянуться назад, проанализировать трудности, с которыми столкнулась компания, и, конечно же, посчитать свои победы! Так как компания «Магвай» — входит в топ-10 рейтинга креативных разработчиков, то для нас было важно, продолжая ежегодную традицию, создать отчëт в виде полноценного промопродукта, который вдобавок покажет наши умения. Поэтому основная задача — создать промолендинг, который в интерактивной форме представит партнёрам и клиентам наши результаты за год.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

По данным агентства по управлению персоналом Workhuman, 31% зарубежных компаний подводят итоги года. На своём опыте мы убедились в том, что в зависимости от формы и подачи ежегодное ревью может стать довольно эффективным PR-инструментом, а также мотивировать сотрудников.

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

3. Результаты сотрудничества

Концепция

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

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

Иллюстрации

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

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

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

Всего 4 позитивных образа, которые ассоциируются с Новым годом: Дед Мороз, полярный медведь, кот, застрявший в ёлке, и креативный дизайнер. Юмор — тоже часть концепции, нам хотелось, чтобы посетители сайта улыбались в преддверии праздников.

Техническая часть

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

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

Для каждого экрана продумана своя сцена, которая помогает истории развиваться. Например, где-то таким образом замедляется повествование, а где-то наоборот ускоряется. Весь моушн на сайте — это движения в проекциях плоскостей, поэтому и в самих иллюстрациях движения флэт-фигур выполнены в виде простых сдвигов элементов. А горизонтальный скролл идеально подходит для интерактивного сторителлинга и помогает последовательно раскрывать детали повествования.

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

4. Заключение

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

Лендинг привлёк внимание не только клиентов, но и коллег. В начале этого года сайт взял награду Site of the day международного конкурса CSS Design Awards. А проект Muzli, где тысячи дизайнеров ищут вдохновение, включил лендинг в свою подборку.

Также проект стал хорошим PR-инструментом. Мы добавили ссылку на «Итоги года» в хедер основного сайта студии. В предновогодние дни и на каникулах зафиксировали на лендинге 3000 посещений. Также мы рассказали о проекте на сторонних ресурсах и получили дополнительный трафик и цитируемость.

Владимир Новиков

Дизайнер, Магвай

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