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

Что такое макет сайта

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

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

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

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

Как смотреть макет: порядок проверки

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

1. Откройте макет на компьютере и проверьте наличие ключевых блоков: шапка с логотипом и контактами, первый экран с предложением, преимущества, товары или услуги, блок доверия, форма заявки, карта и подвал. Если какого-то блока нет, уточните у подрядчика причину.
2. Оцените логику страницы: посетитель должен за несколько секунд понять, что вы предлагаете и какое действие от него ждут. Пройдите путь от первого экрана до формы заявки и проверьте, нет ли тупиков или лишних шагов.
3. Убедитесь, что макет решает задачу бизнеса: на первом экране есть понятное предложение, кнопка призыва к действию видна без прокрутки, контакты легко найти. Если цель сайта собрать заявки, форма должна быть на видном месте, а не спрятана внизу.
4. После структуры и задачи оценивайте визуальное оформление: цвета, шрифты, изображения должны соответствовать вашему бренду. Проверьте контраст текста и фона, читаемость шрифтов, качество фотографий.
5. В конце проверьте детали: тексты на кнопках, подписи форм, иконки, отступы между блоками, поведение элементов при наведении. Мелкие недочёты на этом этапе исправить быстро, а после вёрстки правки обойдутся дороже.
6. Обязательно просмотрите макет на телефоне и планшете. На мобильной версии проверьте, что меню открывается, кнопки нажимаются пальцем, текст не слипается, а формы удобно заполнять.

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

Таблица проверки макета по зонам

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

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

Как зафиксировать договорённости и избежать споров

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

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

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

Список правок составляйте по зонам: шапка, первый экран, блок с услугами, форма заявки, подвал. Для каждой зоны указывайте, что именно изменить и как должно стать. Пример: «В шапке заменить номер телефона на +7 (900) 000-00-00 и выделить кнопку „Заказать звонок“ контрастным цветом». Такой формат ускоряет работу и снижает вероятность недопонимания.

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

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

Типичные ошибки при утверждении макета

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

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

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

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

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

Утверждённый макет сайта сохраните в архиве: файл с дизайном, переписку с согласованием, подписанный акт или письмо с подтверждением. Этот комплект станет эталоном для сравнения с готовым сайтом и защитит вас при спорах.

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

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

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

Перед утверждением макета сверьте его с этим чек-листом и зафиксируйте договорённости письменно. Это сэкономит деньги на переделках и сохранит отношения с подрядчиком.

Часто задаваемые вопросы

Дмитрий Дементьев

Генеральный директор

Рукводитель с опытом более 10 лет работы. Эксперт в области внедрения инновационных решений для крупного и среднего бизнеса.

Подписаться на ТГ