Словарь для языка дизайна

Часть III. Составление UI Kit

В части II мы рассмотрели, как создать общий язык дизайна. В этой части мы рассмотрим, как сделать словарь для нашего языка. В Части IV (Бонус) мы расскажем, как распространить словарь и как сделать так, чтоб ваша команда его приняла.

Словарь - это набор слов, которые составляют язык. В мире дизайна это называется UI Kit (хотя некоторые люди называют его набором инструментов - toolbox). Чтобы составить словарь, вы должны знать, какие «слова» вы хотите определить. Итак, начните с составления списка всех элементов пользовательского интерфейса, которые, по вашему мнению, вам нужны в вашем продукте. Это могут быть такие вещи, как кнопки, панели инструментов, навигация, поля ввода и другие элементы, характерные для вашего продукта. Храните их в электронной таблице и отсортируйте их по уровню приоритета, чтобы сначала сосредоточиться на наиболее важных. Имейте в виду, что эти элементы - всего лишь первый шаг. Скорее всего, вы станете идентифицировать больше элементов, когда начнете работу.

Когда команда разработчиков использует UI Kit, они тратят меньше времени на принятие дизайнерских решений и больше времени на то, что действительно важно... на самом деле. Имейте в виду, что проектирование с помощью UI Kit происходит быстрее, чем без него... Подробнее об этом позже. Кроме того, UX дизайнеры могут перестать зависеть от Visual дизайнеров. Им не нужно будет проверять, соответствует ли дизайн спецификациям - UI Kit делает это вместо них.

Инструменты

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

Если вы не знакомы со Sketch, я бы рекомендовал вам посмотреть некоторые уроки, прежде чем погрузиться в создание UI Kit. У Pablo Stanley есть потрясающий материал на его канале Youtube.

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

Структура

Я структурирую свои UI Kit посредством страниц, которые помогают пользователю перемещаться по документу:

I. Добро пожаловать | Начало работы - введение в UI Kit. Что это такое и как его использовать.

Цвет: цветовая палитра включает в себя оттенки и тени.
Типография: все стили типографии, доступные для использования.
Пространство: объяснение 8-точечной сетки и мобильных макетов.
Глубина: спецификации теней кнопок и полей.
Руководство по стилю: коллекция всех элементов пользовательского интерфейса, сгруппированных по типу или контексту.
Шаблоны: шаблоны страниц, созданных как символы для удобства.
Элементы пользовательского интерфейса: «Кухонная мойка» всех наших элементов пользовательского интерфейса для дизайна.

II. Символы: здесь измените элементы, чтобы они соответствовали внешнему виду вашего продукта.

III. Место работы: место, где вы можете играть и создавать страницы с элементами / символами UI Kit.

Создание фонда

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

1. Создайте таблицу стилей.

Она будет иметь анатомию вашего пользовательского интерфейса (цвет, типография, пространство и, надеюсь, иконографию).

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

2. Цвет: создание общих стилей в эскизе для всех оттенков (базовые цвета) в вашей таблице стилей.

Создайте символ для каждого оттенка. Убедитесь, что они имеют одинаковые размеры. Это важно.

3. Типография.

Объявите все текстовые стили.

4. Иконография.

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

Когда это возможно, работайте с SVG, так как они лучше, чем Icon Fonts.

5. Пространство.

Задайте свою сетку

Задайте свои макеты.

Это будет зависеть от типа платформы, для которой вы проектируете. Сделайте символы для каждого макета.

6. Глубина.

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

Создайте символ для каждой тени. Убедитесь, что они имеют одинаковые размеры.

Создание элементов пользовательского интерфейса

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

Примечание. При составлении элементов, старайтесь думать о том, как будет писаться кодом этот элемент (я не говорю, что вам следует научиться кодить, но, как минимум, вы должны быть знакомы с Box Model и HTML-структурой). Все элементы пользовательского интерфейса имеют контейнеры, определенные в коде. Подумайте о контейнерах как о <div> в HTML.

Вот и все. Теперь вы можете начать создавать элементы интерфейса, которые будут согласованными между собой! Помните: разработчики всегда будут писать в коде то, что вы им дадите. Поэтому, ваша система проектирования и элементы в вашем наборе UI Kit должны быть согласованными. В следующем посте мы поговорим о том, как поделиться своей системой дизайна и набором пользовательского интерфейса с вашей командой.

А вот пример того, что вы можете сделать при помощи UI Kit: