За свою карьеру я прошёл путь от тотального чайника до главного дизайнера и только господь Бог знает, что творилось в моих проектах.
![Хаос против порядка Хаос против порядка](https://habrastorage.org/getpro/habr/upload_files/f51/651/b4b/f51651b4b736433c050c99a51aaeba8e.png)
В этой статье я поделюсь своим опытом и некоторыми советами, как можно оптимизировать свой рабочий процесс и помочь команде лучше ориентироваться в ваших работах.
Больше полезных новостей и статей в моём канале про дизайн продукта и UX исследования:
Предисловие
Выполнив множество проектов и поработав с различными командами, людьми, продуктами, я понял, что нет какого-то универсального способа взаимодействия внутри. Кто-то из разработчиков не требовательный и может самостоятельно поправить некоторые элементы, например, поменять размер или текст в кнопке. А кто-то наоборот - без дизайнера и пальцем не пошевелит и это тоже правильно. Поэтому очень важно внедрять структуру и определённые процессы, которые помогут наладить взаимодействие команды с макетами без участия дизайнера.
Время - деньги
Все слышали это выражение. Но правильно ли вы его понимаете в разрезе дизайн процессов? Лично я осознал это только 2 года назад, когда стал главным дизайнером и спектр задач немного изменился.
Задумывались, сколько времени тратится в онлайн командах на созвоны / переписки и просто уточнение какой-то информации? А сколько денег на это уходит? Ведь час времени каждого из членов команды стоит определённую сумму.
![Если бы Календарь показывал, сколько денег сливается на созвоны... Если бы Календарь показывал, сколько денег сливается на созвоны...](https://habrastorage.org/getpro/habr/upload_files/e8e/c66/58c/e8ec6658cb76c78e8859460f500eb9f0.png)
И вот вы, со своим бардаком в макетах, отдаёте очередную выполненную задачу пиэму / разработке и они с ней работают, всё круто, ведь они в контексте этой задачи. Но представьте, что происходит с другими членами команды, например, в вашей компании несколько команд и другая команда находится в другой стране, как в моём случае. И кто-то из них захотел посмотреть на выполненную работу. Зайдя в фигму, он просто ничего не поймёт, ведь макеты будут разбросаны в беспорядке, не будет структуры и им придётся тратить своё и ваше время на выяснение что где лежитnot cool, right?
Моя фигма в прошлом
Это сущий кошмар. Нет никакой структуры, логики или чего-то осмысленного, просто макеты в ряд. Тогда это прокатывало только из-за того, что команда была всего 4 человека, и мы изначально работали в офисе и после перехода на удалёнку ребята уже ориентировались в моих макетах. Но так делать не стоит :)
![](https://habrastorage.org/getpro/habr/upload_files/d97/951/c4a/d97951c4a205e4ffaf4c2450b8b781a1.jpg)
![](https://habrastorage.org/getpro/habr/upload_files/886/847/ae0/886847ae0cac3c1d634e9bd87b61519c.jpg)
![](https://habrastorage.org/getpro/habr/upload_files/82c/f61/69b/82cf6169b987fb99255d66828bf85f33.jpg)
![](https://habrastorage.org/getpro/habr/upload_files/0be/36c/401/0be36c4017c1519c59d8236084e9dcb2.jpg)
Как я оптимизировал взаимодействие команды с моими макетами
Это заняло какое-то время, но сейчас работа над конкретной задачей выглядит примерно так:
После дизайна всех необходимых скринов создаётся Wrap section с полным названием задачи.
Рядом с этой секцией размещаем "Обзор" этой задачи и макетов. В этом обзоре вкратце пишем про саму задачу, какую проблему она решает, цели, способы решения и примеры использования.
Если появились новые элементы, то можно вынести их в отдельный мини UI-kit со всеми состояниями и способами взаимодействия.
Можно указать ссылку на саму задачу в Jira или другом таск трекере.
![Как это выглядело на этапе внедрения Как это выглядело на этапе внедрения](https://habrastorage.org/getpro/habr/upload_files/589/f8e/e1b/589f8ee1b3b730a050c2a2d8ef6a8056.png)
![Как это выглядит в финальном варианте Как это выглядит в финальном варианте](https://habrastorage.org/getpro/habr/upload_files/d49/4dc/de2/d494dcde21c40a942766166784ea0d78.png)
Данный способ помогает экономить много времени и, соответственно, денег. Ведь каждый член команды может зайти в любой проект и понять, для чего эти макеты и как они работают.
Способы позиционировать макеты в фигме
Вообще, это отдельная тема, но я расскажу вкратце про некоторые из них.
Способ №1 - Горизонтальное расположение
![](https://habrastorage.org/getpro/habr/upload_files/d2b/a21/4e1/d2ba214e10e7a6e8484013c09b803ce9.png)
Плюсы:
Частый способ позиционирования макетов.
Простота позиционирования.
Минусы:
Сложность считывания и восприятия макетов.
Поиск необходимых макетов в одном общем процессе.
Сложность нахождения начала и конца макетов, которые относятся для одной функциональности.
Большой объём занимаемой ширины пространства в проекте.
Способ №2 - Горизонтальное размещение и деление на строки
![](https://habrastorage.org/getpro/habr/upload_files/341/b09/5ed/341b095ed549f8f68b67dd0873f09ffd.png)
Плюсы:
Простота позиционирования.
Экономия пространства.
Можно разделять функциональность на блоки.
Минусы:
Отсутствие единообразного подхода.
Необходимо следить за этим и устанавливать правила и шаблон оформления.
Способ №3 - Микс горизонтального и строчного отображения + вертикальное отображение
![](https://habrastorage.org/getpro/habr/upload_files/182/5c7/4db/1825c74dbaf0cc7624d295374f191a22.png)
Плюсы:
Экономия пространства.
Можно разделять функциональность на блоки.
Простота позиционирования.
Минусы:
Отсутствие единообразного подхода.
Необходимо следить за этим и устанавливать правила и шаблон оформления.
Способ №4 - Вертикальное отображение
![](https://habrastorage.org/getpro/habr/upload_files/e1a/519/bac/e1a519bacf90521155359691c781f466.png)
Плюсы:
Быстрое понимание всех ключевых аспектов процесса и всей концепции.
Каждый экран интерфейса воспринимается как отдельный шаг в процессе.
Расположение дополнительных экранов для понимания глубины процесса.
Экономия пространства.
Минусы:
Последовательность расположения макетов может быть нарушена, если работают несколько дизайнеров.
Необходимо следить за этим и устанавливать правила и шаблон оформления.
Итог
Если правильно организовать свои рабочие процессы и навести порядок в макетах, то можно сэкономить не только своё время и силы, но и время команды.Расскажите про свой опыт и то, как вы организуете свои макеты в фигме?Сталкивались ли вы с проблемами и недопонимании со стороны команды?
AndrewYaremko
Я вырос на макетах в Фотошопе папках и файлах, когда контроля версий ещё не существовало. Сегодня, скилл находится в перманентном хаосе пригодился для выстраивания новых процессов взаимодействия с командой еде как продает овнера. В чем суть — свои макеты я перестал систематизировать от слова совсем, зато, начал систематизировать коммуникацию. И часть этой коммуникации — видеозапись и ютьюб. Вы как дизайнер и человек проведший десяток часов с проектом, уже машинально помните, где и что, и вам все кажется логичным, а фот фронтендер и проджект эти картинки видят в первый раз, при чем каждый раз, тк их основная работа в ином заключается. Потому любая структуризация будет сложной. Видео формат упрощает передачу. И служит подсказками. Если после 20 часов макетирования вы сочтёте, что нужно все разбить на пейджи, а потом ещё все перераспределить, то запись об изменениях, будет нагляднее, чем простой макет. Попробуйте, напишите как вам зайдет или нет