Прототип сайта: что это, зачем он нужен и как сделать его до дизайна

Часто бывает так. Дизайнер показывает главную страницу будущего сайта: красиво, современно, все довольны. Через месяц сайт почти готов, и тут всплывают неприятные вещи. Цены спрятаны в самый низ, раздел про доставку забыли, а кнопку «Заказать» на телефоне приходится искать.

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

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

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

Прототип сайта и есть такая планировка. Он показывает:

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

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

Дизайнеры часто называют такую схему вайрфреймом. Это от английского wireframe, то есть «каркас».

Путаница обычно начинается со слов. Заказчик говорит «макет» и имеет в виду схему. Дизайнер слышит «готовый дизайн». В итоге каждый ждёт своё и удивляется результату.

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

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

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

Как выбрать. Для небольшого сайта обычно хватает схемы. Например, для лендинга, то есть одной длинной страницы под одну услугу. Или для визитки на пять-семь страниц.

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

Прототип добавляет в проект ещё один этап. Кажется, что это лишнее время. На практике он чаще экономит недели, чем отнимает.

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

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

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

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

Оценка становится точнее. Подрядчик видит все страницы и блоки и может честно сказать, сколько займёт работа. Меньше сюрпризов вроде «а это мы не закладывали».

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

Начните с одной страницы, которая приносит деньги. Чаще всего это страница главной услуги или товара, а не главная страница сайта.

Удобный приём: напишите каждый блок на отдельном стикере и раскладывайте их на столе. Менять порядок так проще, чем перерисовывать лист.

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

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

Figma — это онлайн-редактор для дизайнеров, он работает прямо в браузере. Когда подрядчик говорит «сделаем прототип сайта в фигме», это значит, что вы получите ссылку. По ней можно смотреть страницы и нажимать на кнопки в режиме просмотра. А после бесплатной регистрации ещё и оставлять комментарии прямо на схеме.

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

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

Эти ошибки встречаются и у заказчиков, которые рисуют сами, и у подрядчиков.

Рисовать красиво вместо понятно. Как только в схеме появляются цвета и фото, обсуждение уходит в «синий или зелёный». А вопрос, понятна ли кнопка и видна ли цена, остаётся без ответа. Оставьте прототип серым.

«Рыба» вместо текстов. Рыбой дизайнеры называют текст-заглушку, часто это бессмысленная латынь lorem ipsum. На схеме заголовок из трёх слов смотрится отлично. Потом приходит настоящий, из двенадцати слов, и блок разваливается. Пишите хотя бы черновые заголовки, кнопки и списки.

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

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

Нет неудобных экранов. Что увидит человек, если поиск ничего не нашёл, корзина пуста или телефон введён с ошибкой? Такие экраны редко рисуют заранее, а потом придумывают на ходу.

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

Пункт про админку важен, если вы планируете сами собирать новые страницы. Тогда в прототипе стоит договориться о наборе готовых блоков. Например, на сайте Villagio Estate страницы собираются из 28 секций конструктора. Такой набор удобно продумать заранее, пока всё серое.

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

А если сайт уже есть и вы думаете о переделке, не начинайте с рисования нового. Сначала узнайте, где люди спотыкаются на старом. Это покажет UX-аудит, то есть разбор сайта глазами посетителя. С его выводами прототип для редизайна получается точнее.

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