Как сделать прототип будущего сайта, если вы не дизайнер

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

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

Что такое прототип и зачем он нужен

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

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

Прототипы выполняют 4 основные функции.

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

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

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

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

Когда нужно делать прототип

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

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

Самый простой способ создать прототип — воспользоваться Google Docs. На примере этого сервиса мы дальше и будем делать прототип лендинга, т.к. это понятный и знакомый многим формат.

Как сделать прототип лендинга в Google Docs

1.Узнать ограничения формата. На лендинге возможно почти всё, но могут быть ограничения, связанные с бюджетом заказчика или с возможностями конструктора, в котором дальше лендинг будут верстать. Это нужно учитывать заранее.

Давайте зададим себе такое ограничение искусственно, чтобы было интереснее. Например, у нашего лендинга обязательно должна быть сетка на 12 колонок. Чтобы сделать такую сетку в Google Docs, вставим в документ соответствующую таблицу.

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

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

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

3.Набросать текст. Текст в прототипе — это не обязательно вылизанные формулировки. На этом этапе важно обратиться к анализу ЦА и понять, что мы точно будем размещать на лендинге. Потом формат и объём текста сам подскажет, как его лучше всего разбить на смысловые блоки.

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

• как чат-боты помогают бизнесу и какие проблемы решают;
• как работает конструктор чат-ботов;
• как готовые шаблоны и сценарии облегчают работу;
• кому пригодится инструмент.

Под каждый пункт списка пишем текст и получаем вот такой результат:

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

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

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

6 сервисов для создания прототипов

Если вам кажется, что с таблицами в Google Docs работать неудобно, можно сделать прототип в специальном конструкторе. Вот несколько самых популярных.