Разборы

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

Как сделать прототип, если не дизайнер

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

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

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

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

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

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

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

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

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

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

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

pic
Так может выглядеть простейший прототип, нарисованный на бумаге. Здесь нет точного текста или иллюстраций, но видна структура будущего сайта

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

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

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

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

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

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

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

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

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

pic
pic
Получилась вот такая таблица. Дальше будем объединять ячейки и таким образом делить сетку на блоки и модули

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

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

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

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

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

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

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

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

pic
pic
Такой текстовый прототип у нас получился. Пока без акцентов, но с чёткой структурой

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

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

pic
pic
pic
pic

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

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

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

Marvel

Цена. $12–42 в месяц.

Бесплатный тариф. Один пользователь с одним проектом.

Платформы. Онлайн-версия, мобильные приложения на iOS и Android.

Функции:

  • Прототипирование.
  • Тестирование.
  • Автоматическая генерация кода под прототип.
  • Командный доступ.

NinjaMock

Цена. $5–8 в месяц за одного пользователя.

Бесплатный тариф. Один проект без возможности экспорта.

Платформы. Онлайн-версия.

Функции:

  • Разработка прототипов под разные виды устройств с помощью мокапов.
  • Встроенные инструменты рисования.
  • Командный доступ.

Justinmind

Цена. $9–19 в месяц за одного пользователя.

Бесплатный тариф. Версия с ограниченным функционалом.

Платформы. Десктопная версия для MacOS и Windows.

Функции:

  • Создание прототипов для web и мобильных приложений.
  • Интерактивный дизайн: с кнопками, загрузкой страниц и пр.
  • Тестирование.

HotGloo

Цена. $13–54 в месяц.

Бесплатный тариф. 7-дневный пробный период.

Платформы. Онлайн-версия.

Функции:

  • Создание интерактивных прототипов.
  • 2000 элементов в библиотеке.
  • Командный доступ.

Draftium

Цена. $99 в год

Бесплатный тариф. Три проекта и 50 доступных шаблонов.

Платформы. Онлайн-версия.

Функции:

  • Прототипирование на основе 300 готовых шаблонов и 200 блоков.
  • Автоматическое подстройка прототипа под мобильные устройства.
  • Командный доступ.

Eskone

Цена. $2–5 в месяц.

Бесплатный тариф. 30-дневный пробный период.

Платформы. Онлайн-версия.

Функции:

  • Создание интерактивных прототипов.
  • Проектирование баз данных, скриптов, квизов.
  • Создание майнд-карт для разработки структуры сайта.