Концепция
Масштабирование
Next.js
TypeScript
Webpack
REST API
SCSS
В 2023 году компания МТС провела ребрендинг и решила создать бренд портал, чтобы познакомить своих сотрудников и соискателей с новым визуальным стилем. Было важно, чтобы сайт не просто объединял гайдлайны в одном месте, а рассказывал, какие ценности компании отражает новая айдентика и вдохновлял дизайнеров сотрудничать с брендом. За дизайном и разработкой бренд портала команда МТС обратилась к нам.
При создании бренд портала мы опирались на новый стиль экосистемы МТС. Сайт разделили на смысловые блоки, которые посвящены отдельным константам бренда. Было важно, чтобы пользователь видел не только красивый дизайн, а сразу понимал, как работают составляющие фирменного стиля МТС, поэтому с визуальными элементами в каждом блоке можно взаимодействовать.
Внутри экосистемы МТС есть разные цифровые продукты. Дизайн каждого продукта имеет свой характер и визуальные особенности, но при этом связан с общем стилем МТС.
Фотостиль МТС состоит из обязательных холодных и тёплых цветовых пятен: синий цвет отвечает за диджитал, а красный — за энергию и жизнерадостный характер бренда. На сайте бренд портала пользователь может взаимодействовать с фотостилем — посмотреть, как выглядит фотография до обработки с применением отдельно холодного (синего) и отдельно теплого (красного) оттенка, а также двух оттенков вместе.
Важная часть дизайн-системы МТС — контролсы. Это элементы интерфейса, которые могут работать как кнопка, слайдер, контейнер для текста. Они напоминают элементы интерфейса смартфона и подчёркивают, что МТС создаёт цифровые приложения. Их мы тоже сделали кликабельными, чтобы пользователи могли понять, как они работают.
В новом бренд портале нам удалось соединить практическую пользу с вдохновляющими визуальными элементами. В результате получилась обобщающая точка входа в весь дизайн МТС. Для разработки сайта наша команда использовала фреймворк Next.js, язык программирования TypeScript, сборщик модулей Webpack, REST API и синтаксис SCSS.
За время разработки нового бренда у нас собралось много отдельных документов и рабочих файлов, которыми пользуются все, кто так или иначе соприкасается с дизайном и коммуникацией. Мы создали этот портал для быстрого погружения любого нового сотрудника или партнёра в бренд МТС и его основные черты. А также собрали в одном месте все компоненты айдентики. Для лучшего вовлечения мы добавили интерактивные блоки, которые выполняют роль демо — в игровой форме знакомят пользователя с общим принципом того или иного дизайн-решения, объясняют, почему они такие и какая за этим стоит идея.