Верстка по макету Figma, PSD или XD на заказ | DitWork
Верстка по макету нужна, когда дизайн уже подготовлен в Figma, Adobe XD, Sketch, PSD или другом формате, а заказчику требуется точная, адаптивная и технически надежная реализация в браузере. На DitWork можно найти frontend-разработчика для лендинга, корпоративного сайта, интернет-магазина, личного кабинета или отдельного интерфейсного блока. Качественная верстка повторяет визуальную систему макета, но одновременно учитывает реальный контент, разные экраны, доступность, скорость и дальнейшее подключение к CMS или backend.
Хорошее задание описывает не только количество экранов. Исполнителю нужны исходные макеты, состояния элементов, правила адаптации, шрифты, изображения, иконки, требования к браузерам и понятный способ приемки. Чем точнее зафиксированы эти данные, тем меньше спорных правок и тем легче сравнивать предложения специалистов.
Что можно сверстать по макету
- Лендинг или промостраницу с формами, модальными окнами и интерактивными блоками.
- Корпоративный сайт с общими шаблонами, услугами, кейсами, статьями и контактами.
- Каталог и интернет-магазин с карточками, фильтрами, корзиной и состояниями оформления заказа.
- Личный кабинет, административную панель, CRM-интерфейс или SaaS-продукт.
- Email-independent веб-интерфейсы, таблицы, графики, формы и сложные компоненты.
- Отдельный компонент или дизайн-систему для дальнейшей сборки продукта.
Какие материалы передать исполнителю
Лучший исходник содержит desktop и mobile версии, сетку, компоненты, стили текста, цвета и состояния. Для кнопок, полей, выпадающих списков и карточек нужны hover, focus, active, disabled, loading, empty и error варианты. Если дизайнер не подготовил все размеры, заранее укажите, кто принимает решения для промежуточных ширин.
- Ссылка на актуальную версию Figma или архив исходников с разрешением на просмотр размеров и экспорта.
- Шрифты и подтверждение лицензии на их использование в интернете.
- SVG-иконки, логотипы, изображения и требования к форматам WebP, AVIF, PNG или JPEG.
- Тексты реальной длины, примеры длинных заголовков, цен и пользовательских данных.
- Список поддерживаемых браузеров, минимальную ширину экрана и целевые устройства.
- Описание подключения к CMS, шаблонизатору, API или существующему проекту.
Результат верстки
| Часть работы | Что передается | Как проверить |
|---|---|---|
| HTML и структура | Семантическая разметка страниц и компонентов | Заголовки, формы, списки и основные области имеют правильное назначение |
| Стили | Читаемый CSS, SCSS или принятый в проекте подход | Нет глобальных конфликтов, повторов и случайных переопределений |
| Адаптивность | Работа на согласованных ширинах без горизонтального переполнения | Контент остается доступным на телефоне, планшете и desktop |
| Интерактивность | Меню, вкладки, модальные окна, слайдеры и валидация интерфейса | Состояния работают мышью, клавиатурой и касанием |
| Передача | Исходники, инструкция сборки и список зависимостей | Проект собирается на чистом окружении по инструкции |
Pixel perfect без вреда для адаптивности
Точное соответствие макету важно, но браузерная страница не является статичной картинкой. Текст может быть длиннее, пользователь может увеличить шрифт, а ширина экрана редко совпадает с одним фреймом Figma. Поэтому разумная приемка сочетает визуальное сравнение на контрольных размерах с проверкой гибкости. Фиксировать каждый блок абсолютными координатами ради совпадения одного скриншота нельзя, если при этом ломаются другие устройства.
Семантика и доступность
Семантический HTML помогает поисковым системам и вспомогательным технологиям понимать структуру страницы. Основная навигация должна быть ссылками, кнопки должны выполнять действия, поля формы должны иметь подписи, а заголовки - логическую иерархию. Видимый focus нельзя удалять без равноценной замены. Интерактивные элементы должны работать с клавиатуры, а сообщения об ошибках должны быть понятны без одного только цвета.
Производительность
Верстка влияет на Core Web Vitals еще до подключения backend. Большие изображения, блокирующие шрифты, тяжелые библиотеки и нестабильные размеры медиа ухудшают загрузку и визуальную стабильность. Укажите ограничения на вес первого экрана и необходимость lazy loading для контента ниже. Изображения должны получать правильные размеры, а сторонние скрипты подключаться только при реальной необходимости.
- Предварительно задавать размеры изображений и видео, чтобы уменьшить скачки макета.
- Использовать адаптивные источники и современные форматы изображений.
- Не подключать крупную библиотеку ради одного простого компонента.
- Сокращать блокирующий CSS и JavaScript без ручной минификации исходников.
- Проверять LCP, CLS и взаимодействие на реальном мобильном устройстве.
Подключение к CMS или backend
Статические шаблоны должны учитывать будущие циклы, условия, ошибки API, отсутствие изображений и права пользователей. Перед началом согласуйте именование файлов, структуру компонентов, формат данных и границы ответственности между frontend и backend. Для существующего проекта важно соблюдать его архитектуру, не дублировать уже подключенные библиотеки и не ломать маршрутизацию.
Что влияет на стоимость
Цена зависит от количества уникальных шаблонов и компонентов, а не только от числа URL. Важны сложность адаптивности, анимации, таблицы, формы, нестандартные графики, число состояний, доступность, интеграция со сборщиком и требования к старым браузерам. Десять однотипных страниц могут быть проще одной панели со сложными фильтрами и большим количеством интерактивных состояний.
Как выбрать frontend-разработчика
Попросите показать проекты с похожей сложностью и объяснить подход к адаптивности, компонентам, доступности и тестированию. Полезно посмотреть исходный код или небольшой тестовый компонент. Сильный исполнитель задает вопросы о данных и состояниях, а не обещает идеальное совпадение до просмотра макета.
Чек-лист приемки
- Сравнить контрольные страницы с макетом на согласованных ширинах.
- Проверить промежуточные размеры, длинные тексты и увеличение масштаба браузера.
- Пройти меню, формы, модальные окна и другие действия клавиатурой.
- Проверить Chrome, Firefox, Safari или другой согласованный набор браузеров.
- Убедиться, что нет горизонтального переполнения, скачков и перекрытия контента.
- Проверить изображения, шрифты, ошибки загрузки и отсутствие сообщений в консоли.
- Собрать проект по инструкции и проверить отсутствие лишних файлов и секретов.
Как разместить задачу на DitWork
Приложите ссылку на макет, перечислите страницы и уникальные компоненты, назовите целевые браузеры и ширины, укажите технологию проекта и необходимость подключения к CMS или API. Отдельно опишите анимации, формы, состояния ошибок, доступность и требования к скорости. Так разработчики оценят одинаковый объем, а результат будет легче проверить и принять.
