Плохо продуманный макет — источник бесконечных правок при верстке. Чтобы избежать переделок и недопонимания, важно провести проверку дизайна по чек-листу перед передачей разработчику. Вот 20 ключевых пунктов.
Структура и сетка
- Все блоки выровнены по сетке.
- Отступы кратны 4 или 8px.
- Есть версии для 3+ разрешений.
Компоненты
- Использованы компоненты и варианты.
- Все состояния элементов (hover, focus, disabled).
- Единые стили кнопок, полей, карточек.
Типографика и цвета
- Использованы стили текста, а не ручные настройки.
- Размеры шрифтов кратны сетке.
- Контраст текста соответствует WCAG AA.
- Цвета вынесены в стили.
Изображения и иконки
- Изображения в нужных разрешениях.
- Иконки — SVG-векторы.
- Указаны alt-тексты.
- Есть состояния для интерактивных изображений.
Формы и интерактив
- Все состояния полей (пусто, заполнено, ошибка).
- Понятные сообщения об ошибках.
- Наличие кнопок с четким CTA.
Общие моменты
- Учтены реальные данные (длинные тексты, много позиций).
- Есть страницы 404 и других системных сообщений.
- Соблюдены гайдлайны бренда.
Заключение
Проверка дизайна по чек-листу экономит десятки часов разработки. В студии Dikl мы проводим внутренний аудит макетов перед версткой.