Мокапирование и прототипирование

Мокапирование и прототипирование: проверяем идею до того, как вложены деньги в разработку

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

Почему прототип экономит бюджет и нервы

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

Что входит в услугу

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

Что НЕ входит (оговариваем отдельно)

  • Финальный визуальный дизайн — это следующий этап
  • Вёрстка и программирование продукта
  • Написание финальных текстов — на прототипе обычно черновые

Этапы работ и сроки

ЭтапЧто происходитОриентировочный срок
1. Сбор требованийРазбираем задачи продукта и сценарии пользователей2–4 дня
2. Структура экрановОпределяем набор экранов и связи между ними2–5 дней
3. Прототип экрановРисуем схемы блоков на каждом экране5–10 дней
4. Кликабельная версияСвязываем экраны в проходимый прототип2–5 дней
5. СогласованиеПроходим прототип с заказчиком, вносим правки2–4 дня

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

От чего зависит цена

Стоимость прототипирования определяется количеством экранов и сложностью логики продукта. Основные факторы:

ФакторКак влияет на стоимость
Количество экрановБольше экранов — больше работы по проектированию
Сложность сценариевЗапутанная логика переходов усложняет проработку
Число ролей пользователейКаждая роль — свои экраны и сценарии
Детализация прототипаОт грубых схем до тщательно проработанного интерактива
Число итерацийМножество кругов согласования повышает трудозатраты

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

Разве нельзя сразу перейти к дизайну и сэкономить время?

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

Чем прототип отличается от дизайна?

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

Можно ли показать прототип инвесторам или руководству?

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

Кто пишет тексты для прототипа?

На этапе прототипа тексты обычно черновые — важна структура. Финальные тексты появляются на этапе дизайна и наполнения.

Прототип пригодится для технического задания?

Да, прототип становится отличной основой для ТЗ: по нему проще и точнее описать требования к разработке.

Насколько подробным бывает прототип?

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

Кто участвует в согласовании прототипа?

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

Почему стоит доверить прототипирование нам

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

Обсудим вашу задачу?

Расскажите, что вызвало задачу и что она должна решить, — спрогнозируем ресурсы и сроки.