Для рисования набросков интерфейсов. От руки рисовать не люблю, что вкупе с длительностью перерисовки отметает использование бумаги. Balsamiq подкупает идеями блюд для ужина, а главное - репутацией и внешним видом программы, в которой можно работать быстро. Но так ли это на самом деле?
Житейские советы от Balsamiq
Я провел бесхитростный эксперимент и нарисовал в Balsamiq и Sketch страницу авторизации, как у Facebook. В Balsamiq это удалось сделать за 15 минут, а в Sketch за 17 минут и 18 секунд.
Рисование такой страницы в Balsamiq заняло около 15 минут, а в Sketch всего на две минуты больше
Разница не такая уж большая, не правда ли? Но очевидно, что в реальных задачах, когда происходит множество итераций и рисуется не один экран, выигрыш во времени будет накапливаться. Чтобы использование Balsamiq было оправданным и по-настоящему быстрым, стоит освоить несколько простых приемов быстрой работы.
Использование синтаксиса
Для форматирования текста в Balsamiq можно применять управляющие символы . Например, текст в окружении звездочек становится жирным, а использование дефисов превращает колонку в маркированный список.
Пример парсинга
Также полезно использовать “\r” для переноса текста, потому что этот управляющий символ помогает поместить две строки текста в какой-нибудь тесный контрол.
Использование символов
Символы в Balsamiq - это такие объекты, которые можно изменить одновременно из одного места, сколь много бы их ни было. Они реализованы предельно просто и единственная трудность с ними - это найти, где они расположены и заставить себя ими пользоваться.
Символы находятся в меню-гамбургере, не очевидно
Использование Mockups To Go
Mockups To Go позволяет не рисовать, когда всё уже нарисовано за вас. Это онлайн-библиотека готовых макетов и шаблонов для iOS, Android, Windows Phone и других платформ. Заходите на https://mockupstogo.mybalsamiq.com/projects и качайте подходящий макет, а затем просто импортируйте его в ваш проект.
Множество готовых макетов в Mockups To Go
Быстрое добавление объектов
Эмпирическим путем было выявлено, что больше всего времени тратится на поиски нужного объекта в библиотеке (если работать мышкой). Однако есть способ существенно ускорить процесс.
Организация библиотеки: длинная прокрутка, много категорий
Для добавления объекта нажмите клавишу “+” и начните набирать его название. С большой вероятностью вы обнаружите его в появившихся подсказках, останется только нажать Enter и объект добавится на холст. По мере запоминания названий объектов в Balsamiq процесс станет ещё быстрее.
Быстрое добавление объектов через “+”
Использование “+” для добавления объектов экономит мне больше времени, чем какие-либо другие горячие клавиши, однако не лишним будет посмотреть весь список .
P. S.
Ещё для эффективной работы имеет смысл потратить пятнадцать минут на изучение деталей интерфейса Balsamiq. Любопытно, что когда проект долго экспортируется, Balsamiq занимает вас цитатами про хороший дизайн.
Mockup — программа для создания макетов интерфейсов — GUI-макетов. Пригодится в первую очередь дизайнерам интерфейсов и разработчикам программ.
Программа чем-то напоминает упрощенный векторный редактор. Вам предлагается несколько готовых элементов, которые вы просто перетаскиваете мышкой на рабочую область. Можно изменять размер элементов, делать подписи.
Из недостатков отмечу малое количество возможностей в программе. Но для быстрого создания простых макетов Mockup подойдет.
Готовые макеты можно экспортировать в форматы PNG и SVG. Можно сохранить файл, чтобы потом его можно было открыть и продолжить редактирование.
Установка программы Mockup в Ubuntu Linux
Для установки Mockup в Ubuntu лучше всего использовать PPA репозиторий от разработчиков. Он содержит самую свежую версию программы. Для установки выполните в терминале команды:
Sudo add-apt-repository ppa:mockup-team/releases sudo apt-get update sudo apt-get install mockup
Balsamiq Mockups – это программа, позволяющая создавать макеты пользовательских интерфейсов. Она представляет собой удобное и компактное решение, разработанное на базе Adobe Air для операционных систем Windows, Mac и Linux. К наиболее интересным особенностям программы можно отнести возможность создания макетов рабочего окна какого-либо приложения, либо страницы сайта. В первую очередь, программа будет полезна для заказчиков и дизайнеров. Благодаря ей ваш работодатель всегда сможет наглядно продемонстрировать, чего он именно ждет от дизайнера программы или сайта. При этом отпадает необходимость описывать требования и ожидания от будущего проекта.
Пользовательский интерфейс программы достаточно необычен. Он смотрится как нарисованный от руки. Для того, чтобы нарисовать макет, не нужно долго разбираться в возможностях утилиты – все основные действия выполняются на интуитивном уровне. Кроме того, в приложении реализован такой удобный метод, как Drag-n-Drop. Весь макет строится из поочередно добавляемых элементов, каждый из которых обладает своим набором настроек. В целом, стоит отметить, что Balsamiq Mockups это тщательно продуманное и достаточно приятное в использовании приложение. В сфере своего применения оно становится все более популярным, а на просторах сети можно найти уже готовые макеты и использовать их в качестве шаблонов.
Ключевые особенности и функции
- необычный и приятный интерфейс;
- набор всех необходимых инструментов для создания макетов сайта или приложения;
- экспорт макетов в форматы png, pdf и xml;
- возможность настройки горячих клавиш;
- возможность подключения дополнительных плагинов.
Здравствуйте, сегодня речь пойдёт о создании макетов(mockups) сайтов и приложений. Под макетами подразумевается визуальное отображение интерфейсной части. Это бывает нужно для быстрого наброска и передачи всего этого на следующий этап. Мне например понадобились макеты страниц сайта для вставки в техническое задание, чтобы заказчик мог примерно знать, как это всё будет выглядеть. Макеты создавал в Balsamiq Mockups. Об этой программе и пойдёт речь.
Коротко о том, почему выбрал именно эту программу. Банально не было времени и взял первое, что попалось под руку. Конечно когда искал в сети, мелькали такие название как Axure, MS Visio и куча других. Но под руку мне первой попала эта и полностью удовлетворила мои требования. Далее искать в сети не стал. Хотя можно опробовать всё и сделать сравнительный анализ.
Balsamiq Mockups? Коротко о программе
Скриншот программы
Сайт разработчиков программы . Скачать программу можно . Программа кросс-платформенная. Работает на основе Air. Более того, есть on-line версия для ознакомления. При этом должен быть установлен Flash.
К сожалению программа Balsamiq Mockups Desktop платная. Скаченная для ознакомления версия работает 7 дней. После семи дней программа продолжает работать, но отсутствует возможность сохранения сделанного макета. Ну вообще, если очень хочется, то можно! 🙂 Crack Balsamiq Mockups Desktop — просто передвиньте системные часы назад. Видимо программа при первой установке отмечает у себя дату завершения ознакомительной версии как текущая дата на момент установки плюс 7 дней. Только не забудьте обратно время перевести, чтобы: 1) не затеряться во времени 🙂 2) когда перевёл время и забыл обратно перевести, лазая по сайтам были проблемы с сертификатами; 3) возможны другие сбои в системе. Кстати, в сети искал кряк, но не нашёл, наверное потому что и не нужен, все так обходят защиту видимо.
Что можно в программе:
- рисовать макеты для сайтов
- создавать макеты для мобильных приложений, в частности iPhone — там специально виджеты есть для iPhone контролов;
- для desktop программ так же можно клепать макеты интерфейса
Думаю стоит отметить, что на выходе получается просто файл — графический в формате PNG, документ PDF или файл проекта. Никакого функционала к макету, как например в Axure, не прикрепляется.
Balsamiq Mockups Desktop в действии
Первое, что хочется сказать — для того чтобы можно было вводить русские буквы нужно в меню View поставить Use System Fonts. В этом случае будет использоваться стандартный шрифт, в котором есть начертания для русских букв.
Как видите, элементы макета имеют вид «начертание от руки». По моему смотрится хорошо и не очень по детски. Самое то. Хотя кому то наверное данный вид отрисовки не понравится.
Рассмотрим интерфейс программы.
По сути насчёт создания мокапов больше сказать нечего — там всё просто.
Итоги
Мне понравилось:
- программа кросс-платформенность и наличие on-line версии — это круто
- простота в освоении
- быстрая в работе
- наличие множества контролов, виджетов, как то текстовое поле, Combobox, окно браузера и тд
Мне не понравилось:
- платность, хотя как написано выше, есть так сказать crack 🙂 вообще тут наверное не так надо выразиться «не понравилась платность», это же разработчики, им кушать охото, семьи кормить; назовём платность просто небольшим минусом;
- отсутствие слоёв; я конечно понимаю что самая изюминка в простоте, но блин так хочется чтобы были;
- у некоторых виджетов всё таки отсутствует что то нужное, например если куча вкладок, то они в два ряда не встанут, надо будет растягивать этот виджет чтобы все вкладки видны были;
Вот вроде бы и всё, пишите в комментах
Добавлена версия 3.3.14
Hello friends of Balsamiq!
As you know, we never get tired of making our little tool better and better for you all. :)
Let"s see what"s in today"s release.
Easier Access to Alternates!
Many of you asked for this, and here it is!
You can now select alternates easily both from the navigator menu and the fullscreen navigator menu.
Thanks to all the people who asked for this on this thread, this one, this one, and via email.
New, more Android-y Options for Controls!
So we heard this Android thing is getting popular and it looks like it might be here to stay ;) so we thought we"d make it easier to wireframe Android applications without having to use an external symbol library.
This release includes a first batch of changes, more will come in the future.
New Search Options
We added a shape option to make the Search control have Rounded Corners or be Rectangular, made the search icon optional, and added an option to show or hide a microphone icon.
New Text Input Border Options
We added an option to have the border of a Text Input control be only the bottom line, instead of a rectangle. Android-y! :)
New Progress Bar Options
We added a thin style and support for color to the Progress Bar. Nice and flexible.
New Alert Options
We added a different style for the buttons (without a border), and added support for button color.
Other Improvements and Bug Fixes
Fixed an error when removing overridden properties of a stretched symbol instance.
Fixed an error when dragging symbols between libraries in some rare cases.
In our web-based versions, we improved the UX of downloading BMPRs and assets to your computer in Chrome (they fixed their bug). This was released as version 3.3.13 on March 25th.
Fixed an error when exporting arrows with default control properties to BMML.
Fixed an issue with restored mockups not ending up in their previous position in some cases.
Fixed the sorting of Quick Add to be case-insensitive.
Fixed an issue with us ignoring tab characters in some cases. Thanks Lesani for reporting it!
We now add the current date to the top of our log file (helps with debugging)
Fixed an error when undoing the transformation of a group to another control type. Thanks so much Stewart M. for reporting this!
Fixed a regression, where the ENTER key no longer entered a group or symbol instance.
Fixed a cosmetic issue with drawing a block of text while editing a group.
We changed the algorithm that decides to scroll content to the right when showing the right panel. It should happen less frequently now. Thanks Robson for reporting it!
Fixed a bug with CTRL+Z not working when editing text in some cases.
You can now copy/paste mockup and project notes without having to edit them. Thanks Stromatolyte and Liubi for requesting this!
We made it easier to rearrange mockups by dragging thumbnails. Thanks Aras_Kannu for requesting this!
Fixed an annoying "jump" when switching between mockups while in fullscreen. Thanks Marc P. for reporting this!
