Что нужно подготовить в макете перед вёрсткой
Чтобы вёрстка прошла без лишних созвонов и уточнений, в макете (в любом редакторе — Figma, PSD, XD или Sketch) важно заранее продумать несколько вещей:
- Мобильную и планшетную версии — хотя бы ключевые экраны, не только десктоп
- Состояния интерактивных элементов — hover, focus, disabled у кнопок и полей
- Единую сетку отступов — если margin то 8px, то 24px, то 27px без системы — верстальщик будет либо переспрашивать, либо округлять на своё усмотрение
- Экспортированные иконки и изображения в нужном разрешении — 2x для Retina-экранов
Если в макете встречаются дробные значения (например, отступ 27,5 пикселя) — для HTML/CSS это неудобно: браузер и так округлит, поэтому лучше сразу закладывать целые числа. Был случай, когда в макете часть отступов оказалась 27,5 и 31,5 пикселя — похоже, дизайнер сам подгонял их на глаз. Пришлось списаться и заранее согласовать единую сетку — минут 15 переписки, зато потом не пришлось ничего переделывать после сдачи.
Если готового макета ещё нет — это тоже нормально: часть проектов начинается сразу с
вёрстки по референсам и брифу, без отдельного этапа дизайна. Расскажу, какой вариант подойдёт быстрее именно для вашей задачи.
Как проходит сам процесс: pixel perfect и проверка
После вёрстки блока его накладывают полупрозрачным слоем поверх оригинального макета (принцип Pixel Perfect) — так сразу видно, если что-то съехало на пару пикселей: не совпал отступ, другой размер шрифта, смещена иконка.
Важный нюанс: гнаться за идеальным совпадением до пикселя стоит не всегда. Пару раз в моей практике дизайнер сам просил не копировать макет один в один в паре мест — там были неровности в самом дизайне (например, отступы между пунктами меню отличались на 1–2 пикселя без видимой причины), и воспроизводить эту неточность в коде смысла не было. Аккуратно выравниваю и предупреждаю об этом на созвоне, а не молча исправляю на своё усмотрение.
Адаптивность: один макет — разные экраны
Даже идеально сверстанный «пиксель в пиксель» десктоп ничего не говорит о том, как сайт поведёт себя на телефоне. Адаптивная вёрстка использует не фиксированные пиксели, а относительные единицы (%, vw, rem) и медиазапросы — блоки перестраиваются под ширину экрана, а не просто уменьшаются.
