Все цифровые продукты будут в одном визуальном оформлении. О дизайн-системе НИУ ВШЭ

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

Что это?

Дизайн-система – набор компонентов, инструментов и процессов для повышения качества, и скорости создания, тестирования и обновления ИТ-продуктов, а также упрощения пользования ими.

9 ноября запущена первая версия системы. Она включает в себя основные блоки, такие как цвета, шрифты, таблицы, навигацию, айдентику, логику расположения элементов между собой, базовые иконки и библиотеку компонентов. Все это основные составляющие интерфейса, из которых собираются страницы и макеты (кнопки, переходы, ссылки и т.д.). Со всеми компонентами можно ознакомиться на сайте Design System.

Для чего?

Дизайн-система облегчает жизнь пользователей. Прежде всего, потому что достигается единообразие принципов работы интерфейсов и визуального стиля всех продуктов. Это позволяет пользователю легко ориентироваться в цифровых сервисах, не прибегая к изучению инструкции или дополнительной помощи. Такой интуитивный подход способствует быстрой работы с ними. А также повышает узнаваемость бренда, потому что все продукты выглядят целостно.

Все существующие продукты, начнут меняться, вбирая в себя компоненты дизайн-системы. Одними из первых оформлены в новом дизайне будут продукты SmartLMS и «Вышка.Навигация».

Пример, как визуально изменятся все продукты НИУ ВШЭ в будущем:

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

Пример, как выглядит дизайн-система для дизайнеров и разработчиков:

4 Причины использовать дизайн-систему при разработке

1. Экономия времени. Дизайнеры смогут быстрее создавать макеты из готовой библиотеки, а доступные готовые паттерны и код, значительно упростят тестирование компонентов и время разработки. Для этого нужно только импортировать элемент.
2. Упрощает передачу проекта другой команде, например, от дизайнеров разработчикам.
3. Достигается единообразие. При создании технического задания на разработку, дизайн-система создает «единую точку правды», которая отвечает на вопросы: как должен выглядеть компонент, какое у него должно быть поведение и как его тестировать?
4. Позволяет быстрее тестировать гипотезы. Благодаря тому, что достаточно из готовых компонентов собрать макеты и прототипы, можно понять слабые места ИТ-продукта или сразу передать его пользователям для тестирования, чтобы получить от них обратную связь.

Как использовать дизайнерам и разработчикам

На сайте Design System есть раздел по установке компонентов с инструкциями. Там же можно найти описание компонентов, их анатомию (из чего они состоят) и способы использования с примерами и рекомендациями.

Контакты для связи

Получить ответы на технические и организационные вопросы можно двумя способами:

1. Отправить письмо на e-mail: designsystem@hse.ru.
2. Добавиться в Telegram и написать свой вопрос в чате.