Где чаще всего возникают ошибки

1. Нет единого формата макетов

Один экран сделан в Figma, другой в Photoshop, а часть элементов существует только в PNG. Разработчику приходится «догадываться» о стиле и размерах.

2. Не проработана адаптивность

Дизайн сделан только под десктоп. Когда верстальщик начинает «сжимать» блоки под мобильный экран, всё ломается.

3. Нет спецификаций по стилям

Шрифты, цвета, отступы, иконки — всё должно быть чётко указано. Без гайдлайна разработчик будет интерпретировать на свой вкус.

4. Не учтены интерактивные состояния

Ховеры, клики, выпадающие списки, анимации часто остаются «в голове дизайнера». Если это не задокументировано, разработчик просто их не сделает.

5. Не переданы ресурсы

Иконки в плохом качестве, изображения не оптимизированы, логотип без прозрачного фона. В итоге сайт получается тяжёлым или небрежным.

Как правильно передавать макеты

• Использовать современные инструменты (Figma, Zeplin), где разработчик видит точные размеры и параметры.
  

• Подготовить версии макета под все ключевые разрешения: десктоп, планшет, смартфон.

• Составить UI-kit: цвета, шрифты, иконки, кнопки.

• Задокументировать интерактив: как ведут себя элементы при наведении, клике, ошибке.

• Передать оптимизированные изображения и иконки в нужных форматах (SVG, WebP, PNG).

• Организовать короткий созвон «дизайнер ↔ разработчик», чтобы снять вопросы до начала верстки.

Советы для бизнеса

• Не экономьте на подготовке. Каждый час, потраченный дизайнером на документацию, экономит несколько часов работы разработчика.

• Держите тестовую сборку под контролем. Регулярные ревью помогают избежать сюрпризов в конце проекта.

• Сохраняйте логику макетов. Если дизайн делался «для красоты», а не для реальных сценариев пользователя, даже идеальная верстка не спасёт проект.

Итог

Верстка по макетам — это не механическая работа, а процесс, который требует чёткого взаимодействия дизайнеров и разработчиков. Чем лучше подготовлены макеты, тем быстрее и точнее они превращаются в работающий сайт.

В PHPDev.ORG мы помогаем заказчикам и дизайнерам избежать ошибок: берём макеты, проводим аудит на готовность и выполняем верстку так, чтобы результат соответствовал ожиданиям и требованиям бизнеса.