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

Резюме

Antares

Bites

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

Design Portal

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

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

Сравнилка

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

Emoji брауузер

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

SberTrack 2.0

Flow Designer

Печаталка

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

LOQSTOQ

WE DAT

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

GN Smart App

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

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

ГАС «Выборы»

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

Kaspersky Security Center

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

Screensaver 3D

Избранное

# О&nbsp;продукте и&nbsp;его назначении

> Kaspersky Security Center – это единая **консоль управления** и&nbsp;мониторинга, которая упрощает администрирование всех корпоративных устройств – мобильных, физических и&nbsp;виртуальных.

![Принцип](concept.png!concept_mobile.png 'Инфо&zwj;&ndash;&zwj;айсберг')

Около 3 раз, продукт пережил **полный ребрендинг**. Более **1000+ макетов** в&nbsp;нескольких программах проектирования были отрисованы. Более **10 международных и&nbsp;локальных пользовательских исследований** проведено. Более **15 лет разработки кода**, лучшими из&nbsp;лучших экспертов Лаборатории под&nbsp;капотом.

В итоге глядя на&nbsp;продукт, вы видите только последнее изменение и&nbsp;только картинку, одну, небольшую картинку, скрывающую весь **масштаб проделанной работы**, как **айсберг**.

## Участие

с 2015 по&nbsp;2020, с&nbsp;разной степенью вовлеченности и&nbsp;загрузки

#### Роль

-   `Дизайнер-проектировщик`
-   `Тим-лид` команды проектирования. В&nbsp;разное время от&nbsp;2 до&nbsp;4 проектировщиков интерфейса, и&nbsp;1-2 графических дизайнера со&nbsp;стороны нашего отдела.
-   `Координатор` с&nbsp;командой фронтальной разработки и&nbsp;заказчиком. Около&nbsp;четырех различных команд, разрабатывающих различные блоки. Нужна была картина целиком, для&nbsp;соответствия разных частей друг другу, как&nbsp;в плане UX, так&nbsp;и UI.

---

# Примеры интерфейса

Классическая раскладка виджет панелей.

![Панель управления / Главная страница](dashboard.png!dashboard_mobile.png)

### Управление объектами

Большую часть интерфейсов составляют списки управляемых объектов и&nbsp;их свойства.

![Управление списком политик](example1.png!example1_mobile.png)
![Свойства политики](example3.png!example3_mobile.png)
![Управление / Одна из&nbsp;функций](example2.png!example2_mobile.png)

В основном однотипные экраны с&nbsp;точки зрения паттернов проектирования. Однако, сделано это, в&nbsp;том числе умышленно для&nbsp;"узнаваемости" и&nbsp;повышения «обучаемости", а&nbsp;так же «предсказуемости" интерфейса в&nbsp;ежедневной работе.

![Типичные полотна прототипов](alotof.png)

---

# Примеры концепций

Нам пришлось придумать некоторые подходы, уникальные для&nbsp;этого проекта, учитывая его специфику.

### Навигация

Навигация, уже сейчас во многих проектах имеет вертикальный, складываемый вид. Но тогда это было новое веяние. Осложнялось все тем, что навигация была нелинейной и&nbsp;имела связь с&nbsp;вложенными структурами (деревьями).

![Навигация](navigation.png!navigation_mobile.png)

### Мастер шаблоны

Разрабатывались с&nbsp;целью унификации общей разметки (layout). Для&nbsp;простоты автогенерации совместно с&nbsp;используемым «движком форм"

![Мастер страницы](master_templates.png)

### Концепция подсветки изменений

В виду большого объема редактируемых данных, в&nbsp;том числе на&nbsp;вложенных уровнях, потребовалась индикация, для&nbsp;напоминания и&nbsp;уверенности во вносимых изменениях. Подсветка областей и&nbsp;точечные элементы возле&nbsp;пунктов навигации.

![Концепция подсветки изменений](changes_con.png)

### Концепция панельных уровней

В декстопной версии продукта, существовала большая проблема из&nbsp;за модальностей. Блоки вложенных настроек вызывались в&nbsp;модальных окнах, которые перекрывали друг друга, и&nbsp;такое могло доходить до&nbsp;5-7 окна&hellip; Эта специфика софта, который содержал слишком много настроек одного очень большого объекта. Частично проблему удалось решить через&nbsp;модальные панели. Они накладывались друг на&nbsp;друга последовательно, оставляя в&nbsp;верхней части путь для&nbsp;ориентирования.

Более подробная механика так&nbsp;же на&nbsp;следующем макете.

![Концепция хлебных крошек](breadcrumbs.png)

Здесь показан механизм последовательного сохранения порции составных настроек. Эта схема позволила договориться с&nbsp;командой разработки о&nbsp;едином поведении интерфейса.

![Концепция сохранения изменений](save_changes.png)

---

# Фан ант

Изучая Blender 3d сделал такие обои на&nbsp;рабочий стол.

![](1920_wallp.jpg)
![](3d_asset.png)
