Для каждой компании дизайнеры обычно готовят свою памятку, но не всегда она есть. В этой статье я собрала заметки из своего опыта работы в Альфе, ВТБ и на фрилансе.

Навигация

Для начала, ваши макеты должно быть легко найти и понять что где лежит. Файл и страница должны быть понято названы. Частые проблемы, которые возникают на этом первом шаге: версионность и актуальность.

Чтобы решить проблему актуальности мы договорились, что перед названием файла я ставлю эмодзи, обозначающий статус файла:

✅ - макет уже на проде

? - разработка началась, дизайнеру нельзя трогать макет

⚔️ - макет в работе у дизайнера

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

Помимо нейминга страницы я выделяю экраны, которые меняла, зеленой рамочкой и оставляю комменты с помощью плагина Humaan Annotations

Ну и конечно не забываем:

• Все ваши макеты подписаны и стрелочки проведены между экранами

• Есть все точки входа в экран

• Версионность фичи указана и все экраны актуальны

• Слои названы на латинице по вашей ДС или просто понятно

• Скрытые объекты удалены

Адаптивы

Если начать кратко, то существуют резиновая и адаптивная верстки. Для начала следует определить какие элементы экрана будут растягиваться, а какие нет. Если вы не продумаете это сами - разработчик сделает так, как посчитает нужным он, и есть вероятность, что наши соцсети пополняться новыми мемами из разряда ожидание/реальность.

Сама я рисую следующие брейкпоинты:

• Если веб: 1920, 1440, 1280, 720, 360

• Если мобилка: android: 360, ios: 375, + планшет 700

Но если разбираться подробнее, то типичные сценарии использования следующие  

• Small Mobile 320 × 568 Старые модели iPhone, бюджетные телефоны. 

• Medium Mobile 360 × 800, 390 × 844
  Большинство современных Android и iPhone. 

• Large Mobile 412 × 915, 430 × 932
  Премиальные или крупноэкранные смартфоны. 

• Tablet (Portrait) 768 × 1024, 800 × 1280 iPad, Android-планшеты (вертикальная ориентация). 

• Tablet (Landscape) 1024 × 768, 1280 × 800 iPad, Android-планшеты (горизонтальная ориентация). 

• Laptop/Desktop 1366 × 768, 1440 × 900 Стандартные ноутбуки, дисплеи с низким разрешением. 

• Large Desktop 1920 × 1080, 2560 × 1440 Full HD и QHD мониторы. 

• Ultra-Wide 2560 × 1080, 3440 × 1440 Широкоэкранные мониторы, многоколоночные макеты.
  Источник: https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design

Картинки и иконки

• Картинки сжаты через tiny image (можно не покупать плагин, а воспользоваться бесплатно сайтом https://tinypng.com/) и лежат в облаке с неймингами на латинице

• Иконки доступны разработчику в свг. Популярный размер 24х24

• Если есть анимации - описаны поведения переходов и самих анимашек

Дизайн система

• Все объекты - компоненты, и они актуальны

• Отступы горизонтальные и вертикальные сверены

• Размеры шрифтов соответствуют

• Цвета все через токены/стили

• Темная и светлая темы отрисованы (при необходимости)

• Для айос и андроида использованы верные паттерны: навбар, модалки, клавы и так далее

Состояния

• Загрузка: скелетоны, лоадеры

• Пустой вид

• Онбординг

• Экраны успеха

• Экраны ошибок: отвалился интернет, ошибка с кнопкой повторить, ошибка без шанса на перезагрузку (всё сломалось), не подгрузилась часть контента

• Вид, где очень много контента, самые длинные слова

Тексты

• Дефисы, тире, ё, кавычки, знак минуса перепроверено

• Висячие предлоги прогнаны через типограф и в тексте есть элементы для разработчиков   https://www.artlebedev.ru/typograf/

Согласования

Можно прописывать даты и имена согласовавших, чтобы не было потом сюрпризов

Пишите в комментариях, что забыто и ваши лайфхаки по передаче макетов в разработку!