Вёрстка сайта по макету

Вёрстка — это перевод макета в рабочий код: страница должна выглядеть как в Figma, одинаково открываться на телефоне и мониторе, быстро грузиться и нормально индексироваться. Верстаем по готовым макетам и подключаем к CMS, чтобы вы могли править тексты сами. Вёрстка сайта по макету — от 15 000 ₽.

Что входит в работу

• Точность по макету. Сетка, отступы, шрифты и цвета — как задумал дизайнер, без «примерно так».
• Адаптив. Телефон, планшет, ноутбук, большой монитор. Мобильную версию проверяем на реальных устройствах, а не только в эмуляторе браузера.
• Кроссбраузерность. Актуальные версии Chrome, Safari, Firefox, Edge.
• Чистый семантический код. Правильные теги и заголовки, alt у картинок, микроразметка — то, без чего продвижение начинается с переделки.
• Скорость. Оптимизация картинок, отложенная загрузка, аккуратные шрифты и скрипты. Ориентируемся на Core Web Vitals.
• Интерактив. Меню, слайдеры, табы, формы с проверкой полей и понятными состояниями ошибок.
• Подключение к CMS. WordPress или 1С-Битрикс: редактируемые блоки, чтобы менять контент без разработчика.

От чего зависит цена

Простой макет в одну-две страницы — от 15 000 ₽. Дальше сумма зависит от четырёх вещей:

1. Количество уникальных экранов и блоков. Десять однотипных карточек — это один блок, а не десять.
2. Сложность анимаций и интерактива. Параллакс, сложные переходы и калькуляторы считаются отдельно.
3. Глубина адаптива. Два брейкпоинта или четыре с перестройкой логики блоков.
4. Подключение к CMS. Чистая вёрстка дешевле, чем вёрстка с настройкой редактируемых областей.
5. Состояние макета. Если в макете не заданы состояния и мобильная версия, часть решений приходится принимать за дизайнера — это время.

Пришлите ссылку на макет — посмотрим и назовём фиксированную цену со сроком. Если макета ещё нет, начнём с него: UI/UX дизайн интерфейсов.

Как проходит работа

1. Разбор макета. Проверяем полноту: все ли экраны, состояния и мобильные версии на месте, какие шрифты и лицензии нужны.
2. Вёрстка блоков. Собираем по компонентам, чтобы одинаковые элементы жили в одном месте кода.
3. Адаптив и интерактив. Перестройка под устройства, меню, формы, проверка полей.
4. Тесты. Браузеры, реальные телефоны, валидатор, скорость.
5. Подключение и сдача. CMS, инструкция по редактированию, правки по нашим ошибкам — бесплатно.

Смежные задачи

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

Виды вёрстки и что мы используем

• Адаптивная. Макет перестраивается под ширину экрана по контрольным точкам. Базовый вариант для любого сайта сегодня.
• Резиновая. Блоки тянутся вслед за окном без жёстких точек — удобна для простых страниц и лендингов.
• Фиксированная. Жёсткая ширина. Оправдана редко: внутренние сервисы, где известны устройства сотрудников.
• Блочная семантическая. Современный стандарт: секции, заголовки и списки размечены тегами по смыслу, а не «дивами на всё».

По умолчанию делаем адаптивную семантическую вёрстку на Flexbox и Grid: она переживает смену дизайна и не мешает продвижению.

Что нам нужно от макета

1. Мобильная версия. Если её нет, мы предложим решение сами, но лучше, чтобы это решил дизайнер.
2. Сетка и отступы. Единая система — иначе каждый блок придётся согласовывать отдельно.
3. Состояния элементов. Как выглядит кнопка при наведении, поле с ошибкой, пустой список, длинное название.
4. Шрифты и лицензии. Название гарнитуры и право использовать её на сайте: коммерческие шрифты лицензируются отдельно.
5. Иконки и графика в векторе, фото — в исходном размере.

Если чего-то не хватает, мы говорим об этом до начала работы, а не в день сдачи.

Что проверяем перед сдачей

• совпадение с макетом по сетке и отступам;
• валидность HTML и CSS по официальным валидаторам;
• реальные телефоны и планшеты, а не только эмулятор браузера;
• Chrome, Safari, Firefox, Edge в актуальных версиях;
• скорость и Core Web Vitals в PageSpeed Insights;
• работу форм: отправка, проверка полей, сообщения об ошибке и об успехе;
• корректную иерархию заголовков, alt у картинок, favicon и страницу 404;
• отображение при выключенных картинках и медленном интернете.

Ошибки вёрстки, из-за которых страдает продвижение

1. Тексты картинками. Поиск их не читает, а вы теряете и запросы, и доступность.
2. Несколько H1 или заголовки вразнобой. Структура документа рассыпается, странице сложнее ранжироваться.
3. Тяжёлые изображения. Фото по три мегабайта убивают скорость на мобильном интернете.
4. Шрифты без отложенной отрисовки. Текст не виден, пока не загрузится гарнитура, — человек смотрит на пустой экран.
5. Скрипты в начале страницы. Блокируют отрисовку и портят Core Web Vitals.
6. Вёрстка «дивами на всё». Нет семантики — нет понятной структуры ни для поиска, ни для скринридеров.

Частые вопросы

Сколько стоит вёрстка сайта?

От 15 000 ₽ за простой макет. Дальше считаем по количеству уникальных экранов и блоков, сложности анимаций, глубине адаптива и тому, нужно ли подключение к CMS. Пришлите макет — назовём фиксированную цену и срок.

Что такое адаптивная вёрстка?

Это когда одна и та же страница корректно показывается на мониторе, планшете и телефоне: блоки перестраиваются, шрифты и отступы меняются, ничего не уезжает за экран. Сегодня это не опция, а норма — с телефонов приходит больше половины людей.

Вы верстаете из Figma?

Да, это основной формат. Работаем с Dev Mode, забираем размеры, шрифты и цвета прямо из макета. Принимаем также PSD и XD, но в Figma процесс быстрее и точнее.

Вы подключите вёрстку к CMS?

Да. Подключаем к WordPress и 1С-Битрикс, настраиваем редактируемые блоки, чтобы вы могли менять тексты и картинки сами. Можем отдать и чистую вёрстку, если её будет подключать ваша команда.

Как вы проверяете качество?

Сверяем с макетом по сетке, прогоняем валидатор, проверяем в актуальных версиях Chrome, Safari, Firefox и Edge, на реальных телефонах, смотрим скорость в PageSpeed и Core Web Vitals. Правки по нашим ошибкам — бесплатно.