Дизайн-система для ВШЭ

Главное о кейсе

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

The HSE design system will be implemented in the near future, and we will gradually bring all University digital products under a single denominator. The main components have already been developed and will soon be included in a single library, which will be constantly updated. We have a competent and expressive design-system that restricts the flight of imagination with clear principles that reflect the brand itself and its basic pillars, but also retains significant creative freedom.

Бизнес-задача и ее решение

Нашей главной целью с самого начала работы было покрыть как можно большее количество сервисов ВШЭ. Поэтому мы начали работу с комплексного анализа всех имеющихся продуктов — сайтов, подразделений, отделений.
Далее мы приоритезировали компоненты дизайна всех продуктов по частоте их использования. После мы начали разработку разных блоков по разработанной приоритетности, выпуская их как продуктовые фичи, каждый по отдельности, создавая и наполняя библиотеку блоков.
В итоге получилась дизайн система, включающая в себя:
Общие принципы подхода к дизайну — основные правила работы дизайн-системы.
Визуальный язык — логотип, иконки, паттерн, слоган и т.д. — набор визуальных констант, кубиков лего, обеспечивающих внешнюю узнаваемость и схожесть разных продуктов.
Дизайн-токены — цвет, типографика, модуль и сетка, размеры и отступы, прозрачность и закругление углов — это базовые элементы визуального языка.
Библиотека компонентов — технические блоки интерфейса, атомы, из которых разработчики собирают страницы и макеты вместе с их состояниями, вариациями и размерами для различных ситуаций.
Инструкции по использованию системы для дизайнеров — набор технических правил, которые позволяют всем говорить на одном языке и передавать информацию быстро и понятно.

Our main goal was to cover with design-system as many HSE services as possible. That's why we started working with a comprehensive analysis of all available products — websites, divisions, and departments.
We prioritized the design components of all products by their frequency of use. After that, we started developing different blocks according to the developed priority, releasing them as product features, each separately, creating and filling the library of blocks.
As a result we have a design-system that includes:
General principles of the design approach — the basic rules of the design system.
Visual language — logo, icons, pattern, slogan, etc. — a set of visual constants, LEGO blocks that provide external recognition and similarity of different products.
Design tokens — color, typography, module and grid, dimensions and margins, transparency and rounded corners. These are the basic elements of the visual language.
Component library — technical interface blocks, atoms, from which developers assemble pages and layouts together with their states, variations, and sizes for different situations.
Instructions for designers and developers — a set of technical rules that allow everyone to speak the same language and transmit information quickly and clearly.

Прочая информация о кейсе

Дизайн-система — набор готовых универсальных элементов и блоков, который помогает значительно ускорить разработку сайтов ВШЭ и снизить затраты на работу дизайнеров и разработчиков. Система также способствует сохранению единой стилистики разных сервисов университета.
Design system is a set of ready-made universal elements and blocks that helps significantly speed up the development of HSE sites and reduce the cost of works. The system also helps to maintain the same style of different services of the University.

Скриншоты