Как настроить себя на работу над дизайн системой

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

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

“С чего мне начать?”

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

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

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

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

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

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

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

1 tKxH3 CcwHl0TpPWGCrv4g 80x54 - Как настроить себя на работу над дизайн системой
Мой список компонентов

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

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

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

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

1 r StH0Z8x25WgvgBMhQzTw 80x48 - Как настроить себя на работу над дизайн системой

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

1 EEOIq6v63bimPhhO7Ct4tQ 80x49 - Как настроить себя на работу над дизайн системой

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

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

1 CIHSfuCu5YVs3zL9rs RHQ 80x41 - Как настроить себя на работу над дизайн системой

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

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

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

1 S1FDFNdLDSjg Aq WAXhUg 80x45 - Как настроить себя на работу над дизайн системой

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

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

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

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

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

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

1 R9wyWo91wmYu91alY iUlg 80x47 - Как настроить себя на работу над дизайн системой

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

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

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

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

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

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

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

Оригинал: Wen Wang

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи
article section code og 4 80x42 - Организация пространства в дизайне. Отступы, сетки и лейауты

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток
190521 teamgemini clopin 860x860 80x42 - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma
1 5 80x42 - Развитие дизайн-системы: Как мы создавали Slack Kit

Развитие дизайн-системы: Как мы создавали Slack Kit

Это развивалась постепенно, на основе полученного нами опыта. В этой статье я расскажу вам, как мы ее создавали