Макет сайта: как увидеть проект до оплаты

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

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

Эскиз, макет, прототип и конструктор: четыре способа увидеть сайт заранее

Эти названия часто используют как взаимозаменяемые, поэтому в начале сотрудничества уточните, что именно Вы получите. Этапы различаются уровнем детализации и тем, что на них можно оценить.

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

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

Макета, показанного один раз на встрече и без ссылки, мало. Перед утверждением стоит иметь:

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

Спросите также, что будет с проектом, если после этапа макета Вы с исполнителем не продолжите работу: получите ли Вы файл и право им пользоваться. Это вопрос для договора, а не для устного обещания. Хорошо, когда оплата разбита на этапы, и одним из них является утверждение макета. На что ещё смотреть в предложении, я описываю в статье Сколько стоит сайт в 2026 году.

Что не стоит оценивать на макете

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

• Текст «lorem ipsum». Это псевдолатинский текст-заполнитель, который показывает лишь, сколько места займёт содержимое. Оценивайте длину и компоновку, а не смысл. Если Ваш настоящий текст будет втрое длиннее, скажите об этом сразу, потому что это изменит компоновку разделов.
• Фотографии из фотобанков. Часто они попадают на макет только для пробы. В таких сервисах, как Adobe Stock, на превью стоит водяной знак, который исчезает лишь после покупки лицензии. Уточните, будут ли на сайте Ваши фотографии выполненных работ или купленные и кто платит за лицензии.
• Примерные цифры и отзывы. «15 лет опыта» или «500 довольных клиентов» на макете обычно лишь заполнитель. Проследите, чтобы до публикации там появились Ваши настоящие данные.
• Точный оттенок цвета. Каждый монитор и каждый телефон показывают цвета немного по-разному. Если у Вас есть фирменные цвета, назовите их коды, а не оценивайте «на глаз».

Зато на макете оценивайте порядок содержимого, читаемость, понятно ли сразу, чем занимается компания, и насколько легко с ней связаться.

Проверьте макет на телефоне, а не только на компьютере

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

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

Как проверить макет на телефоне:

1. Попросите ссылку на мобильную версию или на прототип. Ссылку на прототип из Figma можно открыть в браузере телефона, или, что удобнее, в приложении Figma для iOS и Android (приложению нужен аккаунт).
2. Смотрите проект в реальном размере, держа телефон в одной руке. На мониторе всё кажется больше и читабельнее.
3. Проверьте первый экран: видно ли без прокрутки, чем Вы занимаетесь, и есть ли кнопка для звонка.
4. Пройдите путь клиента: из меню к услуге, от услуги к форме. Посчитайте клики.

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

10 вопросов, которые стоит задать при просмотре макета

Распечатайте этот список или откройте его рядом с проектом. К каждому вопросу запишите ответ одним предложением.

1. Понятно ли мне через несколько секунд на главной странице, чем занимается компания и в каком городе или регионе?
2. Виден ли на первом экране телефона номер телефона или кнопка связи?
3. Есть ли на каждой странице одна главная кнопка, которая подсказывает, что делать дальше?
4. Есть ли все услуги, которые я хочу продавать, в порядке от самой важной?
5. Что увидит человек, который попадёт из Google прямо на страницу услуги, минуя главную?
6. Где доказательства: отзывы, фотографии выполненных работ, сертификаты, гарантия?
7. Как работает меню на телефоне и сколько кликов отделяет клиента от формы?
8. Спрашивает ли форма только то, что действительно нужно мне для расчёта стоимости, и что клиент увидит после её отправки?
9. Кто подготовит тексты и фотографии, в какой срок и за какую цену?
10. Чего на макете ещё нет: подвала сайта, политики конфиденциальности, баннера cookies, сообщений об ошибках в форме, страницы 404?

Вопросы 1–3 самые важные. Если на какой-то из них Вы отвечаете «не знаю», у Вас есть первое замечание для исполнителя.

Как писать замечания, чтобы исполнитель их понял

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

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

Несколько примеров в формате «вместо X напишите Y»:

• Вместо «заголовок слабый» напишите: «Заголовок говорит о качестве, а клиенты спрашивают нас в основном о сроках. Предлагаю: „Ванные комнаты под ключ за 6 недель, Краков и окрестности“».
• Вместо «сделайте посовременнее» напишите: «Мне нравится сайт [ссылка]: крупные фотографии выполненных работ и мало текста на первом экране. Можем ли мы так скомпоновать главную страницу?»
• Вместо «цвет плохой» напишите: «Кнопка сливается с фотографией на фоне. Прошу оранжевый цвет из нашего логотипа или более сильный контраст».
• Вместо «передвиньте это выше» напишите: «На телефоне номер телефона должен быть виден без прокрутки».

Три правила, которые экономят круги правок:

• Один список на круг. Соберите замечания от всех сотрудников компании и отправьте их вместе, пронумерованными. Десять писем по одному замечанию — прямой путь к ошибкам.
• Замечание, привязанное к месту. В Figma на компьютере Вы включаете режим комментариев (клавиша C) и нажимаете на место, к которому относится замечание. Без Figma достаточно скриншота со стрелкой.
• «Обязательно» отдельно от «было бы здорово». Тогда исполнитель знает, что является условием утверждения, а что является лишь предложением.

Сколько правок считается нормой? Важнее самого числа то, чтобы оно было записано в предложении и чтобы было ясно, что такое круг: один собранный список, а не каждое сообщение. У меня в стоимость проекта входят два круга правок. Мелкие изменения после утверждения — обычное дело, но новая компоновка или новая страница на сайте, уже написанном в коде, обычно требуют дополнительной работы, которая оценивается отдельно.

Бесплатный эскиз в конструкторе, прежде чем что-либо заказывать

Если Вам трудно представить сайт по серым прямоугольникам, начните с чего-то настоящего. В моём бесплатном конструкторе сайтов Вы заполняете форму за 2–3 минуты, а ИИ (Google Gemini) примерно за 10–20 секунд пишет сайт из четырёх страниц: главной, страницы предложения, страницы о компании и контактов. Вы добавляете логотип, фотографии, цвет компании, шрифт и выбираете светлый или тёмный фон.

Тексты Вы правите прямо в браузере: нажимаете на предложение и пишете. Предложения с цифрами и обещаниями конструктор подсвечивает для проверки, а кнопка «Napisz inaczej» («Написать иначе») пишет раздел заново (до 3 раз на сайт). Черновик хранится 7 дней с последнего изменения, но не дольше 30 дней. Конструктор и файлы бесплатны, без абонентской платы. Единственное условие: приписка «Wykonanie: RobimyWeb» («Выполнено: RobimyWeb») в подвале сайта, а платите Вы только за домен и хостинг.

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

Итог

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

Если Вы планируете новый сайт, то в услуге Сайт компании под ключ (от 4 900 зл без НДС) Вы получаете проект в Figma для компьютера и телефона и два круга правок ещё до того, как я напишу первую строку кода. Если хотите обновить старый сайт, посмотрите модернизацию сайта (от 2 900 зл без НДС). Напишите мне: расчёт стоимости Вы получите в течение 24 часов, а новым клиентам я даю скидку 20% на первый заказ.