Создание сайта по дизайну: как перенести макет в работающий сайт

Создание сайта по дизайну начинается не с кнопки «сверстать», а с проверки того, можно ли по макету собрать понятную пользователю и управляемую для бизнеса страницу. Разработчик переносит не картинку, а набор сценариев: посетитель открывает страницу с телефона, читает условия, нажимает кнопку, оставляет контакты, а владелец видит эту заявку в почте, CRM или мессенджере.

Если ограничиться визуальным сходством с макетом, можно получить сайт с неработающей формой, медленной мобильной версией или кнопками без отслеживания кликов. Поэтому результат разработки стоит описывать заранее: какие страницы будут готовы, где редактируется текст, куда приходят заявки, какие действия фиксирует аналитика и по каким устройствам проводится проверка.

Что означает создание сайта по готовому дизайну

Готовый дизайн обычно передают в Figma — сервисе, где дизайнер размещает экраны, тексты, изображения и стили интерфейса. Реже встречаются PSD, Sketch, PDF или набор картинок. Из этих материалов нельзя автоматически получить полноценный сайт: разработчику нужно собрать HTML-разметку, CSS-стили, сценарии на JavaScript и, при необходимости, административную часть.

Верстка — это превращение визуального макета в страницы, которые открываются в браузере. Адаптивная верстка меняет расположение и размер элементов под ширину экрана. Интеграция — подключение внешней системы: CRM, платежей, карт, онлайн-чата, почты или сервиса рассылок. Эти работы различаются по трудозатратам и должны быть отдельно зафиксированы в смете.

Для лендинга услуг базовый состав обычно включает одну страницу, адаптацию под смартфоны, формы обратной связи, размещение на хостинге и установку счетчика аналитики. Если на макете есть личный кабинет, каталог с фильтрами, калькулятор, запись по расписанию или несколько языков, проект уже нельзя оценивать как обычную верстку одностраничника.

Сначала проверьте, пригоден ли макет для разработки

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

До старта удобно провести короткий аудит исходников. Он снимает риск внезапных доплат за недостающие экраны, поиск изображений или переработку мобильной версии.

• Есть ссылка на исходный файл, а не только PDF или скриншоты.
• Доступны все страницы и попапы: политика конфиденциальности, страница благодарности, ошибки 404, модальные окна.
• Понятно, какие элементы кликабельны и куда они ведут.
• Загружены изображения, логотипы, иконки и шрифты либо есть права на их использование.
• Подготовлены версии для мобильного экрана или правила перестроения блоков.
• Указаны тексты, контакты, реквизиты, ссылки на соцсети и юридические документы.
• Есть описание формы: обязательные поля, получатель заявок, согласие на обработку данных.

Полезно отдельно отметить элементы, которые нельзя оценить по картинке: анимацию, работу калькулятора, маску номера телефона, передачу заявки в CRM и условия показа всплывающего окна. Для них нужен текстовый сценарий в двух-трех предложениях.

Какие решения принять до начала верстки

Один и тот же дизайн можно реализовать по-разному. Для рекламного лендинга часто достаточно легкой страницы без сложной панели управления. Для сайта, где менеджер регулярно меняет услуги, цены, акции и статьи, нужна CMS — система управления контентом. Она позволяет редактировать материалы без правки кода.

Выбор технологии зависит не от модного названия платформы, а от будущих задач. Если сайт должен собирать заявки с рекламы, приоритетом будут скорость загрузки, понятные формы, корректная мобильная версия и связка с аналитикой. Если планируются десятки услуг и регулярное SEO-продвижение, заранее проектируют структуру URL, шаблоны разделов и редактор контента.

Не стоит заменять техническое задание длинным списком пожеланий в переписке. Достаточно зафиксировать структуру, функциональность, платформу, список интеграций, правила внесения правок и критерии приемки. Это дает владельцу понятную точку контроля, а исполнителю — границы задачи.

Как проходит перенос макета в рабочий сайт

Работу лучше разбивать на этапы, чтобы ошибки находились до публикации. Сначала команда изучает макет и согласовывает список недостающих материалов. Затем собирает основу страницы, подключает интерактивные элементы и тестирует проект на устройствах.

1. Аудит дизайна и постановка задачи. Уточняются страницы, сценарии, контент, технические ограничения и интеграции.
2. Подготовка окружения. Настраиваются домен, хостинг, репозиторий кода или тестовый адрес. Рабочую версию не обязательно сразу размещать на основном домене.
3. Верстка основных блоков. Разработчик собирает шапку, первый экран, карточки услуг, формы, подвал и другие элементы по дизайн-системе — набору правил для цветов, шрифтов, отступов и кнопок.
4. Адаптация под экраны. Проверяются мобильные, планшетные и десктопные разрешения. На телефоне блоки часто не просто уменьшаются, а меняют порядок и способ взаимодействия.
5. Подключение функциональности. Добавляются формы, маски полей, меню, слайдеры, калькуляторы, CMS и внешние сервисы.
6. Тестирование и публикация. Исправляются ошибки, подключаются домен, SSL-сертификат для HTTPS, счетчики и резервное копирование.

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

Мобильная версия: не уменьшенная копия десктопа

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

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

Минимальный набор проверок: ширина 320–375 px для компактных смартфонов, 390–430 px для распространенных современных моделей, 768 px для планшета и 1280 px для десктопа. Не требуется покупать все устройства: часть проверок выполняют в инструментах браузера, но финальную форму и звонок желательно проверить на реальном телефоне.

Отдельно оцените скорость. Тяжелые изображения из макета нередко загружаются по несколько мегабайт. Их нужно сжать и при необходимости перевести в WebP или AVIF — форматы, которые обычно весят меньше без заметной потери детализации. Это влияет не на красоту макета, а на вероятность того, что пользователь дождется загрузки страницы.

Что подключить, чтобы сайт можно было измерять

Рабочий сайт отличается от презентационной картинки возможностью ответить на вопросы: откуда пришел посетитель, нажал ли он кнопку, отправил ли форму и какая реклама привела обращение. Для этого устанавливают счетчик веб-аналитики, например Яндекс Метрику, и настраивают цели — события, которые фиксируют полезные действия.

Для лендинга услуг обычно достаточно целей на отправку формы, клик по телефону, переход в мессенджер и открытие страницы благодарности. Если заявки передаются в CRM, стоит проверить, сохраняются ли в карточке обращения источник, рекламная метка и страница, с которой пришел пользователь.

Важно не путать установку счетчика с полноценной аналитикой. Если код Метрики есть на странице, но цель на форму не настроена, владелец увидит посещения, но не сможет надежно сопоставить рекламные расходы и обращения.

Сколько занимает разработка и из чего складывается цена

Срок зависит от качества исходного макета и функций, а не только от количества экранов. Лендинг по полностью подготовленному дизайну без нестандартных интеграций может потребовать от 7 до 15 рабочих дней. Если нужно доработать мобильные версии, подключить CMS, CRM, калькулятор или несколько языков, срок увеличивается: часть времени уходит на согласование сценариев и тестирование.

Простой расчет помогает увидеть состав бюджета. Допустим, страница содержит 8–12 блоков, форму, мобильную версию и базовую аналитику. На аудит и подготовку может уйти 4–8 часов, на верстку и адаптацию — 20–45 часов, на формы, аналитику и тестирование — еще 8–18 часов. Итого ориентир составляет 32–71 час работы. Финальная цена зависит от ставки исполнителя, платформы и объема правок, поэтому сравнивать предложения корректно по перечню работ, а не по одной цифре.

Подробно о том, почему сметы различаются и какие статьи расходов стоит запросить, читайте в материале создание сайта под ключ цена — из чего складывается стоимость. Если дизайн еще нужно переработать под задачи рекламы, это следует выделить в отдельный этап, а не маскировать под «небольшие правки верстки».

Реалистичный сценарий: лендинг есть в Figma, но запускать рекламу рано

Представим типичную ситуацию без выдуманных результатов. У компании есть дизайн одностраничного сайта услуг: первый экран, преимущества, этапы работы, блок вопросов и форма. Макет хорошо выглядит на компьютере, но в нем нет мобильной версии, не определен получатель заявок и отсутствует страница благодарности.

Первым шагом владелец передает ссылку на Figma, тексты, логотип, контакты и список услуг. Разработчик отмечает недостающие состояния формы и предлагает правила адаптации: карточки идут одной колонкой, меню открывается по кнопке, номер телефона становится кликабельным, а форма после отправки ведет на отдельную страницу благодарности.

Затем согласовываются два канала приема лидов: почта и CRM. На тестовом адресе команда отправляет несколько заявок с компьютера и телефона, проверяет письмо, карточку CRM, номера телефонов, ссылки, отображение блока согласия на обработку данных и цели аналитики. Только после этого подключают основной домен и передают страницу в рекламный запуск.

Владелец получает не обещание «сайт готов», а проверяемый набор: адрес опубликованной страницы, доступы к хостингу и аналитике, список подключенных целей, инструкцию по редактированию и перечень того, что не входит в текущую версию. Это снижает риск узнать после старта, что заявки уходят не туда или рекламный трафик нельзя измерить.

Чек-лист приемки сайта перед публикацией

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

• Все страницы, попапы и ссылки из согласованного списка открываются без ошибок.
• Заголовки, цены, контакты, реквизиты и юридические ссылки соответствуют актуальным данным.
• Кнопки ведут в нужные разделы, мессенджеры, формы или на страницы услуг.
• Форма проверяет обязательные поля, показывает понятное сообщение и доставляет заявку получателю.
• На мобильном устройстве нет горизонтальной прокрутки, наложения текста и слишком мелких элементов.
• Телефон, email и адрес кликабельны там, где это требуется.
• Изображения не растянуты, у картинок заполнены понятные альтернативные описания, если они несут смысл.
• Подключен HTTPS, браузер не сообщает о небезопасном соединении.
• Счетчик аналитики работает, а цели на форму и ключевые клики проходят тест.
• Переданы доступы: домен, хостинг, CMS, аналитика, CRM и почта для заявок.
• Создана резервная копия сайта или настроен понятный порядок ее создания.

Зафиксируйте найденные замечания списком: ссылка на экран, устройство, описание ошибки и ожидаемый результат. Формулировка «на телефоне все плохо» не помогает исправить проблему. Формулировка «при ширине 375 px кнопка формы перекрывает поле телефона» дает разработчику конкретную задачу и ускоряет приемку.

Как выбрать исполнителя именно для работы по макету

Портфолио важно, но для проекта по готовому дизайну полезнее задать вопросы о процессе. Исполнитель должен объяснить, как принимает Figma, как фиксирует недостающие состояния, на каких этапах показывает результат, какие доступы передает и как проверяет формы. Это важнее общего обещания сделать сайт быстро.

Попросите показать состав предложения: верстка, адаптивность, CMS, интеграции, аналитика, тестирование, публикация и период исправления технических ошибок. Уточните, что считается правкой дизайна, а что — ошибкой реализации. Например, если согласованная кнопка не работает, это исправление ошибки. Если после приемки вы решили добавить новый калькулятор, это новая задача.

Дополнительные критерии и вопросы для сравнения команд собраны в материале студия создания сайтов — как выбрать надежного подрядчика. Другие инструкции по запуску, рекламе и поддержке можно найти в каталоге материалов WEB CRAFT.

Следующий шаг: подготовьте пакет для оценки

Чтобы получить предметный план, не нужно писать большое техническое задание. Подготовьте ссылку на макет, список страниц, описание услуги и аудитории, контакты для форм, перечень нужных интеграций и желаемую дату запуска. Если каких-то материалов нет, лучше указать это сразу: тогда в плане будет видно, кто и на каком этапе их готовит.

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