Вёрстка сайта по макету из Figma и PSD
Верстаю макеты в готовые страницы: адаптив под все разрешения, кроссбраузерность, чистый семантичный код. Работаю с дизайнерами и студиями на подряде, а также с заказчиками, у которых дизайн уже готов.
Что делаю
Вёрстка из Figma
Основной формат. Забираю макет по ссылке, работаю со слоями, стилями и компонентами. Если в макете настроены auto layout и переменные — вёрстка выходит быстрее и точнее.
Вёрстка из PSD, Sketch, XD
Тоже беру. С PSD чуть дольше: приходится вытаскивать размеры и ассеты вручную.
Натяжка на WordPress
Готовую вёрстку подключаю к WordPress: шаблоны, вывод контента, настройка админки, чтобы заказчик мог менять тексты и картинки сам. Делаю как на классических темах, так и в блочном редакторе.
Адаптив
Верстаю под десктоп, планшет и мобильные. Если в макете нарисован только десктоп — адаптив продумываю сам и согласую промежуточные состояния до сдачи.
Доработка чужой вёрстки
Починить сломанный адаптив, привести к макету, исправить кроссбраузерность. Сначала смотрю код и говорю честно: чинить или переверстать — иногда второе дешевле.
Что получаете на выходе
- Точное соответствие макету — отступы, размеры, шрифты, состояния кнопок; проверяю наложением
- Адаптив без горизонтальной прокрутки на любых разрешениях, включая узкие экраны
- Кроссбраузерность — Chrome, Firefox, Safari, Edge, мобильные браузеры
- Семантичная разметка — правильные теги, один H1, логичная иерархия заголовков: важно и для SEO, и для доступности
- Оптимизированные изображения — WebP, нужные размеры, ленивая загрузка
- Работающие интерактивные элементы — меню, слайдеры, аккордеоны, модальные окна, формы с валидацией
- Читаемый код — с комментариями и понятной структурой, чтобы его мог подхватить другой разработчик
- Проверка скорости — смотрю Core Web Vitals до сдачи
Что нужно от вас
Чем полнее исходные данные, тем меньше вопросов по ходу и тем точнее срок.
- Макет — ссылка на Figma с доступом на просмотр или файл
- Все состояния — наведение на кнопки, активные пункты меню, открытые аккордеоны, ошибки в формах
- Мобильная версия — если её нет, скажите: продумаю сам, но это отдельное время
- Шрифты — файлы или ссылка на источник
- Что должно быть редактируемым — если нужна натяжка на WordPress
- Особые требования — поддержка старых браузеров, анимации, ограничения по весу страницы
Если чего-то нет — не страшно, обсудим. Просто лучше выяснить это до начала, а не на середине.
Сколько стоит
| Работа | Цена | Срок |
|---|---|---|
| Вёрстка лендинга по макету | от 300 BYN | от 3 дней |
| Вёрстка многостраничного сайта | от 650 BYN | от 7 дней |
| Натяжка вёрстки на WordPress | от 450 BYN | от 5 дней |
| Правка чужой вёрстки | 45 BYN/час | по объёму |
На стоимость влияют: количество уникальных блоков, сложность анимаций, число адаптивных состояний и нужна ли натяжка на CMS. Пришлите макет — посмотрю объём и назову точную цену и срок. Оценка бесплатная, обычно отвечаю в тот же день.
Как работаем
1. Присылаете макет
Смотрю объём и сложность, называю цену и срок.
2. Согласуем смету
Фиксируем стоимость и дату сдачи. Если в макете вижу проблемы — например, невозможный на мобильных блок — говорю сразу, до начала.
3. Верстаю
По ходу показываю промежуточный результат на тестовом адресе — можно смотреть и комментировать, не дожидаясь конца.
4. Проверка и правки
Проверяю наложением на макет, на устройствах и в браузерах. Правки по несоответствию макету — бесплатно, это моя работа.
5. Сдача
Отдаю исходники или разворачиваю на вашем хостинге. Остаюсь на связи: если что-то всплывёт после сдачи — исправлю.
Частые вопросы
Сколько стоит вёрстка лендинга по макету?
От 300 BYN за лендинг, от 650 BYN за многостраничный сайт. Точная цена зависит от количества уникальных блоков и сложности анимаций. Пришлите макет — оценю бесплатно, обычно в тот же день.
Работаете с дизайнерами и студиями на подряде?
Да, это значительная часть работы. Работаю по вашему ТЗ, соблюдаю сроки, при необходимости подписываю NDA и не свечу проект в портфолио.
Что если в макете нет мобильной версии?
Продумаю адаптив сам и согласую с вами до вёрстки, чтобы не переделывать потом. Это дополнительное время, оно учитывается в смете.
Верстаете на чистом HTML или на фреймворках?
Обычно чистый HTML, CSS и JavaScript — этого достаточно для сайтов, и такой код легко поддерживать. Если у вас требования по стеку (Tailwind, Bootstrap, сборщики) — работаю по ним.
Даёте гарантию?
Да. Несоответствия макету, поломки адаптива и ошибки в браузерах исправляю бесплатно. Доработки сверх изначального макета — по договорённости.
Можно ли натянуть вёрстку на WordPress?
Да. Настраиваю так, чтобы заказчик мог менять тексты, изображения и повторяющиеся блоки через админку без обращения к разработчику.
Пришлите макет
Дайте ссылку на Figma — посмотрю и назову цену и срок. Оценка бесплатная.
Телефон: +375 29 58-59-549
Почта: info@webid.by