Гайд для новичков в дизайн системе

Совсем недавно, я услышала массу вопросов от своих друзей, которые только начинали работать с гидами по стилю (или дизайн системой), и большинство вопросов звучали так:

«С чего мне начать?»

«Что я буду делать, если у меня закончатся ресурсы?»

«Что если я — единственный дизайнер в небольшом стартапе или у нас маленькая дизайн команда и у нас нет дизайнера или разработчика, чтобы мне помочь с этим?»

Будучи дизайнером в маленькой команде (сейчас мы быстро растем и у меня есть мой друг — фронтенд разработчик и прекрасные сотрудники), я хотела бы поделиться своим опытом касательно работы с дизайн системой, особенно с частью «Как мне начать».

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

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

Шаг 1 — Полностью осознайте суть вашего продукта и составьте список компонентов

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

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

Шаг 2 — Создайте компоненты в Sketch

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

Для создания страницы с цветом, определите первичный и вторичный цвета. Затем цвет акцента и другие цвета. Далее, сгенерируйте различные тени для этих цветов (если вы используете material design в качестве вашего основного дизайн языка, такой инструмент, как angular color generator поможет вам создать тени.)

компоненты в Sketch

Для создания страницы со шрифтами, создайте список стилей типографики по мере использования: основной заголовок, второстепенный заголовок, лейблы, основной контент и текст на кнопке.

материал дизайн типографика

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

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

Sketch 43

Вы можете задавать разные состояния каждому компоненту. Например: активное состояние, ховер, неактивное состояние, и т. д. Убедитесь, что эти элементы прорисованы идеально в каждом своем состоянии. Вам не следует создавать разные размеры компонентов потому, что это за вас сделает Sketch (узнайте об опциях ресайза в Sketch 39).

Совет: Craft — удобный инструмент для создания совместной библиотеки.

Бонус: Вы можете использовать Inspect или Zeplin для создания идеальной спецификации элементов.

Sketch Craft

Шаг 3 — Документируйте принципы дизайна, правила и шаблоны

Рада, что вы дошли до самого трудного 🙂

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

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

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

Вот вам 2 хороших примера: macOS Human Interface Guidelines и Material design guidelines. Material design guidelines включает в себя моушн, стиль, лейаут, компоненты, шаблоны и множество примеров мобильного дизайна. С другой стороны, гайдлайны Apple включают в себя основные компоненты для платформ: iOS, macOS, watchOS и tvOS (у каждой платформы одинаковые правила).

Human Interface Guidelines

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

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

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

Еще один шаг (опциональный) — Внедрите в библиотеку код

Если у вас есть друг — фронтенд разработчик, или у вас достаточно скиллов для этого, вы можете создать живую библиотеку.

Хорошими примерами кодированных библиотек могут служить: Lighting design system и Angular material library. Разработчики смогут запросто найти нужный компонент по имени класса и, это сильно упростит им работу. Они смогут копипастить готовый код из библиотеки без опасения пропустить баг, или чего-то не понять.

Для управления вашей библиотекой вы можете воспользоваться GitHub.

Дизайн система Predix от компании GE на основе Atomic Design