Вёрстка

1Когда к нам приходят

• «Дизайн утвердили, а верстать некому»

  Макеты готовы, но штатные разработчики заняты продуктом, а фрилансер сорвал сроки. Нужны руки, которые возьмут фронтенд целиком и сдадут его по плану.

• «На сайте всё не так, как в макете»

  Отступы гуляют, шрифты подменились, на телефоне блоки налезают друг на друга. Дизайнер шлёт списки правок, а исправления тянутся неделями.

• «Студия продала проект, а фронтендеры заняты»

  Агентству нужен подрядчик на вёрстку. Работаем в вашем репозитории и трекере, по вашим стандартам кода, а с конечным заказчиком общаемся только через вас.

• «Рассылка разваливается у части получателей»

  Шаблон, красивый в редакторе, в Outlook и мобильной почте превращается в кашу. Нужна вёрстка писем, которая держит форму в популярных почтовых клиентах.

2Что входит

• Адаптивная вёрстка по макетам Figma, Sketch или Photoshop — от телефона до 4K-монитора
• Соответствие макету: сетка, отступы, шрифты, состояния кнопок, полей и меню
• Проверка в Chrome, Safari, Firefox, Edge и Яндекс Браузере на компьютере и телефоне
• Семантическая разметка (понятная поисковикам) и доступность для людей с нарушением зрения
• Оптимизация скорости под Core Web Vitals: изображения, шрифты, отложенная загрузка
• Анимации и интерактив, которые не тормозят страницу и не мешают читать
• Подключение к 1С-Битрикс или WordPress: блоки и страницы редактируются из админки
• Чистый HTML, CSS и JavaScript в Git-репозиторий с инструкцией по сборке
• Вёрстка email-писем и шаблонов рассылок под популярные почтовые клиенты

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

• Дизайн доходит до посетителя без искажений

  Страницы, за макет которых вы заплатили, выглядят так, как их задумал дизайнер, — на любой ширине экрана и в любом распространённом браузере.

• Лёгкие и быстрые страницы

  Компактный код, сжатые изображения и аккуратно подключённые шрифты ускоряют загрузку. Это важно и для посетителей с мобильным интернетом, и для поисковых систем.

• Код, который легко развивать

  Понятная структура, повторно используемые блоки и описание сборки. Штатный программист продолжит работу с того места, где остановились мы, ничего не переписывая.

4Этапы и сроки

1. 01

   Разбор макетов1–2 дня

   Изучаем макеты, проверяем, все ли экраны и состояния нарисованы, задаём вопросы дизайнеру. Согласуем список браузеров, CMS и формат сдачи.

   На выходеСогласованное задание на вёрстку

2. 02

   Библиотека блоков2–7 дней

   Верстаем повторяющиеся элементы — кнопки, карточки, формы, меню — как отдельные компоненты. Правка в одном месте потом применяется на всех страницах.

   На выходеБиблиотека компонентов со всеми состояниями

3. 03

   Сборка страниц3–15 дней

   Собираем страницы из компонентов, добавляем анимации и интерактив, оптимизируем изображения и шрифты под скорость.

   На выходеСвёрстанные страницы по ссылке для просмотра

4. 04

   Проверка1–3 дня

   Сверяем с макетом на разных ширинах, проверяем браузеры, телефоны, доступность и Core Web Vitals. Найденное исправляем до того, как отдать вам на приёмку.

   На выходеОтчёт о проверке

5. 05

   Интеграция и сдача1–5 дней

   Подключаем вёрстку к CMS или выкладываем код в репозиторий, пишем инструкцию по сборке. Вносим правки по итогам вашей приёмки.

   На выходеВёрстка на CMS или код в репозитории

5Как мы это делаем

• Сверяем с макетом до того, как покажем

  Перед сдачей накладываем свёрстанную страницу на макет и ищем расхождения на разных ширинах экрана. На приёмку к вам приходит выверенная работа, а не черновик.

• Скорость закладываем, а не догоняем

  Core Web Vitals (метрики Google о скорости и стабильности страницы) замеряем ещё до сдачи. Тяжёлые библиотеки и эффекты подключаем, только если без них не обойтись.

• Нейросети — заготовки, разработчик — итог

  Типовые блоки и проверки помогают набросать ИИ-инструменты, это сокращает сроки. Финальный код читает, правит и отвечает за него фронтенд-разработчик.

6Вопросы