[Все доки](https://hackmd.io/@simadsgn/ry_u5tC6O)

# Структура макетов Web-интерфейсов

Макеты интерфейсов разбиты по отдельным проектам. Каждый проект соответствует определённому сервису сайта sima-land.ru, все сервисы перечислены [здесь](https://gitlab.sima-land.ru/dev-dep/dev/simaland-pages?page=2).

У нас есть отдельные проекты под макеты шапки, футера, карточки товара, корзины и так далее.

Проекты разбиты на отдельные файлы: каждый файл отведён под отдельный функционал данного сервиса (фичу). Например в проекте шапки есть файлы с основным дизайном шапки, а также файлы "Поиск", "Каталог", которые являются составляющими.

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

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

## Как работать с новой задачей?

Вы начали выполнение новой задачи #003, по её условиям необходимо добавить дни недели в календарь. Открываем последний пейдж в нужном макете.

Для начала создадим новый пейдж, в названии укажем номер задачи и кратко опишем суть. Перед названием временно добавим пометку “Draft”, чтобы разработчики не ориентировались на этот макет до согласования. Вновь созданный пейдж должен содержать все те же макеты, что и последний актуальный пейдж. Для удобства можно создать его копированием пейджа предыдущей задачи - тут #002.

Теперь вносим необходимые изменения в новый пейдж: добавляем дни недели в календарь. Доработанный макет отправляем дизайнерам и проджект-менеджеру на согласование.

Ура, макет утверджден! Убираем из наименования пейджа пометку “Draft” и переносим его на верх списка. Ссылку на пейдж прикрепляем к задаче в Гитлабе.

## Внутри каждого пейджа:
- находятся макеты под десктоп и мобильные экраны во всех разрешениях, которые указаны в гайде [Grid Layout](https://www.figma.com/file/ZFjFlCsCM0rrtPraZwbj6l/Grid-Layout) от большего разрешения к меньшему
- Сделаны заголовки для серий фреймов по типу "Шапка Desktop", "Шапка Mobile" и тд. Заголовки написаны крпуно, чтобы можно было увидеть сразу. У заголовков сохраняется иерархия: самые крупные обозначают платформу (desktop, mobile), заголовки поменьше обозначают вариации функционала.

- показаны состояния для блоков из данного макета. Если блок повторяется в макетах нескольких проектов, имеет смысл сделать из него компонент и описать его поведение уже в [глобальных гайдах на компоненты](https://hackmd.io/@simadsgn/Bk8iTs6TO)
- отрисованы связи фреймов, чтобы любой зашедший в файл мог понять, в каком порядке экраны идут друг за другом и как работают элементы внутри них.

Чтобы показать связи между фреймами, удобно использовать плагин для Figma — [AutoFlow](https://www.figma.com/community/plugin/733902567457592893/Autoflow).