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

Когда я только пришла в компанию, первое, что бросилось в глаза, — как неудобно были организованы макеты в Figma. Рабочее пространство больше напоминало шкаф подростка, где вперемешку лежали чистая одежда и грязные носки, по классике у половины из них не было пары. Было трудно отыскать нужные экраны для задач и ещё сложнее определить их актуальность. В такие моменты важно говорить уверенно: да, было.

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

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

Итак, давайте по порядку, что это за правила.

ПРОЕКТ

Для всех макетов мобильного приложения он один. Как мы сохраняем чистоту на этом уровне:

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

2. Подписываем (? АРХИВ) и затемняем обложку файла, если сценарий/продукт стал архивным или его отдали под web-view.

3. Создаём отдельный файл только для новых и уникальных сценариев/продуктов.

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

ФАЙЛЫ СЦЕНАРИЕВ/ПРОДУКТОВ

Как сохраняем чистоту:

1. По умолчанию во всем файле используем светлый фон интерфейса #F5F5F5.

2. Минимальный состав файла:

   

3. Создаем отдельные страницы под крупные сценарии раздела. Например, новая страница для каждого пункта (listitem) блока. Располагаем в порядке размещения сценариев на экране↓.

   

4. Меняем архитектуру файла→ обновляем “Навигацию по странице”.

МЫ ОТКАЗАЛИСЬ ОТ ОБЩЕГО РАБОЧЕГО ПРОСТРАНСТВА

Недавнее коллективное решение, которое началось с несчастного случая. Во время показа дизайна на аудиторию 20+ человек перед моими глазами стали рушиться драгоценные макеты, исчезла половина контента, и тексты заменились на «рыбу». Сказать, что я обалдела, — ничего не сказать. Но благодаря ловкости рук я быстро включила историю файла, и макеты были успешно согласованы. Как вы могли уже догадаться, коллега случайно обновила библиотеку компонентов во всём общем рабочем файле.

Поэтому мы создали «In progress» в каждом отдельном файле сценария/продукта.
Из плюсов:

• уменьшили потенциальные проблемы при обновлении библиотеки компонентов;

• на одной странице собраны все текущие задачи дизайнеров, поэтому нам легко отследить будущее развитие продукта;

• продакт всегда знает, куда идти, чтобы быстро проверить статус его задач.

Из минусов:

• стало чуть больше открытых страниц в Figma, но, если честно, их и так было много (моя личная боль).

ОФОРМЛЕНИЕ МАКЕТОВ

Как сохраняем чистоту:

1. Группируем макеты. Нет чистого горизонтального и вертикального направления.

2. Для каждого сценария делаем версии ???.

3. Используем одни и те же стили для Section.

4. Подписываем отдельные части сценариев, экраны и web-view.

5. Добавляем карточку с продакт-менеджером и дизайнерами сценария/продукта
   (с ссылками на рабочие чаты).

6. Добавляем карточку описания задачи (состав карточки определяем сами).

7. Добавляем ченджлог в случае точечного изменения большого сценария.

ПОЛЕЗНЫЕ ПАТТЕРНЫ И ШАБЛОНЫ

У самурая есть только путь, а у нас — творческий процесс, поэтому мы всегда готовы что-то пересмотреть или улучшить. Для этого есть блок «Полезные паттерны». Здесь команда делится своими личными шаблонами, которые помогают им организовывать макеты, передавать их в разработку и сохранять актуальность.

Новинки, без которых теперь не обойтись:

1. Extra info или карточка дополнительной информации. В ней можно оставить комментарий аналитику, описать логику для разработчика или оставить послание будущему дизайнеру по задаче.

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

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

4. Question (для User Flow).

ПРЕЗЕНТАЦИИ ДЛЯ ВЛАДЕЛЬЦЕВ ПРОДУКТОВ

Держим марку до конца, поэтому даже для презентаций у нас есть отдельный файл и шаблоны/полезные рабочие практики.

Как сохраняем чистоту:

1. Делаем стартовую страницу с развилкой на все сценарии, которые хотим показать.

2. Помещаем в конце сценариев символ, который будет возвращать на стартовую страницу.

3. Генерируем QR-code на стартовую страницу и кладём рядом (тогда при показе не придётся переживать, что у кого-то из присутствующих нет ссылки на прототип).

   

Вуаля! Это секреты чистоты от команды мобильного приложения “t2”.
Делитесь опытом, а каким полезными правилами или шаблонами пользуетесь вы?