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

Поиск инструмента

Быстро нашел две хорошие статьи с перечнем необходимого софта:

• Инструменты прототипирования и создания wireframes
• Инструменты быстрого прототипирования

Попробовав бесплатные сервисы Cacoo, iPlotz, MockFlow, Mockup Builder, Pencil получил первое представление о функционале. Надо добавить, что бесплатные они с ограничением в один проект (исключение Mockup Builder), что конечно не очень удобно для хоть какой-то работы. Функционал примерно схож (рассматривал именно функционал прототипирования, без flowchart диаграмм и т.д.). Остановился на Mockup Builder и сделал на нем проект.
И когда проект был готов я случайно полез на хабр наткнулся на Wireframesketcher и вот тут я понял — это именно то, что я искал.

• мультиплатформенный софт (собран на базе eclipse), есть как standalone версии так и в формате плагина для eclipse
• очень шустрый (особенно заметно в сравнении с конкурентами на air, silverlight)
• в комплекте есть палитра компонентов, разбитых на группы (лаконично и понятно)

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

Интерфейс

Может показаться немного не привычен тем, кто еще не знаком с eclipse, но это быстро пройдет.



Все очень просто и понятно.
У каждого элементы можно редактировать сам текст элемента и его свойста
Редактирование текста с поддержкой форматирования очень гибкий инструмент, например такой текст компонента tree:

wireframing-tutorial
-assets
--icons
---7-location-map.svg
---9-av-shuffle.svg
--logo.png
--logo.screen
--Star.svg


мы увидим в таком виде:


Свойства элементов редактируются в окне:



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

Tutorial story

Выглядит так:

фактически это карта проекта, которую можно (только ее и можно, иначе будет только отдельные страницы) экспортировать в html с переходами между страницами.

Killer features

У Wireframesketcher есть несколько очень удобных фич, которые максимально минимизируют процесс прототипирования.

• создание собственных компонентов за один клик (в последней версии 3.8.2)
• Screenflow

Компоненты

Компонент создается из группы элементов

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

Screenflow

Это карта ссылок, наглядно показывает варианты возможных переходов между страницами.

Экспорт

Тут все просто:

• Html
• Pdf
• Png

P.S.

В заключении хотел сказать, что несмотря на то, что я сравнивал коммерческую программу с бесплатными аналогами, функционал последних не расширяется даже после оплаты аккаунта.
Мне также приходилось работать и с таким комбайном как Axure (стоит 600$), у него конечно, есть свои плюшки, но основной функционал и сам процесс мне больше понравился у Wireframesketcher.

---

UPD

добавлю ссылки из комментариев:
ptizza

Flairbuilder. Выбран после анализа порядка 12 веб и десктопных аналогов...

Dyz

Пользую www.easel.io
Больше не вижу смысла в «эскизных» прототипах, если можно сразу фигачить html+css с такой же скоростью.