Дизайн-система - это набор компонентов, инструментов и процессов, которые упростят создание, тестирование, визуальное и техническое обновление ИТ-продуктов Высшей Школы Экономики, а также обеспечат единообразие их интерфейсов.
Единообразие. Дизайн-система обеспечивает единый визуальный стиль и принципы работы интерфейса. Продукты, реализованные с использованием Дизайн-системы воспринимаются как часть единого целого. Они работают одинаково, понятно и привычно. Это повышает узнаваемость бренда и облегчает жизнь пользователю.
Экономия времени. Благодаря тому, что большинство стандартных компонентов уже спроектировано и реализовано, дизайнер продукта может сосредоточиться на бизнес-логике своего продукта и своих особенных компонентах.
Удобство. Готовые компоненты удобно использовать через библиотеку Figma или наши кодовые библиотеки для React и Vue. Также вы можете сразу использовать компоненты ДС вместо абстрактных вайрфреймов для проектирования интерфейса.
Гибкость. Мы разрабатываем компоненты расширяемо, чтобы оставить свободу дизайнерам и разработчикам продукта. Вы можете комбинировать наши компоненты с особенными компонентами вашего продукта, чтобы создавать тот UX, который нужен именно вам.
Сервисами и приложениями ВШЭ пользуются самые разные люди. Все они: разных возрастов, с разным уровнем компьютерной грамотности, и с разной степенью возможностью взаимодействия с интерфейсом.
Чтобы обеспечить большинству пользователей приятный опыт взаимодействия с продуктами ВШЭ, интерфейсы должны соблюдать следующие принципы:
Контрастность. Текст в интерфейсе должно быть приятно читать. Рекомендуемая контрастность для текста: 4.5:1. Важные элементы на экране, такие как: кнопки, ссылки, элементы управления и другие активные элементы должны быть достаточно заметны, чтобы управлять вниманием пользователя и снижать когнитивную нагрузку.
Управляемость. Пользователь должен мочь полноценно пользоваться интерфейсом слюбого устройства: клавиатура, мышь, тачпад и т.д. Для этого контролы и активные элементы интерфейса должны иметь хорошо различимые и проработанные состояния. Отдельно стоит сказать про фокусное состояние. Это помогает пользователю восстановить контекст, если он потерялся или отвлекся.
Удобность. Важные элементы интерфейса нужно делать такими, чтобы их можно было просто и быстро нажать. Иконки, пункты меню и другие мелкие активные элементы интерфейса должны иметь область клика больше, чем они сами, для упрощения наведения и клика по ним.
Интуитивность. Стремитесь, чтобы реакции системы на действия пользователя были предсказуемы. Для этого, к примеру: подписывайте кнопки по их действию (удалить, найти, фильтровать, сохранить), на страницах загрузках сообщайте, что сейчас происходит, оповещения об ошибках должны содержать текст с решением проблемы, ссылки внавигации должны иметь название соответствующее содержанию страницы.
Консистентность. Продукты ВШЭ должны использовать айдентику бренда от продукта кпродукту: цвета, иконки, иллюстрации, типографика. Паттерны и принципы взаимодействия с интерфейсом также должны быть одинаковыми во всех продуктах ВШЭ.
Минимализм. Соблюдайте чистоту и ясность интерфейса. Не перегружайте экраны активными элементами. Прячьте функционал, которым будут пользоваться реже. Показывайте то, чем будут пользоваться чаще. Стремитесь, чтобы один экран выполнял одну конкретную цель пользователя.
Цель и польза. Любой элемент интерфейса будь-то кнопка, форма или контрол должен иметь цель использования, а текст — тем более. Решайте с помощью текста конкретные задачи: подсказывайте, доносите важную информацию, убеждайте. Не добавляйте текст, если он не несёт пользы.
Простота. Продуктами ВШЭ пользуются люди с разным уровнем возможностей и знаний о продуктах нашей экосистемы. Не используйте аббревиатуры или расшифровывайте их. Не используйте сложные, профессиональные, используемые в узких кругах термины — заменяйте на простые синонимы, либо не используйте совсем.
Краткость. Пользователь пропускает большие куски текста, так как в процессе взаимодействия с интерфейсом он хочет решить свою задачу, а не читать. Поэтому используйте минимум текста для донесения необходимой информации.
Вежливость. В коммуникации с пользователями через текст нам важно строить приветливую, вежливую, но в то же время серьёзную атмосферу. Поэтому в обращении к пользователю используйте местоимение «вы». В просьбах в интерфейсе используйте «пожалуйста», а в приветствиях «Здравствуйте» и так далее.
Если вы дизайнер нового продукта, то начните с гайда для дизайнеров.
Если вы разработчик продукта, то переходите к инструкции по установке.
Используете Дизайн-систему в своем продукте ВШЭ? Напишите нам для оперативной поддержки.