01Макет описывает поведение

Красивый основной экран — только часть интерфейса. Для формы нужны пустое состояние, ввод, ошибка, отправка и успех. Для каталога — загрузка, отсутствие результатов, длинные названия и недоступные изображения. Собери состояния там, где разработчик сможет найти их рядом с компонентом.

02Опиши адаптацию

Покажи несколько характерных ширин и объясни правило между ними: когда колонки складываются, как ведёт себя меню, где переносится заголовок. Не рассчитывай, что два скриншота сами зададут всю логику. Укажи минимальную ширину элементов и допустимые переносы.

03Наведи порядок в компонентах

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

04Подготовь текст и изображения

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

05Сделай короткую встречу

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

06Разработчик не должен угадывать поведение страницы

Представь макет формы, в котором показаны только пустые поля. Что происходит при ошибке? Как выглядит длинное имя? Что видит человек после отправки? Если эти моменты не обсудить, кто-то будет выбирать решения уже во время сборки сайта.

Покажи нужные варианты обычными экранами и короткими пояснениями. Для этого не нужно писать код. Если не знаешь техническое ограничение, задай вопрос разработчику. Хорошая передача — это понятная работа и доступные материалы, а не файл с максимальным числом комментариев.