Формальные сведения обо мне

Резюме

Antares

Bites

Отдела дизайна платформы V

Design Portal

Инструмент дизайна и разработки

Дизайн-переменные

Сравнилка

Выбирай, копируй, качай

Emoji брауузер

Трекер задач и конструктор

SberTrack 2.0

Flow Designer

Печаталка

Система управления рекламой

LOQSTOQ

WE DAT

Редизайн для мобильного приложения

GN Smart App

Электронное голосование

Дизайн система и интерфейсы

ГАС «Выборы»

Центр безопасности корпоративного уровня

Kaspersky Security Center

Корпоративный хранитель экрана KSN

Screensaver 3D

Избранное

## Задача

В течение года я, `ведущий проектировщик` и&nbsp;руководитель направления в `Сбертех` на `Платформе V`, работал с&nbsp;командой отдела дизайна над&nbsp;следующими задачами:

-   Сбор и&nbsp;анализ информации об&nbsp;использовании в&nbsp;компании UI-китов и&nbsp;общих подходов к&nbsp;построению интерфейсов (шаблонов).
-   Стилизация или выравнивание внешнего вида всей линейки продуктов.
-   Предоставление командам разработки ресурсов и&nbsp;инструментов для&nbsp;быстрого развертывания приложений с&nbsp;требуемым уровнем UI/UX.

## Решение

- В&nbsp;результате аналитической работы по&nbsp;использованным китам был разработан инструмент [«Сравнилка&#8220;](/case/compare/).
- Также&nbsp;был создан портал&zwj;&ndash;&zwj;песочница [«Байтс&#8220;](/case/bites/).
-   Была разработана и&nbsp;внедрена первая версия [«дизайн&zwj;&ndash;&zwj;переменных&#8220;](/case/designttokens/), которая затем эволюционировала во вторую версию.
- Кроме&nbsp;того, нашей командой был разработан и&nbsp;реализован [портал команды дизайна](/case/dp/), на&nbsp;котором разместились инструменты, стандарты и&nbsp;документация.
-   Мы также&nbsp;записали подкасты для&nbsp;инструктажа и&nbsp;демонстрации работы инструментов, например, по&nbsp;использованию дизайн&zwj;&ndash;&zwj;переменных.
-   Проведено десятки митапов для&nbsp;дизайнеров и&nbsp;разработчиков по&nbsp;различным темам.

---

# О&nbsp;Дизайн&zwj;&ndash;&zwj;системе

> `"Антарес"` - это набор, объединяющий классические концепции дизайн&zwj;&ndash;&zwj;системы, фреймворк (по умолчанию Ант Дизайн), инструменты и&nbsp;ресурсы, необходимые для&nbsp;разработки и&nbsp;дизайна продуктов Платформы. Он также&nbsp;включает пользовательские сценарии и&nbsp;описание ролей пользователей, включая коммуникацию и&nbsp;дизайн&zwj;&ndash;&zwj;сервис отдела дизайна платформы. Дизайн&zwj;&ndash;&zwj;система относится к&nbsp;пользовательским интерфейсам продуктов категории B2B и&nbsp;решает задачи их пользователей.

Она включает в&nbsp;себя:

-   `Стандарт` проектирования пользовательских интерфейсов платформы.
-   `Инструменты`, такие как&nbsp;"Контекст" и&nbsp;"Дизайн&zwj;&ndash;&zwj;переменные".
-   `Принципы` - базовые понятия, правила, рекомендации, диалог пользователя и&nbsp;системы.
-   `Публикации` - митапы, новости, видео&zwj;&ndash;&zwj;обзоры и&nbsp;видео&zwj;&ndash;&zwj;инструкции.
-   `Сообщество` - экспертиза отдела дизайна, чаты дизайнеров и&nbsp;проектировщиков, а&nbsp;также чаты фронтальной разработки и&nbsp;поддержки, а&nbsp;также чат новостей.

Название происходит от&nbsp;сочетания двух слов: названия фреймворка Ant Design и&nbsp;слова&#8220;Resources&#8221;, означающего ресурсы или инструменты (Ant&Resources). Также&nbsp;это ярчайшая звезда в&nbsp;созвездии Скорпиона и&nbsp;одна из&nbsp;ярчайших звёзд на&nbsp;ночном небе.

## Дизайн&zwj;&ndash;&zwj;сервис

С учетом ограниченных ресурсов (дизайнеров, проектировщиков, экспертов), мы разработали методологию, которая позволяла нашей команде оперативно реагировать на&nbsp;различные запросы. Это включало консультации по&nbsp;улучшению юзабилити, дизайну, стилям, а&nbsp;также вопросам брендирования или внедрения UI-фреймворков. Мы также&nbsp;предоставляли ресурсы, такие как&nbsp;шрифты, пиктограммы, переменные, шаблоны интерфейсов, а&nbsp;также занимались проектированием макетов интерфейсов для&nbsp;продуктов.

### Схематическое представление

Мы использовали стандарт проектирования в&nbsp;качестве одного из&nbsp;гарантов соблюдения принципов и&nbsp;стиля дизайн&zwj;&ndash;&zwj;системы.

![Схема 1](sheme.png)
![Схема 2](sheme-2.png)

## Иллюстрации

В рамках презентации общего подхода и&nbsp;смысла, заложенных в&nbsp;эту деятельность, были представлены различные срезы изображений.

![Изображение 1](sheme-3.png)
![Изображение 2](sheme-4.png)
![Изображение 3](sheme-5.png)
![Изображение 4](sheme-6.png)
