Вёрстка сайта из Figma

Вёрстку можно заказать отдельно, без разработки сайта под ключ.

Вы присылаете макет, а я отдаю готовый код.

Что вы получаете

• Точность до макета: Отступы, шрифты, цвета и состояния элементов: наведение, нажатие, ошибки в формах.
• Адаптив: Сайт хорошо выглядит на телефоне, планшете и компьютере. Если в макете есть только десктоп и телефон, промежуточные экраны дорабатываю сам, чтобы ничего не съезжало.
• Чистый код: Компонентный подход и методология БЭМ: код легко поддерживать и передать другому разработчику.
• Скорость: Оптимизированные изображения и шрифты, минимум лишнего JavaScript.
• Доступность: Семантическая разметка, работа с клавиатуры, контраст текста.

В каком виде отдаю

• статичный HTML и SCSS: для лендингов и простых сайтов;
• компоненты Vue 3 или страницы Nuxt, если проект на этом стеке;
• компоненты React, если у вас React;
• вёрстку, встроенную в ваш текущий проект или тему WordPress.

Как подготовить макет

О том, что стоит сделать в Figma до начала, чтобы вёрстка прошла быстрее и без лишних вопросов, рассказываю в статье вёрстка сайта из Figma: что подготовить.

Коротко: стили текста и цветов, компоненты с состояниями, Auto Layout, хотя бы два размера экрана.

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

Считаю от макета: посмотрю его и назову цену и сроки. Влияют:

• количество уникальных страниц и блоков;
• есть ли мобильная версия макета;
• анимации и нестандартные взаимодействия;
• стек: статичная вёрстка, Vue/Nuxt, React или WordPress;
• сроки.

Как проходит работа

1. Вы присылаете ссылку на макет.
2. Я просматриваю его и задаю вопросы по неочевидным местам.
3. Верстаю, показываю промежуточный результат по тестовой ссылке.
4. Правки, проверка на реальных устройствах, передача кода или публикация.

Нужна не только вёрстка, но и сайт целиком? Смотрите лендинг, корпоративный сайт или full-stack разработку.