Wireframesketcher — предназначен для прототипирования графических интерфейсов.
В нем можно создавать интерактивные прототипы веб-сайтов и приложений как для настольных компьютеров так и для смартфонов, а также других мобильных устройств.
Авторы позиционируют Wireframesketcher как инструмент для профессионалов и у них на это есть все основания. Приложение разработано на основе Eclipse IDE либо может быть установлено в качестве плагина к Eclipse, а это обеспечивает кроссплатформенность приложения (Linux/Mac/Windows) и дает возможность использовать большой арсенал разработанных для этой IDE инструментов, в том числе поддержку различных систем контроля версий и других плагинов. Что касается контроля версий, то его легко осуществлять, так как для хранения данных проекта используются текстовые XML файлы. Также для Wireframesketcher имеется достаточно обширная библиотека макетов, шаблонов, виджетов и иконок.

В этой статье я хочу показать пример создания прототипа простого веб-сайта в Wireframesketcher. В данном случае под прототипом будет пониматься совокупность нескольких слинкованных интерактивных т.н. проволочных макетов страниц веб-сайта (wireframes). В дальнейшем для простоты я буду использовать «оригинальное» название «wireframe» сокращенное до «фрейм» именно в этом контексте.

Я выбрал Wireframesketcher т.к. использую для работы Linux и по сути ничего лучше для этой системы не смог найти, а толковые аналоги есть только для Mac и Windows.

Предположим, что требуется создать прототип сайта некой абстрактной компании.
Естественно, что описывать создание всех возможных страниц такого сайта я не буду, а покажу только несколько страниц для демонстрации возможностей Wireframesketcher.

Итак приступим. Если у вас уже установлена какая-нибудь Eclipse (например PDT, то вы можете установить Wireframesketcher как плагин для своей версии IDE. Если Eclipse у вас не установлена, то вы можете загрузить и установить Wireframesketcher как отдельное приложение для своей операционной системы. Я установил как плагин, соответственно буду описывать все дальнейшие действия для этого варианта, думаю что для приложения практически не будет отличий.

Для тех кто не знаком с Eclipse я буду приводить скриншоты меню этой IDE, если на таком снимке нет главного меню — это означает что показано контекстное меню, получаемое «правым» кликом по находящемуся под ним элементом.

Создадим новый Wireframe Project, в качестве шаблона выберем Empty Project и назовем его print_shop (вы можете выбрать любое другое имя).


Далее создадим screen (далее экран) для домашней страницы и назовем его home.

Screen в терминах Wireframesketcher — это по сути некий виртуальный экран, на котором мы будем создавать собственно фрейм страницы, соответственно для каждой страницы нужен как минимум один экран, а иногда и несколько для отображения различного состояния страницы в процессе взаимодействия с пользователем.

На этом этапе уже можно создать репозиторий проекта в любой удобной для вас системе контроля версий


Удобнее всего это делать с помощью плагина, который прежде надо установить, я использую EGit, но вы можете выбрать любой другой.

Сделаем первый комит


Чтобы при выборе файла в «Project Explorer» открывалась соответствующая вкладка редактирования экрана — рекомендую нажать иконку «Link with Editor». Также рекомендую включить отображение сетки и привязки объектов к ней, для этого кликните по «Default theme preferences» и выберите соответствующие настройки.


И последнее что можно сделать — это выбрать режим отображения «Clean», тогда линии объектов на экране будут ровными. Мне такой вариант больше нравится чем имитация наброска от руки.


В XML редакторе


можно посмотреть содержимое экрана home.screen


Давайте создадим фрейм домашней страницы. Еще раз посмотрите на скриншот, справа находится панель Palette с библиотекой доступных объектов. При желании в эту библиотеку можно добавить объекты других разработчиков или свои. «Вытащим» на экран домашней страницы объект Title из папки Text и объект Browser из папки Containers и зададим параметры его отображения. Т.к. я, создавая фрейм-макеты страниц сайта, делаю это только для того, чтобы показать какая именно информация и элементы управления будут на странице и их примерное положение, то на данном этапе меня не сильно беспокоят точные размеры и позиция объектов, лишь их взаимное расположение и выравнивание, но вы можете выбрать свою собственную стратегию в этом вопросе. Для экспорта результата в PDF формат рекомендую выбрать размеры для Browser 800x600px и отступ где-то 12,48 рх как здесь

Так у вас останется место на формате A4 для размещения заголовков и пояснений на полях при необходимости.

До тех пор пока вы не купите Wireframesketcher при экспорте в PDF будет выводиться надпись Trial Version


Теперь добавим в Browser домашней страницы типовые объекты из панели Palette: логотип, название компании, фото главной страницы, текст, навигационное меню и ленту новостей. Прошу заметить, что все это делается исключительно в целях ознакомления, без каких-либо претензий на дизайн и реальную практическую необходимость.

Логотип можно сделать из Library/Layout/Shape.

Название компании — Library/Text/Title.

Меню — Library/Text/Link Bar, сразу уменьшим стандартное количество пунктов меню: Home,Blog,Forum,About до трех: Блог, Контакты, Подписка.

Т.к. мы не будем ставить реальное изображение на страницу (хотя такая возможность есть — вы можете вставить любую реальную картинку), воспользуемся для него Library/Layout/Placeholder c соответствующим пояснением: «фото домашней страницы».

Текст — Library/Text/Lorem Ipsum, т.к. на данный момент нет возможности задать обтекание картинки — сымитируем это с помощью двух текстовых блоков, и сгруппируем их для надежности, воспользовавшись либо иконкой панели инструментов, либо меню object, либо контекстным меню


Для работы с объектами в группе надо выделить ее двойным кликом, тогда остальные объекты на экране светлеют и вы можете работать с выбранной группой, например поменять ее имя или выбрать для редактирования любой объект группы


Для возврата к редактированию экрана надо сделать двойной клик вне группы.

Отделим ленту новостей вертикальной линией и создадим анонс новости.
Думаю вы уже сможете разобраться сами как это сделать. Те кто не любит работать с привязкой к сетке, для облегчения позиционирования объектов могут воспользоваться привязкой к направляющим. Для создания направляющей надо сделать двойной клик по соответствующей линейке на краю области редактирования экрана. После того как вы сгруппируете объекты анонса новости ваш экран будет выглядеть примерно так

я специально убрал сетку и добавил (для демонстрации) направляющие на этот экран.

Для окончательного заполнения домашней страницы осталось только продублировать анонс новости несколько раз. Это конечно можно сделать обычными copy+paste, но гораздо удобнее просто потянуть дублируемый объект в нужное место удерживая клавишу [Ctrl], в этот момент рядом со стрелкой появляется значок +, который означает что вы «тянете» копию объекта. Предположим что вы отключили привязку и к сетке и к направляющим и у вас получилось что-то похожее на


Теперь, чтобы выровнять объекты анонсов по левому краю и равномерно распределить их по вертикали можно воспользоваться соответствующими инструментами из панели инструментов, для этого надо предварительно выделить все выравниваемые объекты в нужном порядке


В конечном итоге у вас должна получится домашняя страница похожая на эту


Для того чтобы показать как «линкуются» страницы, создадим страницу подписки.
Для этого клонируем экран домашней страницы


По сути клонирование — это аналог сору+paste только за одно действие.

Переименуем новый экран в subscription


Да и не забываем вовремя делать комиты, плагин контроля версий с помощью декорирования иконок показывает текущее состояние файлов в окне Project Explorer, например до комита

и после комита


На экране подписки удалим все ненужные объекты кроме лого, названия компании и меню — эти объекты составляют заголовок страницы и будут повторяться на каждой странице сайта. Переименуем общий заголовок экрана на «Страница Подписки». Теперь когда у нас есть уже две страницы, логично было бы добавить в лого ссылку на домашнюю страницу, а в меню в пункте «подписка» ссылку на страницу подписки. Но не будем спешить, т.к. если мы начнем это делать прямо сейчас, то в дальнейшем на каждом экране нам придется повторять такие действия. Более того, если мы решим поменять эти ссылки или например название компании, то нам также придется делать это на каждом экране. Для упрощения работы с повторяющимися объектами в Wireframesketcher существует возможность создать т.н. компонент, и уже его размещать на страницах. При изменении файла компонента и его сохранении, он «автоматически» меняется на всех экранах где он используется.

Для создания компонента заголовка выделим лого, название и меню, далее воспользуемся контекстным меню Convert to Component


назовем этот компонент page_header


По умолчанию все компоненты добавляются в папку проекта assets и становятся доступны в папке Library/Assets панели Palette. Теперь, когда у нас есть новый компонент page_header

надо удалить на экране home объекты лого, название и меню и «вытащить» на их место из папки Library/Assets панели Palette компонент page_header.
Если «вытащить» его напрямую из папки assets проекта, то такой компонент на экране будет отображаться некорректно.
Компонент можно редактировать прямо на экране где он находится. Для этого надо также как и для редактирования группы сделать двойной клик по компоненту. Но при этом происходит перекрытие оригинальных свойств компонента и при следующем их изменении в самом компоненте они не будут обновляться на этом экране


Теперь давайте добавим ссылку на экран домашней страницы в лого на экране компонента, для этого выделим лого и в панели Links выберем home.screen


Далее поменяем, для наглядности изменений, первый пункт меню с «Блог» на «Новости» и для пункта «Подписка» установим ссылку на экран subscription

после чего сохраним экран компонента page_header и проверим изменения на экранах home и subscription, мы видим что на соответствующих объектах появились желтые значки ссылок.

Если перейти в режим просмотра Presentation, нажав [F5] или выбрав пункт главного меню

то при клике на эти элементы мы будем переходить на соответствующий экран.

Выйти из режима Presentation можно нажав [Esc].
Сейчас на экране subscription можно добавить элементы формы ввода email адреса для подписки на рассылку компании. Кроме того надо создать еще два экрана subscription_success и subscription_fail — первый для демострации страницы с сообщением об удачной подписке, второй с сообщением об ошибке при вводе некорректного email.
Для перехода на экран с ошибкой subscription_fail рядом с кнопкой «подписаться» я обычно добавляю из Library/Аnnotation/Note примечание с соответствующим текстом и указываю ссылку для этого примечания на subscription_fail.screen. Чтобы при просмотре в режиме Presentation были видны примечания надо отключить чекбокс Hide Аnnotation или нажать клавишу [A]


Теперь перейдем к самому главному ради чего все затевалось — к созданию многостраничной PDF презентации со слинковаными страницами. Для этого надо создать т.н. раскадровку Storyboard, выбрав в главном меню соответствующий пункт


Назовем ее тоже print_shop как и проект


Далее нажав на зеленую кнопку «Add Screen» выберем все наши экраны


и получаем готовую Storyboard


При желании можно поиграться с расположением экранов в Screenflow

но лично для меня это практической ценности не имеет, т.к. я не собираюсь экспортировать эту диаграмму в PDF, тем более что при наличии нескольких десятков экранов в презентации на этой диаграмме будет «каша» из стрелок, как ты их не перемещай.

Осталось нажать на иконку экспорта в PDF и выбрать настройки экспорта, я делаю как этом скриншоте


Если у вас есть примечания с альтернативными ссылками переходов, то обязательно снимите галочку с «Hide Annotation» иначе эти примечания не будут видны в итоговом PDF. Нажимаем кнопку «Export» — вуаля — наш PDF файл готов! Наш прототип можно презентовать заказчику.

Посмотреть результат можно по ссылке. Т.к. программа просмотра PDF гугль диска «не понимает» ссылки между страницами — рекомендую скачать файл и локально просматривать уже со ссылками.

Подведем краткие итоги. Создавать «проволочные» макеты в Linuх можно и другими способами, например Inkscape или LibreOffice Draw справятся с этим даже лучше, но Inkscape «из коробки» не умеет делать многостраничные файлы, а в LibreOffice Draw мне пока не удалось расставить ссылки между страницами одного документа. Wireframesketcher делает и то и другое + имеет большую библиотеку готовых объектов + работает с плагинами систем контроля версий.

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