Checkli

Template

Чек-лист проверки макета

Использовать перед передачей макета на реализацию

Template

Структура и общие страница

Логика дизайна описана в отдельном документе

Все шаблоны, слои, элементы дизайна имеют адекватные названия

Есть страница, отображающая поведение полей ввода, кнопок и пр. интерактивных элементов в различных условиях (hover, clicked, with errors, validated)

Есть страница с типографикой: заголовки h1-h6, текст, ссылки, ритм\отступы (если есть)

Есть страница с набором цветов для всего дизайна, в макете не используются цвета вне этого набора

Одни и те же элементы дизайна выглядят и ведут себя одинаково на каждом экране

Для каждого экрана есть макет компоновки элементов для десктопа (>768px), планшета (480px - 767px) и телефона (<480px)

Иконки

Есть отдельная страница со всеми иконками (учесть состояние hover, clicked)

Все иконки в svg

Строчные иконки приведены к одному размеру (в зависимости от базового размера шрифта, напр. область 20х20px с внутренним отступом в 2px),

Каждая иконка центрирована на квадратной области с учетом геометрического центра тяжести 

Иконки выровнены по пиксельной сетке и не попадают на полупиксели (в базовом размере

К макету прилагается архив всех иконок 

Оптимизация

В макете в сумме не больше 5ти разных начертаний гарнитур (т.е. шрифтов)

(Если шрифт не системный и не из Google Web Fonts) К макету прилагается архив использованных шрифтов

Везде используются целочисленные размеры

Объекты выровнены по пиксельной сетке

На каждый стиль текста используется отдельный объект

Используются непрозрачные цвета (кроме случаев, когда это принципиально необходимо)

(Photoshop) Все слои используют режим наложения Normal

Тексты не растрированы (кроме случаев, когда это часть иконки\графики)

Нет скрытых слоев (кроме отображения разных состояний)

This creates a private checklist in your account.