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