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

1. Интерактивные Прототипы
или «Игра в Имитацию»
Артем Толстых

2. «Во всем виноваты корпорации!»
Американцы.

4. Дизайнер-оформитель
(Graphic Designer, Visual Designer)

5. Скевоморфизм
Физический орнамент или элемент
дизайна, который скопирован с формы
другого объекта, но изготовлен из
других материалов или иными
методами.

6. «Эра Единорогов»

8. Product Designer
«Мастер на все руки»

9. Flat Design
Material Design
Minimal Design

10. Дизайн — проектирование
Проектирование (дизайн) интерфейсов — один из ключевых процессов при
разработке продукта. В свою очередь важной частью процесса дизайна интерфейсов
является прототипирование.

11. Что же такое прототип?
Прототип — это модель пользовательского интерфейса.

12. 1. Статические
2. Интерактивные
3. Функциональные
Классификация

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

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

15. Функциональные
Уже разработанная и полноценно
работающая система, в которую еще не
интегрирован дизайн.

16. 1. Концептуальные
2. Низкоуровневые
3. Среднеуровневые
4. Высокоуровневые
По уровню
детализации

17. Концептуальные
прототипы

18. Низкоуровневые
(low-fi)

19. Среднеуровневые
(medium-fi)

20. Высокоуровневые
(high-fi)

21. С какой целью создаются
прототипы?
Тестирование и оценка проекта в действии до начала разработки.

22. Для кого создаются прототипы?
(Аудитория)

23. Заказчик
● Стартап
● Подразделение внутри компании
● Другие варианты
Прототип дает
уверенность в том, что:
1. Продукт можно будет показать
инвесторам или высшему
руководству задолго до того, как
начнется его разработка;
2. Основные предположения о
системе и ее функциональности
верны;
3. Продавать продукт или
заключать партнерские
договоренности можно начать
заранее.

24. Пользователи
● Внешние
● Внутренние
С помощью прототипа
можно узнать, что:
1. Продукт понятен пользователям
и удобен в работе;
2. Все необходимые функции
реализованы и работают
эффективно;
3. Систему можно обеспечить
необходимым контентом, а ее
функции — поддержкой;

25. Команда
разработки
Инструкции и примеры
того:
1. Как выглядит и работает
система в целом;
2. Каковы особенности работы
отдельных функций;
3. Насколько возможно
реализовать те или иные
функции.

26. Подходы
● Монохромный прототип
● Цветной прототип

27. 1. Ключевая функциональность;
2. Сценарии работы пользователя
с системой.
Состав
прототипа

28. 1. Продумайте название файлов,
артбордов, групп и слоев;
2. Тщательно продумайте карту
линкования;
3. Используйте актуальный
контент.
Процесс
создания

29. Инструментарий

30. 1. Статический, интеракивный
и/или функциональный?
2. Low-fi, medium-fi, и/или high-fi?
3. Удаленный доступ, инструменты
для коллаборации?
4. Просмотр на мобильном
устройстве?
5. Синхронизация с Google Drive,
Dropbox и др. сервисами?
6. Расширенные сценарии?
7. Анимация?
8. И многое другое...
Как выбрать
инструмент для
прототипирования?

31. 1. MindNode App;
2. Paper and pencil;
3. Sketch App and Craft;
4. Invision App;
5. Principle App;
6. Framer JS;
Мой выбор

33. https://dribbble.com/arttolstykh
https://www.behance.net/arttolstykh
https://lookamore.com/