01
Разбор макета
Смотрим сетку, отступы, типографику, поведение блоков, состояния элементов, повторяющиеся компоненты и точки адаптива.
Чтобы не верстать вслепую и не терять системность
Берём дизайн из Figma и аккуратно собираем его в код: адаптивная вёрстка, чистая структура, интерактив, формы, скорость, базовая SEO-подготовка и нормальная передача проекта дальше в разработку или на запуск.
Вёрстка по макету Figma начинается не с копирования пикселей, а с понимания компонентов, состояний, адаптивной логики и того, как этот дизайн должен работать в браузере.
Смотрим сетку, отступы, типографику, поведение блоков, состояния элементов, повторяющиеся компоненты и точки адаптива.
Собираем HTML/CSS/JS, анимации, интерактив, формы, модальные окна и всё, что заложено в интерфейсной логике макета.
Тестируем вёрстку на устройствах, смотрим скорость, корректируем шероховатости и передаём понятную базу для интеграции или запуска.
Учитываем компоненты, повторные блоки, логику состояний и масштабирование проекта, чтобы результат было не стыдно развивать дальше в CMS, React, WordPress или кастомной разработке.
Фиксируем, сколько экранов, состояний, адаптивов, анимаций и нестандартных блоков реально нужно собрать.
Выстраиваем структуру и стили по компонентам, а не хаотично по экранам, чтобы проект было легче поддерживать.
Настраиваем поведение блоков на разных разрешениях, форм, меню, табов, модалок и других интерфейсных элементов.
Проверяем отображение, вносим финальные правки и передаём результат в удобном виде для следующего этапа.
HTML строится так, чтобы проект было понятно поддерживать, индексировать и передавать дальше без хаоса.
Макет не “ломается” на промежуточных разрешениях, а ведёт себя логично и аккуратно на разных устройствах.
Без тяжёлой каскадной каши, лишних зависимостей и случайных решений, которые потом мешают интеграции.
После вёрстки проект можно подключать к CMS, собирать на фреймворке, дополнять страницами и развивать дальше.
На стоимость влияет количество экранов, сложность сетки, адаптивные состояния, анимации, формы, интерактив, компоненты, а также формат передачи результата после вёрстки.
Один лендинг и интерфейс с большим количеством карточек, табов, фильтров, модалок и сложных анимаций требуют разного объёма фронтенд-работ.
До старта определяем, что именно верстается, нужны ли JS-доработки, куда дальше идёт проект и в каком виде должен передаваться код.
До старта видно, какие страницы, секции, компоненты и состояния входят в работу, а не появляются по ходу без конца.
Ориентируемся на аккуратную реализацию макета, а не на быстрый “скриншотный” перенос, который красиво выглядит только на одном размере.
Код и структура пригодны для дальнейшей интеграции в CMS, шаблон, конструктор или полноценный продуктовый фронтенд.
Если в Figma есть спорные или недорисованные места, обсуждаем это заранее и не оставляем критичные решения “на потом”.
Иногда нужен чистый HTML/CSS/JS, иногда подготовка под WordPress или интеграцию, а иногда имеет смысл сразу закладывать компонентный подход. Разбираем задачу до начала вёрстки.
Да. Можно сделать как отдельный лендинг или сервисную страницу, так и серию экранов или полноценный набор страниц сайта.
Да, но адаптив тогда проектируется по логике интерфейса. Лучше уточнить ключевые приоритеты ещё до старта работ.
Да. Мы сразу учитываем, как будет использоваться вёрстка дальше, чтобы не собирать тупиковую структуру.
Да, если они действительно нужны в проекте. На этапе оценки сразу фиксируем, какие эффекты входят в работу.
Пришлите ссылку на Figma, объём экранов и комментарии по адаптиву или анимациям. Подскажем формат работ, оценим сложность и предложим удобный способ запуска проекта.
Ответим со структурой работ, оценкой сложности и следующим шагом по проекту.