- Главная
- Разработка
- Вёрстка сайта
Вёрстка сайта по макету в Уфе
Превращаем макеты из Figma в быстрый адаптивный код, который выглядит одинаково в браузерах, проходит проверку скорости и готов к натяжке на CMS.
Коротко
Вёрстка сайта — это перевод дизайн-макета в HTML, CSS и JavaScript, чтобы страницы работали в браузере так же, как выглядят в Figma. Услуга нужна дизайнерам, студиям и компаниям с готовым дизайном. В работу входят адаптивная верстка под смартфоны и планшеты, кроссбраузерность, оптимизация скорости и при необходимости натяжка на CMS. Лендинг обычно верстается от 7 рабочих дней, цена зависит от числа шаблонов. Делает Hunterweb, Уфа.
Разработка
Что такое вёрстка сайта и почему от нее зависит результат
Вёрстка — это этап, на котором картинка становится сайтом. Верстальщик берет макет, собирает из него HTML-разметку, описывает внешний вид в CSS и добавляет интерактив на JavaScript: меню, слайдеры, формы, анимации. От качества этой работы зависит, как сайт откроется на старом Android, будет ли он быстро грузиться и смогут ли поисковые системы правильно прочитать содержимое.
Даже сильный дизайн можно испортить небрежной версткой. Съехавшие блоки на планшете, мелкий текст на смартфоне, тяжелые картинки, из-за которых страница грузится несколько секунд, — все это снижает конверсию и позиции в поиске. Обратная ситуация тоже бывает: аккуратная семантичная верстка вытягивает простой дизайн и делает сайт удобным. Поэтому мы относимся к верстке как к инженерной задаче: заранее продумываем сетку, повторяющиеся компоненты и то, как страница поведет себя, когда в нее добавят длинный заголовок или сотню товаров.
Мы верстаем по макетам из Figma, а также по Sketch, Photoshop и Adobe XD. Работаем с макетами наших дизайнеров и с готовым дизайном клиента или сторонней студии. Если в макете не хватает мобильной версии или состояний элементов, предложим решения и согласуем их до начала работ, чтобы не было сюрпризов на приемке.
Hunterweb делает сайты с 2008 года, офис находится в Уфе. Верстку заказывают у нас как отдельную услугу, так и в составе разработки под ключ, когда мы сразу натягиваем шаблоны на WordPress, 1С-Битрикс или другую CMS.
Состав работ
Что входит в вёрстку сайта
Верстка из Figma pixel perfect
Точное соответствие макету по отступам, шрифтам и цветам. Используем переменные и компоненты из Figma, чтобы стили в коде совпадали с дизайн-системой проекта.
Адаптивная верстка
Корректное отображение от узких смартфонов до широких мониторов. Если в макете есть только десктоп, адаптируем блоки по согласованной логике или предлагаем мобильные макеты.
Кроссбраузерность
Проверка в актуальных версиях Chrome, Яндекс Браузера, Safari, Firefox и Edge, на iOS и Android. Набор браузеров и устройств фиксируем в договоре.
Скорость и Core Web Vitals
Оптимизация изображений в WebP и AVIF, ленивая загрузка, минимум лишнего JavaScript, подключение шрифтов без мигания. Ориентируемся на зеленую зону метрик LCP, INP и CLS.
Семантика и доступность
Правильная иерархия заголовков, семантичные теги, атрибуты alt, достаточный контраст и навигация с клавиатуры. Это помогает и поисковикам, и пользователям.
Анимации и интерактив
Меню, модальные окна, слайдеры, табы, плавные появления блоков. Анимации делаем на CSS там, где это возможно, чтобы они не тормозили страницу.
Натяжка на CMS
Перенос верстки на WordPress, WooCommerce, 1С-Битрикс или PrestaShop: редактируемые блоки, меню, формы, каталог. Администратор меняет контент без правки кода.
Чистый код и передача
Понятная структура файлов, комментарии, сборка через современные инструменты. Передаем исходники и репозиторий, чтобы проект мог развивать любой разработчик.
Сравнение
Виды вёрстки: что заказать
| Вид работ | Что получаете | Ориентир срока |
|---|---|---|
| Вёрстка лендинга | Одна страница с адаптивом, формами и анимациями | от 7 рабочих дней |
| Вёрстка многостраничного сайта | Набор шаблонов: главная, разделы, карточки, контакты | обычно 2–4 недели |
| Вёрстка интернет-магазина | Каталог, карточка товара, корзина, оформление заказа, личный кабинет | обычно 3–6 недель |
| Вёрстка с натяжкой на CMS | Готовый работающий сайт с админкой | плюс 1–3 недели к верстке |
| Переверстка и оптимизация | Исправление адаптива, ускорение загрузки старого сайта | по результатам аудита |
| Вёрстка email-рассылок | Письма, которые корректно открываются в почтовых клиентах | обычно 2–4 дня |
| Вёрстка UI-кита и компонентов | Библиотека кнопок, форм, карточек для дальнейшей сборки страниц | обычно 1–2 недели |
Как работаем
Этапы вёрстки сайта по макету
Вы всегда знаете, на каком этапе проект и что будет дальше. Цена и сроки фиксируются в договоре.
Анализ макета
Проверяем полноту макетов, мобильные версии, состояния кнопок и форм, шрифты и графику. Составляем список вопросов к дизайнеру.
1–2 дняОценка и договор
Фиксируем перечень шаблонов, браузеры, устройства, сроки и стоимость в договоре.
1–2 дняВёрстка шаблонов
Собираем общие компоненты и страницы, показываем промежуточный результат на тестовом сервере.
от 5 днейАдаптив и интерактив
Доводим отображение на всех разрешениях, подключаем анимации, формы и скрипты.
2–5 днейТестирование и оптимизация
Проверяем кроссбраузерность, валидность, скорость в PageSpeed Insights, исправляем замечания.
1–3 дняНатяжка и передача
При необходимости переносим верстку на CMS, передаем исходники, инструкцию и доступы.
по объемуГарантийная поддержка
После сдачи исправляем найденные ошибки отображения и помогаем с мелкими правками, если в браузерах или контенте что-то поменялось.
Кому подходит
Кому подходит
Портфолио
Проекты по теме
Часть работ агентства, близких к этой задаче. Больше — в портфолио.
Экспертиза
Как подготовить макет и принять работу
Чем полнее макет, тем точнее верстка и меньше доработок. Подготовьте десктопную и мобильную версии, состояния элементов: наведение, активная кнопка, ошибка в форме, пустая корзина. Используйте в Figma автолейауты, стили текста и цветов — тогда верстальщик быстрее переносит дизайн-систему в код. Шрифты должны быть с лицензией для веба, а иллюстрации — в векторе или в высоком разрешении. Если на сайте будут блоки с разным объемом текста, покажите в макете крайние варианты: короткий и длинный заголовок, карточку без фото.
При приемке не ограничивайтесь просмотром на своем ноутбуке. Откройте сайт на смартфоне и планшете, в разных браузерах, уменьшите и увеличьте окно. Прогоните главную страницу через PageSpeed Insights и посмотрите на показатели Core Web Vitals. Проверьте, что формы отправляются, а заголовки страниц расставлены по иерархии. Хороший подрядчик сам присылает результаты такой проверки вместе со сдачей работы.
И еще одно правило: договоритесь заранее, кто и как будет вносить правки после сдачи. Если сайт натягивается на CMS, верстка должна позволять менять тексты и картинки без участия программиста. Для лендингов, которые часто меняются под рекламные кампании, удобно собрать набор готовых блоков: из них маркетолог сам соберет новую страницу за час.
Пришлите макет на оценку
Отправьте ссылку на Figma или файлы макета — оценим объем, сроки и подскажем, что стоит доработать до начала верстки. Телефон 8 937 500-XX-XX показать, почта mail@hunterweb.ru.
Вопросы
Частые вопросы
Не нашли ответ? Позвоните, и специалист ответит за пару минут.
8 937 500-XX-XX показатьСколько стоит вёрстка сайта по макету?
Стоимость верстки зависит от количества уникальных шаблонов, сложности анимаций, требований к адаптиву и необходимости натяжки на CMS. Мы оцениваем макет и фиксируем цену в договоре, коммерческое предложение присылаем после изучения дизайна.
Сколько времени занимает верстка сайта?
Вёрстка лендинга обычно занимает от 7 рабочих дней, многостраничного сайта — около 2–4 недель, интернет-магазина — 3–6 недель. Натяжка на CMS добавляет еще 1–3 недели в зависимости от числа редактируемых блоков.
Верстаете ли вы сайты из Figma?
Да, Figma — основной формат, с которым мы работаем. Используем компоненты, стили и автолейауты макета, чтобы верстка совпадала с дизайном. Также принимаем макеты в Sketch, Adobe XD и Photoshop.
Что такое адаптивная верстка сайта?
Адаптивная верстка — это способ сделать один сайт, который подстраивается под ширину экрана: на смартфоне блоки перестраиваются в колонку, меню сворачивается, текст остается читаемым. Отдельная мобильная версия при этом не нужна.
Можно ли сверстать сайт без мобильного макета?
Да, можно, но лучше иметь мобильный макет хотя бы для ключевых страниц. Без него мы адаптируем блоки по согласованной логике, однако часть решений придется утверждать по ходу работы. При необходимости наши дизайнеры дорисуют мобильную версию.
Влияет ли верстка на SEO и скорость сайта?
Да, напрямую влияет. Семантичная разметка помогает поисковикам понимать структуру страницы, а оптимизированный код и изображения улучшают показатели Core Web Vitals, которые учитываются в ранжировании и влияют на поведение посетителей.
Натягиваете ли вы верстку на CMS?
Да, переносим верстку на WordPress, WooCommerce, 1С-Битрикс и PrestaShop. Делаем редактируемыми тексты, изображения, меню и формы, чтобы администратор управлял контентом в панели без правки кода.
Можно ли заказать только исправление адаптива на старом сайте?
Да, такие задачи мы берем отдельно. Сначала проводим аудит: смотрим отображение на разных устройствах и скорость загрузки, затем предлагаем список исправлений с оценкой. Если старая верстка слишком запутана, иногда выгоднее переверстать шаблоны заново.
Расчёт стоимости
Узнайте цену проекта за 1 минуту
Ответьте на 3 вопроса, и мы пришлём коммерческое предложение с ценой и сроками.
Что нужно сделать?
Есть ли сайт сейчас?
Когда планируете старт?
- Без обязательств
- Консультация специалиста бесплатно
- Цена фиксируется в КП
Разработка