Как подготовить макет к вёрстке

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

Сетка и отступы

Поставьте сетку и держите элементы по ней. Если один блок отступает на 40 пикселей, второй на 43, а третий на 38, верстальщик либо выровняет всё сам по своему усмотрению, либо будет переспрашивать.

Используйте кратные значения: 8, 16, 24, 32, 48. Так макет собирается быстрее, а результат выглядит аккуратнее.

Шрифты

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

Соберите текстовые стили в компоненты. Заголовок первого уровня, второго, обычный текст, подпись. Когда стилей три, вёрстка идёт быстро. Когда в макете двадцать три разных размера шрифта, начинаются вопросы.

Состояния элементов

Нарисуйте, что происходит с кнопкой при наведении и при нажатии. Как выглядит поле формы, когда в нём ошибка. Как выглядит пункт меню на активной странице.

Если этого нет, верстальщик придумает сам. Обычно получается нормально, но это ваш макет, и решать должны вы.

Адаптив

Самый частый пропуск. Нарисован десктоп, а мобильной версии нет.

Минимум нарисуйте телефон, ширина 375 пикселей. Планшет часто можно отдать на усмотрение верстальщика, он поместится между двумя вашими вариантами.

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

Крайние случаи

В макете заголовок карточки в две строки, а у заказчика будет в пять. Название товара короткое, а в реальном каталоге попадётся длинное.

Покажите хотя бы один такой пример. Верстальщик заложит запас, и вёрстка не поедет на реальных данных.

Изображения и иконки

Иконки отдавайте в SVG, не картинками. Фотографии подготовьте в нужном размере, не рассчитывайте, что верстальщик будет вырезать их из макета.

Если картинка декоративная и её можно заменить на фон, скажите об этом. Иногда это экономит вес страницы вдвое.

Что ещё стоит приложить

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

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

Короткий чек-лист

• Сетка поставлена, отступы кратные
• Шрифты названы, стили собраны в компоненты
• Нарисованы состояния кнопок и полей
• Есть мобильная версия
• Показан пример с длинным текстом
• Иконки в SVG
• Описано, что происходит после отправки формы

Семь пунктов, полчаса работы. Экономят несколько дней переписки.