Как принимать дизайн сайта: пять проверок до вёрстки

Приёмка дизайна обычно сводится к обсуждению цвета кнопки. Между тем именно на этом этапе дешевле всего исправить вещи, которые потом обойдутся в недели переделки. Пять проверок, которые стоит сделать до передачи макета в вёрстку.

1. Все состояния, а не только идеальное

В макете должны быть не только «как выглядит хорошо», но и: пустой список, длинное название в две строки, отсутствующая картинка, ошибка формы, загрузка, отключённая кнопка. Реальные данные всегда некрасивее демонстрационных.

Проверьте самый длинный и самый короткий вариант каждого текста. Заголовок из четырёх слов и из шестнадцати ведут себя по-разному, и решить это должен дизайнер, а не верстальщик по наитию.

2. Три ширины экрана

Десктоп, планшет, телефон. Не «адаптив сделаем при вёрстке» – на телефоне у большинства сайтов больше половины трафика, и решения о том, что скрыть, а что переставить, принимает дизайнер.

Отдельно смотрите таблицы и многоколоночные блоки: именно они разваливаются первыми и требуют отдельного решения, а не механического сжатия.

3. Система, а не набор картинок

Спросите, сколько в макете размеров текста, отступов и вариантов кнопок. Если ответ «сколько получилось» – макет не система, и каждая новая страница будет рисоваться заново. В нормальном макете есть шкала кеглей, шаг сетки и набор компонентов, из которых собираются страницы.

Практическая проверка: попросите собрать из готовых компонентов страницу, которой в макете нет. Если это невозможно без дизайнера, вы получите зависимость на весь срок жизни сайта.

4. Читаемость и доступность

• Основной текст не мельче 16 пикселей, межстрочный интервал не плотнее 1,5.
• Контраст текста к фону проверен, а не «выглядит нормально». Светло-серый по белому не читается на телефоне в солнечный день.
• Кликабельные элементы не меньше 44 пикселей по меньшей стороне.
• Смысл нигде не передаётся только цветом: у ошибки есть текст, а не только красный.

5. Путь к целевому действию

Пройдите макет как посетитель: он попал на страницу услуги, что дальше? Видна ли цена, понятен ли следующий шаг, сколько экранов до формы. Если чтобы оставить заявку, нужно прокрутить пять экранов и найти ссылку в подвале – это не вопрос вкуса, это потерянные заявки.

Отдельно проверьте, что делает человек, который пришёл не за покупкой: посмотреть кейсы, узнать цену, найти телефон. Каждый из этих путей должен быть коротким.

Что зафиксировать в договоре

Количество итераций правок, состав передаваемых файлов и права на исходники. Макет в Figma должен остаться у вас с правом редактирования: без исходников вы привязаны к одному подрядчику навсегда, и это выясняется в самый неудобный момент.