SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
Интерактивные Прототипы
или «Игра в Имитацию»
Артем Толстых
«Во всем виноваты корпорации!»
Американцы.
Интерактивные Прототипы  или «Игра в Имитацию»
Дизайнер-оформитель
(Graphic Designer, Visual Designer)
Скевоморфизм
Физический орнамент или элемент
дизайна, который скопирован с формы
другого объекта, но изготовлен из
других материалов или иными
методами.
«Эра Единорогов»
Интерактивные Прототипы  или «Игра в Имитацию»
Product Designer
«Мастер на все руки»
Flat Design
Material Design
Minimal 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/

Weitere ähnliche Inhalte

Was ist angesagt?

Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВИспользование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВSQALab
 
ТИЦ - инжиниринговые услуги
ТИЦ - инжиниринговые услугиТИЦ - инжиниринговые услуги
ТИЦ - инжиниринговые услугиVladislav Troshin
 
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...CUSTIS
 
Custis analyst's guide to gui т. васильева
Custis analyst's guide to gui т. васильеваCustis analyst's guide to gui т. васильева
Custis analyst's guide to gui т. васильеваSQALab
 
UX-команда и идеальные продукты
UX-команда и идеальные продуктыUX-команда и идеальные продукты
UX-команда и идеальные продуктыYaroslav Perevalov
 
Design Course 3 process
Design Course 3 processDesign Course 3 process
Design Course 3 processKostya Gorskiy
 
опыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutопыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutИлья Котельников
 
Роль аналитика в гибких методологиях разработки
Роль аналитика в гибких методологиях разработкиРоль аналитика в гибких методологиях разработки
Роль аналитика в гибких методологиях разработкиDevDay
 
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"DA-14
 
Аналитики и UX
Аналитики и UXАналитики и UX
Аналитики и UXJulia Shamrey
 
Аналитик в Agile (статья)
Аналитик в Agile (статья)Аналитик в Agile (статья)
Аналитик в Agile (статья)Andrey Bibichev
 
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...IT Club Mykolayiv
 

Was ist angesagt? (14)

Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВИспользование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
Использование html-прототипов для реверсивного анализа требований: ЗА и ПРОТИВ
 
ТИЦ - инжиниринговые услуги
ТИЦ - инжиниринговые услугиТИЦ - инжиниринговые услуги
ТИЦ - инжиниринговые услуги
 
Роли в IT
Роли в ITРоли в IT
Роли в IT
 
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...
Analyst’s Guide to GUI: Проектирование интерфейсов как элемент системного ана...
 
Custis analyst's guide to gui т. васильева
Custis analyst's guide to gui т. васильеваCustis analyst's guide to gui т. васильева
Custis analyst's guide to gui т. васильева
 
UX-команда и идеальные продукты
UX-команда и идеальные продуктыUX-команда и идеальные продукты
UX-команда и идеальные продукты
 
WUD2010
WUD2010WUD2010
WUD2010
 
Design Course 3 process
Design Course 3 processDesign Course 3 process
Design Course 3 process
 
опыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nutопыт проектирования интерфейса Smart nut
опыт проектирования интерфейса Smart nut
 
Роль аналитика в гибких методологиях разработки
Роль аналитика в гибких методологиях разработкиРоль аналитика в гибких методологиях разработки
Роль аналитика в гибких методологиях разработки
 
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"
Techtalk#7: Architecture principles by Steve McConnell's book "Code Complete"
 
Аналитики и UX
Аналитики и UXАналитики и UX
Аналитики и UX
 
Аналитик в Agile (статья)
Аналитик в Agile (статья)Аналитик в Agile (статья)
Аналитик в Agile (статья)
 
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...
Юзабилити или в погоне за призрачным счастьем наших пользователей (Юрий Нездо...
 

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

«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...Andrew Shapiro
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...Nikita Filippov
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системMedia Gorod
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...Yury Vetrov
 
как создавать прототипы
как создавать прототипыкак создавать прототипы
как создавать прототипыAlexey Korotkov
 
Развитие интерфейса через гайдлайны
Развитие интерфейса через гайдлайныРазвитие интерфейса через гайдлайны
Развитие интерфейса через гайдлайныtfmailru
 
Разработка прототипов на Axure
Разработка прототипов на AxureРазработка прототипов на Axure
Разработка прототипов на AxureSoftline
 
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...Yury Vetrov
 
5 alina petrenko - key requirements elicitation during the first contact wi...
5   alina petrenko - key requirements elicitation during the first contact wi...5   alina petrenko - key requirements elicitation during the first contact wi...
5 alina petrenko - key requirements elicitation during the first contact wi...Ievgenii Katsan
 
Таня Мисютина Лекция «Об интерфейсе»
Таня Мисютина Лекция «Об интерфейсе»Таня Мисютина Лекция «Об интерфейсе»
Таня Мисютина Лекция «Об интерфейсе»e-Legion
 
Проектирование интернет-проектов
Проектирование интернет-проектовПроектирование интернет-проектов
Проектирование интернет-проектовAlex Shishkin
 
методология Rad (46)
методология Rad (46)методология Rad (46)
методология Rad (46)romachka_pole
 
Иван Васильев
Иван ВасильевИван Васильев
Иван ВасильевCodeFest
 
Методики управления развитием ис на базе 1с
Методики управления развитием ис на базе 1сМетодики управления развитием ис на базе 1с
Методики управления развитием ис на базе 1сHelen Kopteva
 
Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Yana Brodetski
 
положение об отделе ю
положение об отделе юположение об отделе ю
положение об отделе юNika Stuard
 
Изменения в инфраструктуре инструментов для программистов
Изменения в инфраструктуре инструментов для программистовИзменения в инфраструктуре инструментов для программистов
Изменения в инфраструктуре инструментов для программистовTatyanazaxarova
 
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)SPECIA
 

Ähnlich wie Интерактивные Прототипы или «Игра в Имитацию» (20)

«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agil...
 
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
«Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-коман...
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web систем
 
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...
 
как создавать прототипы
как создавать прототипыкак создавать прототипы
как создавать прототипы
 
Развитие интерфейса через гайдлайны
Развитие интерфейса через гайдлайныРазвитие интерфейса через гайдлайны
Развитие интерфейса через гайдлайны
 
Разработка прототипов на Axure
Разработка прототипов на AxureРазработка прототипов на Axure
Разработка прототипов на Axure
 
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
РИТ-2008: Взаимодействие отдела проектирования интерфейсов и разработчиков в ...
 
5 alina petrenko - key requirements elicitation during the first contact wi...
5   alina petrenko - key requirements elicitation during the first contact wi...5   alina petrenko - key requirements elicitation during the first contact wi...
5 alina petrenko - key requirements elicitation during the first contact wi...
 
Таня Мисютина Лекция «Об интерфейсе»
Таня Мисютина Лекция «Об интерфейсе»Таня Мисютина Лекция «Об интерфейсе»
Таня Мисютина Лекция «Об интерфейсе»
 
пр 2 ПО.docx
пр 2 ПО.docxпр 2 ПО.docx
пр 2 ПО.docx
 
Проектирование интернет-проектов
Проектирование интернет-проектовПроектирование интернет-проектов
Проектирование интернет-проектов
 
Agile testing
Agile testingAgile testing
Agile testing
 
методология Rad (46)
методология Rad (46)методология Rad (46)
методология Rad (46)
 
Иван Васильев
Иван ВасильевИван Васильев
Иван Васильев
 
Методики управления развитием ис на базе 1с
Методики управления развитием ис на базе 1сМетодики управления развитием ис на базе 1с
Методики управления развитием ис на базе 1с
 
Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60. Модуль 15. Лекция 59-60.
Модуль 15. Лекция 59-60.
 
положение об отделе ю
положение об отделе юположение об отделе ю
положение об отделе ю
 
Изменения в инфраструктуре инструментов для программистов
Изменения в инфраструктуре инструментов для программистовИзменения в инфраструктуре инструментов для программистов
Изменения в инфраструктуре инструментов для программистов
 
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)
“Спецификация формы и поведения”. Саша Куценко, Aidem. (29.01.2014)
 

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