Обзор Balsamiq Mocups или Забальзамируйте мне макет

превью

Самой оптимальной и удобной программой для создания простых макетов страниц ( их еще называют макеты с низкой степенью детализации или low-fidelity макет, еще встречал термин “каркас”), на мой взгляд, является Balsamiq Mockups.

Основными достоинствами её являются:
— Простота в использовании,
— Доступная цена (79$ — десктопная версия),
— Возможность работы онлайн (12$ месяц).

К недостаткам можно отнести её узконаправленность — создать высокодетализированный макет с её помощью не получится. Например, тот же Axure умеет во много раз больше и макет можно проработать до последнего пикселя (он конечно и дороже стоит — 289$ стандартная версия), но тут нужно учесть задачи, решаемые вами.
Если вы занимаетесь разработкой сложных не шаблонных порталов и сервисов — тогда Axure это ваш выбор, поскольку  Balsamiq Mockups действительно может не хватать. Если же вы нуждаетесь в создании макетов для иллюстрации своих идей (например, при проведении юзабилити аудита один такой макет вместо тысячи слов), либо работаете с простыми сайтами (например, сайты-визитки, блоги и т.д.) — то функционала вполне хватит.

Я буду описывать программу на примере десктопного приложения. После пробного периода (в пробный период доступен полный функционал), вам предложат её купить. Если вы не покупаете — программа по-прежнему будет работать, но вы не сможете сохранить свой макет.

Состоит программа из таких основных блоков:
1. Стандартное меню (здесь есть file, edit, view, help)
2. Поиск.
Удобно: введя название нужного элемента и щелкнув «Enter» требуемый элемент сразу появляется в рабочей области. Минус — нужно помнить, как хотя бы примерно называется каждый элемент.  Если начали набирать правильно — появляется список возможных вариантов.
3. Меню действий с вашим макетом (копировать, вырезать, дублировать и т. д.)
4. Элементы, с которыми вы собственно и работаете.
В верхней части блока расположены группы элементов (All, Big и т. д.). Ниже полоса элементов по отдельности. Отсюда их можно перетаскивать в рабочую область.
5. Рабочая область, где и собираете из предоставленных элементов макет.
основные блоки

Как видно даже на скриншоте — программа абсолютно простая. Отдельного упоминания достоин стиль выполнения макетов — как буд то от руки, называемый Sketch Skin.
При необходимости вы можете поменять его на более “строгий” классический стиль  Wireframe Skin. Сделать это можно в меню View →  Skin → Wireframe Skin.

скины

Работа с программой.
Сам процесс работы довольно прост. Как уже было сказано выше — вы либо добавляете элемент в рабочее поле, перетягивая его из перечня сверху, либо два раза кликаете по нему и он автоматически добавляется в рабочее поле, где вы его можете увеличивать, передвигать и т. д.
Каждый элемент имеет определенный набор действий, которые можно выполнить с ним и параметры, которые можно изменить. Все эти данные отображаются вот в таком поле, появляющемся рядом с элементом в основной области.

поле информации

Если у вас несколько элементов в рабочей области — поле с информацией относится к тому элементу, который вы выделили (кликнули по нему мышкой, после чего он окрашивается серым цветом). На скриншоте выше таким элементом является «Image». Обратите внимание, что поле с информацией подписано — к какому элементу оно относится

подпись поля

В развернутом состоянии поле информации для элемента «Image» выглядит так
развернутое поле информации

Как легко догадаться — тут можно изменить размер элемента, добавить рамку, повернуть, задать расположение относительно других элементов и многое другое. Рассказывать все подробно не вижу смысла — потратив минуту времени, вы и сами разберетесь со всем этим.

Отдельно отмечу, что если вы выделяете несколько элементов сразу (стандартное Ctrl+клик по объекту) у вас появляется поле для действий с группой объектов, где указано количество выделенных элементов.
действия с несколькими элементами

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

Созданные вами шедевры вы можете экспортировать в форматах pdf, png и xml. «Личный» же формат программы — bmml (Balsamiq Mockups Markup Language).

В моей работе я чаще всего обхожусь только Balsamiq Mockups, хотя иногда приходится прибегать к помощи Axure, о которой я обязательно напишу в блоге. Думаю, о ней придется сделать серию статей — поскольку функционал намного более обширен.
Подводя итог, если вам не нужна высокая детализация макета, то Balsamiq Mockups  однозначно ваш выбор, который не дорого стоит и с функционалом которого вы разберетесь буквально за пару минут.

Один комментарий на “Обзор Balsamiq Mocups или Забальзамируйте мне макет
  1. Длина рабочей области установлена по умолчанию? Или можно ее как-то настраивать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>