Макет и прототип сайта: в чём разница, чем рисовать и что передать верстальщику

Что такое макет и что такое прототип?

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

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

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

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

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

Зачем нужен макет, если есть прототип?

Заказчик не читает схемы и не представляет страницу по описанию, поэтому ему нужна картинка, на которую можно показать пальцем и сказать «вот здесь не то». Практикум сравнивает работу над макетом с ремонтом квартиры: если не снять точные замеры, можно купить мебель, которая не встанет в проём. Второй получатель макета - верстальщик. Если в нём заданы сетка и базовая единица, вёрстка идёт легко, а без них начинаются бесконечные уточнения. Некоторые дизайнеры показывают систему отступов набором прямоугольников в 8, 16, 24 и 32 пикселя.

Макет решает и деловые вопросы: где лежит главное действие и что убрать с первого экрана. Сервис Convert Monster, как пересказывает Texterra, сравнил два первых экрана лендинга: на первом не было кнопки призыва, на втором её поставили. Конверсия выросла с 7,17% до 9,28%, хотя после клика посетителю по-прежнему нужно заполнить шесть полей. Замена эмоционального призыва на конкретные выгоды тоже сыграла роль, но заметно меньшую, чем сама кнопка.

Ещё один пример из подборки Texterra: копирайтер Надежда Богданова провела аудит лендинга производителя столбиков для ограждений. Со страницы убрали вторую форму подписки, чтобы она не спорила с заявкой, поменяли человека на первом экране на сами стойки и добавили в заголовок цену и сроки. По отзыву заказчика, после A/B-теста новая страница дала результат на 4,6% лучше прежней.

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

Вайрфрейм или отдельные крупные куски можно перерисовывать

Александр Старинский, эксперт Яндекс Практикума, о схеме страницы

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

Прототип проверяет догадки до первой строки кода

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

Известный пример - Dropbox. Основатель Дрю Хьюстон понимал, что рабочая версия ещё сырая для публичного запуска, и записал ролик, где показал прототип в деле. Под роликом стояла форма записи в лист ожидания закрытой беты. По пересказу книги «Бережливый стартап» лист ожидания вырос с 5000 до 75 000 человек за одну ночь, хотя продукт работал только в Windows. Ролик проверил главное: есть ли у людей проблема с синхронизацией файлов.

Ещё нагляднее история стартапа Savioke. Его робот Relay должен был возить зубные щётки и полотенца гостям отеля, и команда боялась, что постояльцам будет жутковато. В рассказе Fast Company за неделю по методу Google Ventures придумали 23 решения, а в четверг за восемь часов собрали реалистичный прототип: робота вели с ноутбука игровым джойстиком, а лицо нарисовали на iPad. Гости радовались доставке, никто не пытался с роботом разговаривать. Вялый сенсорный экран попал в список доработок, на которые ещё хватало времени. Через три недели Relay вышел в штатную работу.

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

Есть и обратная сторона. Отполированный прототип опасен тем, что его хочется выпустить. NN/g предупреждает: когда дизайн выглядит законченным, руководителю легко сказать «выглядит хорошо, запускаем», а на грубый набросок никто не ждёт релиза завтра. NN/g добавляет, что участники теста меньше стесняются критиковать неготовую версию, а дизайнер легче расстаётся с наброском, чем с вылизанным экраном.

Как собрать прототип по шагам

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

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

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

Как этот цикл работает на реальном проекте, показывает кейс ПИК-Ремонта. Лендинг получал трафик, но не получал заявок. Продуктовые дизайнеры сначала опросили людей, которым нужен ремонт: одних настораживали отзывы незнакомцев, других отсутствие конкретики на первом экране. По этим замечаниям собрали новую версию и показали её новой группе, потом ещё раз. Трёх кругов хватило: на третьей версии респонденты перестали ругать то, что влияло на заявку. Затем версии запустили в A/B-тест, и по итогам агентства конверсия в заявку выросла в 3,8 раза. Это самоотчёт исполнителя, но схема воспроизводится: проверка на людях, правка, повтор.

Сколько людей звать на проверку? Якоб Нильсен в статье Nielsen Norman Group считает, что один участник находит около 31% проблем интерфейса, а пять участников около 85%. Поэтому вместо одного большого теста на 15 человек он советует провести три малых по пять и после каждого править прототип: после пятого участника вы в основном наблюдаете повторы.

Инструменты для макета и прототипа в рунете

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

Pixso - облачная платформа для командной работы с бесплатным тарифом. Она принимает файлы Figma, Sketch, XD, Axure и SVG и сама советует сверить результат импорта с исходником, так что перед переносом рабочего проекта проверьте импорт на копии. Экраны из общих компонентов в ней связывают переходами и показывают заинтересованным людям пользовательский путь.

Из замен в обзоре Сравни.ру две заслуживают отдельного слова. Lunacy - бесплатный редактор от компании Icons8 для Windows, macOS и Linux, он рисует векторную графику и собирает прототипы, а стоит на своём компьютере. Penpot - открытый проект с совместной работой в реальном времени и интерактивными прототипами: его можно настраивать и расширять под свои задачи, что пригодится команде со своими требованиями.

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

Что передать верстальщику и каких ошибок избежать?

Макет оценивают по тому, как легко по нему сверстать страницу. В шпаргалке HTML Academy на Хабре начало простое: к макету прикрепляют шрифты, иначе разработчик скачает не те и испортит дизайн. Иконки отдают в векторе, а сетку не удаляют, потому что по ней проще делить страницу на колонки. Дизайнеры забывают то, чего нет на первом экране, и по этому списку в макет стоит добавить:

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

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

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

Мелкая правка в макете окупается. Convert Monster сравнил две версии лендинга, различавшиеся списком преимуществ: в первой конверсия была 4,37%, во второй, где пункты выстроили друг под другом, 7,13%. Texterra объясняет это тем, что такой список вместе с заголовком даёт букву F, которую читатель рисует взглядом при сканировании страницы.

Когда хватит макета, а когда нужен прототип?

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

Показательна история кавер-группы JaggerBand из подборки Texterra. Кнопка вела сразу на заявку на конкретное событие и дату, и конверсия сайта составляла всего 0,056%. Когда действие заменили на «Сообщить мне о ближайших выступлениях», она выросла до 0,64%. Воронка стала длиннее на один шаг, зато люди получили возможность увидеть группу в деле. Такой сценарий проще проверить кликабельной схемой до запуска, чем переделывать готовую страницу.

Для продвижения прототип полезен как заготовка для A/B-тестов: гипотезы про кнопку, форму и порядок блоков уже нарисованы в двух вариантах. Для посадочной страницы этого обычно достаточно, а в UX/UI-проектировании и при проверке удобства прототип остаётся основным рабочим материалом.

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

Частые вопросы