Старый стиль строился на прямых углах, строгой геометрии и плотных композициях. Когда-то он помогал бренду выделяться, но постепенно страницы и рекламные материалы стали выглядеть перегруженными. Пользователю приходилось сначала разбираться в структуре, а уже потом переходить к содержанию.
Команда проекта:
Сергей Асташкин — арт-директор;
Михаил Жирнов — senior-дизайнер;
Алёна Шушпанникова — UX/UI-дизайнер;
Анастасия Шпагина — графический дизайнер;
Софья Кузнецова — AI-дизайнер;
Виктория Перфильева — junior-дизайнер.
Не просто освежить оформление
Перед командой стояла задача не просто обновить дизайн, а создать единую систему, которая будет работать на сайте, в сервисах, рекламе, рассылках и коммерческих материалах. При этом важно было сохранить фирменный оранжевый цвет и узнаваемость бренда.
Работу начали с аудита. Команда собрала материалы из разных подразделений, изучила сайт, рекламные лендинги, письма и презентации. Отдельно проанализировали поведение пользователей: какие блоки они просматривают, где останавливаются и до каких предложений не доходят.
Исследование подтвердило, что избыток текста и сложная структура замедляют движение по страницам. Одновременно стало заметно, что отдельные визуальные решения плохо сочетаются между собой и их трудно переносить на новые форматы.
«Нам было важно посмотреть шире нашего непосредственного рынка. Я исследовал айдентику крупных технологических компаний, их сайты, лендинги, рекламные кампании и то, как одна концепция развивается на десятках разных носителей. Мы искали не отдельный красивый приём, а принцип, из которого можно постоянно получать новые решения»
Сергей, арт-директор
Оранжевый как источник света
Основой новой айдентики стала концепция «Свет и тени». Фирменный оранжевый начали использовать как образ солнечного света, а к нему добавили прохладный сине-серый оттенок. Вместо тяжёлой геометрии появились свободное пространство, мягкие линии, градиенты, блики и ощущение движения.
Эти принципы распространили на фотографии, иллюстрации и 3D-графику. В кадрах отказались от стереотипных образов бухгалтера или подчеркнуто делового руководителя. Героями стали современные предприниматели, которых можно встретить в небольшом офисе, кофейне или на складе.
Брендовый цвет при этом не накладывается поверх фотографии как декоративный эффект. Он становится частью сцены — проявляется в освещении, предметах, одежде и интерьере. Такой подход помогает сохранять узнаваемость, не превращая каждое изображение в демонстрацию фирменных приёмов.
«Мы начали использовать новые правила ещё до того, как айдентика была полностью закончена. В промежуточном брендбуке уже были градиент, палитра, скругления и первые принципы фотостиля, но многие элементы продолжали меняться»
Вика, junior-дизайнер
Новый знак и человеческие персонажи
Для новой системы разработали и логотип. Команда рассмотрела около 60 вариантов, включая знаки на основе букв и бухгалтерских ассоциаций. От буквальных решений в итоге отказались в пользу абстрактной формы, которая может работать самостоятельно или вместе с названием компании.
«В какой-то момент работа над логознаком превратилась в своеобразную игру в пингпонг. В финале остались три направления. Параллельно мы работали с текстовым написанием названия компании. Выбранный шрифт Geologica я переработала специально для логотипа»
Настя, графический дизайнер
Параллельно появились маскоты бренда — мужчина с усами и кудрявая девушка в очках. Это не условные животные или карикатурные персонажи, а современные люди с узнаваемыми чертами. Их можно использовать в бытовых, деловых и ироничных сюжетах, связывая разные рекламные материалы между собой.
Сайт стал короче и полезнее
Отдельной частью проекта стало обновление сайта. Нужно было не только изменить цвета и изображения, но и упростить путь пользователя.
Внутри страниц появились элементы мини-приложений: калькуляторы, формы, подборки и другие интерактивные инструменты. Пользователь может решить небольшую задачу прямо в контентном блоке, не переходя на отдельную страницу.
Для длинных страниц разработали механику scroll-swipe. По вертикали пользователь перемещается между основными блоками, а по горизонтали — между состояниями внутри одного блока. На мобильных устройствах это работает как привычные свайпы. Страница визуально становится короче, хотя полезное содержание сохраняется.
«Механика scroll-swipe появилась из конкретной проблемы: длинные страницы с большим количеством текста пользователи просто не проходили до конца. Мы разделили движение на две оси. Так мы сокращаем видимую длину страницы, но не отказываемся от полезного содержания»
Алёна, UX/UI-дизайнер.
В интерфейсе появилась цветовая иерархия. Оранжевый обозначает основные действия и целевые предложения, чёрный используется для управления интерактивными элементами, серый — для второстепенных переходов. Благодаря этому назначение кнопок можно понять ещё до прочтения текста.
Разные маршруты для разного бизнеса
Структуру сайта адаптировали под разные этапы развития бизнеса. Отдельные маршруты предусмотрены для тех, кто только собирается открыть своё дело, недавно начал работать или уже давно ведёт бизнес.
Для каждого сегмента меняются предложения, инструменты и последовательность блоков, но все страницы остаются частью одной системы.
Нейросети встроили в рабочий процесс
При разработке графики команда использовала нейросети, однако задача заключалась не в создании отдельных эффектных изображений. Нужно было получить воспроизводимый процесс, которым смогут пользоваться разные специалисты.
Поэтому последовательности генерации и обработки зафиксировали в инструкциях, а готовые 3D-объекты, иллюстрации, фотографии, иконки и сцены с маскотами собрали в библиотеки.
«Самое сложное было добиться воспроизводимости. Такой процесс дольше простой генерации, но именно он позволил получать серию связанных изображений. В результате 3D выглядело как единый авторский язык, а не как набор картинок из разных источников»
Соня, AI-дизайнер
Ещё одним элементом стал живой градиент. Его цветовые центры движутся, смешиваются и реагируют на действия пользователя. При этом система учитывает производительность устройства: может снижать интенсивность движения или показывать статичное изображение, если анимация создаёт лишнюю нагрузку.
Редизайн внедряют поэтапно
Новая айдентика внедряется поэтапно. Её элементы уже используются в продуктах, рекламе, лендингах и performance-коммуникациях. Обновлённая главная страница, меню и страницы для разных сегментов аудитории проходят финальное тестирование.
«В процессе интеграции найденных решений в новые лендинги стало понятно, какие компоненты действительно универсальны, а какие требуют слишком много ручной адаптации. Постепенно система стала не ограничением, а конструктором: мы могли собирать разные страницы быстрее, сохранять общий характер бренда и не начинать каждую задачу с нового визуального поиска»
Миша, senior-дизайнер
Первые рекламные кампании показали, что новые визуальные решения привлекают больше внимания, чем прежние. Однако основные результаты редизайна можно будет оценить после того, как система заработает во всех каналах.
Главным итогом стала не отдельная версия логотипа или сайта, а набор связанных инструментов, которые можно развивать дальше. Новая система сохранила узнаваемый оранжевый цвет, но сделала коммуникацию «Моего дела» легче, дружелюбнее и технологичнее.
Начать дискуссию