Дизайн-система для БПС‑Сбербанка

Собрали конструктор из компонентов, который решает любую бизнес-задачу с минимальными усилиями

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

С помощью единых библиотек, гайдлайнов и стандартов команды дизайнеров и разработчиков смогут легко передавать проект друг другу. Это существенно удешевит внедрение и поддержку.
Экосистема БПС-Сбербанка
БПС
Дизайн-система — это набор правил, стандартов и компонентов, из которых складывается интерфейс. В нее входят:
Единая сетка
Стандартизация отступов и размеров
Типографика
Цветовая палитра
Работает как универсальный каркас для веба и приложений.
Помогает достичь единообразия макетов и верстки, оптимизировать код и ускорить загрузку страниц.
Подбираем шрифтовую гарнитуру и определяем текстовые стили.
Объединяет визуально все элементы.
Библиотеки компонентов
Состоит из элементов, которые будут переиспользоваться: меню, кнопки, списки, чекбоксы, поля, уведомления, формы и многого другого.
Шаблоны страниц
Иконографика
Фотобиблиотека
Ускоряют и удешевляют дизайн и разработку.
Яркие метафоры на все случаи жизни.
Большая база изображений в одном стиле. Для шапок страниц, баннеров, оформления продуктов и прочего.
Гайдлайны по графическому наполнению
Побеждают вкусовщину. В нем собраны правила подбора, ретуши, брендирования и передачи в разработку изображений.
Методика работы, коммуникации, согласований и контроля
Помогает правильно вести проект, писать отчеты и согласовывать замечания.
Соединяем банкинги, корпсайт, лендинги
и спецпроекты
Теперь они работают как бесшовный большой сайт с единой точкой авторизации. Подробнее о том, как она была создана и сколько вариантов мы перепробовали, расскажем отдельно.

Единая сетка
Ускоряет и упрощает работу дизайнеров и разработчиков. На ней строим все продукты БПС-Сбербанка.
Сетка была выработана по мере проектирования сайта, учитывает особенности контента и соответствует принципам single page application, заложенным в техническую реализацию платформы.
Миша Горах о тонкостях построения дизайн-системы. Скоро.
Портал и банкинг физлиц
Банкинг для бизнеса
Отступы и размеры
Размеры всех элементов и расстояния между ними стандартизированы и кратны восьми.
Это позволяет дизайнерам понимать друг друга и выдерживать единообразие макетов. Разработчиками отступы задаются централизованно, через компонент Spacer. Это дополнительно облегчает код и ускоряет загрузку страниц. А если имеющиеся пробелы не подходят — настраиваем их вручную, но только там, где это обоснованно.
Типографика
Мы выработали подробные правила использования фирменного шрифта. В качестве основной гарнитуры используем Sero Pro: выразительный, в меру сдержанный гротеск. Он хорошо подходит и для основного текста, и для заголовков.
БПС
Палитра
BPS Green
Базовый цвет.
Кнопки, иконки и элементы управления.
Additional #1
Плитки на разводной третьего уровня
Dark
Базовый темный.
Для типографики.
Additional #2
Плитки на разводной третьего уровня
Rainy
Вспомогательный цвет.
Широко применяется в банкинге юридических лиц.
Signal Red
Ошибка
Blue Link
Ссылки
Signal Orange
Предупреждение
Background Ocher
Акцентные подложки
Background
Дополнительный фон
Библиотека компонентов
Включает в себя сотни элементов: кнопки, иконки, чекбоксы, поля, заголовки, меню, списки, селекты, уведомления, модальные окна и многое-многое другое. Все компоненты подчиняются иерархии и строятся на базе мастер-компонентов. Меняем настройки элемента в библиотеке — и он обновляется во всех макетах.

Если мастер-компонент по каким-то причинам не используется, то готовим спецификацию или эталонный макет, по которому работают программисты.
Прорабатываем компоненты...


... и оформляем спецификации.

Гайд по графике
На платформе используются сотни картинок: в шапках, плитках, баннерах и продуктах. Все это фотобанк, а не уникальные фото: для экономии времени и денег клиента на большом проекте. Но взамен мы написали строгий и подробный гайдлайн по подбору и ретуши графики. Описаны требования к сюжетам, колориту, композиции и освещению. Отдельно оформлен стоп-лист, который блокирует шаблонные картинки с 3d-человечками, постановочными рукопожатиями и наигранными улыбками.

Следуя инструкции, даже неопытные дизайнеры или маркетологи смогут поддерживать контент на высоком уровне и в едином стиле.

Шаблонизация
Только на корпоративном сайте более 3 000 страниц, и отрисовать их все невозможно — это очень долго и дорого. Поэтому разрабатываем шаблоны страниц, которые наполняются заказчиком и разработчиками самостоятельно. Дизайнеры сопровождают, помогают и контролируют.
Основные типы страниц
1. Разводная 1 уровня
2. Разводная 2 уровня
3. Разводная 3 уровня
4. Страница карты
5. Страница продукта
6. Страница продукта для бизнеса
7. Новостная страница с текстом и графикой
8. Простая текстовая страница
9. Витрина со списком продуктов
Модальное окно
10.
БПС
Иконографика
Иконки универсальные и многократно переиспользуются: главное, чтобы метафора подходила.
Адаптивность
Каждый второй посетитель заходит на сайт с планшета или телефона. Поэтому сайт должен правильно работать на всех экранах.
БПС
Методика работы
Успех проекта зависел от правильно выстроенной коммуникации между тремя центрами внедрения решений: дизайнерами-проектировщиками, разработчиками и представителями различных отделов банка. Мы должны были взаимодействовать, как музыканты в оркестре.

Путем проб и ошибок мы выработали эффективную методику согласований и коммуникации, чтобы у всех команд было единое видение и работы велись слаженно и синхронно. Например, всю переписку перевели из мессенджеров в почту. Решения стали четкими и понятными: больше никакой игры со шрифтами.
Результат
БПС-Сбербанк — первый банк в Беларуси, и один из немногих в СНГ, с экосистемой, построенной на единой фронтальной базе.
Большой конструктор из компонентов решает любую новую бизнес-задачу с минимальными затратами: и сегодня, и в ближайшем будущем. Такая система легко поддается ребрендингу, а с помощью гайдлайнов и прописанных стандартов ее легко передавать между командами дизайнеров и разработчиков.



Вот что мы построили на этой дизайн-системе:
Корпоративный сайт
Конвертируем гостя в клиента

Скоро
Банкинг физических лиц
Наглядное управление деньгами

Скоро
Банкинг для бизнеса
Функциональный и простой в освоении

Скоро
Корпоративный сайт
Конвертируем гостя в клиента
Банкинг физических лиц
Банкинг для бизнеса
Наглядное управление деньгами
Функциональный и простой в освоении
Скоро
Скоро
Скоро

Команда

Александр Ревяко, Миша Горах, Саша Бохан, Дима Титарёв, Аня Лобанкова, Денис Янковец, Марк Жигман, Андрей Телего, Паша Павлов

Дальше

Рестайлинг айдентики чат–платформы Beesender

Помогли семейству продуктов для бизнес-коммуникаций найти себя и много ценной пыльцы.

Right

+375 29 263−56−13 Почта Фейсбук Инстаграм Телеграм О компании RU EN

Right

+375 29 263−56−13 Почта Фейсбук Инстаграм Телеграм О компании

RU EN