МТС Бренд портал. Цифровая экосистема

  • Portal
  • Ecosystem
  • Web

24 июня 2024

Собрали всё, что нужно — от смыслов до гайдов — для быстрого погружения в бренд МТС.
  • Дизайн
  • Разработка

В 2023 году компания МТС провела ребрендинг и решила создать бренд портал, чтобы познакомить своих сотрудников и соискателей с новым визуальным стилем. Было важно, чтобы сайт не просто объединял гайдлайны в одном месте, а рассказывал, какие ценности компании отражает новая айдентика и вдохновлял дизайнеров сотрудничать с брендом. За дизайном и разработкой бренд портала команда МТС обратилась к нам.

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

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

Фотостиль МТС состоит из обязательных холодных и тёплых цветовых пятен: синий цвет отвечает за диджитал, а красный — за энергию и жизнерадостный характер бренда. На сайте бренд портала пользователь может взаимодействовать с фотостилем — посмотреть, как выглядит фотография до обработки с применением отдельно холодного (синего) и отдельно теплого (красного) оттенка, а также двух оттенков вместе.

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

В новом бренд портале нам удалось соединить практическую пользу с вдохновляющими визуальными элементами. В результате получилась обобщающая точка входа в весь дизайн МТС.

Для разработки сайта наша команда использовала фреймворк Next.js, язык программирования TypeScript, сборщик модулей Webpack, REST API и синтаксис SCSS.

Ксения Сергачёва

Руководитель центра по работе с брендом МТС

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

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

Над проектом работали

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