Макет сайта: что это, чем отличается от прототипа и как его принимать

Дизайнер присылает ссылку: «Макет главной готов, посмотрите». Вы открываете её на ноутбуке, листаете вниз. Красиво, современно, фотографии смотрятся дорого. Вы отвечаете: «Отлично, согласовано».

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

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

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

Прототип сайта похож на планировку. Макет похож на дизайн-проект. Он показывает сайт таким, каким его увидят клиенты, вплоть до цвета кнопки и расстояния между строчками.

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

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

В разговоре словом «макет» называют всё подряд: и серую схему, и готовый дизайн. Из-за этого заказчик и дизайнер легко ждут разного. Поэтому полезно развести понятия.

Порядок важен. Если начать сразу с макета, обсуждение быстро уходит в «синий или зелёный», а вопросы про содержание остаются без ответа. Потом выясняется, что раздела про доставку нет, и красивый макет приходится перекраивать. Как сделать прототип и зачем он нужен, мы подробно писали в статье про прототип сайта.

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

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

Так устроен сайт Villagio Estate. У компании семь посёлков и большой каталог объектов, и страницы там собираются из 28 секций конструктора. Каждую секцию когда-то нарисовали в макете, продумали её вид на компьютере и телефоне. Теперь команда клиента собирает новые страницы сама, а сайт остаётся цельным.

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

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

Самый частый ответ заказчика на вопрос о стиле: «Ну, чтобы современно». Дизайнеру это почти ничего не говорит. Гораздо полезнее подборка из пяти-десяти сайтов с короткими пометками.

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

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

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

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

Чаще всего макеты сайтов рисуют в Figma. Это онлайн-редактор для дизайнеров, он работает прямо в браузере. Вам пришлют ссылку, по ней можно смотреть страницы и оставлять комментарии прямо на макете.

С 2022 года Figma не продаёт подписки в России напрямую и тогда же заморозила платные аккаунты российских компаний. Бесплатный тариф остался, его хватает, чтобы смотреть макеты и комментировать. Часть студий перешла на аналоги. Например, Pixso умеет открывать файлы из Figma, а Penpot можно установить на сервер своей компании.

Для вас программа не главное. Важны три вещи:

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

И небольшой совет по просмотру. Смотрите макет в масштабе 100%, а не уменьшенным под размер экрана: в уменьшенном виде мелкий текст кажется аккуратнее, чем будет на сайте. А мобильные макеты открывайте на своём телефоне, а не на ноутбуке.

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

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

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

Пишите правки конкретно. «Не нравится синий» дизайнеру трудно исправить. «Кнопка теряется на фоне фотографии» понятно сразу. Описывайте проблему, а решение оставьте дизайнеру. Хорошая правка звучит как наблюдение.

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

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

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

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

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

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

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

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

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