Красивый макет и макет, пригодный для вёрстки, это разные вещи. Figma для сайта давно стала стандартом, но срывы сроков на вёрстке чаще всего идут не от сложности кода, а от файла, который описывает вид и молчит про поведение.
Заказчик обычно видит только картинку: страницы нарисованы, всё согласовано, можно отдавать в работу. Верстальщик видит другое: одну ширину экрана, кнопку в единственном состоянии и блок отзывов, который заполнен ровно тремя одинаковыми по длине текстами.
Откуда берутся переделки
Дальше начинается переписка. Что происходит с меню на планшете, как выглядит кнопка при наведении, что показывать, если отзывов ещё нет, куда денется заголовок из семи слов вместо трёх. Каждый вопрос это либо день ожидания ответа, либо решение на глаз, которое потом переделывают.
На проекте из 12 страниц у нас была ситуация, когда вёрстка вместо запланированных 10 рабочих дней заняла 18. Код там был обычный. Лишние восемь дней ушли на уточнения и переделку блоков, которые собрали по догадке.
Дизайнер при этом работал добросовестно. Просто в задаче ему не написали, что макет должен описывать не только вид, но и поведение интерфейса.
Что верстальщик называет готовым макетом
Набор, который снимает почти все вопросы:
- Сетка с указанными брейкпойнтами и отступами.
- Desktop и mobile для каждого типа страницы, а не для каждой страницы подряд.
- Состояния кнопок, ссылок и полей ввода.
- Ошибки форм и экран после успешной отправки.
- Пустые состояния: нет товаров, нет отзывов, поиск ничего не нашёл.
- Проверка длинными текстами: заголовок в две строки, название товара в три.
- Стили и компоненты, а не набор скопированных слоёв.
Последний пункт объясню отдельно. Когда цвета и размеры собраны в стили, а карточка товара сделана компонентом, верстальщик получает готовую систему: восемь цветов, шесть размеров текста, один компонент карточки. Когда всё нарисовано вручную, при выгрузке обнаруживается 14 оттенков серого и 11 размеров шрифта, из которых половина отличается на один пиксель. Кто-то должен это свести, и обычно это делает верстальщик, тратя лишние часы.
Сетка и брейкпойнты: главный источник споров
В макете обычно две ширины: 1440 и 375. Между ними лежит вся остальная жизнь, и там дизайнерских указаний нет.
Договоритесь заранее о точках переключения. Типовой набор: 1200, 1024, 768 и 480 пикселей. Для каждой важно понимать, что происходит с меню, с многоколоночными блоками и с таблицами. Меню на 1024 уже сворачивается в бургер или ещё нет, четыре колонки становятся двумя или сразу одной, таблица переносится или прокручивается вбок.
Отдельно проговорите поведение контейнера: до какой ширины он растягивается и что происходит на мониторе 1920. Подробнее о выборе схемы адаптива мы писали в статье про адаптивную вёрстку и отдельную мобильную версию.
Состояния, о которых забывают
Проверьте по списку, есть ли в макете:
Кнопки. Обычное состояние, наведение, нажатие, неактивная кнопка. Плюс состояние загрузки, если форма отправляется без перезагрузки страницы.
Поля ввода. Пустое, с текстом, в фокусе, с ошибкой и текстом ошибки под полем. Тут же вид чекбокса согласия на обработку персональных данных: он обязателен на любой форме, и его вид лучше согласовать вместе с остальным.
Экран после отправки. Отдельная страница благодарности или сообщение на месте формы. Это влияет и на аналитику: страницу благодарности проще считать целью.
Пустые состояния. Каталог без товаров в категории, блок отзывов без отзывов, результаты поиска без совпадений.
Длинные и короткие данные. Заполните пару карточек названием в три строки и коротким названием в одно слово. Половина проблем с вёрсткой видна прямо в макете, если перестать заливать в него идеальный текст.
Шрифты: лицензия и веб-версия до утверждения
Здесь два разных вопроса, и оба решаются до того, как макет утверждён.
Первый: есть ли у шрифта веб-лицензия. Право использовать гарнитуру в макете и право отдавать её файлы браузеру посетителя продаются отдельно. Веб-лицензия у коммерческих гарнитур часто считается по числу просмотров страниц в месяц, и стоит она в пределах нескольких тысяч рублей за начальный пакет. Бесплатный шрифт с открытой лицензией такой проблемы не создаёт.
Второй: есть ли у шрифта нужные начертания в веб-форматах и поддерживает ли он кириллицу целиком. Бывает, что заглавные буквы нарисованы, а строчная "щ" взята из подстановки, и это видно только на реальном тексте.
Замена гарнитуры после вёрстки означает переделку всей типографики: у другого шрифта другая ширина знака, и блоки начинают ехать по всем страницам. На этапе макета та же замена занимает час.
Иконки и картинки: SVG, растр и две плотности
| Что отдаём | Формат | Почему так |
|---|---|---|
| Иконки, логотип, простая графика | SVG | Масштабируется без потерь, красится через код, весит килобайты |
| Фотографии, сложные иллюстрации | PNG или JPG в двух плотностях | Экраны с высокой плотностью пикселей размывают картинку обычного размера |
| Иллюстрации для современных браузеров | WebP рядом с обычным файлом | Тот же кадр весит на 60-90% меньше |
Про две плотности стоит пояснить. Если картинка в макете занимает 400 пикселей по ширине, нужны два файла: 400 и 800 пикселей. На обычном мониторе браузер возьмёт первый, на экране телефона или ноутбука с плотной матрицей второй, и снимок останется чётким.
Иконки просите именно в SVG, а не картинкой: тогда цвет меняется в вёрстке, а не пересогласовывается с дизайнером на каждое наведение. Что именно и в каком виде заказывать у иллюстратора, разобрано в статье про заказ иконок и иллюстраций.
Что тянется из CMS, а что зашито в вёрстку
Этот список верстальщик и программист должны получить вместе с макетом. Иначе половина блоков превратится в статичный текст, который заказчик потом не сможет поменять сам.
Разметьте прямо в файле или отдельным списком: заголовки и тексты на главной, карточки услуг, отзывы, состав блока преимуществ, телефон и адрес в шапке и подвале. Отдельно отметьте, сколько элементов допустимо в каждом блоке: если карточек может быть от трёх до девяти, дизайнер должен показать хотя бы два варианта раскладки.
Этот же список удобно готовить одновременно с техническим заданием, чтобы не описывать одно и то же дважды. Что писать в ТЗ, мы разбирали в отдельном материале про шаблон технического задания.
Как выглядит нормальная передача
Схема, к которой мы пришли на своих проектах:
- Отдельный файл-финал, куда переносятся только утверждённые страницы. Черновики, отвергнутые варианты и эксперименты остаются в рабочем файле.
- Доступ верстальщику на просмотр с правом комментировать. Права на редактирование не нужны: правки в макете делает дизайнер, иначе через неделю никто не знает, где актуальная версия.
- Страницы названы по-человечески и разложены по разделам, а не подписаны "Frame 214".
- Стили и компоненты собраны, слои сгруппированы, скрытые слои удалены.
- Короткая встреча на 20-30 минут, где дизайнер и верстальщик проходят по макету вместе. Это самый дешёвый способ снять десяток вопросов разом.
- После передачи макет заморожен. Новые пожелания идут отдельным списком и оцениваются как доработка.
Пункт 6 обычно вызывает сопротивление, но именно он держит срок. Если макет правится параллельно с вёрсткой, верстальщик собирает вчерашнюю версию, и это выясняется на приёмке.
Чек-лист приёмки макета: 12 пунктов
- Нарисованы все типы страниц, а не только главная.
- Есть mobile-версии для каждого типа.
- Заданы брейкпойнты и поведение блоков между ними.
- Указана сетка: ширина контейнера, число колонок, отступы.
- Есть состояния кнопок и ссылок.
- Есть состояния полей, ошибки форм, чекбокс согласия.
- Есть экран или сообщение после отправки формы.
- Нарисованы пустые состояния списков и каталога.
- Блоки проверены длинным и коротким текстом.
- Цвета и типографика собраны в стили, повторяющиеся элементы в компоненты.
- Шрифты проверены на веб-лицензию и на полноту кириллицы.
- Есть список того, что редактируется через CMS, с допустимым числом элементов в блоках.
Если пунктов не хватает, это не повод браковать работу дизайнера. Это повод дорисовать недостающее до старта вёрстки: два дня на макете экономят неделю на разработке. Проверять готовый результат помогает список пунктов приёмки сайта, но до него дело дойдёт только после вёрстки.
Что из этого следует заказчику
Макет для вёрстки это документ о поведении интерфейса, а не картинка для утверждения. Основные потери времени дают четыре вещи: отсутствие мобильных версий, отсутствие состояний, шрифт без веб-лицензии и разрозненные слои вместо стилей и компонентов. Все четыре видны за полчаса просмотра, если знать, куда смотреть. Хорошая привычка перед дизайном - собрать прототип сайта, тогда к макету приходят уже с решённой структурой.
Спорные места конкретного макета быстрее разобрать в разговоре, чем перепиской по пунктам. Способы связи собраны на странице контактов, там же указаны часы работы.
