Верстка макета сайта: этапы, ошибки и чек-лист приёмки

Верстка макета: что это и что вы получаете на выходе

Макет — это картинка. На неё нельзя нажать, её нельзя открыть с телефона или отправить ссылкой в Telegram. Верстка превращает картинку в живые страницы: с нужными шрифтами, отступами, цветами, меню и кнопками, которые реагируют на нажатие и перестраиваются под ширину экрана.

На выходе у вас статичные страницы, внешне совпадающие с дизайном. Формы с обработкой заявок, база товаров, личный кабинет, оплата через Click или Payme, интеграция с CRM — это уже не верстка, а следующий слой работы.

Для простого лендинга граница размыта: там после верстки нужно лишь подключить отправку заявки в Telegram или CRM, и сайт готов. Для интернет-магазина верстка — лишь заметная часть большого проекта.

Как проходит верстка: шаг за шагом

Грамотный процесс выглядит примерно так, и по нему удобно сверять подрядчика:

• Приёмка макета. Верстальщик проверяет, что нарисованы не только десктоп, но и мобильная версия, состояния кнопок, ошибки в формах, длинные и пустые тексты.
• Единые стили. Цвета, шрифты, размеры заголовков и кнопки задаются один раз, а не правятся вручную на каждой странице.
• Каркас страниц. Расставляются смысловые теги, один главный заголовок на странице, логичная иерархия подзаголовков.
• Стили и адаптация. Обычно начинают с телефона, затем добавляют планшет и широкие экраны.
• Графика. Изображения сжимаются, получают правильные размеры и формат, тяжёлые картинки ниже первого экрана подгружаются позже.
• Интерактив. Меню, слайдеры, аккордеоны, всплывающие окна — только то, что предусмотрено макетом.
• Проверка. Реальные телефоны, разные браузеры, затем правки по замечаниям.

Где заканчивается верстка и начинается разработка

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

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

• Кто подключает формы и куда придут заявки: Telegram, почта, CRM.
• Будет ли админ-панель, в которой вы сами меняете тексты и цены.
• Входят ли в работу счётчики и цели для аналитики.
• Кто отвечает за исправления, если на каком-то устройстве что-то поехало.

Конструктор, шаблон или индивидуальная верстка

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

Индивидуальная верстка по вашему макету даёт точное соответствие дизайну и контроль над кодом. Взамен ей нужен продуманный макет и время. Если сайт — основной канал продаж, например для клиники, мебельного салона или онлайн-магазина, где трафик идёт из рекламы, обычно выгоднее вкладываться именно в индивидуальную работу.

Как верстка влияет на скорость и SEO

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

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

Следите и за тем, что происходит после запуска. Новые разделы нередко добавляют без той же аккуратности, и структура постепенно рассыпается.

Адаптивность: проверяйте так, как заходят ваши клиенты

Значительная часть аудитории открывает сайт с телефона, и нередко не в обычном браузере, а во встроенном окне Instagram или Telegram, куда человек попал по ссылке из рекламы или поста. Поведение там может отличаться от того, что вы видели на компьютере.

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

Отдельная проблема для нашего рынка — языки. Узбекский текст часто длиннее русского, и кнопка, красиво выглядящая с русской надписью, на узбекской версии переносится или вылезает за рамку. Убедитесь, что шрифт содержит символы o‘ и g‘ и что макет выдерживает самые длинные подписи на обоих языках.

Типичные ошибки при заказе и приёмке

Большинство проблем возникает не из-за сложности кода, а из-за организации работы.

• Верстка у одного исполнителя, разработка у другого. Стыковка чужого кода иногда занимает больше времени, чем сама верстка.
• Макет без мобильной версии: верстальщик вынужден угадывать, как должен выглядеть телефон.
• Проверка только на компьютере разработчика.
• Правки «по ходу» после утверждения дизайна, из-за которых растут сроки и стоимость.
• Картинки в полном размере, загруженные прямо с фотоаппарата.
• Отсутствие доступа к исходникам: вы получили сайт, но не можете передать его другой команде.

Из чего складывается цена верстки

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

Чек-лист приёмки верстки

Перед подписанием акта пройдите по списку на нескольких телефонах и в двух-трёх браузерах.

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