Статья
Макет сайта: что это и как его согласовать
Макет — это картинка будущего сайта, на которой видно всё: тексты, цвета, кнопки, версии для компьютера и телефона. Именно на этом этапе правки дешевле всего — потом их придётся переделывать в коде. Разбираем, как смотреть макет и давать замечания так, чтобы проект не затянулся на месяцы.
Что такое макет
Макет — точное изображение страниц сайта до того, как их начнут программировать. В нём уже есть настоящие тексты, фото, цвета, шрифты и все блоки по порядку — для компьютера и отдельно для телефона. Макеты обычно рисуют в Figma: заказчику присылают ссылку, и он смотрит страницы прямо в браузере.
Макет путают с двумя соседними вещами:
- Прототип — схема из серых прямоугольников: что и в каком порядке будет на странице. Отвечает на вопрос «что», но не «как выглядит».
- Готовый сайт — то, что получается после вёрстки и программирования: работает, открывается по адресу, анимируется.
Почему правки — сейчас
Поменять цвет кнопки или порядок блоков в макете — минуты. То же самое на свёрстанном сайте — часы, потому что меняется код, мобильная версия и всё, что от этого зависит. Поэтому все сомнения стоит высказать на макете: «а давайте ещё блок с отзывами» после вёрстки обходится в разы дороже.
Как смотреть макет
- Сначала глазами клиента, потом своими. Откройте макет так, как его откроет человек, который вас не знает: понятно ли за пять секунд, что вы делаете и куда нажимать?
- Смотрите версию для телефона отдельно. Большая часть посетителей придёт с телефона, а мобильный макет часто смотрят последним и мельком.
- Проверяйте факты. Цены, адреса, телефоны, названия услуг — дизайнер мог взять их из старых материалов.
- Читайте тексты. Это первый раз, когда текст стоит в настоящем окружении: где-то он окажется слишком длинным, где-то ничего не объясняет.
- Не оценивайте анимацию по картинке. Как блоки будут двигаться, макет показывает плохо — об этом лучше спросить отдельно.
Как давать правки
Хорошая правка — конкретная и с причиной:
| Вместо | Лучше |
|---|---|
| Не нравится | Первый экран выглядит холодно, а наши клиенты — семьи с детьми |
| Сделайте ярче | Кнопку записи не видно на фоне фото |
| Добавьте чего-нибудь | Нет ответа на вопрос о гарантии — клиенты спрашивают это первым |
| Как у конкурента | У конкурента цены видны сразу — давайте так же |
Ещё три правила, которые экономят недели:
- Одни правки — одним списком. Соберите мнения всех, кто участвует в решении, и пришлите одним сообщением. Пять отдельных писем от пяти человек с противоречивыми просьбами — главная причина бесконечных кругов.
- Один человек принимает решение. Если в споре «синий или зелёный» участвует весь отдел, проект встаёт.
- Объясняйте, какую проблему решает правка. Дизайнер может предложить решение лучше, чем «сделайте шрифт побольше».
Сколько бывает кругов правок
Обычно количество вариантов и правок оговаривают заранее, в договоре или смете. Так устроено и у нас: по оферте на этапе дизайна делаем макеты страниц в согласованном количестве вариантов, показываем их и правим до начала вёрстки. А правки после того, как этап принят, — уже отдельная работа, по согласованию.
После согласования
Согласованный макет — основа для вёрстки: сайт будет выглядеть так же, только оживёт — появятся анимации, наведения, работающие формы. Как выглядит весь путь от заявки до запуска, разобрано в статье «Этапы разработки сайта».
Как это делаем мы
Макеты для компьютера и отдельно для телефона мы показываем до начала вёрстки и правим без лимита по кругам — пока результат не совпадёт с согласованной заявкой. Для сайта из нескольких страниц посмотрите корпоративный сайт.