> ## Content Index > Fetch the complete content index at: https://admin.kod.ru/llms.txt > Use this file to discover other available public pages before exploring further. # Лучший сервис — это незаметный сервис: как ОТП Банк превращает дизайн в системный процесс - URL: https://admin.kod.ru/best-service-is-hidden-otp-bank/ - Published: 2025-07-18T12:53:44.000Z - Updated: 2025-07-18T12:54:05.000Z - Description: Редизайн — это не только про внешний вид. Это про архитектуру продукта, пользовательскую логику и устойчивость решений. - Author: OTP Bank - Tags: Блоги Редизайн — это не только про внешний вид. Это про архитектуру продукта, пользовательскую логику и устойчивость решений. В ОТП Банке за последние два года дизайн перестал быть обслуживающей функцией и стал полноценным инструментом роста. Рассказываем, как устроен этот процесс: от внутренних стандартов до редизайна интернет-банка и подхода к визуальному языку. ## От редизайна приложения к продуктовой системе Всё началось с задачи обновить веб-интерфейс интернет-банка. Цель — сделать сценарии проще, интерфейс современнее, а поведение пользователя предсказуемым. Однако точечного обновления стало недостаточно, и именно это послужило толчком к системным изменениям. Команда провела серию исследований: изучала сценарии клиентов, ошибки в навигации, отклик на конкретные решения. Так появился подход, где все экраны и сценарии выстраиваются по единому принципу, с опорой на поведение пользователя и реальную бизнес-логику. С этого момента команда сфокусировалась на двух аспектах: - **Лёгкость восприятия:** сделать интерфейс интуитивным для пользователей без технической подготовки. - **Высокая нагрузка:** обеспечить устойчивость под высокой нагрузкой. Бизнес-банкинг — это десятки операций в секунду, интеграции, сложные сценарии и постоянная работа с массивами данных. ## Сначала рамки, потом свобода На этапе проектирования важно было сохранить фокус и не потеряться в гипотезах. Для этого команда задала себе чёткие рамки — не как ограничения, а как систему координат, в которой проще выстраивать дизайн. Эти рамки разделили на два уровня: **Эмоциональный.** Как мы хотим, чтобы нас воспринимали: - Надёжность — через проработку всех возможных путей развития сценария - Скорость — через сокращение пользовательских шагов (CJ) - Прозрачность — через понятную коммуникацию с пользователем **Эстетический.** Что влияет на восприятие интерфейса: - Много воздуха, чтобы компенсировать высокую нагрузку - Простота — даже для тех, кто не взаимодействовал с кабинетами для юридических лиц ранее - Привычные паттерны — учитывается опыт работы с 1С, CRM и другими системами - Привычный повседневный UX — интернет-банк как продолжение сервисов, которые уже понятны - Забота — интерфейс помогает совершить нужное действие - Доступность — основные функции должны быть на виду - Адаптивность — на любых экранах, от монитора до смартфона - Визуальный стиль — сдержанный, корпоративный, но актуальный ## Визуальный язык: как собирается иконка Каждая иконка в интерфейсе — не просто пиксель, а решение. В ОТП Банке к ним подошли как к полноценной системе со своими правилами, логикой и жизненным циклом. 1\. Метафора: Иконка должна считываться моментально. Если пользователь задумывается над значением — значит, решение не работает. Поэтому команда опирается на знакомые визуальные образы и избегает излишней креативности там, где нужна предсказуемость. 2\. Референсы: Перед началом работы дизайнеры собирают визуальные референсы из открытых библиотек и продуктов с похожей логикой. Это помогает на этапе выбора метафоры, но никогда не превращается в копирование, каждый образ адаптируется под стиль продукта. 3\. Стиль: У стиля два слоя: - Эмоциональный — иконки должны соответствовать настроению интерфейса, поддерживать общий тон и эстетику бренда. - Технический — единая толщина линий, скругления, отказ от избыточной детализации. Чем проще иконка, тем быстрее она считывается. ![](https://admin.kod.ru/content/images/2025/07/image-61.png) 4\. Размеры и масштабирование: В паке используются разные размеры — 12, 16, 24 и выше. Каждый размер имеет свою логику построения: чем больше иконка, тем толще линии и больше радиусы скруглений. 5\. Рамки и сетка: Иконки проектируются внутри единой сетки, она помогает сохранить визуальное единство. Но если конкретная иконка чуть выходит за границы, а в паке смотрится лучше — такое решение допустимо. 6\. Оптическое выравнивание: Формально всё может быть по центру, но визуально — нет. Поэтому финальное выравнивание всегда проверяется вручную. ![](https://admin.kod.ru/content/images/2025/07/image-62.png) 7\. Нейминг: Названия — по изображённому объекту, а не по сценарию использования. Это упрощает поиск в библиотеке и даёт гибкость при переиспользовании. ![](https://admin.kod.ru/content/images/2025/07/image-63.png) 8\. Ассоциации и ключевые слова: Если образ неочевиден, в описание добавляют ключевые слова и альтернативные названия. Так пользователь быстрее находит нужное в паке. 9\. Нейминг векторов внутри иконки: Чтобы при замене иконки в макете сохранялись цвета и стили, внутри всех компонентов используются одинаковые названия слоёв. ## Редизайн, MVP и ребрендинг — всё сразу Запуск MVP совпал с началом ребрендинга: в банке утвердили новую палитру, гайдлайны и визуальный стиль. Классический зелёный сменился на лайм, и нужно было адаптировать весь интерфейс под обновлённую айдентику. ![](https://admin.kod.ru/content/images/2025/07/image-64.png) На всё у команды был один месяц. Мы пересобрала палитру: приглушила основные цвета, оставив лайм как акцент. Изменения провели через отдельную ветку, вручную проверили и обновили около 4000 макетов. Затем передача в разработку, ревью, доработка. ![](https://admin.kod.ru/content/images/2025/07/image-65.png) ![](https://admin.kod.ru/content/images/2025/07/image-66.png) Процесс оказался стрессовым, но показал, что система выдерживает изменения. А это и есть главный критерий устойчивого дизайна, когда можно быстро подстроиться под новое, не теряя смысла.