Figma
Основной формат: достаточно ссылки с доступом на просмотр. Беру размеры, шрифты и цвета прямо из макета.
Вёрстка сайта по макету
Превращу ваш макет из Figma, Photoshop или Sketch в адаптивную страницу: точно по дизайну, с чистым кодом и быстрой загрузкой. Могу передать готовую вёрстку вашему разработчику или перенести её в React и на CMS.
от 4 000 ₽за страницу
от 1 дняна простую страницу
по пикселямкак в макете
С какими макетами я работаю
PSD
Макеты из Photoshop: аккуратно вырезаю графику, перевожу эффекты и тени в код.
Sketch и Adobe XD
Работаю и с этими форматами. Для Sketch удобнее экспорт в Figma или PDF и список шрифтов.
Скриншот или пример
Макета нет? Сверстаю по скриншоту или по сайту, который вам нравится, и предложу, как адаптировать под телефон.
Какая вёрстка получится
Точно по макету
- Отступы, шрифты и цвета как в дизайне
- Состояния кнопок и полей: наведение, фокус, ошибка
- Плавные анимации там, где они задуманы
- Проверка в основных браузерах
Адаптивная
- Одинаково хорошо на телефоне, планшете и компьютере
- Если нет мобильного макета, предлагаю, как перестроить блоки
- Удобные для пальца кнопки и меню
- Без горизонтальной прокрутки
Чистая и быстрая
- Семантическая разметка: заголовки, списки, разделы
- Оптимизированные картинки и отложенная загрузка
- Лёгкий код без лишних библиотек
- Основа для SEO и доступности
Как проходит вёрстка
- МакетПрисылаете макет и пожелания. Смотрю, что в нём есть, и называю цену и срок.
- КаркасРазмечаю страницу и подключаю шрифты, цвета и общие стили.
- ВёрсткаСобираю блоки по макету, настраиваю адаптив и анимации.
- ПроверкаСверяю с макетом, проверяю в браузерах и на телефонах.
- ПравкиВносим ваши замечания, пока результат вас не устроит.
- ПередачаПередаю файлы или заливаю на хостинг, объясняю структуру кода.
Сколько стоит вёрстка по макету
Что вы получите
Входит в вёрстку
- Готовые HTML, CSS и JavaScript-файлы
- Адаптивная версия для телефона и планшета
- Оптимизированные изображения
- Проверка в основных браузерах
- Правки по вашим замечаниям
- Короткое объяснение структуры кода
Можно добавить
- Перенос вёрстки в React-компоненты
- Подключение к CMS или собственному бэкенду
- Форма заявки с отправкой на почту и в Telegram
- Размещение на хостинге и подключение домена
- Базовое SEO и Яндекс.Метрика
Примеры вёрстки
Эти страницы я верстал и собирал сам: можно открыть и проверить, как они выглядят на телефоне и компьютере.
Барбершоп «Брусок»
Демо-лендинг: онлайн-запись, услуги и цены, галерея работ, отзывы. Придуман для портфолио.
Открыть демо →Студия йоги «Прана»
Демо-лендинг: направления и расписание, преподаватели, абонементы, галерея. Тоже для портфолио.
Открыть демо →Сайты «Лазурь»
Четыре сайта одного бренда, у каждого свой дизайн и задачи, но общий стиль.
Подробнее →Технологии
HTML5
CSS3
Flexbox и Grid
JavaScript
React
Адаптивная вёрстка
Figma
Git
Частые вопросы про вёрстку по макету
Сколько стоит вёрстка сайта по макету?
Цена вёрстки одной страницы — от 4 000 до 15 000 ₽ в зависимости от сложности: количества блоков, анимаций, интерактивных элементов и адаптивных вариантов. Простая страница с типовыми блоками стоит дешевле, сложная с анимациями и нестандартными элементами — дороже. Точную цену называю после просмотра макета.
За сколько делается вёрстка одной страницы?
Простую страницу можно сверстать от одного дня. Для сложной страницы с анимациями и большим количеством блоков нужно больше времени. Срок называю после просмотра макета, по ходу работы показываю промежуточный результат.
С какими макетами вы работаете?
Работаю с Figma, Photoshop (PSD), Sketch и Adobe XD. Если макета нет, могу сверстать по скриншоту или по примеру сайта, который вам нравится.
Будет ли вёрстка адаптивной?
Да, вёрстка адаптивная по умолчанию: страница одинаково хорошо выглядит на телефоне, планшете и компьютере. Если в макете нет мобильной версии, предложу, как лучше перестроить блоки.
Можно ли подключить вёрстку к CMS или React?
Да. Могу передать чистую HTML-вёрстку вашему разработчику либо сам перенести её в React-компоненты или подключить к CMS. Подключение к CMS и перенос в React оцениваются отдельно.
Совпадает ли результат с макетом?
Да, я верстаю с точностью до пикселя: отступы, шрифты, цвета и размеры соответствуют макету. Если в макете есть неточности или состояния, которые не нарисованы (наведение, ошибки формы), согласую их с вами.
Быстро ли будет загружаться страница?
Да. Использую оптимизированные изображения, лёгкий код и отложенную загрузку картинок. Скорость и доступность проверяю до сдачи.
Что нужно передать для начала работы?
Макет или его ссылку (для Figma дайте доступ на просмотр), шрифты, если они не из открытых источников, и изображения, если они не вынесены в макет. Если чего-то не хватает, подскажу.
Есть макет и нужна вёрстка?
Пришлите ссылку на макет или скриншот — отвечу, за сколько дней сделаю и сколько это будет стоить
Связаться со мной