Frontend-разработка

Адаптивная вёрстка сайта по макету Figma

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

Что входит
Figma HTML/CSS/JS Адаптивность Компоненты
Первый результат

Что будет понятно после первого разбора макета

До оценки фиксируем состав интерфейса, технические риски и границы фронтенд-работы.

1 карта

Уникальные экраны

Отделяем реальные шаблоны от повторяющихся страниц и состояний.

6 групп

Компоненты

Кнопки, формы, карточки, таблицы, навигация и модальные элементы.

3 ширины

Адаптивная логика

Определяем контрольные точки и поведение между ними.

1 список

Недостающие состояния

Фиксируем ошибки, hover, focus, loading и пустые результаты.

1 схема

Передача в разработку

Определяем структуру файлов, зависимости и формат интеграции.

1 оценка

Срок и бюджет

Формируем диапазон по экранам, компонентам и сложности интерактива.

Технический контроль

Что контролируем в процессе вёрстки

Интерфейс проверяется не только визуально, но и по поведению, доступности и производительности.

01 01

Диагностика

Проверяем исходное состояние и зависимости.

02 02

Архитектура

Учитываем структуру, данные и будущие изменения.

03 03

Безопасность

Работаем с резервными копиями и ограниченными доступами.

04 04

Производительность

Не добавляем решения, которые необоснованно замедляют проект.

05 05

Интеграции

Проверяем внешние сервисы, API и обработку ошибок.

06 06

Контроль

Тестируем результат по согласованным сценариям.

Организация работы

Чем системная вёрстка отличается от сборки экранов

Сравниваем не красоту первого скриншота, а качество готового фронтенда.

Задача Вёрстка отдельных экранов веб-студия «Vagizov»
Оценка

Цена называется без изучения исходных данных.

Сначала проверяем задачу и зависимости, затем фиксируем смету.
План

Работы начинаются с разрозненных поручений.

Есть последовательность, границы и критерии приёмки.
Коммуникация

Клиент координирует нескольких исполнителей.

Вопросы собирает один руководитель проекта.
Техническая часть

Результат проверяется только визуально.

Проверяем код, данные, ошибки и рабочие сценарии.
Допработы

Новые платежи появляются по ходу проекта.

Дополнительный объём согласуется до выполнения.
Передача

После оплаты остаётся только готовый файл или правка.

Передаём документацию и рекомендации по дальнейшей работе.
Принципы

Принципы качественной вёрстки

Решения должны выдерживать реальные данные и дальнейшее развитие сайта.

Сначала анализ макета

Недостающие состояния и противоречия фиксируются до начала кода.

Компоненты вместо копий

Повторяющиеся элементы имеют единые правила и структуру.

Реальный контент

Проверяем длинные тексты, пустые данные и разное число карточек.

Доступный интерактив

Клавиатура, focus и сообщения об ошибках учитываются сразу.

Умеренные зависимости

Не подключаем тяжёлую библиотеку ради одного простого эффекта.

Понятная передача

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

Расчёт проекта

От чего зависит стоимость вёрстки

Основные факторы — уникальные шаблоны, компоненты, состояния, адаптивы, интерактив и формат интеграции.

PAGE

Типы страниц

Учитываются уникальные шаблоны, а не только общее число URL.

STATE

Состояния

Hover, focus, errors, loading, empty и варианты данных.

MOBILE

Адаптивы

Полнота mobile-макетов и сложность перестроения компонентов.

JS

Интерактив

Меню, модальные окна, фильтры, таблицы и сложные формы.

STACK

Стек и сборка

Git, npm, линтеры, существующий репозиторий и соглашения команды.

CMS

Интеграция

Чистый фронтенд или внедрение в WordPress и серверные шаблоны.

Форматы и ориентиры бюджета

Небольшой макет

Вёрстка Старт

90 000–140 000 ₽

Landing Page или до трёх типов экранов с базовым интерактивом.

Многостраничный сайт

Вёрстка Бизнес

160 000–280 000 ₽

Несколько шаблонов, компонентная система, Git и подготовка к CMS.

В ежемесячном формате

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

  • Аудит FigmaЭкраны, компоненты, состояния и исходные ресурсы.
  • Архитектура CSSСетка, переменные, компоненты и адаптивные правила.
  • HTML-разметкаСемантическая структура страниц и форм.
  • JavaScriptМеню, модальные окна, вкладки и другие сценарии.
  • ПроверкаБраузеры, мобильные экраны, контент и доступность.
  • ПередачаGit, сборка, зависимости и инструкция для интеграции.
Отдельная оценка

Что оценивается отдельно

  • Проектирование недостающих экрановМобильные версии, состояния и новые компоненты вне исходной Figma.
  • Интеграция в WordPressТема, ACF, Gutenberg, WooCommerce и серверные шаблоны.
  • Backend и APIОтправка форм, авторизация, личный кабинет и бизнес-логика.
  • Сложная анимацияCanvas, WebGL, 3D, motion-сценарии и интерактивная графика.
  • Поддержка legacy-браузеровПолифилы, отдельные исправления и расширенное тестирование.
  • Контентное наполнениеПеренос текстов, изображений, таблиц и большого числа страниц.
Тарифы

Тарифы на вёрстку сайта по макету

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

Компактный проект

Вёрстка Старт

90 000–140 000 ₽
15–20 рабочих дней

Для ограниченной задачи или небольшого проекта с понятными исходными данными.

  • Аудит Figma
  • До трёх типов экранов
  • Адаптивная сетка
  • Базовый JavaScript
  • Формы и состояния
  • Передача HTML/CSS/JS
Многостраничный сайт

Вёрстка Бизнес

160 000–280 000 ₽
20–35 рабочих дней

Для проекта, где требуется полноценная проработка, внедрение и контроль результата.

  • Карта компонентов
  • До восьми типов шаблонов
  • Расширенный интерактив
  • Таблицы и модальные окна
  • Git и сборка
  • Документация передачи
Сложный интерфейс

Frontend Система

320 000–600 000+ ₽
от 35 рабочих дней

Для большого объёма, сложной архитектуры, интеграций или нестандартных требований.

  • Декомпозиция сценариев
  • UI-kit компонентов
  • Фильтры и сложные формы
  • Работа в существующем репозитории
  • Performance-контроль
  • Сопровождение интеграции
Состав работ

Что входит в адаптивную вёрстку

01

Аудит макета и состояний

Аудит макета и состояний. Объём и способ реализации определяются после изучения задачи.

02

Семантическая HTML-разметка

Семантическая HTML-разметка. Объём и способ реализации определяются после изучения задачи.

03

Адаптивные сетки

Адаптивные сетки. Объём и способ реализации определяются после изучения задачи.

04

Компоненты и UI-состояния

Компоненты и UI-состояния. Объём и способ реализации определяются после изучения задачи.

05

Формы и валидация

Формы и валидация. Объём и способ реализации определяются после изучения задачи.

06

Анимации без перегрузки

Анимации без перегрузки. Объём и способ реализации определяются после изучения задачи.

07

Оптимизация ресурсов

Оптимизация ресурсов. Объём и способ реализации определяются после изучения задачи.

08

Тестирование браузеров

Тестирование браузеров. Объём и способ реализации определяются после изучения задачи.

Для каких проектов

Для каких проектов подходит вёрстка по макету

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

Подходит, когдаЕсть Figma-макеты, понятен состав экранов и нужно получить адаптивный код для интеграции или дальнейшей разработки.
01

Landing Page

Один оффер, адаптивные блоки, формы и умеренная анимация.

02

Корпоративный сайт

Несколько типов страниц и единая система компонентов.

03

Интернет-магазин

Каталог, карточка, корзина и служебные состояния.

04

Сайт-каталог

Фильтры, таблицы, сравнение и сложные карточки.

05

Личный кабинет

Роли, таблицы, статусы, формы и пустые состояния.

06

Редизайн интерфейса

Новая вёрстка поверх существующей серверной части.

Процесс

Как проходит вёрстка сайта по макету

01

Проверка макетов

Собираем экраны, компоненты, адаптивы, состояния и требования к передаче.

Что подготовить
02

Декомпозиция

Определяем шаблоны, UI-компоненты, структуру файлов и зависимости.

Состав работ
03

Базовая реализация

Собираем сетку, типографику, ключевые компоненты и первый контрольный экран.

Принципы
04

Адаптивы и интерактив

Добавляем мобильные состояния, формы, меню, модальные окна и JavaScript.

Технический контроль
05

QA и передача

Проверяем браузеры, контент, доступность, сборку и готовим документацию.

Вопросы и ответы
Подбор формата

Какой формат вёрстки нужен вашему проекту

Ответьте на пять вопросов. Один вариант уже выбран; результат поможет определить масштаб фронтенд-работы.

Шаг 1 из 5 Первый вариант выбран — при необходимости измените
01Какой тип макета нужно сверстать?

Выберите ближайший вариант.

Для старта

Что подготовить для первичной оценки

Для первичной оценки нужен доступ к Figma или экспорт макетов и краткое описание того, куда будет передаваться результат.

Важно до старта

Границы и условия работы

Перед оценкой До оценки нужно определить, требуется только фронтенд или также интеграция в WordPress, CMS или приложение.
01

Дизайн не входит автоматически

Недостающие страницы и состояния либо предоставляет дизайнер, либо они оцениваются отдельно.

02

Интеграция — отдельный этап

WordPress, формы, CRM, API и серверная логика не считаются чистой вёрсткой.

03

Контент должен быть реалистичным

Сильное изменение объёма текста после сдачи может потребовать корректировок.

04

Сторонние лицензии отдельно

Платные шрифты, библиотеки и виджеты приобретаются заказчиком.

05

Список браузеров фиксируется

Поддержка устаревших браузеров увеличивает объём и согласуется заранее.

06

Новые экраны меняют оценку

Дополнительные шаблоны и сценарии после декомпозиции оцениваются отдельно.

Вопросы и ответы

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

Обсудить проект

Получить оценку вёрстки по Figma

Пришлите ссылку на макет, список страниц и описание интеграции. В ответ отметим недостающие состояния, формат и ориентир бюджета.

Как считается стоимость
Связанные услуги

Что может понадобиться дополнительно

Четыре направления выводятся отдельным блоком и не включаются в стоимость автоматически.

Все услуги →
Дизайн

Дизайн сайта

Проектируем структуру, прототипы, визуальную концепцию и дизайн-систему для корпоративных сайтов, магазинов, каталогов и цифровых сервисов.

от 140 000 ₽ Подробнее
Разработка

Сайты на WordPress

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

от 180 000 ₽ Подробнее
Веб-студия

Landing Page

Проектируем и разрабатываем Landing Page под конкретное предложение: структура, контент, индивидуальный дизайн, WordPress, формы, аналитика и интеграции.

от 140 000 ₽ Подробнее
Разработка

Доработка WordPress

Исправляем ошибки, создаём новые блоки и функции, дорабатываем WooCommerce, формы, интеграции и административную часть действующих WordPress-сайтов.

от 35 000 ₽ Подробнее

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

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

Веб-студия «Vagizov» выполняет адаптивную HTML-вёрстку лендингов, корпоративных сайтов, каталогов и интерфейсов. До оценки мы проверяем макеты, состав экранов, сетку, компоненты, состояния и требования к последующей интеграции. Если в дизайне не хватает мобильных вариантов, hover-состояний или логики сложных блоков, фиксируем это до начала разработки, а не принимаем решения случайно уже в коде.

Что проверяем в макете до начала

Качество результата зависит от полноты исходников. Проверяем наличие desktop- и mobile-макетов, сетки, шрифтов, иконок, изображений, экспортируемых SVG, вариантов карточек и состояний форм. Для каталога или личного кабинета отдельно нужны пустые состояния, ошибки, загрузка, длинные значения, фильтры и раскрывающиеся элементы.

  • список всех уникальных страниц и повторяемых компонентов;
  • макеты для ключевых контрольных ширин;
  • состояния hover, focus, active, disabled и error;
  • правила поведения меню, модальных окон, вкладок и аккордеонов;
  • исходники шрифтов, изображений, SVG и декоративной графики;
  • описание того, куда передаётся результат: WordPress, другая CMS или отдельный фронтенд.

Адаптивная вёрстка без привязки к одному экрану

Макет обычно показывает несколько контрольных разрешений, но сайт должен работать между ними. Мы строим гибкую сетку, используем содержательные ограничения ширины, CSS Grid и Flexbox, а не десятки точечных медиазапросов. Блоки перестраиваются по доступному пространству, текст не обрезается, кнопки не выпадают из карточек, а таблицы получают понятное мобильное поведение.

Отдельно проверяем узкие экраны, увеличение текста, длинные названия, отсутствие изображения и изменение количества карточек. Такой подход снижает риск, что страница выглядит правильно только на ноутбуке дизайнера, но ломается на реальном телефоне клиента.

Компонентный подход

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

Для сложного интерфейса согласуем соглашения по классам, переменным, состояниям и структуре файлов. При передаче другой команде добавляем пояснения по инициализации скриптов, зависимостям и ожидаемым данным. Если проект использует существующий UI-kit или дизайн-систему, вёрстка следует их правилам, а не создаёт параллельный набор компонентов.

HTML, CSS и JavaScript

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

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

Производительность и стабильность интерфейса

На этапе вёрстки закладываем размеры изображений и контейнеров, чтобы уменьшить CLS, не прячем основной контент до загрузки JavaScript и не ставим lazy-loading на вероятный LCP-ресурс. Подготавливаем responsive images, оптимизируем SVG, контролируем шрифты и порядок загрузки CSS и JavaScript.

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

Формы и интерактивные состояния

Вёрстка формы включает поля, маски, подсказки, ошибки, успешную отправку, недоступное состояние кнопки и согласие на обработку данных. Серверная отправка, CRM, почта и хранение заявок относятся к интеграции и оцениваются отдельно, если их нет в составе проекта.

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

Передача в CMS или другой команде

Чистая вёрстка может передаваться как набор HTML-шаблонов, компонентов и ресурсов. Если требуется интеграция в WordPress, подключение ACF, Gutenberg, WooCommerce, форм и административных полей — это отдельный этап разработки. Такое разделение позволяет точно понимать, где заканчивается фронтенд и начинается серверная логика.

Перед передачей собираем структуру проекта, проверяем относительные пути, удаляем тестовые данные и описываем запуск. Для совместной работы через Git согласуем ветки, правила сборки и формат pull request. Результат не должен зависеть от компьютера конкретного исполнителя.

Сроки и стоимость вёрстки

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

После просмотра Figma составляем перечень уникальных экранов и компонентов, отмечаем недостающие состояния и предлагаем формат работы. Небольшой лендинг начинается от 90 000 ₽, многостраничный проект — от 160 000 ₽, а сложный интерфейс оценивается после декомпозиции.