UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид

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

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

Одна из ранних версий UI kit, который использовали несколько команд для нескольких продуктов «Ак Барс Банка»

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

Веб-дизайнер Брэд Фрост популяризировал аналогию эволюционного усложнения – подход Atomic Design{7} для организации дизайн-процесса

Так атом «кнопка» может объединиться с атомом «поле ввода», чтобы стать элементом «поисковая строка».

Атомы и составленная из них молекула дизайн-системы

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

Так и создатели дизайн-систем пришли к выводу, что необходимо выделить составляющие элементов интерфейса – дизайн-токены (Design Tokens).

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

Дизайн-токены компании Salesforce – базовые элементы дизайн-системы

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

Подробнее о дизайн-системах можно узнать в интеграторе Adele{8} от UX-Pin – это самое большое собрание дизайн-систем.

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

UI kit

UI kit – это набор элементов и компонентов (состоящих из нескольких элементов) пользовательского интерфейса.

Раздел компонентов «Альфа-Банка»

Начинающим я рекомендую не изобретать велосипед, а создавать UI kit на основе уже существующих наборов, обратившись, например, к Pinterest.

Модульные сетки

Современные цифровые продукты создаются, как правило, сразу под несколько экранных разрешений.

Соответственно, очень важно для всех элементов выработать правила поведения при адаптации к разным размерам.

При разных шагах адаптивности для каждого элемента выделяются разные доли экрана (модули).

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

Paradigm – дизайн-система Mail.ru Group, раздел с модульными сетками

Для старта советую обратить внимание на уже обкатанные дизайн-системы вроде Bootstrap или Google Material Design и строить модульную систему на их основе.

Bootstrap grid – проверенная временем «резиновая», адаптивная модульная сетка

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

Типографика

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

Раздел с типографикой дизайн-системы iOS, помимо самих правил построения, содержит подраздел для разработчиков, где описывается правильная организация кода

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

Для быстрого погружения в основы типографики рекомендую книгу «Основы стиля в типографике» Роберта Брингхерста[61]. Лучше читайте бумажную версию на английском языке, в обложке, как на иллюстрации ниже. Это издание сверстано по всем описанным внутри правилам, что добавляет ему ценности.

The Elements of Typographic Style

Для тренировки визуального восприятия с точки зрения актуальной эстетики рекомендую начать с агрегаторов типа siteinspire.com.

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

Пиктограммы