Объясняем, что делает фронтенд и что — бэкенд, как они связаны через API и почему заказчику эта граница важна для сметы, поиска багов и приёмки работ.
Читать дальшеВерстка сайта по макету figma
Превращаем макет Figma в живой, быстрый и адаптивный сайт. Pixel-perfect до пикселя, чистый компонентный код на React, готовность к нашей CMS — без «почти как в дизайне» и без переделок.
Рассчитать стоимость
Какой у вас тип проекта?
Типичные ситуации
Когда дизайн уже есть, а сайта всё ещё нет
01Дизайнер сдал красивый макет в Figma, но он так и остался картинкой — превратить его в работающий сайт некому.
02Прошлый верстальщик сделал «на глаз»: в браузере отступы поехали, шрифты не те, на мобильном всё рассыпается.
03Сверстали дёшево на фрилансе — теперь код невозможно поддерживать, и любая правка ломает соседние блоки.
04Вёрстка не бьётся с CMS: страницы нельзя редактировать без программиста, контент-менеджер заблокирован.
05Сайт грузится медленно, PageSpeed красный, Яндекс понижает в выдаче из-за тяжёлых картинок и мусорного кода.
06На разных устройствах сайт выглядит по-разному: в Safari на iPhone половина элементов съезжает.
Что входит в вёрстку сайта по макету
Вёрстка — это перевод дизайн-макета из Figma или PSD в работающий код, который браузер показывает один в один с задумкой дизайнера. Мы берём на себя всю техническую часть: раскладываем макет на блоки, пишем чистый адаптивный HTML/CSS, подключаем интерактив на React и доводим страницу до идеального соответствия дизайну на любом экране. Это не «нарисовать заново» — у вас уже есть макет, наша задача безупречно его реализовать.
Сколько стоит вёрстка по макету
Цена зависит от количества экранов, сложности дизайна, анимаций и интерактива. Ориентиры по нашей практике (только вёрстка готового макета, без проектирования и наполнения):
- Вёрстка одной страницы по макету — от 8 000 ₽ за экран;
- Вёрстка лендинга (одностраничник) по макету — от 25 000 ₽;
- Вёрстка сайта-визитки (несколько страниц) — от 35 000 ₽;
- Вёрстка многостраничного корпоративного сайта — от 80 000 ₽;
- Вёрстка интернет-магазина (каталог, карточка, корзина) — от 120 000 ₽;
- Точечные правки и доработки существующей вёрстки — 2 500 ₽/час.
Точную смету фиксируем после оценки макета — она не меняется в процессе. Дёшево на бирже можно сверстать от 500–1500 ₽ за страницу, но такой код, как правило, потом приходится переделывать: о рисках ниже.
Почему дешёвая вёрстка обходится дороже
Самая частая история: сэкономили на вёрстке, а через полгода платят второй раз. Код «на глаз» расходится с макетом, не проходит по PageSpeed, ломается в Safari на iPhone, а любая правка тянет за собой каскад багов. Мы верстаем на компонентах React: каждый блок переиспользуем, изменения локальны, сайт не «падает» от добавления кнопки. Это дороже на старте и заметно дешевле в перспективе — вы не выбрасываете код через год.
Вёрстка под нашу CMS и под SEO
Мы изначально готовим вёрстку к интеграции: семантические теги, корректная иерархия заголовков, микроразметка Schema.org, оптимизированные изображения. Это фундамент, без которого SEO-продвижение буксует. А если верстаем под нашу CMS на React, контент-менеджер редактирует блоки и тексты самостоятельно — без обращения к разработчику на каждую запятую.
Сроки
Лендинг по готовому макету собираем за 5–10 рабочих дней, сайт-визитку — за 1–2 недели, многостраничник и магазин — от 3 недель в зависимости от объёма. Срок фиксируем в договоре вместе со сметой и держим его, при необходимости подключая дополнительных специалистов команды.
Кому подходит услуга
01
Владельцам бизнеса с готовым макетом Figma/PSD, которым нужен исполнитель на техническую часть без потери качества дизайна.
02
Дизайн-студиям и агентствам, которым нужен надёжный подрядчик по вёрстке на постоянной основе.
03
Маркетологам, запускающим лендинг под рекламную кампанию — когда дизайн уже отрисован, а время поджимает.
04
Компаниям, переделывающим устаревший сайт: новый макет нарисован, нужна аккуратная адаптивная вёрстка под интеграцию.
05
Тем, кто обжёгся на дешёвой вёрстке и теперь ищет код, который можно развивать годами, а не выбрасывать.
Технологии и форматы
Принимаем макеты: Figma, PSD (Photoshop), Sketch, XD, AI — работаем с любыми исходниками.
React + TypeScript для интерактивных компонентов: формы, слайдеры, табы, фильтры.
HTML5 + CSS3 (SCSS), семантическая разметка под SEO и микроразметку Schema.org.
Pixel-perfect контроль: сверка вёрстки с макетом попиксельно, а не «примерно похоже».
Адаптив под все брейкпоинты: десктоп, планшет, мобильный — тестируем на реальных устройствах и в Chrome, Safari, Яндекс.Браузере, Firefox.
Оптимизация скорости: WebP/AVIF, lazy-load, сжатие, минимальный DOM — зелёный PageSpeed.
Готовность к интеграции: верстаем сразу под нашу CMS на React, чтобы блоки редактировались без разработчика.
Как мы работаем
1
/ 6
Оценка макета. Смотрим Figma, считаем экраны и сложность, фиксируем смету и срок до старта — без «сюрпризов» в процессе.
2
/ 6
Договор и аванс. Подписываем договор с фиксированной сметой, оплата поэтапная 50/50: аванс 50%, остальные 50% — после приёмки работ.
3
/ 6
Разбор на компоненты. Раскладываем дизайн на переиспользуемые React-блоки — это ускоряет правки в будущем.
4
/ 6
Вёрстка pixel-perfect. Собираем адаптивные страницы, точно повторяя цвета, шрифты, отступы и анимации макета.
5
/ 6
Кроссбраузерное тестирование. Проверяем на десктопе, планшете, телефоне и во всех актуальных браузерах.
6
/ 6
Оптимизация и сдача. Сжимаем ресурсы, доводим PageSpeed, передаём исходники или сразу заводим на CMS.
Что меняется после качественной вёрстки
PageSpeed (мобильный)
Было
38 баллов
Стало
90+ баллов
Соответствие макету
Было
расхождения в отступах и шрифтах
Стало
pixel-perfect
Время загрузки
Было
4,5 сек
Стало
до 1,5 сек
Корректность в браузерах
Было
ломается в Safari/мобильных
Стало
стабильно везде
Скорость правок контента
Было
только через программиста
Стало
редактируется в CMS самостоятельно
Почему АП-ИМ
- С 2008 года в Санкт-Петербурге — вёрстка не подработка, а часть полного цикла разработки.
- Верстаем на компонентах React, а не на устаревшем «лапше-коде»: сайт легко развивать и масштабировать.
- Pixel-perfect как стандарт, а не как опция: то, что нарисовал дизайнер, вы получаете в браузере один в один.
- Сразу думаем про SEO: семантические теги, корректные заголовки, микроразметка — фундамент под продвижение.
- Своя CMS на React: вёрстка изначально готова к интеграции, контент редактируется без программиста.
- Один подрядчик на весь путь: можем не только сверстать, но и довести до запущенного сайта под ключ.
АП-ИМ, фрилансер или конструктор — что выбрать
| Критерий | АП-ИМ | Фрилансер | Конструктор |
|---|---|---|---|
| Точность по макету | Pixel-perfect, сверка по чек-листу | Как получится, «на глаз» | Ограничен шаблонами платформы |
| Качество кода | Компонентный React, чистый и поддерживаемый | Часто «лапша», тяжело развивать | Кода нет — вы внутри конструктора |
| Адаптив и браузеры | Тест на реальных устройствах | Проверяет не всегда | Зависит от шаблона |
| Готовность к SEO | Семантика и микроразметка с старта | Редко учитывается | Сильно ограничена |
| Договор и смета | Договор, фикс-смета | Без договора, риск пропасть | Платите за подписку постоянно |
| Права на код | Исходники ваши | Зависит от человека | Кода и переноса нет |
| Развитие проекта | Масштабируется без переделок | Часто требует переписать | Упираетесь в потолок платформы |
Точность по макету
АП-ИМPixel-perfect, сверка по чек-листу
ФрилансерКак получится, «на глаз»
КонструкторОграничен шаблонами платформы
Качество кода
АП-ИМКомпонентный React, чистый и поддерживаемый
ФрилансерЧасто «лапша», тяжело развивать
КонструкторКода нет — вы внутри конструктора
Адаптив и браузеры
АП-ИМТест на реальных устройствах
ФрилансерПроверяет не всегда
КонструкторЗависит от шаблона
Готовность к SEO
АП-ИМСемантика и микроразметка с старта
ФрилансерРедко учитывается
КонструкторСильно ограничена
Договор и смета
АП-ИМДоговор, фикс-смета
ФрилансерБез договора, риск пропасть
КонструкторПлатите за подписку постоянно
Права на код
АП-ИМИсходники ваши
ФрилансерЗависит от человека
КонструкторКода и переноса нет
Развитие проекта
АП-ИММасштабируется без переделок
ФрилансерЧасто требует переписать
КонструкторУпираетесь в потолок платформы
Условия работы
- Договор с фиксированной сметой: цена и срок согласованы до начала, без доплат «по ходу».
- Оплата поэтапная, 50/50: аванс 50%, остальные 50% — после приёмки работ.
- Весь код и исходники принадлежат вам: получаете репозиторий и полный доступ.
- Сопровождение после запуска — остаёмся на связи: дорабатываем и развиваем проект по договору поддержки.
- Pixel-perfect и кроссбраузерность зафиксированы в ТЗ — принимаете работу по чек-листу соответствия макету.
Частые вопросы
Студия АП-ИМ выполняет вёрстку сайта по макету Figma и PSD в Санкт-Петербурге с 2008 года. Мы делаем адаптивную, кроссбраузерную и pixel-perfect вёрстку на React: дизайн из Figma превращается в быстрый сайт с чистым компонентным кодом, зелёным PageSpeed и семантической разметкой под поисковое продвижение в Яндексе.
Заказать вёрстку по макету у нас выгоднее, чем на бирже фриланса: работаем по договору с фиксированной сметой и поэтапной оплатой 50/50, передаём исходники в собственность и готовим вёрстку к интеграции с CMS. От одной страницы до интернет-магазина — пришлите макет, рассчитаем точную стоимость и срок.
Полезные статьи