Что такое прототипирование

Прототипирование

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

Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам

Содержание

1. Что такое прототипирование простыми словами
2. Зачем нужно прототипирование
3. Прототип и вайрфрейм: в чем отличия
4. Виды прототипирования
5. Этапы прототипирования
6. Программы и сервисы для прототипирования

Что такое прототипирование простыми словами

10 вопросов — и вуаля: вы знаете, в какой дизайн-профессии вам стоит получить опыт

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

Прототипирование — это то же самое, но только в области дизайна различных IT-продуктов. К примеру, перед тем как мобильное приложение для покупки авиабилетов станет доступно на Google Play и App Store, оно обязательно пройдет стадию прототипирования.

10 вопросов — и вуаля: вы знаете, в какой дизайн-профессии вам стоит получить опыт

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

Зачем нужно прототипирование

1. Визуализация и проверка идеи

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

Прототипы — неотъемлемая часть Agile, гибкой методологии разработки в IT, при которой каждая итерация завершается подготовкой прототипа целого сервиса или какого-то его блока. Здесь прототипы помогают собирать обратную связь от пользователей, чтобы продукт был максимально функциональным для целевой аудитории, а не только нравился команде и заказчику. Например, прототип сайта помогает проверить пользовательский путь и найти проблемные места на нем, которые впоследствии могут приводить к отказу от использования сайта и снижению конверсии.

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

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

Прототип и вайрфрейм: в чем отличия

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

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

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

Виды прототипирования

По глубине проработки различают прототипы с низкой, средней и высокой детализацией.

Прототипы низкой детализации

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

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

Плюсы

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

Минусы

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

Прототипы средней детализации

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

Плюсы

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

Минусы

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

Как сделать прототип сайта

Прототипы высокой детализации

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

Плюсы

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

Минусы

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

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

профессия | 16 месяцев

UX/UI-дизайнер
с нуля до про

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

Статичные прототипы

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

Плюсы

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

Минусы

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

Интерактивные прототипы

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

Плюсы

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

Минусы

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

Как сделать прототип мобильного приложения

Этапы прототипирования

Этап 1. Определение требований и задач

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

Этап 2. Вайрфрейминг — создание схематичной модели

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

Этап 3. Доработка прототипа

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

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

Программы и сервисы для прототипирования

Вот несколько популярных сервисов, которыми пользуются новички и профессионалы в области юзабилити и дизайна по всему миру. Wireframe.cc — это один из самых простых инструментов, лучше всего подходящий для создания прототипов низкой и средней детализации. Сервис имеет минималистичный интерфейс в формате «белой доски» и предлагает ограниченную палитру цветов и опций, чтобы избежать потери времени на ненужные детали и украшения.

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

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

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

Sketch — одно из лучших современных приложений для разработки интерфейсов. Оно напоминает Figma, однако содержит много уникальных функций и работает только на iOS. В Sketch множество готовых шаблонов и плагинов, которые расширяют возможности дизайнера и ускоряют его работу.Webflow — это сервис для разработки сайтов без кода. Он помогает создавать детализированные и интерактивные прототипы, которые затем легко превратить в готовый работающий продукт за счет того, что за каждым блоком уже стоит код HTML, CSS и JavaScript.

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

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

профессия UX/UI-дизайнер с нуля до про

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

Прототипирование

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

Для чего нужно это знать?

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

Какие базовые понятия включает этот навык?

Сторифрейм представляет из себя скрипт, где упор делается на структуру и иерархию, а не на лейаут и чистоту текста. Они экономят массу времени. Можно принимать важные решения по стратегии, процессам и повествованию — и при этом не придется часами копаться в визуальных редакторах. Скетч — грубый, низкодетализированный прототип. Это просто серые блоки с названиями, не разбитые пока что на элементы. Просто структура, скелет сайта из блоков. Наброски гораздо эффективнее. Они не дадут увязнуть в технологиях и помогут сфокусироваться на наилучшем возможном решении, освобождая от риска. Wireframe или высокодетализированный прототип. От скетча мы двигаемся дальше, к Lo-fi прототипу или Wireframe. Перед тем как приступить непосредственно к созданию прототипа, проделываем предварительные шаги: ставим цели, формируем гипотезы, проводим исследования. На основе полученных данных формируем список необходимого функционала и выстраиваем сценарии поведения. И только на данном этапе прототип начинает обрастать подробностями и контентом.

Где я могу освоить этот навык?

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

Что такое прототипирование

Что такое прототип. Какие они бывают. Как рисовать прототипы и делать это хорошо. Роль прототипа в общении с заказчиком

Что такое прототип

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

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

Хорошо составленный прототип является полноценным каркасом сайта, на который потом легко «надевается» дизайн.

ИНСТРУМЕНТЫ ДЛЯ ПРОТОТИПИРОВАНИЯ

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

Бумага и маркер

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

Цена: уже есть на вашем рабочем столе

PowerPoint / Keynote

Легко и просто создать цифровой прототип с помощью Microsoft Office PowerPoint или Keynote. Если вы не дизайнер, рекомендуем начать с программы, которую вы уже освоили и имеете на своем рабочем столе, не усложняя свою жизнь видеоуроками для работы с Photoshop или другими профессиональными программами.

Цена: по умолчанию в вашем компьютере

Шаблон с эскизами смартфона

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

Цена: бесплатно
Скачать шаблоны: https://sneakpeekit.com/

POP-app от Marvel

Очень популярное приложение Marvel POP (Prototype On Paper) устраняет разрыв между бумагой и цифровым прототипом, помогая вам создавать экранные ссылки между несколькими бумажными эскизами прототипов. Это легкое и простое приложение с чрезвычайно коротким периодом обучения. Просто сделайте несколько снимков своих эскизов, загрузите их в POP, и вы получите интерактивный прототип, готовый к использованию.

Proto.io

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

Цена: Бесплатная версия — 15 дней, далее от $ 24,00/ месяц
https://proto.io/

Invision

Представьте, что визуально ваш прототип уже выглядит хорошо, но что насчет презентации его клиенту? Обратите внимание на сервис Invision. Простой и удобный пользовательский интерфейс делает его идеальным инструментом для начала работы. Интуитивно понятная программа дает вам возможность загружать скрины и связывать их друг с другом. Похоже на POP-app? Да, это так. Но Invision может предложить гораздо больше: к примеру, создание общих прототипов, где вы и ваши коллеги могли бы работать вместе, чтобы делиться комментариями и предложениями, полная синхронизация с другими программами и многое другое. Помимо своих функциональных возможностей Invision предлагает отличный блог, в котором вы найдете советы и рекомендации для создания вашего прототипа.

Цена: Freemium (бесплатная версия с платными дополнениями)
https://www.invisionapp.com/

Craft

При использовании Invision, плагин Craft является обязательным. Также легко синхронизируйте его с Sketch и Photoshop, создавая стили и расширяя возможности программ.

Sketch

Sketch создан исключительно для того, чтобы превратить ваши наброски в изящный дизайн. Программа предлагает один из наиболее простых пользовательских интерфейсов на рынке, от Photoshop его отличает именно юзабилити. В Sketch также есть множество шаблонов, которые ускоряют создание прототипов. Наличие огромной библиотеки ресурсов для использования в ваших проектах — лишь одно из множества преимуществ использования Sketch. Он не только чрезвычайно функционален, но и обладает сообществом единомышленников, которые делятся своими разработками, помогая друг другу ускорить процесс проектирования. На www.sketchappsources.com размещены все доступные ресурсы. Единственный недостаток Sketch в том, что он доступен только на компьютерах Apple.

Photoshop

Как одна из самых универсальных программ на рынке, Photoshop — отличный инструмент для превращения ваших чертежей в красивый дизайн. Функционал Photoshop бесконечен. Он не предназначен для прототипирования, но он отлично справляется с этой задачей. Если вы уже знакомы с Photoshop, то определенно стоит выбрать его. Совет: сделайте ваши статичные дизайны еще более привлекательными, используя макеты устройств. Это придаст прототипу чуть больше изящества. Просто наберите в google “Исходники для Photoshop (тема)».

Honeycode от Amazon

Honeycode позволяет разрабатывать приложения пользователям с полным отсутствием знаний в области программирования. При работе с Honeycode пользователи могут взаимодействовать со специальным графическим интерфейсом и набором шаблонов для создания тех или иных программ. Список состоит из 11 шаблонов и включает, в том числе, менеджер мероприятий (Event Management), контроль бюджета (Budget Approval), менеджер оборудования (Inventory Manager), инструмент управления контентом (CMS, Content Tracker), и др. Honeycode использует базы Amazon Web Services, что дает пользователям возможность настраивать сортировку, фильтрацию и привязывание данных.

Mockplus

Mockplus – простой инструмент для создания прототипов для пользователей любого уровня подготовки. Благодаря интуитивно понятному интерфейсу вам не придется тратить время на изучение его функций, что позволит создать прототип даже в сжатые сроки. Программа имеет необходимый набор UI-виджетов и иконок. Существует возможность предварительного просмотра прототипа путем экспорта HTML/изображения, либо его тестированием на существующем устройстве с помощью QR-кода.

Axure RP

Axure RP Pro – это программное обеспечение, с помощью которого можно создать прототип, макет, веб-сайт и даже приложение. На сайте программы заявлено, что все это можно сделать без кода. Программа позволяет вставлять виджеты, а также изменять их размер и формат. Для освоения Axure RP Pro потребуется время, но не для опытных разработчиков. В результате с Axure RP Pro вы будете способны проектировать сложные интерактивные прототипы.

Цена: пробная бесплатная версия, далее от $ 29 / месяц
https://www.axure.com/

UXPin

UXPin – это сервис с набором мощных функций для создания прототипа. Инструмент базируется на «облаке» и подходит для ОС Windows и Mac. Сервис предлагает огромную библиотеку компонентов, в том числе интерактивные текстовые поля, флажки и переключатели. UXPin идеален для командной работы над прототипом, значительно сократит ваше время и финансовые затраты на проектирование и разработку приложений.

Figma

Данный сервис многие считают главным конкурентом Photoshop. Программный продукт позволяет команде совместно работать над проектом в режиме онлайн. С Figma можно создавать как простые, так и сложные прототипы. У Figma более 1 млн пользователей со всего мира, прошедших регистрацию, таким образом, сервис можно считать серьезным конкурентом традиционных программ прототипирования.

Цена: базовый план — бесплатно, pro — от $12/ мес
Скачать: figma.com

Vectr

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

FLUID UI

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

Цена: имеется бесплатная версия, улучшенный план от $8.25/мес

https://www.fluidui.com

Aymilogic

Aymilogic — мощный и удобный конструктор для создания чатботов с искусственным интеллектом. Созданных с помощью Aimylogic ботов можно встраивать в мессенджеры, социальные сети, сайты и голосовых и текстовых помощников, таких как «Алиса» и «Google Ассистент». Процесс конструирования происходит в визуальном редакторе. В редакторе можно добавить кнопки, с помощью которых пользователь будет направлять диалог.

Цена: 14 дней бесплатно, далее от 990 руб/мес
https://aimylogic.com/

Origami Studio

Origami Studio — бұл Facebook-тен қолданушы үшін мүлдем тегін қосымша. MacOS-пен жұмыс істейді. Sketch’пен синхрондалады. Origami Studio көмегімен сурет құралдары, мәтіндік редакторлау және көрнекі компоненттер көмегімен макет прототиптерін жасауға болады.

Principle

Principle — это десктопная программа для Mac OS, которая позволяет создавать интерактивные прототипы мобильных приложений. Сервис позволяет создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип.

OmniGraffle

OmniGraffle – это приложение для создания диаграмм и цифровых изображений, которое работает с Mac, iPhone, iPad и iPod touch. Доступна десктопная версия, а также онлайн. В состав входит несколько инструментов для разработчиков. OmniGraffle позволяет перетаскивать объекты мышью, а также снабжена функцией вставки примечаний и создания спецификаций прототипов и моделей. Данное приложение является идеальным инструментом для работы на iPhone и iPad.

Adobe XD

Adobe Experience Design — программа для разработки интерфейсов от Adobe Systems. Поддерживает векторную графику и веб-верстку, идеален для создания прототипов сайтов и приложений. Вайрфрэймы, анимации, создание сюжетных досок, карт сайтов и блок-схем, возможность совместной работы с командой, тестирование прототипов прямо на мобильных устройствах — все это возможности Adobe XD.