by daemos
follow me

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

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

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

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

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

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

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

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

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

• Иконки

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

• Все иконки в svg

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

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

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

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

• Оптимизация

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

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

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

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

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

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

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

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

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

This checklist was created by daemos

Save this checklist

copy saved

copies saved