Что такое дизайн-система и зачем она нужна? Разбираем на примере кейса ВШЭ

Как мы приводим к единому знаменателю разнообразные цифровые продукты самого диджитализированного университета России

На сегодняшний день у ВШЭ работают несколько отдельных диджитал продуктов, множество сервисов, от сайтов факультетов и отдельных направлений до собственных цифровых проектов, как «Вышка.Digital». Все они стилистически должны принадлежать к одному семейству, быть узнаваемыми вышкинскими продуктами, сохраняя при этом и свою эксклюзивность. Именно для таких случаев и создается дизайн-система, которая, как набор кубиков лего, позволяет легко и быстро собирать качественные и узнаваемые продукты. В этой статье мы расскажем, как создали и продолжаем развивать дизайн-систему для Вышки, одного из самых инновационных университетов страны.

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

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

Мы выпускали каждый элемент по отдельности, как продуктовые фичи, создавая и наполняя библиотеку блоков.

Скрупулезно обрабатывая каждый элемент системы, мы уже набрали достаточную для работы базу, которая включает в себя:

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

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

Существует и оригинальный вышкинский шрифт — HSE Sans, разработанный под разные ситуации — заголовки, подзаголовки, подписи, мелкий шрифт для особых случаев и т.д. Помимо самого шрифта, дизайн-система регулирует длину строк, межстрочный интервал, отступы между блоками и компонентами, жирность и другие важные детали, обеспечивая сохранность фирменного стиля.

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

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

Плоды своей кропотливой работы вы начинаете собирать почти сразу. Во-первых, дизайн-система значительно снижает затраты (вообще всего — денег, времени дизайнеров и разработчиков и т.д.) при реализации новых продуктов.

Дизайнеры и разработчики могут создавать схематические наброски из готовых базовых элементов библиотеки, не затрачивая много сил и времени на разработку, согласования и исправления — готовые элементы системы уже одобрены и протестированы. В среднем, создание сервиса с помощью блоков дизайн-системы снижает время производства новых продуктов до 2-х дней.

А UI-киты позволяют создавать макеты с высокой точностью и скоростью и значительно снижают риски — ведь они дают возможность посмотреть, как дизайн будет выглядеть в жизни, сразу отметить его слабые места и быстро исправить с помощью готовых блоков. С UI-китом можно быстро собрать два-три варианта и протестировать их.

Во-вторых, разработанная дизайн система упрощает взаимодействие пользователей, уже знакомых с экосистемой ВШЭ.

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

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

И самое главное — дизайн-систему нельзя разработать раз и навсегда. Созданная библиотека всегда должна обновляться — нужно постоянно мониторить ситуацию, разрабатывать недостающие элементы или убирать невостребованные рудименты. Участники системы должны быть в курсе последних апдейтов, чтобы говорить на одном языке. Поэтому очень важно разрабатывать развернутые инструкции, релевантные как для дизайнеров, так и для разрабов во всех цифровых продуктах.

Кстати, дизайн-система Вышки будет реализована в ближайшее время, и мы постепенно будем приводить под единый знаменатель все университетские цифровые продукты. И это будет процесс не из быстрых. Век учись — век обновляй дизайн-системы!