Разработка собственных цифровых продуктов является сложным процессом, требующим объединения усилий самых разных специалистов. Однако на ранних стадиях проекта всегда есть очень важный этап – создание прототипа будущего сайта или приложения. Сделать это можно разными способами, но одним из самых легких и удобных является использование сервиса Balsamiq Mockups. Для начала работы в этом веб-приложении вам даже не понадобится создавать свою учетную запись. Просто открываем в браузере эту ссылку и сразу попадаем в редактор, в котором уже загружены несколько записей для объяснения основных приемов работы.
Окно программы состоит из верхнего меню, которое дает доступ к основным функциям, библиотеки элементов, расположенной чуть ниже, и, собственно, области редактирования. В меню View вы имеете возможность настроить интерфейс более удобным вам образом, например, переместить библиотеку элементов в левую или правую сторону экрана или вообще скрыть ее для увеличения пространства. По умолчанию все элементы отображаются в несколько небрежной манере, словно нарисованные от руки. Если вам это не нравится, то вы можете включить обычное начертание здесь же, в меню View.
Первым делом, вам потребуется очистить область редактирования для своего макета. Делается это выбором в меню Mockup команды Clear Mockup. Теперь можно добавлять нужные вам элементы. Для этого находим в каталоге требуемый элемент интерфейса и перетаскиваем его в нужное место. Готовых элементов имеется огромное количество и все они разбиты на тематические категории, так что найти нужное не составляет никакого труда. Тем более, что для быстрого поиска вы можете пользоваться встроенной строкой поиска, куда достаточно просто ввести первые буквы названия.
Таким образом, мы можем разместить на листе окна приложений, простые фигуры, текстовые блоки, таблицы, картинки, кнопки, стрелки и многое другое. Любой из элементов можно отредактировать. Для этого щелкаем по нему мышкой и рядом появляется всплывающее окно настройки его свойств. Например, для иконки, мы можем выбрать ее вид, размер, цвет, задать подпись, поднять выше или ниже других элементов, сгруппировать с другими объектами и так далее.
После окончания работы над макетом вы можете сохранить его в форматах PNG или PDF, что может вам пригодиться для печати или при необходимости демонстрации своего проекта на устройствах, не имеющих доступа к сети. Кроме этого, есть возможность экспортировать проект в виде XML-файла. Это даст вам возможность открыть его позднее в Balsamiq Mockups и продолжить редактирование, а также переслать макет по почте коллегам для внесения правок. Для сохранения в этом формате вам необходимо выбрать пункт Export Mpckup XML в меню Mockup. После этого разметка вашего макета будет скопирована в буфер обмена, откуда ее можно вставить в любой текстовый файл или почтовое сообщение.
В настоящее время Balsamiq Mockups имеет несколько вариантов использования. Во-первых, это бесплатное веб-приложение, функциональность которого мы рассмотрели в этой статье. Во-вторых, есть возможность загрузить платное настольное приложение, обладающее целым рядом дополнительных возможностей. Однако для выполнения несложных и быстрых эскизов вполне достаточно и бесплатной версии сервиса.
Веб-сервис Balsamiq Mockups оставляет хорошее впечатление продуманностью своей работы и отличной функциональностью. Не даром это приложение завоевало широкое признание среди разработчиков программных интерфейсов и веб-дизайнеров, которые выкладывают в сеть дополнительные объекты и готовые макеты, которые вы можете использовать в своих проектах. Многие из них вы найдете на этой странице.
Материал подготовлен проектом Теплица социальных технологий
