Привет, Хабр! Меня зовут, Артём Кокшаров, я ведущий дизайнер-проектировщик интерфейсов в Рунити. В этой статье хочу рассказать о библиотеках для дизайн-систем и продуктовом графическом дизайне. Это легкочитаемый текст для дизайнеров с картинками на десять минут. Честно говоря, я думал завалить нейронку вопросами, чтобы она нагенерила статью — и она это сделала, но читать оказалось нереально. Поэтому я написал от себя и на своем опыте. Погнали!

Навигация по тексту

• Введение

• Компоненты библиотеки

• Шаг, модуль, пункт, айтем, степ

• Шрифт

• Цвет

• Прочее

• Для чего это нам?

Введение

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

По сути, я сейчас описал своеобразный интерактивный гайд с основами, на которые нужно опираться разработчикам. Конечно, можно без них, но тут наши полномочия, как говорится, всё.

Библиотека может быть и простой, и сложной. Важно, чтобы она подходила разработчикам, и в ней было сложно затеряться. А главное, чтобы её было легко и дёшево поддерживать. На этот процесс, как правило, уходит несколько месяцев, но должно выглядеть так, как будто бы потребовалось всего пять минут.

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

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

Компоненты библиотеки

Из каких элементов состоит библиотека:

• шаги (они же модули, они же пункты, как будет угодно),

• шрифт,

• цвет,

• анимация,

• тени,

• углы,

• системные компоненты для описания перечисленного внутри файлов.

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

Шаг, модуль, пункт, айтем, степ

Роль шага — быть основой всего. Это структурный элемент для организации и стандартизации компонентов интерфейса — они собираются на его числовых значениях. Например, скругления углов у кнопки и других компонентов заданы одним модулем и меняются одновременно при изменении значений в этом модуле. Шаг обеспечивает повторяемость (многократное использование в различных контекстах), контролируемость и гибкость интерфейса (быстрая адаптция для различных случаев использования, что позволяет дизайнерам и разработчикам легко настраивать свои процессы под конкретные требования). 

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

Шрифт

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

Что даёт шрифт, как элемент библиотеки? Позволяет оставаться в рамках бренда и следовать его идентичности, то есть помогает установить узнаваемый стиль и ассоциировать его с вашим продуктом у аудитории. Можно ещё описать читаемость и удобство, но это понятно любому дизайнеру и визионеру. Очевидно, что удачно подобранные шрифты обеспечивают хорошую читаемость, что важно для пользователей при взаимодействии с вашим продуктом. И как итог — значения и стили шрифтов в вашей библиотеке должны быть описаны значениями модулей.

Цвет

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

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

Прочее

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

Для чего это нам?

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

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

Чтобы вникнуть «быстрее и лучше», словами классика, можно изучить существующие открытые библиотеки и дизайн-системы, например, скачать в соответствующем разделе на сайтах Apple и Android. Или найти в Figma — там сейчас встроены их стандарты, плюс некая простая дизайн-система. Этого достаточно, чтобы понять, как они устроены, как собраны графические элементы на основе библиотеки по заданным там значениям.

Дизайн-система и библиотека компонентов дают четкое понимание, как должны выглядеть и вести себя элементы, благодаря единому, унифицированному визуальному языку, который принимают и маркетологи, и дизайнеры, и разработчики, и владельцы продукта. И не забудьте про документацию! Каждый модуль обычно сопровождается документацией, описывающей его использование, стили, размеры, состояния (например, активное, неактивное) и поведение. Спасибо за внимание!