# Вёрстка сайта по макету URL: https://chugunov.pro/uslugi/verstka-sajta/ Обновлено: 27.10.2026. Источник: chugunov.pro. 2 000 ₽/час Адаптивная вёрстка сайта по макету Figma на HTML/CSS и интеграция в WordPress или 1С-Битрикс. Или звоните, сразу обсудим детали. [+7 (915) 016-99-88](tel:+79150169988) Вёрстка сайта Сделаю **вёрстку сайта на HTML и CSS** по макету из Figma: адаптивно, аккуратно по дизайну и с чистым кодом. При необходимости встрою вёрстку в WordPress или 1С-Битрикс. от 2 000 ₽ / час Адаптив под все экраны **Точно по макету** Отступы, шрифты и состояния элементов как в дизайне. **Адаптивная вёрстка** Корректно на телефонах, планшетах и широких экранах. **Понятный код** Структура, которую легко поддерживать и подключать к CMS. ## Когда заказывают вёрстку Типичные ситуации: - Дизайн в Figma готов, кода нет - Дизайнер есть, разработчика нет - Сайт плохо выглядит на телефоне - Нужны новые страницы в текущем стиле - Редизайн без смены CMS - Нужна вёрстка до программирования Вёрстка — отдельный этап между дизайном и программированием. Дизайнер отдаёт макет, а браузеру нужен код: HTML описывает структуру страницы, CSS — внешний вид, JavaScript — поведение элементов. Если этот этап сделать небрежно, сайт будет «плыть» на телефонах, медленно грузиться и плохо поддаваться доработкам, даже если дизайн был хорошим. ## Что верстаю Адаптивная вёрстка сайтов любого типа: - Лендинги - Корпоративные сайты - Интернет-магазины - Каталоги и карточки товаров - Личные кабинеты - Блоги и статьи - Промостраницы Сложность зависит от типа страниц. Лендинг — одна длинная страница с крупными блоками и анимациями. В интернет-магазине важнее повторяющиеся элементы: карточки товаров, фильтры, корзина, формы оформления, которые должны одинаково работать с любым числом товаров и длиной названий. Личный кабинет требует продуманных состояний: пустые списки, ошибки, загрузка данных. ## Что входит в вёрстку сайта Отдаю результат, готовый к запуску или интеграции: - Семантическая разметка HTML5 - Стили CSS по макету, без лишнего кода - Адаптив для мобильных и планшетов - Интерактив на JavaScript: меню, слайдеры, формы - Оптимизация изображений и иконок - Внимание к скорости загрузки - Проверка в актуальных браузерах - Разметка, удобная для SEO Семантическая разметка — это теги по назначению: заголовки, навигация, списки и кнопки размечены именно как заголовки, навигация, списки и кнопки. Это помогает поисковым системам понять структуру страницы, а людям с экранными чтецами — пользоваться сайтом. Стили пишу так, чтобы компонент выглядел одинаково на всех страницах и менялся в одном месте. Изображения отдаю в нескольких размерах, чтобы телефон не загружал картинку, рассчитанную на широкий монитор. ## В каком виде нужна вёрстка Выбираем формат под задачу. Формат стоит выбрать до начала работы. Статичная вёрстка дешевле, но тексты в ней меняет только разработчик. Если сайтом будут управлять сотрудники, вёрстку сразу делаю с расчётом на CMS: повторяющиеся блоки выношу в шаблоны, а тексты и изображения — в поля, которые редактируются в админке. ### Статичный HTML/CSS Набор страниц и стилей, которые можно открыть в браузере или передать другому разработчику. Подходит для промостраниц и прототипов. Подходит для - Лендинги - Промо - Прототипы ### Вёрстка + WordPress Натягиваю вёрстку на тему WordPress с редактируемыми блоками. Вы сами меняете тексты и картинки в админке. Подходит для - Сайты - Блоги - Магазины ### Вёрстка + 1С-Битрикс Делаю шаблон сайта и компонентов Битрикс по макету. Каталог, формы и меню управляются из админки. Подходит для - Каталоги - Корпоративные ### Вёрстка для готового сайта Новые страницы и блоки в стилистике текущего сайта без поломки существующего. Связано с [доработкой сайта](https://chugunov.pro/uslugi/dorabotka-sajta-wordpress/). Подходит для - Новые разделы - Редизайн ## От чего зависит стоимость вёрстки Вёрстку оцениваю по времени — от 2 000 ₽ за час — или фиксированной суммой, если макет готов и объём понятен. Оценку даю после разбора макета, потому что одинаковое число страниц может требовать очень разного времени. Главный фактор — количество уникальных шаблонов, а не страниц. Двадцать статей блога с одинаковым оформлением верстаются как один шаблон, а пять непохожих друг на друга промостраниц — как пять. Поэтому при оценке считаю типы страниц и повторяющиеся блоки. Второй фактор — адаптив. Если в макете есть мобильные и планшетные версии, работа предсказуемее. Если их нет, приходится решать, как перестраивать каждый блок, и согласовывать это с вами, а на это тоже уходит время. Третий — интерактив и интеграция. Сложные анимации, нестандартные слайдеры, калькуляторы и фильтры требуют JavaScript, а подключение вёрстки к WordPress или 1С-Битрикс — отдельной работы с шаблонами CMS. О бюджете сайта целиком — в статье [сколько стоит разработка сайта](https://chugunov.pro/skolko-stoit-razrabotka-sajta/). ## Как проходит работа Без сюрпризов на финише. Промежуточный показ экономит время обеим сторонам. Неточности в понимании макета видны уже на первых страницах, и их проще исправить до того, как по тому же принципу сверстаны остальные. Результат показываю на тестовом адресе, где его можно открыть с телефона и компьютера и оставить замечания по конкретным блокам. 1. ### Разбор макета Смотрю макет в Figma, уточняю адаптив, анимации и состояния элементов. Отмечаю недостающие экраны и спорные места, чтобы обсудить их до начала работы. 2. ### Оценка Называю объём в часах или фиксированную стоимость, если границы понятны. Оценку разбиваю по шаблонам и блокам, чтобы было видно, из чего складывается сумма. 3. ### Вёрстка Верстаю страницы и показываю промежуточный результат. Сначала делаю общие элементы — шапку, подвал, типографику, кнопки, — потом собираю из них страницы. 4. ### Проверка Тестирую в браузерах и на разных ширинах экрана. Проверяю длинные тексты, пустые состояния и работу форм. 5. ### Передача Отдаю код или интегрирую в CMS и запускаю. Код передаю целиком: в дальнейших доработках вы не зависите от меня. ## Почему стоит обратиться ко мне Я fullstack-разработчик, поэтому думаю о том, что будет с вёрсткой дальше. Верстальщик, который не занимается бэкендом, нередко отдаёт код, который потом приходится переписывать при подключении к CMS. Я делаю обе части работы, поэтому вёрстка сразу учитывает, как устроены темы WordPress и шаблоны компонентов 1С-Битрикс. Вы не платите дважды: за вёрстку и потом за её переделку под систему управления сайтом. **Готово к CMS** Вёрстку легко подключить к WordPress и Битрикс — я сам это делаю. Поэтому заранее закладываю в разметку места под динамические данные и повторяющиеся блоки. **Напрямую** Вопросы по макету решаем без посредников. Если нужно, общаюсь напрямую с вашим дизайнером. **Скорость в приоритете** Не тащу лишние библиотеки и тяжёлые файлы. Анимации и интерактив пишу так, чтобы они не мешали загрузке и прокрутке. ## Что вы получаете на выходе Если нужна статичная вёрстка — архив или репозиторий с HTML-страницами, стилями, скриптами, шрифтами и изображениями. Код структурирован: общие стили отделены от стилей отдельных блоков, классы названы понятно, поэтому другой разработчик быстро в нём разберётся. Если вёрстка подключается к CMS — работающий сайт, где тексты, изображения и списки редактируются в админке, а шаблоны собраны из повторно используемых частей. Вы проверяете результат на тестовом адресе, и только после этого я переношу его на основной домен. В обоих случаях страницы проверены на распространённых ширинах экрана и в актуальных браузерах, а замечания по соответствию макету исправлены до сдачи. Отдельно передаю краткое описание: как устроены стили, где лежат общие компоненты, как добавить новую страницу по существующему шаблону. Это экономит время любому разработчику, который будет работать с кодом после меня, в том числе вашему штатному специалисту. ## Типовые задачи по вёрстке: что делаю и сколько это стоит Ориентиры даны для макета с десктопной и мобильной версиями. Если мобильных экранов нет, к оценке добавляется время на их согласование. 1. **«Есть макет лендинга в Figma — нужна вёрстка, которую можно сразу выложить».** Цвета, шрифты и отступы из переменных и стилей Figma переношу в CSS-переменные, чтобы правка цвета делалась в одном месте. Шрифты подключаю локально в WOFF2 с font-display: swap, изображения отдаю в WebP или AVIF через picture и srcset, форму делаю с проверкой полей и отправкой на почту или в Telegram. Перед сдачей сверяю страницу с макетом наложением.от 10 чот 20 000 ₽До 8 блоков, без подключения к CMS. 2. **«Старый сайт на телефоне показывается уменьшенной копией или уезжает вбок».** Проверяю meta viewport, ищу элементы с фиксированной шириной в пикселях и вёрстку таблицами — из-за них появляется горизонтальная прокрутка. Переделываю сетку на flex и grid, сворачиваю меню, широкие таблицы прайса помещаю в блок с собственной прокруткой, увеличиваю кнопки и поля до размера, удобного для пальца. Дизайн при этом не меняется.от 4 чот 8 000 ₽За один шаблон страницы. 3. **«Дизайнер сделал UI-кит — нужны компоненты, из которых потом собираются страницы».** Верстаю кнопки, поля, карточки, модальные окна и уведомления со всеми состояниями: наведение, фокус, ошибка, неактивное, загрузка. Классы называю по БЭМ, параметры выношу в CSS-переменные и собираю страницу-витрину, где каждый компонент виден во всех вариантах, — по ней удобно принимать работу и собирать новые страницы.от 8 чот 16 000 ₽ 4. **«Письмо для рассылки разваливается в Outlook и в почте на телефоне».** Письма верстаются по своим правилам: таблицами, со стилями прямо в атрибутах, шириной около 600 пикселей и без скриптов. Кнопки делаю так, чтобы они оставались кнопками и в Outlook, прописываю альтернативный текст картинкам на случай, когда почта их не показывает, и проверяю письмо в Яндекс Почте, Mail.ru, Gmail и Outlook, в том числе в тёмной теме.от 4 чот 8 000 ₽ 5. **«Нужна тёмная тема сайта».** Перевожу цвета в CSS-переменные и задаю второй набор значений: тема включается по настройке системы через prefers-color-scheme, а переключатель на сайте запоминает выбор посетителя. Отдельно проверяю то, что обычно забывают: логотип и иконки на тёмном фоне, тени, картинки с белым фоном, цвет полей форм и полос прокрутки.от 4 чот 8 000 ₽ 6. **«Проверить вёрстку на доступность для людей с нарушениями зрения».** Прохожу шаблон с клавиатуры: виден ли фокус, закрываются ли меню и модальное окно клавишей Esc. Проверяю контраст текста — не ниже 4,5 : 1 по WCAG, подписи полей форм, alt у изображений, aria-label у кнопок-иконок и порядок заголовков, затем слушаю страницу экранным чтецом NVDA. Найденное исправляю в вёрстке.от 3 чот 6 000 ₽За один шаблон страницы. ## Сайты из портфолио ### Сайт агентства Bboxa Битрикс Разработал сайт для агентства Bboxa — компании, которая помогает селлерам запускать, вести и продвигать свои магазины на маркетплейсах. В проекте реализованы страницы услуг, направления по Wildberries,… ### Сайт школы немецкого языка Deutsche Lehre WordPress Разработал сайт для онлайн-школы немецкого языка Deutsche Lehre — образовательного проекта с курсами для взрослых, детей и учеников с разным уровнем подготовки. В проекте реализованы страницы… ### Интернет-магазин косметики Era Minerals Битрикс Разработал интернет-магазин бренда Era Minerals — производителя натуральной минеральной декоративной косметики. В проекте реализованы каталог продукции для лица, глаз, бровей и губ, кисти и аксессуары, наборы… [Все работы в портфолио →](https://chugunov.pro/portfolio/) ## Кто делает работу Алексей Чугунов — fullstack-разработчик на 1С-Битрикс, WordPress и PHP - Более 20 лет в IT: сайты, интернет-магазины, интеграции, обмены с 1С и CRM, поддержка действующих проектов - Сертифицированный программист 1С-Битрикс: экзамены «Программист Битрикс» уровня 1 и уровня 2 (2016) - Проекты для «Мосфильм», Gipfel, «Эвалар», Major, H&M и других компаний - Заранее называю стоимость и сроки, остаюсь на связи после выполнения работ [Подробнее обо мне и сертификаты →](https://chugunov.pro/about/) ## Частые вопросы **Сколько стоит вёрстка сайта?** От 2 000 ₽ за час. Для макета с понятным объёмом называю фиксированную стоимость после разбора. На оценку влияют количество уникальных шаблонов, наличие мобильных версий в макете, объём интерактива и то, нужна ли интеграция с CMS. Страницы с одинаковым оформлением не умножают стоимость: шаблон верстается один раз. Если макет ещё дорабатывается, удобнее работать по часам, чтобы не пересогласовывать фиксированную сумму после каждого изменения. **Сколько времени занимает вёрстка?** Зависит от количества страниц и сложности адаптива, называю после разбора макета. Отдельная вёрстка лендинга обычно быстрее, чем многостраничного сайта. На срок влияет и готовность макета. Если в нём есть все экраны, мобильные версии и состояния элементов, работа идёт без остановок. Если часть экранов придумывается по ходу, появляются паузы на согласование. Срок называю вместе с оценкой, а промежуточный результат показываю по мере готовности страниц. **Верстаете по макетам из Figma?** Да, Figma — основной формат. Если макета нет, подскажу, как его получить, или сверстаю по согласованному прототипу. Из Figma удобно брать размеры, цвета и шрифты, экспортировать изображения и иконки. Точной вёрстке помогает, когда в макете использованы стили и компоненты, а отступы выдержаны по сетке. Если макет собран менее аккуратно, это не препятствие: спорные места уточняю у вас или дизайнера до начала работы. **Адаптивная вёрстка входит в стоимость?** Да, если в макете есть мобильные версии. Если их нет, адаптирую по логике дизайна и согласую ключевые экраны. Адаптивная вёрстка означает, что одна и та же страница перестраивается под ширину экрана: колонки складываются, меню сворачивается, изображения уменьшаются. Проверяю результат на распространённых размерах экранов телефонов, планшетов и компьютеров. Если мобильной версии в макете нет, сначала показываю ключевые экраны, а после согласования переношу этот подход на остальные страницы. **Что нужно от меня для старта?** Ссылка на макет в Figma с доступом на просмотр, шрифты и пожелания по анимациям. Если вёрстку потом подключаю к CMS, нужен доступ к сайту. Если шрифты платные, нужна лицензия на использование на сайте. Полезно заранее описать, какие элементы интерактивные: что происходит при наведении, клике, открытии меню и отправке формы. Для вёрстки под существующий сайт пришлите адрес и доступ к коду, чтобы новые блоки не конфликтовали с текущими стилями. **Можно ли сразу встроить вёрстку в CMS?** Да, интегрирую в WordPress или 1С-Битрикс. Если нужен сайт целиком, смотрите [разработку сайтов](https://chugunov.pro/uslugi/razrabotka-sajtov/). Для WordPress делаю тему или дочернюю тему, в которой блоки редактируются в админке. Для 1С-Битрикс — шаблон сайта и шаблоны компонентов, чтобы каталог, новости и формы управлялись штатными средствами. Если вёрстку делал другой специалист, тоже могу подключить её к CMS после проверки кода. Перед подключением проверяю, насколько код готов к шаблонам, и заранее говорю, что придётся переделать. **Можно ли заказать вёрстку отдельных блоков для готового сайта?** Да, это частая задача: новая посадочная страница, раздел или блок в стилистике текущего сайта. Сначала смотрю, как устроены существующие стили и шаблоны, чтобы новые элементы не сломали старые страницы. На сайтах на WordPress и 1С-Битрикс новые блоки сразу встраиваю в шаблон, чтобы ими можно было управлять из админки. Работу оцениваю по часам или фиксированно, если объём понятен. Изменения сначала проверяю на копии сайта, чтобы не затронуть работающие страницы. **Исправляете ошибки после сдачи вёрстки?** Если после сдачи обнаружится расхождение с макетом или ошибка отображения в браузере из согласованного списка проверки, исправляю её. Этот порядок фиксируем при согласовании работы. Новые требования, которых не было в макете, например дополнительный блок или другой вариант адаптива, оцениваю отдельно. Чтобы таких ситуаций было меньше, перед сдачей показываю результат на тестовом адресе и собираю замечания. Все правки по итогам этого показа входят в работу. **Верстаете по макетам из Photoshop или PDF?** Да, но точность разная. Из файла Photoshop размеры, шрифты и цвета берутся из слоёв так же точно, как из Figma. Из PDF или картинки точные значения не достать, поэтому отступы и размеры подбираю по изображению и согласую спорные места. Если дизайн ещё дорабатывается, удобнее перенести его в Figma: так проще обсуждать правки. **Используете Bootstrap или Tailwind?** Если проект уже на Bootstrap или Tailwind — да, продолжаю в нём, чтобы не смешивать подходы. Для нового проекта по умолчанию пишу собственный CSS на переменных, flex и grid: в браузер не уходят стили неиспользуемых компонентов, а код проще подключить к теме WordPress или шаблону 1С-Битрикс. Фреймворк беру, если с кодом дальше будет работать команда, которая к нему привыкла. **В каких браузерах проверяете вёрстку?** В актуальных версиях Chrome, Яндекс Браузера, Safari, Firefox и Edge — на компьютере и на телефонах с iOS и Android. Список фиксирую при согласовании работы: если сайтом пользуются на старых устройствах, например на рабочих компьютерах с устаревшим браузером, добавляю их в проверку заранее. Internet Explorer по умолчанию не поддерживаю — Microsoft прекратила его поддержку. ## Есть макет сайта? Пришлите ссылку на Figma — оценю объём и сроки вёрстки. [+7 (915) 016-99-88](tel:+79150169988)