Веб-сказка под Новый год, или как мы превратили формальный годовой отчёт в душевную историю
Первые годы итоги были для нас несколько формальным пунктом. Вроде бы все их подводят и надо рассказать, что сделали мы. Со временем стало понятно, что, прежде всего, это нужно нам самим. Ведь это отличный способ оглянуться и проанализировать события, которые произошли в студии. События разные и не только со знаком плюс. Так мы можем сделать выводы и поступить в следующий раз по-другому. Когда ты постоянно находишься в процессе, подметить сразу те или иные ошибки бывает сложно.
Со временем изменился и формат итогов. Если раньше это были статьи, то сейчас — отдельный проект. Второй год подряд мы создаëм сайт, посвященный нашим знаковым моментам. Ещё один плюс такого подхода — возможность воплотить любые творческие идеи, без ограничивающих условий.
Итоги года — для нас не просто возможность ещё раз показать самое лучшее. Это иммерсивная история, которая помогает аудитории пройти наш путь и почувствовать настроение уходящего года. А оно бывает разным, потому что случаются и сложные заказчики, и кассовые разрывы, и просто плохие дни. Но, несмотря на это, мы продолжаем идти. Итоги — это наша история о мечтах и о том, как их воплощать.
Как мы создали и запустили первый проект
В конце 2022 года мы задумали представить итоги на отдельном лендинге MAGWAI Итоги. Времени оставалось немного, поэтому действовали быстро. Некоторые решения были компромиссом. И всё же мы сделали максимум, и сайт высоко оценила аудитория и коллеги.
Итоги года 2022
Итоги года 2022
Для начала мы придумали историю и персонажей, которые её представили. Наступал год кролика, поэтому именно косой и стал одним из главных героев. Эскиз образа создал дизайнер векторных иллюстраций, затем зайца воплотил специалист по 3D-иллюстрациям. Постепенно появились и другие персонажи. Символ уходящего года — тигр. Ещё мы добавили оленя, ведь он тоже ассоциируется с праздником. И, конечно, не обошлись без ёлки.
3D-елка, которая тоже немного покосилась из-за неустойчивости внешнего мира
Мы сами так увлеклись этой историей, что дали персонажам имена: олень Олег, кролик Толик и тигр Игорь. 2022-й был для нас своеобразным марафоном, который надо было выдержать. Поэтому наши герои выглядели немного уставшими и даже чуть обезумевшими. При этом наше стремление двигаться вперед подчеркнул горизонтальный скролл.
Наша безумная команда Толик, Игорь и Олег.
Эскизы персонажей были нарисованы от руки, а потом воплощены в 3D
Искренность, юмор, праздничное настроение — всё это почувствовала наша аудитория, а мы увидели, как увеличился трафик на основной сайт. Оценили нашу работу и коллеги. Проект стал победителем конкурса «Золотой сайт». Он вошёл в тройку лучших в категории «Персональный сайт».
Итоги 2023-го года
В 2022-м мы всё делали быстро. Тестировать сайт пришлось в ночь перед запуском. В результате то, что нам не нравилось, сложно было изменить. В этот раз на разработку мы выделили 2 месяца, чтобы создать идеальный лендинг.
Над важным для студии проектом работала целая команда. Это, прежде всего, лучшие дизайнеры — арт-директор и ведущий дизайнер интерфейсов. Они создали основу истории. Чтобы все задумки стали реальностью, присоединился senior фронтенд-разработчик. Контентную часть продумывали исполнительный директор и CEO студии. А копирайтер помог соединить все смыслы в тексте.
Выбор концепции и стилистики
Нам важно, чтобы наши продукты были актуальными. Для этого мы следим за трендами и часто делимся своими наблюдениями.
В преддверии нового года мы выпустили статью «10 трендов веб-дизайна на 2024 год».
Поэтому проект «Итоги года» начали с обсуждения стиля. Важно было сохранить акцент на главном — наших результатах и достижениях. Основой стал минимализм, также добавили акцентные шрифты. Кстати, последний приём — один из трендов 2024 года.
Проект, посвящённый итогам года, хотелось сделать стильным и запоминающимся. Для этого пришлось поразмыслить над концепцией: как вписаться в современные тренды дизайна, при этом сохранить новогоднюю атмосферу и выразить tone of voice нашей студии.
Дмитрий Бондарчук,
арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»
Референсы, которые мы использовали для вдохновения
Мы проанализировали похожие проекты, посмотрели много референсов, связанных с Новым годом и Рождеством, и приняли решение выбрать ключевой концепцией минималистичный дизайн. В основе — работа с типографикой и интерактивное взаимодействие с простыми геометрическими формами. Получился эдакий микс геометрического, минималистичного и флэт стилей.
Владимир Новиков,дизайнер студии «Магвай», ответственный за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»
Иллюстрации — основа сторителлинга
Лендинг становится площадкой для дизайнерских экспериментов. То, что невозможно попробовать в проектах заказчиков, можно сделать в собственном. С одной стороны — это здорово, границ у креатива нет. С другой — это наш экзамен, проверка, нужно выложиться и завершить год лучшим проектом. Ведь позже его будут оценивать и в профессиональной среде, так как мы планируем отправить сайт на конкурсы.
Один из приёмов, который отличает наши проекты, — продуманные и проработанные авторские иллюстрации. Это идеальный способ представить историю, зашифровать нюансы и передать настроение. Также с помощью иллюстраций на лендинге итогов мы держим темп повествования, разбивая сторителлинг на определенные информационные блоки.
Иллюстрации создавались к Новому году, с новогодним настроением. Наш дизайнер Владимир задал общий стиль сайта с праздничной палитрой цветов: красным и зелёным. Под этот визуал началась отрисовка иллюстраций. Так как сайт создавался в стиле минимализм, важно было сделать иллюстрации тоже минималистичными, чтобы они гармонировали с общим дизайном.
Дмитрий Бондарчук,арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»
Когда мы определились со стилем и поняли, что проекту обязательно нужны иллюстрации, то приступили к параллельной разработке. Пока дизайнер создавал интерфейс, арт-директор работал над персонажами.
Дмитрий Бондарчук давно увлекается иллюстрациями. Благодаря его чувству юмора рисунки получаются не только стильными, но и забавными. В этом году появился чуть растерянный Дед Мороз, которого стоит рассмотреть повнимательнее. А ещё белый мишка, который держит в лапах горячий кофе. Этот напиток сопровождал нас весь год, кажется, без него мы бы не запустили столько проектов. Мы поселили на лендинге ещё одного ключевого персонажа — дизайнера. Получился собирательный образ, такой, каким все представляют креативного специалиста. Стоит присмотреться и к ёлке…
Дед Мороз, который принес подарок всем трудоголикам и, похоже, начал праздновать без нас
Все мы немного этот кот, запутались в елке, но делаем вид, что все в порядке
Собирательный образ дизайнера любой digital- студии. Узнали себя?
И только мишка, привычный к холодам, не забыл надеть шапку и шарф, и греется ароматным кофе
Первой появилась ёлка с котом. От этой треугольной формы мы оттолкнулись. Остальные персонажи выполнены в одном геометрическом визуале, основание — у нижнего края экрана, а макушка упирается в верхний. Мы создали 4 позитивных образа, которые ассоциируются с Новым годом. Это Дед Мороз, полярный медведь, кот, застрявший в ёлке, и творческий паренёк из любой дизайн-студии. Хотелось, чтобы посетители сайта улыбались и создавалось хорошее настроение в преддверии праздников, ведь сейчас не самые лучшие времена. Поэтому в каждом персонаже есть свой характер, харизма и большая пригоршня юмора.
Дмитрий Бондарчук,арт-директор студии «Магвай», автор идеи и иллюстраций для сайта «Итоги года»
В проекте важно было соблюсти баланс между иллюстрациями и остальными элементами на экране — не переборщить с деталями, не испортить баланс в типографике, правильно расставить акценты в композиции.
Владимир Новиков,дизайнер студии «Магвай», отвечал за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»
Иллюстрации отлично вписались в интерфейс и добавили в него юмора
Не забыли рассказать о достижениях
А также о новых услугах и росте компании
Интерфейс сделали за 2 недели, на иллюстрации потребовалось 3.
Интерактив — ещё одна необходимая составляющая нашей истории. Мы часто используем на сайтах анимации и прокачали этот приём. Сегодня им пользуются все наши дизайнеры. На лендинге мы оживили иллюстрации с помощью микроанимаций, а интерактивность основной истории решили реализовать средствами фронтенд-разработки. Анимации сделали в SVGator, не используя мощные редакторы для моушн-графики.
Микро-анимации персонажей
И их окружения
Арт-директор ещё при отрисовке иллюстраций закладывал анимации. Дизайнер, в свою очередь, продумывал их при разработке интерфейса. Для каждого экрана было создано своё действие, которое помогает истории развиваться. Например, где-то анимации замедляют повествование, а где-то наоборот ускоряют.
Все анимации на сайте — это движения в проекции плоскости, поэтому и в самих иллюстрациях движения флэт-фигур выполнены в виде простых сдвигов элементов. Также сайт имеет горизонтальный скролл. С точки зрения дизайна приём не особо сложный и при этом сразу добавляет «промовости» проекту.
Владимир Новиков,дизайнер студии «Магвай», отвечал за подбор стилистики, UI/UX-дизайн для сайта «Итоги года»
Горизонтальный скролл идеально подходит для интерактивного сторителлинга
Текст
Визуальную часть дополняет текст. Вместе эти элементы должны рассказывать нашу историю и создавать правильную атмосферу. Поэтому мы готовим подробное задание для копирайтера.
Чтобы понять, чем в этом году стоит поделиться с аудиторией, двигаемся следующим маршрутом:
1. Воспоминания года. Перечисляем ключевые моменты, эмоции и образы, которые остались в памяти за этот год.
- Эмоциональная палитра. Записываем, какие чувства были самыми яркими в течение года.
- Знаковые события. Выделяем моменты, которые оказали наибольшее влияние на нашу жизнь и работу.
2. Новые направления и изменения в услугах.
- Новые проекты. Описываем, какие направления мы запустили.
- Модификации в существующих услугах. Рассказываем об улучшениях в текущих проектах.
3. Преодоленные челленджи. Перечисляем трудности, с которыми мы столкнулись, и описываем, как с ними справились.
4. Успехи и достижения. Подчëркиваем победы и высокие позиции в различных рейтингах и конкурсах.
5. Рост и развитие. Измеряем, насколько увеличились обороты и другие ключевые показатели эффективности.
6. Яркие события года. Отмечаем знаковые достижения, например, титулы «Человек года» и «Агентство года».
7. Цели и напутствия на будущее. Формулируем основные задачи на следующий год и заряжаем команду.
Чек-лист, который помог нам выстроить законченную историю и вспомнить все яркие моменты годы, а также поставить цели на будущее
Особое значение для нас имеет культурный пласт. Мы вдохновляемся выставками, книгами, фильмами, а затем используем это в проектах. Отсылки к произведениям делают работу интереснее и глубже. Поэтому наши собственные истории напоминают постмодернизм. Это похоже на дорогу, усыпанную хлебными крошками: кто их заметит, тот дойдёт до сути. А если нет, то просто насладится интересным повествованием.
В прошлом году история про сумасшедшего кролика, испуганного оленя и преследующего их тигра была похожа на приключенческий фильм. В этом наша предновогодняя сказка получилась более размеренной.
В 2023 году мы активно выстраивали процессы внутри студии, рассказывали на различных ресурсах о том, что увидели и что нас впечатлило. Но это был некий «год в себе», когда мы смотрели внутрь, а не вовне. Мы понимали, что сосредоточение на внутренних процессах — это то, что мы можем контролировать и на что можем влиять. Мы провели некое упорядочивание: отринули всё, что нам не близко, и осознали, приняли то, что ценно. Мы честно ответили на вопросы «Кто мы?», «Что мы делаем?» и «Что важно прямо сейчас?»
Нина Калаус, СЕО студии «Магвай»
Внутренняя рефлексия и перестройка вылилась в то, что мы написали много статей, поработали с бизнес-консультантом, составили регламенты, провели ребрендинг и создали новый сайт. А впереди ещё открытие филиала в Берлине. Но это мы заглядываем уже в 2024-й. Не стоит спешить. Пока не прогремели куранты, мы всё ещё в 2023-м. Давайте не спугнём магию Нового года!
Никита Заславский,исполнительный директор студии «Магвай»
Если в 2022-м мы чувствовали, что проходили путь Алисы в Стране чудес, то в 2023-м рам казалось, что наша история похожа на сюжет из мультфильма о Коралине. Как и она, мы оказались в странных обстоятельствах, когда привычный мир выдаёт себя непривычными деталями. Нам нужно было найти выход — дверцу с табличкой «2024». Это настроение мы постарались передать на сайте.
Техническая часть
Чтобы и текст, и визуальные эффекты стали одним целым, нужен фронтенд-разработчик. Для нас важно выпустить отличный проект, поэтому над ним работала целая команда.
На все переходы и анимации были приложены референсы, поэтому команде разработки было не так сложно воссоздать задуманное. Вопрос возник лишь с переходом от зелёного фона к красному. Обсудили с дизайнерами и решили сделать иначе, получилось даже лучше.
Разработка заняла 2 недели. Проект реализовали на стеке HTML/Twig, SCSS, JS с использованием библиотек Gsap и Lenis под Galp.
***
Два месяца работы, и наша веб-сказка готова! Кроме времени и мастерства мы выложили в этот проект свои эмоции и поделились праздничным настроением. В этом году мы ощутили, что чудеса — там, где в них верят. С предвкушением ждём 2024-й! А пока настало время познакомиться с нашими героями и узнать, что же произошло за этот год.
Кейс проекта Итоги Года 2023
Мишка желает всем счастливого нового года и до встречи в 2024!
***
Хочешь еще больше полезностей от "Магвай"?
Подписывайся на наши соц. сети:
- Телеграм
- Сайт