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

Первое, что я сделал — я «погуглил» на предмет таких инструментов. Один из них мне уже был знаком: 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, который позже поручу использовать программисту.