Как стать автором
Обновить

Как грамотно оформленная структура макетов в Figma помогает экономить время и деньги

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров8.3K

За свою карьеру я прошёл путь от тотального чайника до главного дизайнера и только господь Бог знает, что творилось в моих проектах.

Хаос против порядка
Хаос против порядка

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


Больше полезных новостей и статей в моём канале про дизайн продукта и UX исследования:

https://t.me/designtusovka


Предисловие

Выполнив множество проектов и поработав с различными командами, людьми, продуктами, я понял, что нет какого-то универсального способа взаимодействия внутри. Кто-то из разработчиков не требовательный и может самостоятельно поправить некоторые элементы, например, поменять размер или текст в кнопке. А кто-то наоборот - без дизайнера и пальцем не пошевелит и это тоже правильно. Поэтому очень важно внедрять структуру и определённые процессы, которые помогут наладить взаимодействие команды с макетами без участия дизайнера.

Время - деньги

Все слышали это выражение. Но правильно ли вы его понимаете в разрезе дизайн процессов? Лично я осознал это только 2 года назад, когда стал главным дизайнером и спектр задач немного изменился.

Задумывались, сколько времени тратится в онлайн командах на созвоны / переписки и просто уточнение какой-то информации? А сколько денег на это уходит? Ведь час времени каждого из членов команды стоит определённую сумму.

Если бы Календарь показывал, сколько денег сливается на созвоны...
Если бы Календарь показывал, сколько денег сливается на созвоны...

И вот вы, со своим бардаком в макетах, отдаёте очередную выполненную задачу пиэму / разработке и они с ней работают, всё круто, ведь они в контексте этой задачи. Но представьте, что происходит с другими членами команды, например, в вашей компании несколько команд и другая команда находится в другой стране, как в моём случае. И кто-то из них захотел посмотреть на выполненную работу. Зайдя в фигму, он просто ничего не поймёт, ведь макеты будут разбросаны в беспорядке, не будет структуры и им придётся тратить своё и ваше время на выяснение что где лежитnot cool, right?

Моя фигма в прошлом

Это сущий кошмар. Нет никакой структуры, логики или чего-то осмысленного, просто макеты в ряд. Тогда это прокатывало только из-за того, что команда была всего 4 человека, и мы изначально работали в офисе и после перехода на удалёнку ребята уже ориентировались в моих макетах. Но так делать не стоит :)

Как я оптимизировал взаимодействие команды с моими макетами

Это заняло какое-то время, но сейчас работа над конкретной задачей выглядит примерно так:

  1. После дизайна всех необходимых скринов создаётся Wrap section с полным названием задачи.

  2. Рядом с этой секцией размещаем "Обзор" этой задачи и макетов. В этом обзоре вкратце пишем про саму задачу, какую проблему она решает, цели, способы решения и примеры использования.

  3. Если появились новые элементы, то можно вынести их в отдельный мини UI-kit со всеми состояниями и способами взаимодействия.

  4. Можно указать ссылку на саму задачу в Jira или другом таск трекере.

Как это выглядело на этапе внедрения
Как это выглядело на этапе внедрения
Как это выглядит в финальном варианте
Как это выглядит в финальном варианте

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

Способы позиционировать макеты в фигме

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

Способ №1 - Горизонтальное расположение

Плюсы:

  • Частый способ позиционирования макетов.

  • Простота позиционирования.

Минусы:

  • Сложность считывания и восприятия макетов.

  • Поиск необходимых макетов в одном общем процессе.

  • Сложность нахождения начала и конца макетов, которые относятся для одной функциональности.

  • Большой объём занимаемой ширины пространства в проекте.

Способ №2 - Горизонтальное размещение и деление на строки

Плюсы:

  • Простота позиционирования.

  • Экономия пространства.

  • Можно разделять функциональность на блоки.

Минусы:

  • Отсутствие единообразного подхода.

  • Необходимо следить за этим и устанавливать правила и шаблон оформления.

Способ №3 - Микс горизонтального и строчного отображения + вертикальное отображение

Плюсы:

  • Экономия пространства.

  • Можно разделять функциональность на блоки.

  • Простота позиционирования.

Минусы:

  • Отсутствие единообразного подхода.

  • Необходимо следить за этим и устанавливать правила и шаблон оформления.

Способ №4 - Вертикальное отображение

Плюсы:

  • Быстрое понимание всех ключевых аспектов процесса и всей концепции.

  • Каждый экран интерфейса воспринимается как отдельный шаг в процессе.

  • Расположение дополнительных экранов для понимания глубины процесса.

  • Экономия пространства.

Минусы:

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

  • Необходимо следить за этим и устанавливать правила и шаблон оформления.

Итог

Если правильно организовать свои рабочие процессы и навести порядок в макетах, то можно сэкономить не только своё время и силы, но и время команды.Расскажите про свой опыт и то, как вы организуете свои макеты в фигме?Сталкивались ли вы с проблемами и недопонимании со стороны команды?

Теги:
Хабы:
Всего голосов 3: ↑3 и ↓0+3
Комментарии3

Публикации

Истории

Работа

Веб дизайнер
27 вакансий

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
AdIndex City Conference 2024
Дата26 июня
Время09:30
Место
Москва
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область