16 инструментов для создания прототипов

Содержание

Введение

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

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

Рис. 1 – Готовый прототип сайта, выполненный в разработанной для этого программе

На данном этапе нет места красоте, ни о каких элементах дизайна речь не идёт. Главная задача – понять:

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

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

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

Такие доработки выливаются в задержки и дополнительные финансовые затраты (или убыток).

Прототипирование можно сравнить с планом будущего дома: упущение мелкого, но важного элемента может дорого стоить.

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

Рис. 2 – Основное отличие прототипа (показан слева) от макета (справа)

Онлайн-сервисы по созданию прототипов

Специалисты топовых digital-агентств работают в довольно простых и интуитивно понятных (а зачастую и бесплатных или условно-бесплатных) веб-сервисах. Они не требуют особой подготовки и знаний дизайна и верстки, с ними легко справляется даже стажер. К тому же, многие из них работают по принципу конструктора и drag-and-drop элементов, а также имеют встроенные шаблоны под разные тематики. 

Еще одно преимущество веб-сервисов по созданию прототипов – возможность совместной онлайн-работы над проектом (по аналогии с редактированием файла на Google Диске). 

Один из них, Balsamiq, мы показали в видеоинструкции выше. Расскажем, какими еще несложными веб-сервисами пользуются интернет-маркетологи для создания прототипов.

Figma  

Figma – кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Функционал широкий: в сервисе можно рисовать полноценные дизайн-макеты и собирать прототипы (в том числе живые). Сервис не самый простой, но если потратить два дня на изучение ключевых функций, даже новичок начнет делать мокапы. Удобно то, что вся разработка ведется в онлайн-приложении. 

У Figma есть 2 крутые опции: доступ к макету из окна браузера и совместная редактура макетов и прототипов командой. Есть бесплатная версия с урезанным функционалом.  

Wireframe.cc 

Это минималистичный онлайн-сервис, с которым разберется и стажер. В нем можно рисовать мышкой базовые элементы и добавлять текст. Идеально подойдет для создания простого вайрфрейма (блок-схемы) и командной работы. Есть бесплатная версия с ограниченным функционалом.  

Draftium 

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

Еще одна фишка сервиса – готовый прототип оттуда можно выгрузить в конструктор сайтов Weblium (и там тоже есть бесплатный тариф). Этих сервисов достаточно, например, чтобы сделать лендинг под ключ.  

Axure  

Профессиональное ПО для прототипирования, с которым легко разберется и новичок. Есть облачная версия. Про работу в Axure мы писали отдельную статью «Прототип landing page в Axure», рекомендуем ознакомиться.  

Прототип ставит телегу впереди лошади

Расположение элементов не должно доминировать над контентом. Для иллюстрации этого пункта я ввёл в «Яндекс.Картинки» запрос «прототип сайта». Вот второй результат:

Хороший прототип — хоть сейчас в дизайн, вёрстку и внедрение. Правда, потом перед заказчиком встанут вопросы:

  1. Если описать услуги коротко, то хватит пары предложений, а если подробно — три минимум. Один абзац — ни туда, ни сюда. Что делать?

  2. «Новинки услуг»? Нам что, каждую неделю по новой услуге добавлять?

  3. О чём писать в прекрасном блоке про прибор? И, главное, зачем?

  4. Погодите, снова услуги? А первого блока не хватит?

  5. О, и проекты снова. И чем они отличаются от первого блока?

Исполнитель объяснит, что мы тут можем поставить любую информацию, услуги заменить на биографию директора (и место для фотки есть), а вместо нижнего портфолио разместить логотипы клиентов. Только в чём заключалась его работа: раскрасить и оживить сетку или создать эффективную страницу? Если второе, то стоило начать с контента: получить материалы, придумать, понять, что его слишком мало или слишком много, отобрать материалы в правильной последовательности, окрасить в нужные эмоции, подобрать картинки — и потом уже отдавать в прототип…

Стоп, разве не лучше отдать сразу в дизайн?

Ещё пара примеров:

  1. Каталог товаров в прототипе вывели в три колонки. Но чтобы определиться, подходит ли графика для трёхколоночного списка, дизайнер должен поставить реальные картинки на реальный макет. Иначе никак.

  2. Каждый товар в списке представлен как обычно: горизонтально ориентированная картинка, под ней — название, короткое описание, цена. Но картинки заказчика могут быть совершенно разными (некоторые предметы больше по высоте, чем по ширине). То же с длиной названия. Продумывать внешний вид плитки должен дизайнер. И только после того, как изучит вводные данные.

Понимаете? Без контента ни прототип, ни дизайн смысла не имеют. Если по уму-то.

Мне могут возразить: расстановка блоков по странице — не главное достоинство прототипов. Они ведь могут быть интерактивными, многостраничными, имитирующими будущий сайт. Всё так, но здесь нас ждёт ещё одна проблема.

Преимущества, которые дает использование прототипа

Основные выгоды от внедрения прототипа – экономичная разработка и взаимопонимание между командой разработчиков и клиентом. Мы внедрили прототип в бизнес-процесс еще на заре появления лендинг пейдж после нескольких диких случаев. Расскажу об одном из них.  

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

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

Существует грубое, но правдивое выражение «без внятного ТЗ – результат хз». Если работать без прототипа, может оказаться, что нужно полностью менять сайт на этапе готовой верстки. Это значит, что нужно вновь подключать к работе целую команду из верстальщика, дизайнера, программиста, интернет-маркетолога и оплачивать их труд. 

Основные преимущества, которые дарит использование прототипа: 

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

Утвержденный прототип – гарантия того, что работа будет выполнена качественно и в срок. 

Product Evolution Canvas

Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из двух компонентов – это:

  1. Временные рамки.
  2. Три этапа эволюции продукта.

Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.

3 этапа эволюции продукта

Эволюция продукта – это весь процесс от создания прототипа до готового товара.

Он делится на три этапа:

  1. Моделирование минимально-жизнеспособного продукта (прототипа или по-другому MVP).
  2. Создание основного продукта (который перекрывает основные потребности потенциальных клиентов).
  3. Производство полнофункционального продукта (идеальное решение проблемы пользователя).

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

Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:

  1. Что может ваш продукт?
  2. Как вы будете развивать свой продукт?
  3. Что нас ждёт в будущем?
  4. Что в итоге получится?

Кроме того, Product Evolution Canvas упрощает:

  1. Разработку стратегии улучшения продукта.
  2. Установку дедлайнов.
  3. Генерацию идей.
  4. Презентацию продукта.
  5. Мотивацию команды на работу.

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

Как работать с PEC

Работа с PEC предполагает прохождение трех этапов:

1  
На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»
2 На втором этапе задавайте вопрос: «Как мне улучшить свой продукт, чтобы он соответствовал главным пользовательским сценариям?»
3 На третьем этапе уточняйте: «Какие элементы стоит добавить в продукт, чтобы он полностью раскрыл заложенный в нём потенциал?»

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

  1. Нарисовать канвас на листе формата А4 или магнитной доске. Заполнить его элементами продукта.
  2. Повесить в комнате, в которой работает ваша команда.
  3. Постоянно дополнять.
  4. Использовать в презентациях для пользователей и инвесторов.

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

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

Прототипировать можно:

  1. Физические продукты, такие как автомобиль, зубная паста, спортивное снаряжение и т.п.
  2. Сайты. Их прототипируют, чтобы быстро получить представление о том, как они примерно будут выглядеть в готовом состоянии.
  3. Программы и приложения.
  4. Интерфейсы.
  5. Опыт.

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

Лучшие онлайн-сервисы для прототипирования

Перечисляем самые авторитетные и популярные на момент написания статьи веб-инструменты для прототипирования.

  • Draftium. Работает по принципу конструктора, предлагает больше 500 шаблонов и тысячи блоков, которые можно перетаскивать, менять местами, добавлять и удалять. Правда, если не платить, шаблонов будет несколько десятков.

  • «Марвел”. Этот сервис посложнее, чем Draftium — требуются базовые дизайнерские навыки, но зато и функционал больше. В Marvel можно создать интерактивный прототип какого угодно сайта. Серьезные функции доступны только в платных тарифах.

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

  • Just in Mind. Эта программа подойдет всем. С ее помощью создают элементарные, простые прототипы и сложные проекты с кликабельными блоками. Есть версия с ограниченным набором функций, за которую не надо платить, и три пакета разной степени дороговизны.

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

Маркетинговый анализ как основной этап прототипирования сайта

1. Брифование заказчика и изучение продукта и компании.

  • статистику по компании и услуге;
  • этапы оказания услуги;
  • гарантии;
  • преимущества;
  • выгоды от сотрудничества;
  • результаты клиента от покупки продукта.

2. Анализ целевой аудитории

  • анализ форумов и тематических статей;
  • анализ социальных сетей конкурентов — ищите комментарии и вопросы клиентов, читайте отзывы тех, кто уже купил продукт;
  • анализ ключевых запросов в Яндекс Wordstat подсказок Google — так вы поймете, как потенциальный клиент ищет товар или услугу в интернете;

  • Изучение записей разговоров из отдела продаж (какие вопросы задают клиенты, с какими проблемами обращаются, какие сомнения у них возникают, как быстро клиент принимает решение, из каких этапов состоит воронка продаж);
  • Обзвон действующих клиентов компании: почему обратились именно сюда, какие плюсы и минусы от сотрудничества выделяют, советуют ли компанию своим знакомым и почему;
  • анализ сайтов отзовиков — смотрим отзывы по товару/услуге или конкурентам.

3. Анализ конкурентов

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

проанализируйте отделы продаж конкурентов

Изменение прототипов

Давайте рассмотрим пример изменения свойства функции-конструктора — методы, добавленные в прототип, затем доступны для всех экземпляров объектов, созданных из конструктора.

  1. Вернитесь к нашему примеру oojs-class-further-exercises.html и создайте локальную копию исходного кода. Ниже существующего JavaScript добавьте следующий код, который добавляет новый метод в свойство конструктора:

  2. Сохраните код и загрузите страницу в браузере и попробуйте ввести следующее в текстовый ввод:

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

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

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

Примечание: Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример oojs-class-prototype.html (см. также это running live).

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

Это не очень гибко, так как человека нельзя назвать так. Было бы намного лучше сделать это, создав из и :

Однако это не работает, поскольку в этом случае будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернёт . Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.

Фактически, довольно распространённый шаблон для большего количества определений объектов — это определение свойств внутри конструктора и методов в прототипе. Это упрощает чтение кода, поскольку конструктор содержит только определения свойств, а методы разделены на отдельные блоки. Например:

Этот образец можно увидеть в действии в примере приложения плана школы Петра Залевы.

Минусы прототипирования

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

Время

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

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

Пример: пенал для акварели

Для создания пенала для акварели наша команда разработала простейший прототип. Мы напечатали его на 3D-принтере по технологии SLA (смола) /FDM (обычный экструдер и нить) /SLS. Прототип отливался из двухкомпонентного пластика на силиконовой форме.

Из архива «Карфидов Лаб»

Проблемы

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

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

Как исправили

  1. Доработали защелки, корректируя металлическую оснастку и делая пробные отливки до нужного результата.
  2. Чтобы компенсировать защиту от протекания воды, доработали на пресс-форме геометрию зуба, который зайдет в резинку, буквально повторяя деформацию детали после отливки. Зуб в середине был сделан крупней.

Так, проблема была выявлена этапе прототипирования, и мы смогли исправить ситуацию.

Из архива «Карфидов Лаб»

Функциональный прототип

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

Электроника изначально собирается и тестируется отдельно на столе с проводами. И после тестов впервые вставляется в прототип. Обычно на этом этапе возникает необходимость разных доработок. 

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

Прототип: основные блоки сайта

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

Следующий экран — это блок с преимуществами товара. Покажем фотографию и расскажем, в чём отличие от конкурентов. Изображение условно обозначим с помощью элемента Placeholder, а для иконок используем Ellipse.

Чтобы показать работы компании, используем слайдер. Элементы управления легко создать с помощью горизонтальных линий. Перетягиваем Horizontal Line на макет, кликаем на серый круг около линии и выбираем внешний вид.

Отзывы о компании удобно разместить в виде карточек.

Что важно учесть при создании прототипа мобильного приложения

1. Тестируйте прототипы в конкретных ситуациях и тестируйте чаще

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

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

Суть идеи: Приложение должно помогать достигать пользователю цель в конкретной ситуации (контексте), справляться с ситуацией: утолять голод, помогать приятно провести время, ускорять выполнение дел, перемещаться в пространстве и времени.

2. Начинайте со скетчей, а не с графического редактора

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

Суть идеи: Со скетчем у вас будет план. А еще скетч не сковывает вас в поиске решений.

3. Используйте живой контент, а не Lorem

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

Суть идеи: С живым текстом можно оценить пользу прототипа.

4. Наращивайте дизайн слоями

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

Суть идеи: С живым текстом можно оценить пользу прототипа, и получить нечто больше, чем WOW.

5. Применяйте дизайн-мышление

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

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

6. Изучайте паттерны и готовые библиотеки компонентов: лучше вспоминать, чем изучать заново

Есть много ресурсов, где собраны ux-паттерны и можно найти, как вашу задачу решали гиганты из Facebook, Spotify, Uber и Salesforce. Эти команды годами развивают свои продукты и ищут оптимальные решения для каждого сценария. Пользователи увереннее подойдут к решению задачи, когда увидят знакомые конструкции и знакомые механизмы.

Суть идеи: Готовые UI-киты сделанные на технологическом уровне значительно ускорят разработку.

7. Развивайте прототип через истории в формате POV (Point of View)

Изучайте обратную связь и формулируйте продуктовые истории с помощью техники POV (Point of View), так вы сможете нащупать концепцию с пространством для развития продукта.

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