🖼 Дизайн-макеты. Требования к исходникам

  1. Формат Sketch, Figma или Photoshop
  2. Элементы и их размеры должны быть привязаны модульной сетке
  3. Вся графика и блоки должны быть привязаны к пиксельной сетке
  4. В макете должны быть отображены различные состояния элементов макета (ссылок, кнопок, блоков, форм и т.д.), например, при наведении, элемент активен, элемент не активен.
  5. Графика в макете должна быть оптимизирована. Объем файлов должен быть разумным, размеры изображений не должны быть избыточными (обычно достаточно х2 от максимального размера блока, в котором они используются), сами изображения должны быть кадрированы.
  6. Все картинки должны быть приложены отдельными файлами, подготовленными для веба (прогрессивный JPG для фото, PNG для графики и схем, иконки — вектор).
  7. Если макет в Photoshop, то пиктограммы должны быть импортированы как smart-объект и приложены отдельно.
  8. Иконки должны быть переданы в формате AI или Sketch. Каждая иконка должна быть расположена на своем артборде. В общем случае, должна быть выполнена шейпом (Shape), а не обводкой (Stroke). Пример: https://material.io/guidelines/style/icons.html#icons-system-icons
  9. Все слои должны быть сгруппированы и названы в соответствии с их назначением (не должно быть Group 1 > Layer 2)
  10. Все шрифты должны быть приложены отдельными файлами. Исключение — шрифты из библиотеки Google Fonts (достаточно списка используемых начертаний).
  11. Изображения должны быть правильно кадрированы. В блоках изображения могут быть выровнены либо по центру, либо по одному из краев вертикально и горизонтально. Желательно избежать ситуации, когда положение изображения необходимо вручную подстраивать.
  12. В макетах желательно придерживаться единого стиля текстовых элементов, а также отступов между элементами. 4px/8px.
  13. Для стартовой страницы необходимо получить макеты для маленьких и больших экранов – 1024px, 1600px и 1920px по ширине.
  14. В работе необходимо учитывать следующие размеры экранов: Ориентировочные размеры окна, чтобы учесть возможные состояния отображения контента.
    1. Мобильные: 320–414 по ширине 
    2. Планшет: 768–1024 по ширине 
    3. Десктоп: 1024х600, 1280х600, 1366х600, 1440х700, 1600х700, 1920х800, 2560х1200
  15. Для каждой страницы обязательно должно быть минимум 3 макета: 
    1. десктоп (1280 по ширине), 
    2. планшет (768 по ширине)
    3. мобильная (320 по ширине).
  16. В макете не должно быть неактуальных данных, например, черновиков артбордов или отдельных элементов макета.
  17. Разделы сайта (сервиса, приложения) выносить в отдельные страницы (Pages для Sketch), а уже внутри делать состояние десткоп, планшет, смартфон.
  18. Элементы UI и их состояния выносить в отдельную страницу.
  19. Используемые стили шрифтов должны быть на отдельной странице.
  20. Используемые цвета должны быть на отдельной странице.
  21. Если присутствуют элементы с фиксированным позиционированием, то необходимо показать как будет отображаться контент, если он не помещается в отведенной для него области, а фиксированные элементы перекрывают его.
  22. Если заложена какая-то логика или анимации, необходимо делать пояснения в макете.
  23. Макеты для мобильной версии необходимо делать в 1х.
  24. При использовании крупного кегля шрифта, проверить помещаются ли длинные слова в ширину экрана мобильной версии макета.