Задача, которую помогает решить рассматриваемая сегодня программа, не относится к числу постоянно возникающих. Хотя, сказать что она совсем экзотична — будет тоже не вполне верно. В общем, речь пойдет о прототипировании интерфейсов разнообразных компьютерных программ под Mac OS X. В переводе с заумного на человеческий – прототипирование означает создание наброска (скетча) для будущего творения. Безусловно, такое важное дело как полное проектирование интерфейса надо поручать высокопрофессиональному дизайнеру (или даже не одному), так как ошибки в этом самом интерфейсе могут стоить очень дорого (если вообще не привести к краху).

Но, как всем известно, до того как заняться серьезным проектированием – обычно делают макеты, на которых примерно отображают будущее творение. Точно так же и с интерфейсом программы или сайта, до того как дизайнер(ы) возьмутся его рисовать, делается примерны набросок, который носит множество названий: прототип, эскиз, мокап, скетч, и т.п.

На рынке ПО для прототипирования существует масса решений разной степени крутизны (и дороговизны) для пользователей разного уровня.
Этот обзор посвящен одному из самых популярных инструментов среднего уровня – программе Balsmiq Mockups for Desktop и ее версии для Mac.
Программа написана с использованием технологии Adobe AIR, поэтому является кроссплатформенной, вплоть до возможности запуска прямо в браузере. Правда платой за эту универсальность выступает «не родной» вид на всех платформах, хотя стоит признать, что разработчики максимально постарались сгладить это неудобство вылизыванием интерфейса до мелочей.

Устанавливается она, как и любое другое AIR приложение путем нажатия на кнопку прямо в окне браузера. После этого, на ваш компьютер будет установлена сначала среда выполнения AIR, а уже потом и сам Balsamiq.

Интерфейс программы прост и функционален. Работать с ним может фактически любой, так как программа рассчитана как раз не на профессионального дизайнера/программиста, а на обычного пользователя.

В верхней части расположено меню, чуть ниже – отцентрированная панель кнопок. Ниже – библиотека элементов (ее можно разместить справа или слева). Остальную часть окна занимает рабочее пространство, в котором и рисуется скетч.

Я решил в качестве примера создать прототип одного хорошо вам знакомого сайта. Ниже покажу этот процесс пошагово и с картинками. Для удобства я передвинул панель с инструментами влево.

На вкладке Big берем Browser Window и перетаскиваем его в рабочую область. Тут же откроется поле для ввода текста. Первая строка станет заголовком браузера, вторая будет показываться в его адресной строке. Введем туда нужную информацию. После этого поменяем размер окна до нужного.

Теперь смоделируем шапку сайта и навигацию. Для этого нам понадобятся: Label, Link bar, Search box и Panel

Следующий шаг — правый баннер и список категорий. Для них подойдут Scratch out и List

Теперь собственно сами статьи. ОНи не представляют собой ничего сложного, уже знакомые вам панели и метки. Для рисунков используется Image.
Для загрузки рисунка надо добавить сам элемент управления и щелкнуть по нему два раза. Обратите внимание на флажок Sketch it! в окне загрузки рисунка -
он позволит стилизовать рисунок под общий стиль Balsamiq-а.

Вот так выглядит макет с первой статьей.

Полученную статью осталось сгруппировать и скопировать необходимое число раз. В итоге мы получаем полноценный макет сайта.

Вот так, за 15 минут мы получили полноценный (и достаточно стильно выглядящий) макет интерфейса сайта MacOS World. В заверение разговора следует заметить, что программа активно развивается. Новые версии выходят ежедневно.

Также существует очень полезный сайт, на котором выкладываются дополнительные элементы управления для создания скетчей UI таких платформ как Android, iPad и многих других.

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

P.S. Заключительный вопрос (конкурс Versions): жук сидит в центре деревянного куба, состоящего на 27 секций (3х3х3). Он может перемещаться из одной секции в другую, если они имеют общую грань (прогрызая стенки). Жук решает обойти все секции куба, побывав в каждой только по одному разу. Вопрос: получится ли у него это? Ответ обосновать.