Приёмка дизайн-макета сайта — последний момент, когда правки ещё ничего не стоят. После подписи макета каждое изменение превращается в доработку вёрстки, а пропущенный экран разработчик дорисует «на глаз». Ниже — 20 пунктов, которые заказчику стоит пройти в Figma до оплаты этапа: от структуры и текстов до состояний, компонентов и комплекта передачи в вёрстку.
- Принимайте не картинки в презентации, а файл Figma: только там видно, как устроены компоненты, сетка и адаптивы.
- Половина проблем на вёрстке — из-за экранов, которых нет в макете: мобильная версия, ошибки форм, пустые списки.
- Готовый к вёрстке макет — это все типы страниц, три адаптива, все состояния, UI-кит или дизайн-система и понятные правила для разработчика.
Почему приёмку макета нельзя делать «по ощущениям»
Обычно макет показывают на созвоне: главная страница во весь экран, пара внутренних, красивые фото. Руководитель смотрит, ему нравится — и этап закрыт. Проблемы всплывают через месяц, когда верстальщик спрашивает, как выглядит меню на телефоне, что показывать в корзине без товаров и куда девать длинное название услуги на казахском.
В нашем процессе UX/UI-дизайна сайтов правки на этапах прототипа и дизайна не ограничены, а после утверждения макета изменения оцениваются отдельно. Так работают почти все студии, и это честно: подпись под макетом означает «здесь всё, что нужно сверстать». Поэтому приёмку стоит проводить по списку, а не по первому впечатлению.
Если вы ещё на этапе схем, пригодится разбор чем отличаются вайрфрейм, прототип и макет: часть пунктов ниже проверяется уже на прототипе, когда правки ещё дешевле.
Как проверить макет сайта: структура и тексты
Начните не с цвета и шрифтов, а с того, все ли страницы на месте и работает ли каждая на свою задачу.
1–5. Страницы, сценарии и контент
- Все типы страниц нарисованы. Сверьте список с картой сайта: главная, каталог или список услуг, страница услуги, статья, контакты, вакансии, политика, страница 404. Тип страницы — уникальный макет: десять услуг с одинаковой структурой — один тип, но он должен быть.
- Тексты реальные. Макет с «Lorem ipsum» всегда красивее и всегда врёт. Заголовки, цены, названия услуг должны быть ваши, хотя бы в черновике.
- У каждой страницы есть целевое действие. Найдите на ней главную кнопку: заявка, звонок, расчёт, WhatsApp. Если кнопки нет или их пять одинаковых — вопрос дизайнеру.
- Контакты видны без поиска. Телефон, мессенджер и адрес — в шапке или в зоне первого экрана, а не только в подвале.
- Навигация полная. Меню, подменю, хлебные крошки, подвал. Проверьте, что из любой страницы можно попасть в ключевые разделы за один-два клика.
Адаптив: десктоп, планшет и мобильный
Самый частый пробел — мобильная версия, нарисованная для одной главной страницы. Верстальщик в этом случае решает сам, как перестроить таблицу тарифов или фильтр каталога, и решает по-своему.
6–9. Сетка и поведение на разных ширинах
- Три адаптива для каждого типа страниц. Десктоп, планшет и мобильный — отдельными макетами. Если мобильного трафика у вас больше, мобильная версия проектируется первой.
- Мобильное меню и шапка показаны в раскрытом виде. Как открывается меню, где кнопка звонка, остаётся ли шапка при прокрутке.
- Сложные блоки перестроены, а не сжаты. Таблицы, слайдеры, фильтры, формы на телефоне выглядят иначе, чем на десктопе, и это нарисовано.
- Кнопки и ссылки удобно нажимать пальцем. Маленькие иконки и ссылки впритык друг к другу на мобильном — повод для правки.
Состояния экранов, которые чаще всего забывают
«Все состояния» — это пустой список, загрузка, ошибка, успешная отправка, нет связи, длинный и короткий текст, отключённые кнопки. Без них разработчик додумывает сам, а пользователь встречает белый экран в самый неподходящий момент.
- Формы показаны целиком. Пустая форма, заполненная, с ошибками валидации, во время отправки и экран «спасибо».
- Есть пустые и нулевые состояния. Поиск без результатов, пустая корзина, раздел новостей без публикаций.
- Ховеры, фокус и нажатие у кнопок. Посмотрите компонент кнопки: у него должны быть варианты, а не одна картинка.
- Длинные тексты не ломают карточки. Попросите показать карточку с самым длинным названием услуги и казахской версией заголовка: казахские и английские строки длиннее русских.
Принимать дизайн по PDF или PNG-презентации. В картинке не видно, есть ли у кнопки состояния, тянется ли карточка и собраны ли элементы в компоненты. Попросите доступ к Figma с правом просмотра и пройдите пункты прямо в файле.
Требования к макету для вёрстки: компоненты и правила
Эту часть заказчики обычно пропускают, считая её «внутренней кухней». Но от неё зависит, сколько будут стоить доработки сайта через год: если элементы не собраны в систему, каждую новую страницу рисуют заново.
- Элементы собраны в компоненты. Кнопки, поля, карточки, иконки — экземпляры одного компонента, а не скопированные группы слоёв.
- Есть UI-кит или дизайн-система. Отдельная страница в Figma с цветами, типографикой, отступами, кнопками и полями. Для лендинга хватит UI-кита, для многостраничного сайта нужна система с правилами применения.
- Используются автолейауты и единая сетка. Блоки тянутся по ширине, отступы кратны одному шагу, колонки совпадают от страницы к странице.
- Шрифтов и начертаний немного. Каждое лишнее начертание — дополнительный файл и потеря скорости. Тяжёлые эффекты и огромные фоновые видео тоже стоит обсудить до вёрстки.
Передача макета в вёрстку: что должно быть в комплекте
- Описаны анимации и интерактив. Что выезжает, что подсвечивается, как ведёт себя слайдер — короткими заметками в файле или прототипом.
- Лицензии шрифтов и стоков оформлены на вашу компанию. Отдельно от сметы дизайна обычно оплачиваются только они — спросите заранее, какие нужны.
- Исходники принадлежат вам. Файл Figma передан в ваш аккаунт или команду, а не остаётся только у дизайнера.
| Что проверить | Где смотреть в Figma | Чем грозит пропуск |
|---|---|---|
| Мобильные версии всех типов страниц | Фреймы шириной под телефон рядом с десктопом | Верстальщик перестраивает блоки на свой вкус |
| Состояния форм | Варианты компонента формы, экран «спасибо» | Ошибки и отправка выглядят как системные заглушки |
| Компоненты | Панель слоёв: значок компонента у кнопок и карточек | Каждое изменение кнопки — правка в десятках мест |
| Дизайн-система | Отдельная страница с цветами, шрифтами, элементами | Новые страницы рисуют заново, стиль расползается |
| Права на файл | Владелец проекта и команды в Figma | Доступ к исходникам зависит от подрядчика |
Чек-лист приёмки дизайн-макета сайта
Вот все 20 пунктов в одном списке — отмечайте прямо по ходу просмотра файла. Всё, что не отмечено, оформляйте одним письмом с номерами пунктов: так дизайнер закроет вопросы за один круг правок, а не за пять.
- Нарисованы все типы страниц по карте сайта, включая 404 и политику
- В макетах реальные тексты, цены и названия, а не заглушки
- На каждой странице понятно главное целевое действие
- Телефон и мессенджер видны на первом экране
- Меню, подвал и хлебные крошки ведут во все ключевые разделы
- Есть десктоп, планшет и мобильный для каждого типа страниц
- Мобильное меню и шапка нарисованы в раскрытом виде
- Таблицы, фильтры и слайдеры перестроены для телефона
- Кнопки и ссылки на мобильном удобно нажимать пальцем
- Формы показаны пустыми, с ошибками, при отправке и после неё
- Нарисованы пустые состояния: поиск без результатов, пустая корзина
- У кнопок есть ховер, фокус, нажатие и неактивное состояние
- Карточки проверены на длинных текстах и KZ-версии
- Элементы собраны в компоненты, а не скопированы
- Есть UI-кит или дизайн-система на отдельной странице
- Используются автолейауты и единая сетка отступов
- Шрифтов и начертаний минимум, тяжёлые эффекты согласованы
- Описаны анимации и поведение интерактивных блоков
- Лицензии шрифтов и фото оформлены на вашу компанию
- Файл Figma передан в ваш аккаунт
Какие макеты WeMake передаёт в разработку
Дизайн у нас — часть команды, которая потом сайт верстает и продвигает, поэтому макеты проверяются на реализуемость и скорость ещё до утверждения. В комплект передачи входят адаптивы для десктопа, планшета и мобильного, все состояния экранов, дизайн-система и UI-кит в Figma с автолейаутами, а дальше — контроль вёрстки: мы принимаем каждый свёрстанный экран по отступам, шрифтам, поведению на разных ширинах и анимациям.
Этапы принимаются по отдельности: исследование, прототип, UI, дизайн-система. Следующий не начинается, пока не утверждён предыдущий, — иначе переделки идут волной. Если вы делаете полноценную разработку корпоративного сайта у нас, макеты сразу уходят нашим же разработчикам, и вопрос «а как это сверстать» решается до подписи, а не после. Если вёрстку ведёт ваша команда, Figma с компонентами и документацией понятна любому разработчику, а приёмку вёрстки мы можем провести отдельно.
ПРАВИЛОПодписывайте макет только тогда, когда в нём нет экранов, которые разработчику придётся придумывать самому.
Что делать, если макет уже утверждён, а пробелы нашлись
Не паникуйте и не пытайтесь закрыть всё за счёт верстальщика. Соберите недостающие экраны и состояния в один список по пунктам выше и попросите дизайнера оценить их пакетом: дорисовать мобильные версии и состояния форм обычно быстрее, чем потом переделывать свёрстанное. Если дизайнер уже недоступен, а файл не собран в компоненты, иногда дешевле сначала навести порядок в UI-ките, а потом рисовать недостающее.
Бюджет на такую работу удобно прикинуть по ценам на дизайн: формат «Лендинг» начинается от 250 000 ₸, «Сайт» — от 600 000 ₸, «Магазин / сервис» — от 1 200 000 ₸. А если хотите, чтобы список из 20 пунктов закрывался ещё на этапе дизайна, закажите UX/UI-дизайн с контролем вёрстки — точную смету пришлём за один рабочий день.
Как проверить макет сайта, если я не дизайнер?
Идите по списку от смысла к технике: все ли страницы есть, реальные ли тексты, есть ли мобильные версии и состояния форм. Технические пункты — компоненты, автолейауты, UI-кит — достаточно увидеть в файле и задать вопрос, если их нет.
Какие требования к макету для вёрстки самые важные?
Три адаптива для каждого типа страниц, все состояния интерактивных элементов, элементы в компонентах и UI-кит или дизайн-система. Без этого верстальщик додумывает интерфейс сам.
Можно ли принять макет частями?
Да, и это удобно: прототип, ключевые экраны, остальные страницы, дизайн-система. Разработка может стартовать после утверждения ключевых экранов, что сокращает общий срок проекта на 2–3 недели.
Что входит в передачу макета в вёрстку?
Файл Figma со всеми страницами, адаптивами и состояниями, UI-кит или дизайн-система, описание анимаций, шрифты с лицензиями и доступ к исходникам на вашу компанию.
Сколько правок можно вносить при приёмке?
У нас на этапах прототипа и дизайна правки не ограничены. После подписи макета изменения оцениваются отдельно, и мы заранее говорим, во что они выльются.
