Что проверить в макете перед передачей на разработку
Краткое резюме
Статья содержит чек-лист для подготовки макетов к передаче в разработку. Описаны требования к адаптации экранов, изображениям, иконкам, дизайн-системе, состояниям, текстам и согласованию работы.
**Подготовка макетов к передаче в разработку**
**Общие требования**
* Все макеты подписаны, между экранами проведены стрелки.
* Указаны все точки входа на экран.
* У функций обозначена версия, все экраны актуальны.
* Слои имеют названия на латинице в соответствии с дизайн-системой или просто понятные.
* Удалены скрытые объекты.
**Адаптация**
Для веб-версий предусмотрены адаптивные размеры экранов: 1920, 1440, 1280, 720, 360 пикселей (или по вашему усмотрению).
Для мобильных устройств:
* Android: 360 пикселей;
* iOS: 375 пикселей;
* планшет: 700 пикселей (или по вашему усмотрению).
**Изображения и иконки**
* Изображения сжаты с помощью инструмента tiny image и размещены в облаке с названиями на латинице.
* Иконки доступны разработчикам в формате SVG, популярный размер — 24x24 пикселя.
* Если есть анимации, то описаны поведения переходов и самих анимаций.
**Дизайн-система**
* Все объекты представлены в виде компонентов и актуальны.
* Горизонтальные и вертикальные отступы сверены.
* Размеры шрифтов соответствуют заданным параметрам.
* Цвета используются через токены/стили.
* При необходимости отрисованы тёмная и светлая темы.
* Для iOS и Android применены соответствующие паттерны: навигационная панель, модальные окна, клавиатуры и т. д.
**Состояния**
* Загрузка: скелетоны, индикаторы загрузки.
* Пустой вид.
* Онбординг.
* Экраны успеха.
* Экраны ошибок: отсутствие интернета, ошибка с кнопкой «повторить», ошибка без возможности перезагрузки (всё сломалось), неполная загрузка контента.
* Вид с большим количеством контента, включая самые длинные слова.
**Тексты**
* Перепроверены дефисы, тире, буква «ё», кавычки, знак минуса.
* Висячие предлоги обработаны с помощью типографа.
* В тексте есть элементы для разработчиков (https://www.artlebedev.ru/typograf/).
**Согласования**
Рекомендуется указывать даты и имена согласовавших, чтобы избежать неожиданностей в дальнейшем.
Пожалуйста, поделитесь в комментариях, если что-то упущено, и расскажите о своих лайфхаках по передаче макетов в разработку!