сайта
Сделаю вёрстку сайта на HTML и CSS по макету из Figma: адаптивно, аккуратно по дизайну и с чистым кодом. При необходимости встрою вёрстку в WordPress или 1С-Битрикс.
Когда заказывают вёрстку
Типичные ситуации:
- Дизайн в Figma готов, кода нет
- Дизайнер есть, разработчика нет
- Сайт плохо выглядит на телефоне
- Нужны новые страницы в текущем стиле
- Редизайн без смены CMS
- Нужна вёрстка до программирования
Вёрстка — отдельный этап между дизайном и программированием. Дизайнер отдаёт макет, а браузеру нужен код: HTML описывает структуру страницы, CSS — внешний вид, JavaScript — поведение элементов. Если этот этап сделать небрежно, сайт будет «плыть» на телефонах, медленно грузиться и плохо поддаваться доработкам, даже если дизайн был хорошим.
Что верстаю
Адаптивная вёрстка сайтов любого типа:
- Лендинги
- Корпоративные сайты
- Интернет-магазины
- Каталоги и карточки товаров
- Личные кабинеты
- Блоги и статьи
- Промостраницы
Сложность зависит от типа страниц. Лендинг — одна длинная страница с крупными блоками и анимациями. В интернет-магазине важнее повторяющиеся элементы: карточки товаров, фильтры, корзина, формы оформления, которые должны одинаково работать с любым числом товаров и длиной названий. Личный кабинет требует продуманных состояний: пустые списки, ошибки, загрузка данных.
Что входит в вёрстку сайта
Отдаю результат, готовый к запуску или интеграции:
- Семантическая разметка HTML5
- Стили CSS по макету, без лишнего кода
- Адаптив для мобильных и планшетов
- Интерактив на JavaScript: меню, слайдеры, формы
- Оптимизация изображений и иконок
- Внимание к скорости загрузки
- Проверка в актуальных браузерах
- Разметка, удобная для SEO
Семантическая разметка — это теги по назначению: заголовки, навигация, списки и кнопки размечены именно как заголовки, навигация, списки и кнопки. Это помогает поисковым системам понять структуру страницы, а людям с экранными чтецами — пользоваться сайтом. Стили пишу так, чтобы компонент выглядел одинаково на всех страницах и менялся в одном месте. Изображения отдаю в нескольких размерах, чтобы телефон не загружал картинку, рассчитанную на широкий монитор.
В каком виде нужна вёрстка
Выбираем формат под задачу.
Формат стоит выбрать до начала работы. Статичная вёрстка дешевле, но тексты в ней меняет только разработчик. Если сайтом будут управлять сотрудники, вёрстку сразу делаю с расчётом на CMS: повторяющиеся блоки выношу в шаблоны, а тексты и изображения — в поля, которые редактируются в админке.
Статичный HTML/CSS
Набор страниц и стилей, которые можно открыть в браузере или передать другому разработчику. Подходит для промостраниц и прототипов.
Вёрстка + WordPress
Натягиваю вёрстку на тему WordPress с редактируемыми блоками. Вы сами меняете тексты и картинки в админке.
Вёрстка + 1С-Битрикс
Делаю шаблон сайта и компонентов Битрикс по макету. Каталог, формы и меню управляются из админки.
Вёрстка для готового сайта
Новые страницы и блоки в стилистике текущего сайта без поломки существующего. Связано с доработкой сайта.
От чего зависит стоимость вёрстки
Вёрстку оцениваю по времени — от 2 000 ₽ за час — или фиксированной суммой, если макет готов и объём понятен. Оценку даю после разбора макета, потому что одинаковое число страниц может требовать очень разного времени.
Главный фактор — количество уникальных шаблонов, а не страниц. Двадцать статей блога с одинаковым оформлением верстаются как один шаблон, а пять непохожих друг на друга промостраниц — как пять. Поэтому при оценке считаю типы страниц и повторяющиеся блоки.
Второй фактор — адаптив. Если в макете есть мобильные и планшетные версии, работа предсказуемее. Если их нет, приходится решать, как перестраивать каждый блок, и согласовывать это с вами, а на это тоже уходит время.
Третий — интерактив и интеграция. Сложные анимации, нестандартные слайдеры, калькуляторы и фильтры требуют JavaScript, а подключение вёрстки к WordPress или 1С-Битрикс — отдельной работы с шаблонами CMS. О бюджете сайта целиком — в статье сколько стоит разработка сайта.
Как проходит работа
Без сюрпризов на финише.
Промежуточный показ экономит время обеим сторонам. Неточности в понимании макета видны уже на первых страницах, и их проще исправить до того, как по тому же принципу сверстаны остальные. Результат показываю на тестовом адресе, где его можно открыть с телефона и компьютера и оставить замечания по конкретным блокам.
Разбор макета
Смотрю макет в Figma, уточняю адаптив, анимации и состояния элементов. Отмечаю недостающие экраны и спорные места, чтобы обсудить их до начала работы.
Оценка
Называю объём в часах или фиксированную стоимость, если границы понятны. Оценку разбиваю по шаблонам и блокам, чтобы было видно, из чего складывается сумма.
Вёрстка
Верстаю страницы и показываю промежуточный результат. Сначала делаю общие элементы — шапку, подвал, типографику, кнопки, — потом собираю из них страницы.
Проверка
Тестирую в браузерах и на разных ширинах экрана. Проверяю длинные тексты, пустые состояния и работу форм.
Передача
Отдаю код или интегрирую в CMS и запускаю. Код передаю целиком: в дальнейших доработках вы не зависите от меня.
Почему стоит обратиться ко мне
Я fullstack-разработчик, поэтому думаю о том, что будет с вёрсткой дальше.
Верстальщик, который не занимается бэкендом, нередко отдаёт код, который потом приходится переписывать при подключении к CMS. Я делаю обе части работы, поэтому вёрстка сразу учитывает, как устроены темы WordPress и шаблоны компонентов 1С-Битрикс. Вы не платите дважды: за вёрстку и потом за её переделку под систему управления сайтом.
Что вы получаете на выходе
Если нужна статичная вёрстка — архив или репозиторий с HTML-страницами, стилями, скриптами, шрифтами и изображениями. Код структурирован: общие стили отделены от стилей отдельных блоков, классы названы понятно, поэтому другой разработчик быстро в нём разберётся.
Если вёрстка подключается к CMS — работающий сайт, где тексты, изображения и списки редактируются в админке, а шаблоны собраны из повторно используемых частей. Вы проверяете результат на тестовом адресе, и только после этого я переношу его на основной домен.
В обоих случаях страницы проверены на распространённых ширинах экрана и в актуальных браузерах, а замечания по соответствию макету исправлены до сдачи.
Отдельно передаю краткое описание: как устроены стили, где лежат общие компоненты, как добавить новую страницу по существующему шаблону. Это экономит время любому разработчику, который будет работать с кодом после меня, в том числе вашему штатному специалисту.
Типовые задачи по вёрстке: что делаю и сколько это стоит
Ориентиры даны для макета с десктопной и мобильной версиями. Если мобильных экранов нет, к оценке добавляется время на их согласование.
- «Есть макет лендинга в Figma — нужна вёрстка, которую можно сразу выложить».Цвета, шрифты и отступы из переменных и стилей Figma переношу в CSS-переменные, чтобы правка цвета делалась в одном месте. Шрифты подключаю локально в WOFF2 с font-display: swap, изображения отдаю в WebP или AVIF через picture и srcset, форму делаю с проверкой полей и отправкой на почту или в Telegram. Перед сдачей сверяю страницу с макетом наложением.от 10 чот 20 000 ₽До 8 блоков, без подключения к CMS.
- «Старый сайт на телефоне показывается уменьшенной копией или уезжает вбок».Проверяю meta viewport, ищу элементы с фиксированной шириной в пикселях и вёрстку таблицами — из-за них появляется горизонтальная прокрутка. Переделываю сетку на flex и grid, сворачиваю меню, широкие таблицы прайса помещаю в блок с собственной прокруткой, увеличиваю кнопки и поля до размера, удобного для пальца. Дизайн при этом не меняется.от 4 чот 8 000 ₽За один шаблон страницы.
- «Дизайнер сделал UI-кит — нужны компоненты, из которых потом собираются страницы».Верстаю кнопки, поля, карточки, модальные окна и уведомления со всеми состояниями: наведение, фокус, ошибка, неактивное, загрузка. Классы называю по БЭМ, параметры выношу в CSS-переменные и собираю страницу-витрину, где каждый компонент виден во всех вариантах, — по ней удобно принимать работу и собирать новые страницы.от 8 чот 16 000 ₽
- «Письмо для рассылки разваливается в Outlook и в почте на телефоне».Письма верстаются по своим правилам: таблицами, со стилями прямо в атрибутах, шириной около 600 пикселей и без скриптов. Кнопки делаю так, чтобы они оставались кнопками и в Outlook, прописываю альтернативный текст картинкам на случай, когда почта их не показывает, и проверяю письмо в Яндекс Почте, Mail.ru, Gmail и Outlook, в том числе в тёмной теме.от 4 чот 8 000 ₽
- «Нужна тёмная тема сайта».Перевожу цвета в CSS-переменные и задаю второй набор значений: тема включается по настройке системы через prefers-color-scheme, а переключатель на сайте запоминает выбор посетителя. Отдельно проверяю то, что обычно забывают: логотип и иконки на тёмном фоне, тени, картинки с белым фоном, цвет полей форм и полос прокрутки.от 4 чот 8 000 ₽
- «Проверить вёрстку на доступность для людей с нарушениями зрения».Прохожу шаблон с клавиатуры: виден ли фокус, закрываются ли меню и модальное окно клавишей Esc. Проверяю контраст текста — не ниже 4,5 : 1 по WCAG, подписи полей форм, alt у изображений, aria-label у кнопок-иконок и порядок заголовков, затем слушаю страницу экранным чтецом NVDA. Найденное исправляю в вёрстке.от 3 чот 6 000 ₽За один шаблон страницы.
Сайты из портфолио
Сайт агентства Bboxa
Разработал сайт для агентства Bboxa — компании, которая помогает селлерам запускать, вести и продвигать свои магазины на маркетплейсах. В проекте реализованы страницы услуг, направления по Wildberries,…
Сайт школы немецкого языка Deutsche Lehre
Разработал сайт для онлайн-школы немецкого языка Deutsche Lehre — образовательного проекта с курсами для взрослых, детей и учеников с разным уровнем подготовки. В проекте реализованы страницы…
Интернет-магазин косметики Era Minerals
Разработал интернет-магазин бренда Era Minerals — производителя натуральной минеральной декоративной косметики. В проекте реализованы каталог продукции для лица, глаз, бровей и губ, кисти и аксессуары, наборы…
Частые вопросы
Сколько стоит вёрстка сайта?
От 2 000 ₽ за час. Для макета с понятным объёмом называю фиксированную стоимость после разбора.
На оценку влияют количество уникальных шаблонов, наличие мобильных версий в макете, объём интерактива и то, нужна ли интеграция с CMS. Страницы с одинаковым оформлением не умножают стоимость: шаблон верстается один раз. Если макет ещё дорабатывается, удобнее работать по часам, чтобы не пересогласовывать фиксированную сумму после каждого изменения.
Сколько времени занимает вёрстка?
Зависит от количества страниц и сложности адаптива, называю после разбора макета. Отдельная вёрстка лендинга обычно быстрее, чем многостраничного сайта.
На срок влияет и готовность макета. Если в нём есть все экраны, мобильные версии и состояния элементов, работа идёт без остановок. Если часть экранов придумывается по ходу, появляются паузы на согласование. Срок называю вместе с оценкой, а промежуточный результат показываю по мере готовности страниц.
Верстаете по макетам из Figma?
Да, Figma — основной формат. Если макета нет, подскажу, как его получить, или сверстаю по согласованному прототипу.
Из Figma удобно брать размеры, цвета и шрифты, экспортировать изображения и иконки. Точной вёрстке помогает, когда в макете использованы стили и компоненты, а отступы выдержаны по сетке. Если макет собран менее аккуратно, это не препятствие: спорные места уточняю у вас или дизайнера до начала работы.
Адаптивная вёрстка входит в стоимость?
Да, если в макете есть мобильные версии. Если их нет, адаптирую по логике дизайна и согласую ключевые экраны.
Адаптивная вёрстка означает, что одна и та же страница перестраивается под ширину экрана: колонки складываются, меню сворачивается, изображения уменьшаются. Проверяю результат на распространённых размерах экранов телефонов, планшетов и компьютеров. Если мобильной версии в макете нет, сначала показываю ключевые экраны, а после согласования переношу этот подход на остальные страницы.
Что нужно от меня для старта?
Ссылка на макет в Figma с доступом на просмотр, шрифты и пожелания по анимациям. Если вёрстку потом подключаю к CMS, нужен доступ к сайту.
Если шрифты платные, нужна лицензия на использование на сайте. Полезно заранее описать, какие элементы интерактивные: что происходит при наведении, клике, открытии меню и отправке формы. Для вёрстки под существующий сайт пришлите адрес и доступ к коду, чтобы новые блоки не конфликтовали с текущими стилями.
Можно ли сразу встроить вёрстку в CMS?
Да, интегрирую в WordPress или 1С-Битрикс. Если нужен сайт целиком, смотрите разработку сайтов.
Для 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 — оценю объём и сроки вёрстки.
