Веб-сказка под Новый год, или как мы превратили формальный годовой отчёт в душевную историю

Как подвести итоги так, чтобы всем хотелось их увидеть? Мы придумали свою традицию — второй год создаём креативный лендинг с новогодними иллюстрациями. Представляем «Mагвай Итоги 2023» и рассказываем, почему это один из самых важных проектов.

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

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

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

В конце 2022 года мы задумали представить итоги на отдельном лендинге MAGWAI Итоги. Времени оставалось немного, поэтому действовали быстро. Некоторые решения были компромиссом. И всё же мы сделали максимум, и сайт высоко оценила аудитория и коллеги.

Для начала мы придумали историю и персонажей, которые её представили. Наступал год кролика, поэтому именно косой и стал одним из главных героев. Эскиз образа создал дизайнер векторных иллюстраций, затем зайца воплотил специалист по 3D-иллюстрациям. Постепенно появились и другие персонажи. Символ уходящего года — тигр. Ещё мы добавили оленя, ведь он тоже ассоциируется с праздником. И, конечно, не обошлись без ёлки.

Мы сами так увлеклись этой историей, что дали персонажам имена: олень Олег, кролик Толик и тигр Игорь. 2022-й был для нас своеобразным марафоном, который надо было выдержать. Поэтому наши герои выглядели немного уставшими и даже чуть обезумевшими. При этом наше стремление двигаться вперед подчеркнул горизонтальный скролл.

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

В 2022-м мы всё делали быстро. Тестировать сайт пришлось в ночь перед запуском. В результате то, что нам не нравилось, сложно было изменить. В этот раз на разработку мы выделили 2 месяца, чтобы создать идеальный лендинг.

Над важным для студии проектом работала целая команда. Это, прежде всего, лучшие дизайнеры — арт-директор и ведущий дизайнер интерфейсов. Они создали основу истории. Чтобы все задумки стали реальностью, присоединился senior фронтенд-разработчик. Контентную часть продумывали исполнительный директор и CEO студии. А копирайтер помог соединить все смыслы в тексте.

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

В преддверии нового года мы выпустили статью «10 трендов веб-дизайна на 2024 год».

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

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

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

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

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

Интерфейс сделали за 2 недели, на иллюстрации потребовалось 3.

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

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

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

Чтобы понять, чем в этом году стоит поделиться с аудиторией, двигаемся следующим маршрутом:

1. Воспоминания года. Перечисляем ключевые моменты, эмоции и образы, которые остались в памяти за этот год.

2. Новые направления и изменения в услугах.

3. Преодоленные челленджи. Перечисляем трудности, с которыми мы столкнулись, и описываем, как с ними справились.

4. Успехи и достижения. Подчëркиваем победы и высокие позиции в различных рейтингах и конкурсах.

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

6. Яркие события года. Отмечаем знаковые достижения, например, титулы «Человек года» и «Агентство года».

7. Цели и напутствия на будущее. Формулируем основные задачи на следующий год и заряжаем команду.

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

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

Если в 2022-м мы чувствовали, что проходили путь Алисы в Стране чудес, то в 2023-м рам казалось, что наша история похожа на сюжет из мультфильма о Коралине. Как и она, мы оказались в странных обстоятельствах, когда привычный мир выдаёт себя непривычными деталями. Нам нужно было найти выход — дверцу с табличкой «2024». Это настроение мы постарались передать на сайте.

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

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

Разработка заняла 2 недели. Проект реализовали на стеке HTML/Twig, SCSS, JS с использованием библиотек Gsap и Lenis под Galp.

Два месяца работы, и наша веб-сказка готова! Кроме времени и мастерства мы выложили в этот проект свои эмоции и поделились праздничным настроением. В этом году мы ощутили, что чудеса — там, где в них верят. С предвкушением ждём 2024-й! А пока настало время познакомиться с нашими героями и узнать, что же произошло за этот год.