Для каждой компании дизайнеры обычно готовят свою памятку, но не всегда она есть. В этой статье я собрала заметки из своего опыта работы в Альфе, ВТБ и на фрилансе.
Навигация
Для начала, ваши макеты должно быть легко найти и понять что где лежит. Файл и страница должны быть понято названы. Частые проблемы, которые возникают на этом первом шаге: версионность и актуальность.
Чтобы решить проблему актуальности мы договорились, что перед названием файла я ставлю эмодзи, обозначающий статус файла:
✅ - макет уже на проде
💎 - разработка началась, дизайнеру нельзя трогать макет
⚔️ - макет в работе у дизайнера
С версионностью сложнее: какие-то экраны могут меняться, а какие-то оставаться неизменными несколько кварталов. В каждом файле есть страница с навигацией и правилами, так что заблудиться сложно
Помимо нейминга страницы я выделяю экраны, которые меняла, зеленой рамочкой и оставляю комменты с помощью плагина 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/
Согласования
Можно прописывать даты и имена согласовавших, чтобы не было потом сюрпризов
Пишите в комментариях, что забыто и ваши лайфхаки по передаче макетов в разработку!
