Статьи

Три инструмента прототипирования: Invision, Marvel и Justinmind

Посмотрите на этот интересный рисунок. Здесь показано, как Уилбур Райт летит на планере, который он сконструировал со своим братом в 1902 году. Вставленное изображение показывает одно из неудачных испытаний планера. Это было опасно и рискованно.

Для братьев Райт «пилотируемый полет» всегда был заветной мечтой и критерием успеха. Только эскизы или только расчеты не могли решить всех задач проектирования. Им необходимо было собрать и разбить реальные прототипы, чтобы выяснить то, что они хотели.

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

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

Приложения

Итак, 3 приложения для прототипирования, которые мы будем рассматривать:

  • Justinmind
  • Marvel
  • Invision

Для каждого из этих трех инструментов мы будем рассматривать следующие блоки:

  • Процесс регистрации
  • Начало работы
  • Интерфейс
  • Инструменты
  • Характеристики

Justinmind

http://www.justinmind.com/

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

Justimind завлекает сразу — анимированное слайд-шоу, которое занимает большую часть экрана, дает вам представление об интерфейсе и о том, как он работает, и мне стало интересно, действительно ли это будет так легко. Единственный способ проверить — это создать аккаунт.

Регистрация

Вы нажимаете на черный прямоугольник с надписью «Get Started Free» и попадаете на страницу с простой формой регистрации. Вам сразу же сообщают, что кредитная карта вам не понадобится. Это сразу дало мне понять, что передо мной не пробная версия на 14-30 дней, как часто бывает. И не забудьте, что есть еще и pro-версия для тех, кому действительно нужны дополнительно оплачиваемые опции.

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

Некоторые люди останавливаются, если им предлагают установить программу, я же — наоборот. Установка программы гарантирует мне, что я смогу работать, не задумываясь о качестве интернет-связи.

Единственный минус, который я обнаружил при установке программы, это то, что вас не информируют о процессе установки или о том, с какими платформами она совместима, до того, как вы нажали кнопку «скачать и установить».

 

На заметку: После установки приложения вы получите возможность в течение 30 дней бесплатно пользоваться pro-версией.

Начало работы

Мне понадобилось около 2 минут, чтобы установить программу после скачивания. Как в большинстве программ такого рода вам для начала предлагают 3 варианта: создать новый проект, открыть существующий или узнать больше о программе. После нажатия на кнопку «new», позволяющую создать новый прототип, вам будет предложено одно из 10 доступных устройств, включая Google glasses. Сколько известных вам инструментов прототипирования предлагают такую опцию?

 

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

Интерфейс

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

Но не думайте, что Justinmind — это клон Adobe, так что освоить его за 5 минут у вас вряд ли получится. Если вам нужна небольшая помощь, то Justinmind может предложить вам тридцатисекундное знакомство с программой.

Инструменты

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

Основы

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

Web

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

Параллакс

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

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

Особенности

Безусловно, Justinmind предлагает много различных опций и инструментов. Но если перед вами trial-версия, то вам больше всего будет интересно узнать, в чем разница между free и pro версиями.

Выводы

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

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

Marvel

https://marvelapp.com/

Следующий в нашем списке — это Marvel. Большинство дизайнеров наверняка раньше уже слышали об этом приложении.

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

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

Регистрация

На домашней странице вам предлагают выбрать один из наиболее удобных для вас вариантов: — создать аккаунт — посмотреть демо-версию, чтобы понять, действительно ли вы захотите использовать Marvel Создание аккаунта занимает не более 10 секунд.

Начало работы

В отличие от Justinmind, после того, как вы зарегистрировались, вам не нужно ничего скачивать. Вместо этого перед вами оказывается рабочий стол Marvel. Здесь вам предлагают либо создать новый проект, либо посмотреть демо-ролик.

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

Интерфейс

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

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

Легко понять, как работать с Marvel. Загрузить изображение так же легко, как и просто нажать на кнопку. Вы можете загрузить разные типы файлов: JPG, PSD и GIF. Также вы можете добавить изображения через Dropbox или Sketch. В Marvel также есть приложения для тех, кто работает с Android или iOS.

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

На заметку:для того, чтобы использовать Sketch через Marvel, вам необходимо будет установить специальный плагин. А если вы захотите использовать программу на iOS или Android, то вам нужно будет пройти по специальным ссылкам в AppStore или GooglePlay. Только Dropbox открывается прямо из Marvel.

Инструменты

Как и любой другой редактор прототипов Marvel предлагает набор инструментов, необходимых вам для работы. Вы можете найти его на панели навигации в правом верхнем углу интерфейса.

Создать рабочую группу

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

Настройки

Во время работы над прототипом вы захотите пользоваться оптимальным набором настроек. Во вкладке «настройки» вы можете задать размер вашего прототипа. Всего вам предложено на выбор 17 различных устройств, которые вы можете настроить в зависимости от ваших желаний и потребностей. Также в Marvel есть некоторые параметры безопасности, которые вы можете настраивать. Хотя, было бы здорово, если бы данная опция появлялась в начале процесса создания проекта.

Загрузки

В Marvel вы можете загружать прототипы в разных форматах: PDF, ZIP, APK или IPA. Однако, к сожалению, чтобы это сделать, нужно будет обновиться до pro или enterprise версий.

Предварительный просмотр

Инструмент проигрывания «play», предлагаемый в Marvel, очень схож с опцией «стимуляции» в Justinmind. Если вы нажмете на «play », то вы можете «покрутить ваш прототип». Т.е. вы сможете посмотреть, как он будет выглядеть в реальности.

Поделиться

Вне зависимости от того, платная у вас версия или pro, вы можете поделиться результатами своей работы. Эта опция вам пригодится, если есть необходимость в обратной связи от партнеров или коллег. Для этого вы можете воспользоваться URL-ссылками, текстовыми сообщениями или вставкой на сайте.

Характеристики

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

Так же, как и в Justinmind, предлагаю вам посмотреть на отличия между бесплатной и pro-версиями:

Выводы

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

Invision

http://www.invisionapp.com/

Итак, последнее приложение, которое мы рассмотрим в этой статье, это Invision. Как и 2 предыдущие программы, Invision гордится тем, что делает прототипирование доступным для каждого желающего. И их слоган гласит «Делаем дизайн лучше. Быстрее. Вместе». Но скажу честно, попробовать эту программу меня больше заставил другой слоган — «лидер в области прототипирования и совместной работы». На первый взгляд, Invision выглядит, как очень профессиональная программа, ориентированная на бизнес. Это подтверждается приведенным списком известных компаний, использующих данную программу.

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

Регистрация

Чтобы начать работать с Invision вам необходимо нажать на розовую CTA-кнопку, призывающую начать работу. Вам сразу сообщают, что редактор прототипов всегда будет бесплатным.

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

Начало работы

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

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

На панели управления есть 3 готовых демо-проекта. Вы можете поработать с ними и понять, как пользоваться теми или иными инструментами. И мне понравилось, что можно начать работу не с чистого листа.

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

Интерфейс

В Invision очень понятный интерфейс. Это нечто среднее между сложным Justinmind и примитивным Marvel, так что для меня Invision — это «золотая середина». Вне зависимости от того, под какое устройство вы рисуете прототип, рабочий стол программы представляет собой простой макет, а все инструменты собраны в нижней части экрана. Это может немного раздражать тех, кто привык, что инструменты находятся в верхнем меню, но к этому точно легко привыкнуть.

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

Кроме вкладки Screen, есть еще Activity, Comments и Asset. Они особенно пригодятся, если вы работаете над прототипом совместно с кем-то или у вас есть необходимость поделиться с клиентом.

 

Инструменты

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

Предварительный просмотр

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

Режим построения

В режиме построения вы можете управлять интерактивными зонами внутри прототипа. Работая в этом режиме вы можете использовать метод нажатия и перетаскивания, и, таким образом, изменения шаблона можно применить на любом из ваших экранов.

Режим комментариев

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

Режим истории

Режим истории в редакторе, конечно, очень вам пригодится. Вы можете использовать его для просмотра предыдущих версий вашего проекта и прошлых комментариев.

Конфигурация

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

На заметку: Также присутствует кнопка LiveShare, которая позволяет презентовать проект в режиме реального времени, и кнопка «Поделиться» позволяет вам делиться через URL-адрес, электронную почту или SMS. Если вы хотите показать кому-то проект, скачав его, то вам потребуется приобрести платный аккаунт.

Характеристики

В Invision вы найдете много полезных функций, которые делают процесс создания прототипа более простым.

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

Выводы

Invision и правда представляет отличное видение того, как должно работать прототипирование. Для освоения может потребоваться немного времени, но редактор предлагает с легкостью обучиться основам, если у вас есть пара минут.

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