Вёрстка сайта из макета Figma и PSD
Из макета Figma или PSD — чистый HTML, CSS и JS. Адаптив от 320 пикселей, проверка в реальных браузерах, формы подключены и работают.
Что делаем
Что входит
в работу
Верстаю пиксель в пиксель по макету, но не молча: если в макете не хватает состояния кнопки, мобильной раскладки блока или поведения длинного заголовка — спрашиваю, а не выдумываю. Такие места обычно и всплывают потом как «вёрстка не совпадает с дизайном».
Отдаю читаемый код без сборок из десяти библиотек ради одного слайдера. Адаптив от 320 пикселей, проверка в Chrome, Safari, Firefox и на реальных телефонах, а не только в эмуляторе.
- HTML, CSS, JS по макету Figma, PSD, Sketch или XD
- Адаптив от 320 px: телефон, планшет, ноутбук, широкий монитор
- Кроссбраузерность: Chrome, Safari, Firefox, Edge, мобильные браузеры
- Формы подключены и отправляются — на почту, в Telegram или в таблицу
- Оптимизация картинок: WebP, нужные размеры, отложенная загрузка
- Семантика и доступность: заголовки по уровням, alt, фокус с клавиатуры
- Комментарии в коде и понятные имена классов — чужой разработчик разберётся
- 14 дней бесплатных правок по согласованному ТЗ после сдачи
Подробности
Что двигает цену
- Состояние макета. Аккуратный макет с автолейаутами и компонентами верстается быстро. Макет, где отступы на глаз и каждый блок нарисован заново, — дольше и дороже.
- Количество состояний: наведение, активное, отключённое, ошибка, загрузка. Если их нет в макете, их надо придумать.
- Анимации. Плавное появление — недорого. Сложная последовательность со скроллом — отдельная работа.
Где обычно спотыкаются
- В макете нет мобильной версии, и её досочиняет верстальщик. Результат почти всегда расходится с ожиданиями дизайнера.
- Шрифты без лицензии. На проде такой шрифт приходится менять, и вёрстка едет.
- Картинки в макете в полном разрешении. Без оптимизации страница весит десятки мегабайт и грузится вечность.
Цены
Прайс
по этой услуге
Стартовые цены. После короткого брифа называю точную сумму — она фиксируется письменно и не меняется, пока не меняется задача. Оценка бесплатная.
Полный прайс на 36 услуг — на главной странице.
Как идёт работа
Четыре шага
от заявки до сдачи
- Бриф
Описываете задачу в двух-трёх фразах — в Telegram или через форму. Если чего-то не хватает, задаю уточняющие вопросы.
- Смета и срок
В тот же день присылаю точную сумму и дату сдачи. Цена фиксируется письменно и не меняется, пока не меняется задача. Оценка бесплатная.
- Работа с показом этапов
Показываю промежуточный результат каждый день — структуру, макет, собранную страницу. Правки вносим по ходу, а не в последний день.
- Сдача и 14 дней правок
Отдаю проект, показываю, как менять тексты самостоятельно. Две недели после сдачи правки по согласованному ТЗ — бесплатно.
Работы
Из портфолио
Живые демо-проекты: откройте любой — всё кликается, считается и работает на телефоне. Все 46 работ — на главной.
online
online
online
online
online
onlineЧастые вопросы
Что спрашивают
перед заказом
От чего зависит цена вёрстки?
От количества уникальных экранов и сложности анимации. 5 000 ₽ — это простой лендинг в один экранный поток. Многостраничник, нестандартные анимации, таблицы, календари и карты считаются отдельно. Пришлите ссылку на макет — назову точную сумму в тот же день, смотреть бесплатно.
В каком виде нужен макет?
Ссылка на Figma с доступом на просмотр — самый удобный вариант. PSD, Sketch, XD тоже подходят. Если есть только картинка в JPG, верстать можно, но дороже и дольше: размеры и отступы приходится восстанавливать на глаз.
Вы верстаете под WordPress или Tilda?
Верстаю в чистый HTML/CSS/JS, а при необходимости натягиваю на WordPress — это считается как создание сайта на WordPress, 25 000 ₽. В Tilda код встраивается блоком T123, такие задачи тоже делаю.
Что с адаптивом, если в макете только десктоп?
Сделаю адаптив по своему решению и покажу до финальной сборки, чтобы вы согласились с раскладкой. Так дешевле, чем рисовать отдельный мобильный макет, но решение остаётся за вами.
Как проверяется результат?
Отдаю ссылку на собранную страницу, её можно открыть с любого устройства. Проверяю сам в Chrome, Safari, Firefox, Edge и на реальных iPhone и Android. Расхождения с макетом правятся бесплатно — это часть работы, а не отдельная услуга.
Заявка
Оставьте заявку
Три поля — этого хватит. Отвечаем круглосуточно, в течение 5 минут, называем точную цену и срок.
Другие услуги
Сколько это стоит на рынке