Как-то раз у меня возникла задача нарисовать для дизайнера небольшой, по возможности интерактивный прототип сайта. Естественно первым делом полез искать достойный инструмент на любимый хабрахабр.
Быстро нашел две хорошие статьи с перечнем необходимого софта:
Попробовав бесплатные сервисы Cacoo, iPlotz, MockFlow, Mockup Builder, Pencil получил первое представление о функционале. Надо добавить, что бесплатные они с ограничением в один проект (исключение Mockup Builder), что конечно не очень удобно для хоть какой-то работы. Функционал примерно схож (рассматривал именно функционал прототипирования, без flowchart диаграмм и т.д.). Остановился на Mockup Builder и сделал на нем проект.
И когда проект был готов я случайнополез на хабр наткнулся на Wireframesketcher и вот тут я понял — это именно то, что я искал.
Казалось бы ничего особенного, но вот работа с самими прототипами это козырь этой программы, все очень логично, функционально и удобно, в сравнении со всеми перечисленными мной аналогами.
Может показаться немного не привычен тем, кто еще не знаком с eclipse, но это быстро пройдет.
![](https://habrastorage.org/r/w1560/storage2/f67/99d/60b/f6799d60bb28f3c28a1579c6e0bf9704.png)
Все очень просто и понятно.
У каждого элементы можно редактировать сам текст элемента и его свойста
Редактирование текста с поддержкой форматирования очень гибкий инструмент, например такой текст компонента tree:
мы увидим в таком виде:
![](https://habrastorage.org/r/w1560/storage2/8e7/c9a/41a/8e7c9a41aeebd453805d0b180204fa57.png)
Свойства элементов редактируются в окне:
![](https://habrastorage.org/r/w1560/storage2/0cf/a51/fa1/0cfa51fa1797f9337dd5547c515d03a6.png)
при этом все это работает очень быстро не глючит, как например в Mockup Builder.
Такие возможности редактирования компонентов являются имхо необходимыми и достаточными, нет ничего лишнего, и все на своем месте.
В два клика кнопкам можно задать ссылку на внешний ресурс или внутреннюю страницу, что делает конечный прототип более живым.
Таким образом основной функционал данного рода программ здесь реализован отлично, но это еще не все…
Выглядит так:
![](https://habrastorage.org/r/w1560/storage2/a53/a5d/baf/a53a5dbaf043f150849abc9b0ab0d28d.png)
фактически это карта проекта, которую можно (только ее и можно, иначе будет только отдельные страницы) экспортировать в html с переходами между страницами.
У Wireframesketcher есть несколько очень удобных фич, которые максимально минимизируют процесс прототипирования.
Компонент создается из группы элементов
![](https://habrastorage.org/r/w1560/storage2/658/632/df7/658632df74be091fa7d2f8b1e162a70e.png)
При этом мы можем редактировать компоненты так чтобы изменения затрагивали все его копии, так и без этого. Это становится актуальным когда у вас много одинаковых сложных элементов, и вдруг один нужно поменять не затрагивая остальные. Это очень удобно. Такого нет у конкурентов, но фича эта очень востребована.
Это карта ссылок, наглядно показывает варианты возможных переходов между страницами.
Тут все просто:
Мне также приходилось работать и с таким комбайном как Axure (стоит 600$), у него конечно, есть свои плюшки, но основной функционал и сам процесс мне больше понравился у Wireframesketcher.
ptizza
Dyz
Поиск инструмента
Быстро нашел две хорошие статьи с перечнем необходимого софта:
Попробовав бесплатные сервисы Cacoo, iPlotz, MockFlow, Mockup Builder, Pencil получил первое представление о функционале. Надо добавить, что бесплатные они с ограничением в один проект (исключение Mockup Builder), что конечно не очень удобно для хоть какой-то работы. Функционал примерно схож (рассматривал именно функционал прототипирования, без flowchart диаграмм и т.д.). Остановился на Mockup Builder и сделал на нем проект.
И когда проект был готов я случайно
- мультиплатформенный софт (собран на базе eclipse), есть как standalone версии так и в формате плагина для eclipse
- очень шустрый (особенно заметно в сравнении с конкурентами на air, silverlight)
- в комплекте есть палитра компонентов, разбитых на группы (лаконично и понятно)
Казалось бы ничего особенного, но вот работа с самими прототипами это козырь этой программы, все очень логично, функционально и удобно, в сравнении со всеми перечисленными мной аналогами.
Интерфейс
Может показаться немного не привычен тем, кто еще не знаком с eclipse, но это быстро пройдет.
![](https://habrastorage.org/storage2/f67/99d/60b/f6799d60bb28f3c28a1579c6e0bf9704.png)
Все очень просто и понятно.
У каждого элементы можно редактировать сам текст элемента и его свойста
Редактирование текста с поддержкой форматирования очень гибкий инструмент, например такой текст компонента tree:
wireframing-tutorial
-assets
--icons
---7-location-map.svg
---9-av-shuffle.svg
--logo.png
--logo.screen
--Star.svg
мы увидим в таком виде:
![](https://habrastorage.org/storage2/8e7/c9a/41a/8e7c9a41aeebd453805d0b180204fa57.png)
Свойства элементов редактируются в окне:
![](https://habrastorage.org/storage2/0cf/a51/fa1/0cfa51fa1797f9337dd5547c515d03a6.png)
при этом все это работает очень быстро не глючит, как например в Mockup Builder.
Такие возможности редактирования компонентов являются имхо необходимыми и достаточными, нет ничего лишнего, и все на своем месте.
В два клика кнопкам можно задать ссылку на внешний ресурс или внутреннюю страницу, что делает конечный прототип более живым.
Таким образом основной функционал данного рода программ здесь реализован отлично, но это еще не все…
Tutorial story
Выглядит так:
![](https://habrastorage.org/storage2/a53/a5d/baf/a53a5dbaf043f150849abc9b0ab0d28d.png)
фактически это карта проекта, которую можно (только ее и можно, иначе будет только отдельные страницы) экспортировать в html с переходами между страницами.
Killer features
У Wireframesketcher есть несколько очень удобных фич, которые максимально минимизируют процесс прототипирования.
- создание собственных компонентов за один клик (в последней версии 3.8.2)
- Screenflow
Компоненты
Компонент создается из группы элементов
![](https://habrastorage.org/storage2/658/632/df7/658632df74be091fa7d2f8b1e162a70e.png)
При этом мы можем редактировать компоненты так чтобы изменения затрагивали все его копии, так и без этого. Это становится актуальным когда у вас много одинаковых сложных элементов, и вдруг один нужно поменять не затрагивая остальные. Это очень удобно. Такого нет у конкурентов, но фича эта очень востребована.
Screenflow
Это карта ссылок, наглядно показывает варианты возможных переходов между страницами.
![](https://habrastorage.org/storage2/f38/94f/3c6/f3894f3c6718c4cc1b1bb45244dace97.png)
Экспорт
Тут все просто:
- Html
- Png
P.S.
В заключении хотел сказать, что несмотря на то, что я сравнивал коммерческую программу с бесплатными аналогами, функционал последних не расширяется даже после оплаты аккаунта.Мне также приходилось работать и с таким комбайном как Axure (стоит 600$), у него конечно, есть свои плюшки, но основной функционал и сам процесс мне больше понравился у Wireframesketcher.
UPD
добавлю ссылки из комментариев:ptizza
Flairbuilder. Выбран после анализа порядка 12 веб и десктопных аналогов...
Dyz
Пользую www.easel.io
Больше не вижу смысла в «эскизных» прототипах, если можно сразу фигачить html+css с такой же скоростью.