Чеклист перед сдачей лендинга

Лендинг готов к передаче не тогда, когда закончен десктопный фрейм. Он готов, когда команда понимает порядок контента, поведение компонентов, адаптивные трансформации, состояния, требования к ассетам и критерии правильной реализации.

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

Контент и конверсия

• У страницы одна основная аудитория и одно главное действие.
• Первый экран объясняет предложение, адресата и результат нажатия.
• Уровни заголовков следуют структуре содержания, а не только визуальному размеру.
• Доказательство находится рядом с утверждением, которое поддерживает.
• Повторяющиеся обещания удалены либо подтверждены разными аргументами.
• Тексты кнопок называют действие.
• В макете есть финальные legal, error, empty и confirmation messages.
• Русская и английская версии проверены реальным контентом, если проект двуязычный.

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

Компоненты и состояния

• Каждый повторяемый контрол соответствует существующему компоненту либо имеет причину для создания нового.
• Названия компонентов в Figma совпадают со словарём handoff и кодом.
• Кнопки имеют hover, focus, active, disabled и loading там, где это нужно.
• Ссылки различимы не только цветом.
• Формы содержат labels, hints, required indicators, validation, errors, success и progress отправки.
• Навигация описывает open, closed, current, hover и keyboard focus.
• Для accordion, tabs, carousel, dialog и menu определены клавиатурное управление и перемещение focus.
• Отсутствующее изображение, длинный заголовок, короткий список и пустая подборка имеют осознанный результат.

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

Адаптивная раскладка

• Названы контейнеры, максимальная ширина, поля, колонки и интервалы секций.
• Объяснено, где многоколоночный макет переносится, складывается, скроллится или меняет порядок.
• Текст и контролы проверены между десктопным и мобильным фреймами.
• Для изображений заданы пропорции, crop, focal point и смена композиции по ширине.
• Декоративный overflow отделён от обязательного контента.
• Sticky-элементы не закрывают focus и важный текст.
• На ширине 320 CSS-пикселей страница не теряет информацию и не требует двумерного скролла, кроме действительно двумерного контента.
• Увеличение текста до 200 процентов не обрезает содержание и функции.

Auto Layout в Figma помогает моделировать padding, gaps, направление, перенос и ограничения. Финальная проверка проходит в браузере с настоящими шрифтами и контентом.

Accessibility

• Контраст обычного текста не ниже 4,5:1, крупного - 3:1 с учётом исключений WCAG.
• Важные границы контролов и индикаторы focus имеют достаточный non-text contrast.
• Клавиатурный focus видим и движется в смысловом порядке.
• Sticky header, cookie notice и открытая панель не скрывают сфокусированный элемент.
• Pointer targets имеют размер не менее 24 на 24 CSS-пикселя либо соответствуют правилам расстояния и исключениям WCAG 2.2.
• Цвет не является единственным сигналом ошибки, выбора или статуса.
• Изображения имеют полезный alt либо отмечены как декоративные.
• Движение имеет назначение и учитывает reduced motion.
• Видео получает нужные captions, controls и fallback.

Аннотация должна описывать ожидаемое поведение. Слово accessible без критериев проверить невозможно.

Ассеты и визуальные детали

• У каждого изображения есть финальный источник, право использования, формат, размеры и требования сжатия.
• SVG-иконки имеют согласованные viewBox и не содержат случайный фон.
• Для логотипов и иллюстраций подготовлены тёмные, светлые и компактные версии, если они нужны.
• Подтверждены семейства шрифтов, начертания, fallback и лицензии.
• Градиенты, тени, границы и радиусы используют токены либо документированные исключения.
• Подготовлены favicon, social image, title, description и sharing metadata.
• Декоративная графика не заменяет важный текст изображением.

Карта реализации

Передайте разработке или кодовому агенту:

• route и файл страницы;
• общие компоненты и пути импорта;
• источник токенов и темы;
• CMS-поля или источник контента;
• изображения и focal points;
• analytics events и адреса форм;
• feature flags и ограничения запуска;
• команды tests, lint, types, build и размеры для screenshots.

Отметьте фиксированные решения и области адаптации. Например, иерархия и порядок действий сохраняются, а декоративный crop может смещаться ради композиции.

Финальное визуальное ревью

Снимите реализованную страницу на согласованных ширинах и сравните с утверждённым дизайном. Разделите различия по причине:

• несовпадение контента;
• неправильный токен или компонент;
• рендеринг шрифта;
• адаптивная трансформация;
• состояние взаимодействия;
• обоснованная адаптация браузера.

После этого проверьте длинный текст, отсутствие медиа, клавиатуру, ошибки формы, загрузку и reduced motion. Идеальный скриншот не проверяет эти сценарии.

Создайте в Refframe доску референсов проекта и подпишите вклад каждого примера. Структура, типографика, движение и обработка изображений - разные решения. Handoff становится сильнее, когда источник решения можно найти и при этом не перепутать референс со спецификацией.