Обзорный материал о базовых принципах прототипирования цифровых продуктов. Использованы общедоступные материалы по теме, собранные с различных тематических ресурсов. Для демонстрации использованы прототипы студии funkypunky. Лекция проведена в рамках интенсива по продуктовому дизайну в Британской Высшей Школе Дизайна (Москва).

1. U X & U I . П Р О Д У К Т О В Ы Й Д И З А Й Н Д Е Н Ь
Дмитрий Осадчук
Игорь Силкин
БЫСТРОЕ
ПРОТОТИПИРОВАНИЕ
03

2. ЗАЧЕМ ПРОТОТИПИРОВАТЬ?

3. Вспомним этапы разработки проекта
Немного терминологии
В английском языке есть слова wireframe и prototype. В руссом языке – сетка, прототип и
живой прототип. Из-за трудностей с переводом, все время возникает путаница. Wireframe
переводится как сетка. Но то, что мы называем сеткой – это grid. А то, что по-английски
называется wireframe, мы называем прототипом. То, что у них prototype, мы называем
«живой прототип» (который можно покликать).

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

5. 15 причин в пользу прототипа
Увидеть приложение/сайт в действии и понять,
насколько корректно разработчики понимают идею и ТЗ;
оценить будущее приложение с точки зрения
пользователя;
Определить, нужно ли вносить изменения в схему
взаимодействия приложения с пользователем;
Избежать дополнительных финансовых и временных
затрат, если выявлены несоответствия;
Это позволит получить четкую картину того, какая
именно информация будет необходима на каждой
странице сайта до разработки его дизайна
Это позволит рационально тратить время и
сосредоточиваться именно на том, для чего
предназначена каждая страница.
Тщательное планирование имеет первостепенное
значение это позволит вам подстраховать себя, в случае
неосведомленных клиентов, которые склонны менять
свое мнение на стадии разработки проекта.
Если сайт должным образом планируется на этапе
каркасного моделирования, то функциональность
отдельных страниц не должна сильно измениться
это позволит установить точку восстановления.
Когда клиент подписывает каркасную модель, это
означает, что он соглашается с тем, что будет находиться
на этой странице
Это позволит удалить лишние элементы, которые могут
оказаться ненужными для будущегог сайта
Прототип довольно легко создать, позволяя плавно и
эффективно осуществлять процесс планирования
Это дает дизайнеру четкое представление о том, что
нужно сделать
Это позволяет интенсивно вовлечь клиента в процесс
планирования на раннем этапе разработки сайта и
позволяет активно согласовывать весь процесс
планирования между обеими сторонами

6. ИНСТРУМЕНТЫ
ПРОТОТИПИРОВАНИЯ

7. Бумажное прототипирование—это самый первый этап и часто используемый метод проектирования
сайта или мобильного приложения, к тому же самый доступный.
Основная цель на этом этапе—построить грамотную структуру для взаимодействия с посетителем.
Прототип это не финальный дизайн, не стоит в нем прорисовывать графические элементы,
вставлять иллюстрации или учитывать шрифт. За степенью детализации стоит следить, так как этим
легко увлечься. Оформлением прототипа должен заниматься дизайнер.
С помощью такого прототипа можно показать структуру будущего сайта или приложения и
получить мгновенную обратную связь от заказчика, нарисовали, обсудили, нарисовали еще раз,
если это необходимо.
После представления прототипа клиент знает чего ожидать в результате, а разработчик уверен в
целях и требованиях.
БУМАЖНОЕ
ПРОТОТИПИРОВАНИЕ

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

13. Бумажыне паттерны в помощь
https://www.smashingmagazine.com/2012/09/free-download-ux-sketching-wireframing-templates-mobile/

14. MadSkillzzz
http://youtu.be/GrV2SZuRPv0

15. ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ

16. https://popapp.in/
http://www.youtube.com/watch?v=GThS7Fxai1c
Приложение Prototyping on Paper
позволяет использовать для
прототипирования самые простые и
доступные инструменты—карандаш,
бумагу и айфон. Нарисуйте эскизы
от руки, сфотографируйте их—
сервис автоматически отрегулирует
яркость и размер, позволит сделать
симулятор вашего будущего
приложения. В POP можно создать
систему линков и с её помощью
проследить, как приложение будет
реагировать на нажатие той или
иной кнопки. Также POP позволяет
делиться созданным прототипом с
коллегами и друзьями, собирать
фидбэк.
Prototyping on Paper идеально
подходит для быстрого
прототипирования, не требующего
детальной проработки дизайна.
POP

17. http://balsamiq.com
Один из самых популярных инструментов
прототипирования. В комплекте —
десятки и сотни иконок и элементов
интерфейса. Есть шаблоны под
несколько основных смартфонов и
мобильных операционных систем.
Balsamiq доступен для всех
операционных систем, и его можно
интегрировать с различными системами
совместной работы, включая Jira,
Confluence и Google Drive. Также есть
онлайн-версия Balsamiq.
В Balsamiq есть большая библиотека
шаблонов, причем почти любой элемент
интерфейса можно настроить под
конкретный сценарий. Например,
добавив на форму выпадающее меню,
можно задать, какое из его полей должно
быть подсвечено как выбранное.
BALSAMIQ MOCKUPS

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

19. Balsamiq UX Template
http://konigi.com/tools/balsamiq-ux-template/

20. Public Balsamiq Projects
https://mockupstogo.mybalsamiq.com/projects

21. https://proto.io/
https://vimeo.com/38484992
https://spaces.proto.io/project/3C26C8C5-CD55-A2D1-D298-1E36EA61CA06/IFTTT/
Платформа доя прототипирования мобильных
приложений. Создание интерактивных
прототипов и симуляция основных
пользовательских действий с поддержкой
основных браузеров. Есть редактор, панель
создания прототипа и плеер для просмотра
интерактивного прототипа в работе. Все
работает по принципу drag-and-drop, нажатии на
кнопки и выборе значений из списков, иногда
бывает крайне сложно отыскать то, что нужно.
Готовый прототип можно тестировать на
реальном мобильном стройстве или в браузере.
Большое количество функций позволяет
запускать динамические прототипы на реальных
девайсах с поддержкой всех жестов и всех
форматов устройств.
PROTO
Пример прототипа

22. НА ЛЮБОЙ ВКУС И ЦВЕТ
DESIGNER’S TOOLKIT:
PROTOTYPING TOOLS
http://www.cooper.com/prototyping-tools
https://habrahabr.ru/post/70001/
https://habrahabr.ru/company/aiken/blog/129653/
https://vc.ru/p/sketch-prototype
Б Е ГЛ Ы Й О Б З О Р Д Р У Г И Х И Н С Т Р У М Е Н Т О В

23. https://www.invisionapp.com
InVision — это платформа для совместной разработки макетов интерфейсов,
основанная на философии Agile-разработки и разбиении всех задач на итерации и версии.
Сервис позволяет сделать переходы между экранами из нескольких картинок.
Нужно только загрузить макеты и расставить области, которые будут кликабельны.
https://vimeo.com/80845114

24. Прмиер рабочего прототипа на invision
https://projects.invisionapp.com/share/N649LVR5G

25. Готовый дизайн
по прототипам

26. https://wireframe.cc//
Wireframe.cc отличается от других инструментов
прототипирования чрезвычайно простым
интерфейсом без огромного количества
наворотов. Когда вы заходите на сайт сервиса
wireframe.cc, вы сразу же можете начать
рисовать, перетаскивая элементы мышью по
рабочей области. Чтобы сохранить макет
достаточно нажать кнопку «Save», после чего
сервис сгенерирует уникальный URL, которым
вы сможете поделиться с другими людьми или
добавить его в закладки.
WIREFRAME.CC
Как сделать первый шаг к созданию собственного приложения
http://www.lookatme.ru/mag/how-to/inspiration-howitworks/205429-prototype

27. Редактор для создания интерактивного
прототипа. Для того чтобы им пользоваться,
необходимо иметь готовые макеты. Впрочем,
загрузить в приложение можно не только
хорошо проработанные мокапы, но и совсем
сырые скетчи. Оно легко и удобно расставляет
линки между разными элементами и загружает
прототип прямо на рабочий стол вашего
устройства для более удобной демонстрации.
Стоимость подписки на месяц для
индивидуальных разработчиков—$10, для
команды—$25 с каждого участника. У
приложения имеются более дорогие и
навороченные аналоги, а также альтернативы
для десктопа: Prototype и Briefs (Mac only).
https://www.flinto.com/
FLINTO

28. РЕКОМЕНДАЦИИ К ПРОТОТИПАМ
Прототип интерфейсов — это не только один из этапов проектирования, но и самостоятельный
продукт, с которым далеко не всегда работает та же команда, что его создавала. Поэтому стоит
соблюдать требования к оформлению прототипов. Примеры тезисов от студии Nimax

29. Примеры плохих прототипов

30. Примеры прототипов от студии funkypunky

33. https://ru.pinterest.com/search/pins/?q=wireframes
Где искать прототипы

34. Готовые wireframe-kit для создания прототипов
Содержат набор готовых паттернов. Существуют почти для любых платформ и софта.

35. ЧТО ВКЛЮЧИТЬ В ПРОТОТИП?

36. Пользователи замечают мельчайшие детали модели и
неправдоподобные данные. В теории прототипы без
актуального наполнения не стоило бы допускать к
тестированию, однако на стадии прототипирования
реального контента обычно не бывает и приходится
использовать «рыбу». Главное, чтобы контент
соответствовал теме, не отвлекал участников от
задачи и не мог дать ошибочного представления о
проекте. Существует несколько видов
нежелательных данных.
Каждый раз при появлении текста «Lorem Ipsum»,
кто-нибудь из участников спрашивает «Почему здесь
всё на испанском?». Кроме того, что текст приводит в
недоумение и может спровоцировать ошибки, он
лишён какого-либо контекста и не даёт ни
малейшего представления о финальном наполнении.
Иногда для понимания назначения страницы
контекст просто необходим. Старайтесь всегда
использовать актуальное наполнение или найти
подходящую рыбу.
1 Используйте наполнение, связанное с реальным проектом

37. Не используйте в прототипах имена известных людей
или персонажей. Уверен, вы бы не хотели, чтобы в
разгар сессии участники забыли о поставленных
задачах и погрузились в мысли о Джонни Деппе или
о том, как ужасны последние «Пираты Карибского
моря». Лучше использовать правдоподобные, но
стандартные имена — здесь поможет генератор
случайных имён, каких много в интернете.
2 Избегайте вымышленных имён

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

39. Обязательно использовать встроенный редактор
стилей — все стили текста в прототипе задаются
только через него. Чем стилей меньше, тем лучше,
отталкиваемся от семантики текстов и стандартных
HTML-тегов: h1, h2 и т.д.
4 Обязательно использовать встроенный редактор стилей

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

41. Необходимость залинковки прототипа обсуждаем с
менеджером проекта. Если прототип залинкован
частично, то отмечаем элементы, на которые можно
нажать, треугольником. Не забываем подчеркивать
псевдоссылки пунктирной линией.
6 Необходимость залинковки прототипа

42. В основе прототипа должны быть сетки. Удобнее
всего использовать классические сетки 12/16
колонок, но лучше всего согласовывать это с
арт-директором, который будет курировать дизайн.
Все объекты прототипа располагаются по сетке,
далее дизайнеры сохраняют такое размещение.
7 В основе прототипа должны быть сетки

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

44. Спасибо за внимание
и понимание.