Всем привет! Меня зовут Денис, я руководитель департамента дизайна в DLS, а также ревьюер в Яндекс Практикуме на курсах «UX/UI дизайнер интерфейсов» и «Дизайн мобильных и кросс-платформенных приложений». 

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

Дизайн-система, UI-кит, гайдлайн и визуальный язык

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

Термин обычно используется для описания систем дизайна цифровых продуктов.

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

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

Основные составляющие дизайн-системы:

• Гайдлайны и руководство по визуальному языку

• Фреймворки

• UI-киты, шаблоны

• Наборы UX-паттернов

• Библиотеки компонентов

• Документация, правила, рекомендации

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

UI-кит (User Interface Kit) — это набор готовых визуальных элементов интерфейса, с которым может работать дизайнер. UI-кит удобен для быстрого прототипирования, но не обязательно регулирует, как эти элементы должны функционировать или взаимодействовать друг с другом.

Особенностью кита является то, что он фокусируется на отдельных компонентах, содержит «готовые детали» системы и минимум комментариев по их применению. Он содержит такие элементы, как иконки, кнопки, поля ввода, чекбоксы, карточки, дропдауны и другие визуальные компоненты.

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

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

Пример визуального языка — узнаваемый стиль оформления автомобилей BMW: характерные фары, фирменная решетка радиатора. Визуальный язык определяет базовые принципы создания продуктов и решений.

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

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

Мы разобрались с базовыми понятиями, вернёмся к дизайн-системам. 

Преимущества дизайн-систем

У дизайн-систем масса преимуществ, поэтому я рекомендую обязательно внедрять их в ваши проекты, если вы ещё этого не сделали.

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

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

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

Масштабируемость продукта. При расширении функционала продукта новые элементы легко интегрируются без нарушения принципов дизайна.

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

Примеры отечественных дизайн-систем

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

B2B Center — отечественная площадка торгов для бизнеса.

BSS — D2Design, библиотека компонентов для построения банковских приложений.

Cloud.ru — Snack Uikit, библиотека компонентов компании Cloud.ru и сообщества TeamSnack.

Gravity UI — дизайн-система с открытым исходным кодом для разработки современных интерфейсов.

HSE — дизайн-система ВШЭ.

ISPsystem — российский разработчик платформ для управления IT-инфраструктурой во всём мире. Материалы системы в фигме.

IVI — кроссплатформенная версия дизайн-системы от команды онлайн-кинотеатра.

Mail.ru Group — портальная дизайн-команда постепенно унифицирует продукты.

БАРС Груп — дизайн-команда крупного федерального разработчика работает над унификацией продуктов для государства и бизнеса.

VKUI — система крупнейшей отечественной социальной сети VK.

Газпром нефть — дизайн-система технологического лидера нефтегазового рынка России.

Госуслуги — гайды Госуслуг по интерфейсу и тексту. Рекомендованы для всех государственных сервисов.

Дизайн государственных систем — единая платформа для сайтов государственных органов и учреждений.

Контур — экосистема продуктов для бизнеса.

МегаФон — дизайн-система «МегаФона».

Райффайзенбанк — дизайн-система одного из заметных российских банков. Макеты системы в фигме.

Рамблер — дизайн-команда одного из крупнейших отечественных порталов.

Росатом — дизайн-система Росатома.

Ростелеком — один из крупнейших телекомов.

Т-Банк — библиотека компонентов дизайн-системы «Тинькофф» с открытым исходным кодом.

Центр Финансовых Технологий — дизайн-система для веб-приложений ведущего российского финтех-провайдера.

Яндекс — платформа от создателей БЭМ для унификации продуктов компании.

Развивайте насмотренность, делайте продукты более удобными и консистентными с помощью дизайн-систем. Спасибо за внимание к моей публикации!

Дополнительные материалы

lorrrem | Дизайн привычных вещей — мой телеграм-канал о дизайне, подписывайтесь :)

Что такое дизайн-система и как её создать — статья в Блоге Практикума.

Дизайн-система и визуальный язык — статья на Википедии.

Дизайн-система. Определение понятия — статья Андрея Сундиева на Хабре.

КОД. Клуб отечественных дизайн-систем — каталог отечественных дизайн-систем.