Интерактивные Прототипы или «Игра в Имитацию»

Артем Толстых

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

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

СкевоморфизмФизический орнамент или элемент

дизайна, который скопирован с формы другого объекта, но изготовлен из

других материалов или иными методами.

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

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

Flat DesignMaterial DesignMinimal Design

Дизайн — проектированиеПроектирование (дизайн) интерфейсов — один из ключевых процессов при

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

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

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

Классификация

СтатическиеСтатические прототипы дают первое наглядное представление о будущей

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

прототипов.

ИнтерактивныеДействующая модель

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

до того, как начата разработка.

Функциональные

Уже разработанная и полноценно работающая система, в которую еще не

интегрирован дизайн.

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

По уровню детализации

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

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

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

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

С какой целью создаются прототипы?

Тестирование и оценка проекта в действии до начала разработки.

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

Заказчик

● Стартап● Подразделение внутри компании● Другие варианты

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

1. Продукт можно будет показать инвесторам или высшему руководству задолго до того, как начнется его разработка;

2. Основные предположения о системе и ее функциональности верны;

3. Продавать продукт или заключать партнерские договоренности можно начать заранее.

Пользователи

● Внешние● Внутренние

С помощью прототипа можно узнать, что:

1. Продукт понятен пользователям и удобен в работе;

2. Все необходимые функции реализованы и работают эффективно;

3. Систему можно обеспечить необходимым контентом, а ее функции — поддержкой;

Команда разработки

Инструкции и примеры того:

1. Как выглядит и работает система в целом;

2. Каковы особенности работы отдельных функций;

3. Насколько возможно реализовать те или иные функции.

Подходы

● Монохромный прототип● Цветной прототип

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

с системой.

Состав прототипа

1. Продумайте название файлов, артбордов, групп и слоев;

2. Тщательно продумайте карту линкования;

3. Используйте актуальный контент.

Процесс создания

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

1. Статический, интеракивный и/или функциональный?

2. Low-fi, medium-fi, и/или high-fi?3. Удаленный доступ, инструменты

для коллаборации?4. Просмотр на мобильном

устройстве?5. Синхронизация с Google Drive,

Dropbox и др. сервисами?6. Расширенные сценарии?7. Анимация?8. И многое другое...

Как выбрать инструмент для

прототипирования?

1. MindNode App;2. Paper and pencil;3. Sketch App and Craft;4. Invision App;5. Principle App;6. Framer JS;

Мой выбор

https://dribbble.com/arttolstykh

https://www.behance.net/arttolstykh

https://lookamore.com/