Выбор инструмента прототипирования веб-приложения

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

Первое, что я сделал — я «погуглил» на предмет таких инструментов. Один из них мне уже был знаком: Cacoo. Вот только впечатление он оставил дискомфорта.

Итого «нагуглил»:
  • moqups.com
  • balsamiq.com
  • uxpin.com
  • easel.io
  • gomockingbird.com
  • pidoco.com
  • designmodo.com
  • justinmind.com
  • axure.com
  • invisionapp.com
  • kendoui.com

Определил основные для меня параметры:
стоимость (подписки), количество бесплатного в демо-версии, возможность связи страниц для создания кликабельного прототипа.

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

Кстати, могу заметить, что не все продукты могли доходчиво объяснить, какие конкретно функции и в каком виде я все-таки буду получать. Описания наполнены панибратскими фразочками типа «annotations that don't suck)», однако внятного представления не дается. Чувствуется, в основном, эта дерзость стартаперства на сайтах с датой запуска «2013».
Наиболее полным и ясным списком фич обладал pidoco. Однако, изначально к себе он не расположил. (Наверное, из-за своего ругательного звучания для русского уха.)

Далее из списка выбыли:

  • designmodo.com, который достаточно функционален, но оказался больше заточен под дизайн. В нем нужно использовать созданные ранее в Фотошоп'е элементы;
  • justinmind.com, который всем хорош, но был дорогим и требовал установки приложения на Windows или Mac. А у меня и Убунту, и различные рабочие места;
  • invisionapp.com, так как не имел своего редактора с инструментами, позволял лишь связывать готовые макеты страниц через назначение hotspots (интерактивных областей);
  • axure.com — достойный инструмент, но стоит 280 американских долларов, что не стартаперская категория;
  • moqups.com — хороший интерфейс, достаточно простой. Но больше ничего. Стоимость не высокая;
  • balsamiq.com — есть и экспорт в HTML|css, и функции тестирования и прочего. Но все через коммьюнити, т.е. нет гарантий. Мне так не уютно — идем дальше;
  • gomockingbird.com — не совсем приятный интерфейс и отсутствуют дополнительные функции (может быть, я не заметил). Но отличное достоинство — древовидная иерархия страниц (сайтмап такой выступает отличным ориентиром).

Вот что получилось в итоге:


В фаворитах остались pidoco, uxpin и easel.io.

Так как для меня экспорт под HTML5+CSS фреймворк наиболее важен, то я остановил свой выбор на Easel. Для тех, у кого определяющим фактором это не является, рекомендую достойные варианты:
  • pidoco c полным набром функциональностей (тесты c записью трейса мыши(!), UML диаграммы, сценарии(правда, я не очень понял как их реализовывать)).
  • UXpin — с наглядным sitemap и продуманной средой от создателей-дизайнеров интерфейсов.


Скажу честно, что листая и читая сайты этих сервисов, я уже понадеялся получить инструмент, позволяющий сделать прототип из набора элементов годного графического качества и сразу их экспортировать в нарезку HTML и CSS, причем в стандарте 5. (Чтобы сэкономить на затратах на дизайн и верстку). В итоге нашел такое решение: выберу палитру на colorlovers, выполню макеты на ее основе, экспортирую под Bootstrap, который позже поручу использовать программисту.
Tags:
прототипирование сайтов, мокапы

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.