Зачем смотреть макет до вёрстки

Чем макет отличается от собранной страницы

Отличий три, и каждое объясняет, почему макет читают иначе, чем готовый сайт.

Макет не работает. Форма не отправляется, меню не раскрывается, каталог не листается. Судить по картинке о поведении нельзя. На ней список нарисован открытым, а в собранной странице его сначала нужно открыть — и сколько движений на это уйдёт, видно только в вёрстке.

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

Макет узкого экрана — отдельная картинка. Нарисованное для широкого экрана само не «подстраивается» под телефон: узкий вид рисуют отдельно, и порядок блоков в нём может быть другим. Вид на телефоне и планшете входит в любой наш тариф, и смотреть его нужно так же внимательно, как вид на компьютере.

Почему правка до вёрстки дешевле правки после

Дело не в доброй воле исполнителя, а в том, из чего складывается работа.

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

Второе — порядок работ. По согласованному макету пишутся и вычитываются тексты, подбираются изображения, собирается вёрстка. Правка, пришедшая до этого, просто меняет план. Та же правка после отменяет сделанное: блок, которого больше нет, уносит с собой написанный к нему текст и подобранное изображение.

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

Что смотреть в структуре и порядке блоков

Макет сверяют не с ощущением, а с техническим заданием: в нём перечислены страницы и состав каждой сверху вниз. Открывается задание, открывается макет, и дальше по строкам.

• Все ли блоки на месте. Строка задания, которой на макете нет, не появится в вёрстке сама.
• Нет ли лишних. Блок, которого в задании не было, — либо подарок, либо остаток чужого шаблона.
• Порядок сверху вниз. Читается подряд, как человек листает: сначала что это, потом сколько стоит, потом как заказать. Если цены стоят после рассказа о компании, это решение, а не случайность, и его стоит обсудить сейчас.
• Первый экран. Три ответа — что вы делаете, для кого и что нажать дальше — должны читаться без прокрутки. Подробнее — первый экран сайта.
• Что видно до первой прокрутки на каждой странице, а не только на главной. Страница услуги и страница контактов живут отдельной жизнью, на них приходят из поиска напрямую.

Как читать тексты в макете

Главное требование к макету на согласовании — настоящие тексты вместо «рыбы». Серую заливку на месте абзаца легко согласовать, и означает она только одно: решение отложено до вёрстки, где оно будет стоить дороже.

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

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

Что проверять в формах

Форма — то место, ради которого обычно делается сайт, и на макете она проверяется по составу, а не по виду.

• Сколько полей и какие обязательные. Каждое лишнее обязательное поле — причина закрыть страницу. Решается это на макете одним разговором.
• Что происходит после отправки. Должен быть второй экран или второе состояние: сообщение о том, что заявка ушла. Если его в макете нет, нет и решения, и в вёрстке появится молчаливая перезагрузка.
• Галочка согласия и ссылка на политику обработки данных. Политика входит в любой наш тариф, но на макете должно быть видно место, где она стоит.
• Куда уходит заявка. На макете этого не видно вовсе, и спросить нужно именно сейчас: заявки должны приходить на вашу почту.

Что смотреть на телефоне и на крайних значениях

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

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

• Самое длинное название услуги и самую длинную фамилию сотрудника.
• Самую длинную цену — пятизначную, с указанием условия вроде «от» или «за метр».
• Неполный ряд. Три карточки вместо шести, одна услуга вместо четырёх: ряд не должен разваливаться.
• Пустые данные. Товар без фотографии, услуга без цены, раздел, который пока нечем наполнить. Пустой блок на сайте хуже отсутствующего: его открывают.

Вёрстка расходится именно на этих значениях, и чинится это дешевле всего до того, как она началась.

Как это связано с кругами правок

В любой наш тариф входит два круга правок; дополнительный круг — отдельная строка в допработах, 3 000 ₽. Круг — это один заход: собранный список замечаний, который вносят разом, а не письмо за письмом.

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

Когда макет не нужен

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

При типовом тарифе на готовой основе конструкция страницы уже задана. «Старт» — это одностраничный сайт до восьми экранов, 24 900 ₽ и 2 рабочих дня; рисовать и согласовывать картинку дольше, чем собрать саму страницу. Роль макета там играет образец: открывается «Протектор» — шиномонтаж на этом тарифе. Дальше разговор идёт по готовой конструкции: какие блоки оставить, какие убрать, что переставить. Это быстрее и точнее, чем обсуждать прямоугольники.

Когда ещё нет текстов и цен. Макет на «рыбе» согласуют за минуту, и не значит он ничего. Сначала материалы, потом картинка.

Когда макетов просят слишком много. Рисовать каждую из двадцати страниц каталога незачем: страницы одного типа устроены одинаково, и достаточно макета одного представителя каждого типа — главная, страница услуги, страница списка, страница контактов.

А нужен он там, где конструкция не взята готовой. В индивидуальной работе макет — не формальность, а единственное место, где решения вообще принимаются. Времени на это отведено больше: индивидуальный лендинг — от 149 900 ₽ и от 14 рабочих дней; индивидуальный сайт компании — от 199 900 ₽, индивидуальный магазин — от 299 900 ₽.

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