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

Итоги года 2023



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

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

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


Как мы создали и запустили первый проект

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

2.1.jpg

Итоги года 2022


2.2.jpg

Итоги года 2022


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

3.jpg

3D-елка, которая тоже немного покосилась из-за неустойчивости внешнего мира

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

4.1.jpg

Наша безумная команда Толик, Игорь и Олег.

4.2.jpg

Эскизы персонажей были нарисованы от руки, а потом воплощены в 3D


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

Итоги 2023-го года

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

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


Выбор концепции и стилистики

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

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

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


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


Дмитрий Бондарчук,
арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»

5.jpg

Референсы, которые мы использовали для вдохновения



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

Владимир Новиков,дизайнер студии «Магвай», ответственный за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»

Иллюстрации — основа сторителлинга

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

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



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

Дмитрий Бондарчук,арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»


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

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

6.1.jpg

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

6.2.jpg

Все мы немного этот кот, запутались в елке, но делаем вид, что все в порядке

6.3.jpg

Собирательный образ дизайнера любой digital- студии. Узнали себя?

6.4.jpg

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


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

Дмитрий Бондарчук,арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»


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

Владимир Новиков,дизайнер студии «Магвай», отвечал за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»


7.1.jpg

Иллюстрации отлично вписались в интерфейс и добавили в него юмора

7.2.jpg

Не забыли рассказать о достижениях

7.3.jpg

А также о новых услугах и росте компании

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

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

гифка 1.gif

Микро-анимации персонажей

гифка 2.gif

И их окружения


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


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

Владимир Новиков,дизайнер студии «Магвай», отвечал за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»

гифка 3.gif

Горизонтальный скролл идеально подходит для интерактивного сторителлинга

Текст

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

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

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

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

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

  • Новые проекты. Описываем, какие направления мы запустили.
  • Модификации в существующих услугах. Рассказываем об улучшениях в текущих проектах.

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

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

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

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

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


8.jpg

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

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

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



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

Нина Калаус, СЕО студии «Магвай»


Внутренняя рефлексия и перестройка вылилась в то, что мы написали много статей, поработали с бизнес-консультантом, составили регламенты, провели ребрендинг и создали новый сайт. А впереди ещё открытие филиала в Берлине. Но это мы заглядываем уже в 2024-й. Не стоит спешить. Пока не прогремели куранты, мы всё ещё в 2023-м. Давайте не спугнём магию Нового года!

Никита Заславский,исполнительный директор студии «Магвай»


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

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

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

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

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

***

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


10.jpg

Кейс проекта Итоги Года 2023


9.jpg

Мишка желает всем счастливого нового года и до встречи в 2024!

***

Хочешь еще больше полезностей от "Магвай"?

Подписывайся на наши соц. сети:

Телеграм

Вконтакте

Сайт



Самое интересное