Balsamiq mockups что это
Четыре способа быстрой работы в Balsamiq
Я часто использую Balsamiq Mockups для рисования набросков интерфейсов. От руки рисовать не люблю, что вкупе с длительностью перерисовки отметает использование бумаги. Balsamiq подкупает идеями блюд для ужина, а главное — репутацией и внешним видом программы, в которой можно работать быстро. Но так ли это на самом деле?
Я провел бесхитростный эксперимент и нарисовал в Balsamiq и Sketch страницу авторизации, как у Facebook. В Balsamiq это удалось сделать за 15 минут, а в Sketch за 17 минут и 18 секунд.
Разница не такая уж большая, не правда ли? Но очевидно, что в реальных задачах, когда происходит множество итераций и рисуется не один экран, выигрыш во времени будет накапливаться. Чтобы использование Balsamiq было оправданным и по-настоящему быстрым, стоит освоить несколько простых приемов быстрой работы.
Использование синтаксиса
Для форматирования текста в Balsamiq можно применять управляющие символы. Например, текст в окружении звездочек становится жирным, а использование дефисов превращает колонку в маркированный список.
Также полезно использовать “\r” для переноса текста, потому что этот управляющий символ помогает поместить две строки текста в какой-нибудь тесный контрол.
Использование символов
Символы в Balsamiq — это такие объекты, которые можно изменить одновременно из одного места, сколь много бы их ни было. Они реализованы предельно просто и единственная трудность с ними — это найти, где они расположены и заставить себя ими пользоваться.
Использование Mockups To Go
Mockups To Go позволяет не рисовать, когда всё уже нарисовано за вас. Это онлайн-библиотека готовых макетов и шаблонов для iOS, Android, Windows Phone и других платформ. Заходите на https://mockupstogo.mybalsamiq.com/projects и качайте подходящий макет, а затем просто импортируйте его в ваш проект.
Быстрое добавление объектов
Эмпирическим путем было выявлено, что больше всего времени тратится на поиски нужного объекта в библиотеке (если работать мышкой). Однако есть способ существенно ускорить процесс.
Для добавления объекта нажмите клавишу “+” и начните набирать его название. С большой вероятностью вы обнаружите его в появившихся подсказках, останется только нажать Enter и объект добавится на холст. По мере запоминания названий объектов в Balsamiq процесс станет ещё быстрее.
Использование “+” для добавления объектов экономит мне больше времени, чем какие-либо другие горячие клавиши, однако не лишним будет посмотреть весь список.
Ещё для эффективной работы имеет смысл потратить пятнадцать минут на изучение деталей интерфейса Balsamiq. Любопытно, что когда проект долго экспортируется, Balsamiq занимает вас цитатами про хороший дизайн.
В этом есть ирония, потому что разобраться в интерфейсе самого Balsamiq у меня с первого раза не получилось. Например, попытайтесь угадать, что делает пиктограмма странички справа от “i” в верхней панели (см. скриншот ниже).
Правильный ответ: она изменяет содержимое правого блока.
Если вы хотите выключить Comic Sans (включен по умолчанию) и изменить внешний вид проекта на более строгий, нажмите именно на этот значок — откроются настройки проекта.
«Balsamiq Mockups» — создание макетов сайтов, мобильных и веб-приложений
В современных условиях успешная деятельность НКО или общественного движения невозможна без применения современных цифровых технологий. Наличие своего сайта, информационной рассылки, мобильного или веб-приложения позволит вам решать широкий круг задач по информированию, привлечению средств, мобилизации волонтеров, сбору информации и так далее.
Разработка собственных цифровых продуктов является довольно сложным процессом, требующим объединения усилий самых разных специалистов. Однако на ранних стадиях проекта всегда есть очень важный этап – создание прототипа будущего сайта или приложения. Сделать это можно разными способами, но одним из самых легких и удобных является использование сервиса Balsamiq Mockups. Для начала работы в этом веб-приложении вам даже не понадобится создавать свою учетную запись. Просто открываем в браузере эту ссылку и сразу попадаем в редактор, в котором уже загружены несколько записей для объяснения основных приемов работы.
Окно программы состоит из верхнего меню, которое дает доступ к основным функциям, библиотеки элементов, расположенной чуть ниже, и, собственно, области редактирования. В меню View вы имеете возможность настроить интерфейс более удобным вам образом, например, переместить библиотеку элементов в левую или правую сторону экрана или вообще скрыть ее для увеличения пространства. По умолчанию все элементы отображаются в несколько небрежной манере, словно нарисованные от руки. Если вам это не нравится, то вы можете включить обычное начертание здесь же, в меню View.
Первым делом, вам потребуется очистить область редактирования для своего макета. Делается это выбором в меню Mockup команды Clear Mockup. Теперь можно добавлять нужные вам элементы. Для этого находим в каталоге требуемый элемент интерфейса и перетаскиваем его в нужное место. Готовых элементов имеется огромное количество и все они разбиты на тематические категории, так что найти нужное не составляет никакого труда. Тем более, что для быстрого поиска вы можете пользоваться встроенной строкой поиска, куда достаточно просто ввести первые буквы названия.
Создание прототипа сайта в Balsamiq Mockups
Таким образом, мы можем разместить на листе окна приложений, простые фигуры, текстовые блоки, таблицы, картинки, кнопки, стрелки и многое другое. Любой из элементов можно отредактировать. Для этого щелкаем по нему мышкой и рядом появляется всплывающее окно настройки его свойств. Например, для иконки, мы можем выбрать ее вид, размер, цвет, задать подпись, поднять выше или ниже других элементов, сгруппировать с другими объектами и так далее.
Окно свойств объекта Balsamiq Mockups
После окончания работы над макетом вы можете сохранить его в форматах PNG или PDF, что может вам пригодиться для печати или при необходимости демонстрации своего проекта на устройствах, не имеющих доступа к сети. Кроме этого, есть возможность экспортировать проект в виде XML-файла. Это даст вам возможность открыть его позднее в Balsamiq Mockups и продолжить редактирование, а также переслать макет по почте коллегам для внесения правок. Для сохранения в этом формате вам необходимо выбрать пункт Export Mpckup XML в меню Mockup. После этого разметка вашего макета будет скопирована в буфер обмена, откуда ее можно вставить в любой текстовый файл или почтовое сообщение.
В настоящее время Balsamiq Mockups имеет несколько вариантов использования. Во-первых, это бесплатное веб-приложение, функциональность которого мы рассмотрели в этой статье. Во-вторых, есть возможность загрузить платное настольное приложение, обладающее целым рядом дополнительных возможностей. Однако для выполнения несложных и быстрых эскизов вполне достаточно и бесплатной версии сервиса.
Веб-сервис Balsamiq Mockups оставляет хорошее впечатление продуманностью своей работы и отличной функциональностью. Не даром это приложение завоевало широкое признание среди разработчиков программных интерфейсов и веб-дизайнеров, которые выкладывают в сеть дополнительные объекты и готовые макеты, которые вы можете использовать в своих проектах. Многие из них вы найдете на этой странице.
Balsamiq Mockups. Подробно об инструменте
Я решила присоединиться к хорошей традиции analyst.by писать серии статей и, т.к. мне по душе минимализм, я решила посвятить свою личную мини-серию средству прототипирования Balsamiq Mockups. Когда-то я уже делала краткий обзор, а теперь хочу рассказать о самом инструменте подробнее, о тех возможностях, которые он предоставляет, о том, как с ним работать, а также о сопутствующих сервисах и плагинах.
Общие сведения Для начала давайте разберемся с терминологией, чтобы избежать путаницы при обсуждении инструмента.
В обзоре мы будем использовать следующую распространенную классификацию:
Из-за того, что макеты и прототипы требуют гораздо больше усилий и времени на свою подготовку, они часто создаются тогда, когда основные идеи и каркасы обсуждены и согласованы. Таким образом, каркасы создаются первыми, на этом этапе продумывается концепция взаимодействия пользователя со страницей или формой, поэтому этот этап очень важен. Дальнейшие же действия определяется нуждами проекта. Причем каркасы в свою очередь принято делить на:
— каркасы низкой степени детализации (low-fidelity wireframes) – очень простые, содержащие только основные элементы формы (часто в виде базовых фигур, символизирующих элементы управления) или функциональные блоки и подписи к ним,
— и высокой степени детализации (high-fidelity wireframes) – уже более подробные и проработанные, содержащие чуть больше деталей.
Согласно приведенной выше классификации есть инструменты, помогающие в создании каркасов, есть средства для макетов, есть подходящие для прототипирования, а есть инструменты, позволяющие делать несколько вещей сразу. Balsamiq Mockups относится к инструментам для создания каркасов.
Безусловно, самым логичным инструментом для создания каркасов можно назвать обычную бумагу с ручкой. Каркасы в виде набросков на листе бумаги позволяют сфокусироваться на главном – функциональности страницы, не отвлекаясь пока на второстепенные детали. Однако для тех из нас, кого природа обделила художественными талантами, улыбчивые люди с фотографии ниже создали инструмент Balsamiq Mockups. 
Основным его достоинством они считают высокую скорость создания каркаса, что позволяет генерировать идеи, быстро воплощать их, обсуждать с коллегами и повторять этот цикл несколько раз для достижения отличного результата.
Приложение
Экран приложения включает следующее:
· Меню (включает стандартные пункты File, View, Edit и Help)
· Быстрый поиск и добавление элементов в рабочую область (Quick Add)
· Панель действий для редактирования (Copy, Paste, Duplicate, Groupи т.д.).
· Библиотеку элементов пользовательского интерфейса, сгруппированных по категориям (All, Big, Buttons, Containers, Layout и т.д.). Для экономии места и снижения визуального шума библиотеку можно прятать и пользоваться только быстрым добавлением.
· Собственно рабочую область, на которой располагаются добавленные элементы управления.
Функциональные особенности приложения:
1. Чтобы в полной мере обеспечить высокую скорость прототипирования приложение предоставляет в своей библиотеке элементов управления не только базовые, но также и часто встречающиеся производные от базовых (например, панель ссылок, набор флаговых кнопок, окно браузера). 
Помимо этого существует сообщество Mockups to Go, которое предоставляет много готовых решений, сгруппированных удобным для поиска образом. Эти решения можно использовать как для вдохновения, так и для экономии собственного времени.
2. Изменить свойства добавленного элемента управления или группы можно в инспекторе компонента. 
3. Текстовые элементы поддерживают вики-форматирование. 
4. Для выравнивания элементов каркаса при их перемещении используется привязка к сетке из направляющих.
5. Приложение поддерживает широкий набор клавиш быстрого доступа. Хорошую подсказку по ним можно найти тут.
6. Для презентации идей коллегам или заказчикам можно использовать специальный полноэкранный режим. 
7. А работать с несколькими каркасами одновременно, возможно переключая вкладки снизу экрана. 
Распространение
Операционные системы
Приложение поддерживает все распространенные операционные системы:
Оценка (по субъективной шкале): 5 / 5.
Заключение
Несмотря на кажущуюся простоту приложения, свою поставленную задачу (быстрое и удобное создание и обсуждение каркасов) оно выполняет отлично. Приложение работает стабильно и на действия пользователя реагирует ожидаемым образом, что, несомненно, является признаком грамотно проработанного пользовательского интерфейса.
В следующей статье мы рассмотрим вопросы более сложной работы с приложением с использованием примеров: добавление интерактивности, работа с импортом и экспортом, активами (assets) и проектами. А также коснемся сопутствующих продуктов: myBalsamiq и плагинов.
4 этапа создания лендинга в Balsamiq Mockups
Хочешь сделать посадочную страницу своими руками? «Потому что никто не поймет как я хочу!» Хорошо, тогда в этой статье ты узнаешь, как сделать макет landing page всего за один вечер, и научишься максимально доступно объяснять любому дизайнеру свои задумки с первого раза.
Для этого понадобится карта персонажей твоей целевой аудитории, программа Balsamiq Mockups и твоя свежая голова. Ну что ж, начнем!
Итак, этапы создания макета посадочной страницы:
Несложно? Совсем! Это как собрать конструктор лего: есть гора с деталями — основные строительные, мелкие добавочные, готовые конструкции, специфичные детальки, подходящие только для какого-то определенного элемента. И у каждой детали есть различные критерии. Так же к любому лего набору прилагался «проспект»-инструкция, демонстрирующая в каком порядке собирать детали, чтобы получить, предположим, виллу у моря. Данная статья — это тот самый «проспект», который поможет структурировать все данные о твоем продукте и после — составить макет посадочной страницы.
Эта статья тебе точно поможет, если:
Я собрала воедино все свои ошибки и типичные ошибки разработчиков посадочных страниц, и теперь делюсь с тобой всей этой инфой. Во время обучения свои первые макеты я создавала по 2-3 дня. А у тебя получится за один вечер. Не трать время впустую, делай всё сразу так, как должно быть.
Хватит лирики, переходим к четким действиям.
Шаг 1. Создание блоков в прототипе макета
Программа Balsamiq Mockups (или просто — Бальзамик) мне при первом открытии показалась дикой с огромным множеством инструментов («Какие из них нужны? Как вставить картинку? Как обозначить, что это будет иконка? Где вообще находится эта кнопка со «скругленными» краями?!»). Поэтому первый мой макет состоял из квадратиков и подписей. Потом я мучительно долго объясняла дизайнеру, что где должно находиться и как всё должно смотреться… комшар, одним словом. Теперь учись как надо.
Открываешь Balsamiq Mockups, нажимаешь Project — New Mockup, создаешь новый мокап-файл. Перед тобой чистый лист. Поздравляю, ты видишь первый лист своего макета.
В прототипе макета должны быть:
1. Указанная область посадочной страницы
Нужна для того, чтобы визуально воспринимать рамки, в которых ты работаешь, как бы создавать себе представление того, что посетитель твоей страницы будет видеть у себя в окошке. Так же эти рамки помогут дизайнеру приобрести более четкое представление об области, в которой он должен работать. Область обозначается при помощи инструмента Browser.
*После создания рабочей области посадочной страницы я советую тебе скопировать получившийся мокап-файл в качестве 3х экземпляров (нажимаешь правой кнопкой мышки на мокап-файл и выбираешь функцию «Clone»).
2. Хэдер с пространственным расположением элементов
В хэдере *(верхняя часть страницы) тебе нужно будет указать 4 обязательных элемента: логотип, дескрипт логотипа, триггер-яйцо (содержит самое сильное преимущество компании с цифрах), номер телефона с указанием времени приема звонков. Все элементы оформляются при помощи инструмента Text.
*Если твой макет получится «ох какой» длинный, то допускается добавление быстрого меню при помощи инструмента Link Bar;
Элементы первого экрана
3. Первый экран с оффером
Выделяй область первого экрана, чтобы видеть на нем перегруженность. Дизайнеру же легче будет оценить количество свободного пространства. Так же пропиши заранее заготовленные шаблоны:
1 экран: оффер+триггеры+СТА
4. Блоки с необходимой для посетителя информацией
Далее – проще. Ты создаешь блоки при помощи 3 инструментов: Text, Image и Icon. Какие блоки у тебя должны быть? Ответ на этот вопрос варьируется в зависимости от той информации, которая нужна твоей целевой аудитории. Но существует несколько стандартных блоков, которые обязательно должны быть на посадочной странице:
Вышеперечисленные блоки создаются при помощи инструментов Text, Image и Icon. Ву а ля! Прототип макета готов.
Шаг 2. Наполнение блоков содержимым
Готовая структура макета перед твоими глазами. Теперь заполняем её информацией.
Открываешь карту персонажей целевой аудитории и прописываешь на каждый критерий по 3 «закрытия» (3 характеристики товара, которые бы удовлетворяли вопрос посетителя «почему купить?»).
Для этого необходимо описать свойства твоего продукта по нескольким критериям. Критерии – это интересная для твоего покупателя информация, необходимая для совершения покупки (цена, условия доставки, состав продукта, качественные характеристики продукта).
Поэтому в карте персонажей целевой аудитории для каждого критерия ты должен дописать хотя бы по 3 свойства продукта, удовлетворяющих данным критериям выбора.
После – вся необходимая информация будет у тебя как на ладони. Осталось перенести данные с mind-карты в блоки макета и сформулировать оффер. Считай, макет посадочной страницы почти готов.
Шаг 3. Логическая структуризация блоков
Теперь приступаем к самому противоречивому моменту: к процессу построения логической структуры макета. Тебе необходимо расположить блоки в такой последовательности, чтобы каждый последующий блок являлся логическим продолжением предыдущего или его пояснением. К примеру, по стандарту, второй блок должен демонстрировать товар «лицом», а последующий блок – раскрывать выгоды, которые данный продукт принесет пользователю. Но в некоторых нишах (B2C, где чек достаточно высок, а качество продукта определяется только после того, как покупатель использовал его, например Туризм, Организация праздников, Инфо-бизнес) место третьего блока могут заполнять кейсы с отзывами (как социальное доказательство качества товара), в других нишах (B2B сферы, например Доставка товаров, Аренда офисов) – в третьем блоке может быть Блок-осуществление процесса покупки.
Угадать верное (читай: самое эффективное) расположение блоков невозможно, даже если ты выстроишь блоки в соответствие с логической структурой. Но получить более ясную картину поведения посетителя можно при помощи тестирования лендинга или путем анализа данных в Яндекс Метрике/Google Analytics.
Шаг 4. Оформление блоков посадочной страницы с учетом юзабилити и эргономики
И наконец – последний рывок перед тем, чтобы отправить макет дизайнеру. Получившийся проект landing page необходимо «причесать» в соответствие с правилами эргономики и юзабилити (в данной статье ты можешь ознакомиться с ними).
На этом этапе тебе надо будет оценить удобство навигации посетителя посадочной страницы по странице. Для этого ты можешь провести простое тестирование: распечатываешь макет и несешь 10 знакомым (В программе есть функция экспорта проекта в PNG-файлы).
экспорт проекта в PNG-файл
Вот теперь ты точно готов отдавать макет на дизайн. Сохраняй проект своего landing page, экспортируй его в PNG-формат и отправляй исполнителю. На все вопросы дизайнера «А как должен выглядеть этот блок?», ты можешь гордо отвечать: «Так, как я указал в макете». И никаких больше правок по 3 раза и траты своих нервов на донесение авторских идей – дизайн ленда будет готов уже через несколько дней.
Заключение:
Итак, в этой статье ты узнал 4 основных этапа создания макета посадочной страницы:
1. Создание блоков в прототипе макета. Можно разделить на 4 основных шага:
a) Указанная область landing page;
b) Хэдер с пространственным расположением элементов;
c) Первый экран с оффером;
d) Блоки с необходимой для посетителя информацией;
2. Наполнение блоков содержимым.
Доработка карты персонажей: выписать по 3 свойства продукта, закрывающие критерии покупки для твоего покупателя (цена, условия доставки, состав продукта, качественные характеристики продукта);
3. Логическая структуризация блоков.
Расположить блоки в последовательности, где каждый последующий блок является логическим продолжением или пояснением предыдущего блока.
4. Оформление блоков с учетом юзабилити и эргономики.
Оформить получившийся макет в соответствие с правилами эргономики и юзабилити. Сократить длину ленда за счет структуризации блоков (примеры реструктуризации тут).
Теперь ты полноценный лендостроитель – поздравляю! Можешь приходить работать к нам в агентство)
Продуктивного тебе настроения и высоких конверсий!
Balsamiq
Sketch your User Interface ideas and get everyone on the same page. It makes work fun!
Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.
It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process.
Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and discover the best solutions.
See Balsamiq Wireframes in Action
Sophisticated Simplicity: we have all the features you need, and none of the ones you don’t.
We’re great for non-technical folks: you will be able to master our tool in minutes!
Zero Learning Curve, Power When You Need It
UI Components & Icons
Hundreds of built-in and community-generated UI controls and icons.
Drag & Drop Simplicity
Assemble elements with the confidence of knowing they can be implemented.
Export to PNG or PDF
Share or present wireframes on the web, via images, or via interactive PDFs.
Optimized for Speed
Wireframe at the speed of thought with Quick Add and many keyboards shortcuts.
Re-usable Symbols
Create templates, masters, and re-usable and customizeable component libraries.
Interactive Prototypes
Linking lets you generate simple prototypes for demos or usability testing.
Designed for Collaboration
SOFTWARE TEAMS come together around the right design using Balsamiq: UX Designers love the familiar keyboard shortcuts. Product Managers have an accessible tool to share their ideas with. Developers love how fast, powerful and geeky it is.
CONSULTANTS love it: bring it to client meetings and design their requirements in real time. Business owners use it themselves to pitch ideas and get quotes. Bye bye feature creep!
Everyone’s First UX Tool
Have an idea for a new product or website? Grab Balsamiq and flesh it out! It will help save a lot of time when talking to designers and developers.
Balsamiq is the first tool out of your UX toolbox: faster than the sketchbook, and almost as fun to use. It forces you to focus on IA — the rest can come later.
Working on a side project, or have to act designer for a bit? Start with Balsamiq! It’s MUCH faster than doing it directly in code, trust us.
Bring Balsamiq to your first client meeting and capture out requirements right there and then, in real time. You’ll save a lot of frustration down the line.
A meeting with a customer sparked an idea for a great new feature? Sketch it in Balsamiq before bringing it to the team. A picture is worth 1000 words.
Balsamiq is the perfect first UX tool for students or anyone interested in getting into UX. It’s by far the most approachable, and takes you 80% there to pro.
Are you totally new to UI design? We’ll teach you how to do it! It’s so fun.
Our Sweet Spot: The Ideation Phase
Balsamiq really shines during the early stages of UI design.
Balsamiq offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and share it with a click!
Balsamiq is zenware, meaning that it helps you get in the zone, and stay there.
Our aim is for you to forget our software is there at all.
Get Honest Feedback
Improve your designs by getting immediate and meaningful feedback.
Our sketchy style help focus the conversation on content and interaction, not minute details.
Sketch-Style Controls
They look like sketches on purpose! It encourages brainstorming.
Which Version of Balsamiq Is Right for Me?
We make one main wireframing editor, which is offered via different platforms, each sold separately.
By picking one version over the other, you’re not missing out on any special features.
All versions come with a free 30-day trial, so try them and see what fits you best!
Cloud
Desktop
Google Drive
We also integrate with Atlassian Confluence and Jira.
Enjoyed by Hundreds of Thousands of Customers
We are the undisputed leader in the UI wireframing market. Companies that care about usability use Balsamiq Wireframes.
Ready to Try It Out? Start a Free Trial Now
Start using with full-functionality right away. No credit card or payment needed to start your trial.
We also integrate with Google Drive, Atlassian Confluence and Jira.