Как я работаю с Balsamiq Mockup
Balsamiq Mockup — отличное приложения для создания мокапов. Ниже небольшой набор правил которые я для себя установил при работе с этим приложением.
Библиотека символов
Однако в нем не совсем очевидно сделана работа с библиотекой символов:
- Их нельзя использовать совместно между разными проектами;
- Нельзя легко создать специальный файл с библиотекой;
- Нельзя обновлять библиотеку так, чтобы обновлялось везде.
Последнее в принципе понятно, т.к. в этом случае не будет работать версионирование: если я поменяю символ в библиотеке, то старый макет перестанет выглядеть так, как он выглядел тогда.
При всем этом есть возможность импортировать bmml-файл с символами. Чтобы получить этот файл сначала нужно сделать Export в bmml zip формат любого проекта, в котором есть каталог символов. Дальше zip-файл нужно разархивировать.
После этого нужно создать каталог DropboxMockupsSymbol Library и внутрь поместить файл Feed Symbol Library.bmml, который взять изнутри zip-файла. Рядом с этим файлом нужно создать каталог assets в который скопировать все картинки, которые в zip-файле лежат рядом с bmml-файлом.
Теперь можно импортировать этот bmml файл в свой проект и библиотека символов окажется в этом проекте. Ее можно использовать.
Идеально если не ведется параллельная работа с несколькими проектами. Тогда при завершении очередного проекта нужно сделать экспорт и обновить библиотеку. После чего начинать работу над новым проектом с импорта библиотеки.
Если библиотека была обновлена, то при повторном импорте будет предложено выбрать какой символ обновить, а какой оставить таким какой он есть. Тем самым можно поддерживать версионирование.
Со временем чтобы действительно поддерживать версионирование я сделал git init в каталоге символов. Теперь значительно удобнее делать diff изменений как по asset-файлам, так и по самим bmml файлам.
Символы
Со временем сами символы в библиотеке тоже могут меняться. И тут возникает вопрос. Нужно ли в библиотеке хранить старые варианты символов или нужно хранить новые. Как пример есть блок справа на всю высоту. Со временем высоту блока справа мы умеьшаем и там появляется еще один блок.
Нужно ли для первого блока оставлять старое название, а версии с уменьшенной высотой давать новой название или можно просто отредактировать под свои нужды и все. Я пока решил что буду редактировать текущий символ в библиотеке. Библиотека должны быть набором актуальных символов, а не архивом всего-всего. При необходимости нужный символ можно будет восстановить из более старых макетов.
В текущей версии 3.4.x нет двух очень нужных вещей:
Символы внутри символов
Очень не хватает возможности использования символов внутри символов. То есть строить иерархию интерфейсов не получается. Как пример у меня есть чекбокс с текстом. Я хочу сделать из него символ чекбокс+текст, который просто использовать внутри других символов. Приходится делать break down символу чтобы включить его в более общий интерфейс.
Плейсхолдеры или переменные
Еще одна вещь которой очень не хватает — возможность задавать свойства. Так чтобы из символа получался настоящий контрол.
Например я задал вместо конкретного текста переменную . И в свойстве символа появилось бы поле для ввода текста. Это очень облегчило бы задачу по созданию повторяющихся элементов с немного разными свойствами. Например чтобы текст отличался и макет выглядел более реалистично.
Можно конечно сделать override свойств символа, но тогда теряется смысл — он перестает выглядеть как символ в библиотеке и обновляться. Кстати что совсем печально — установка свойства Link тоже приводит к тому что символ считается переопределенным.
Поэтому помучившись я пришел к следующему решению. Все такие переопределения я делаю слоем сверху. Немного неудобно, но в итоге возникает меньше неприятных побочных эффектов.
Очень хорошая библиотека готовых символов
Стандартная библиотека не очень большая, но есть отличный проект https://mockupstogo.mybalsamiq.com/projects в котором очень большое количество всевозможных контролов и символов.
Нашли ошибку? Выделите и нажмите Ctrl+Enter.
Источник: vorobyev.name
Четыре способа быстрой работы в 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 процесс станет ещё быстрее.
Использование “+” для добавления объектов экономит мне больше времени, чем какие-либо другие горячие клавиши, однако не лишним будет посмотреть весь список.
P. S.
Ещё для эффективной работы имеет смысл потратить пятнадцать минут на изучение деталей интерфейса Balsamiq. Любопытно, что когда проект долго экспортируется, Balsamiq занимает вас цитатами про хороший дизайн.
В этом есть ирония, потому что разобраться в интерфейсе самого Balsamiq у меня с первого раза не получилось. Например, попытайтесь угадать, что делает пиктограмма странички справа от “i” в верхней панели (см. скриншот ниже).
Правильный ответ: она изменяет содержимое правого блока.
Если вы хотите выключить Comic Sans (включен по умолчанию) и изменить внешний вид проекта на более строгий, нажмите именно на этот значок — откроются настройки проекта.
Источник: medium.com
Balsamiq
Сегодня хочу вам рассказать о сервисе, который сам совсем недавно для себя открыл. И кстати, очень рад этому. Сервис называется Balsamiq и предназначен для быстрого создания прототипов пользовательского интерфейса, всевозможных макетов и мокапов (от англ. mockup).
Начнем с того, кому может быть полезен данный сервис. Я уверен, что он просто необходим программистам, работающим с GUI, дизайнерам, вебместерам, фрилансерам, а так же тем, кто привык заказывать сайты/программы у сторонних людей, а не делать их собственными мозолистыми руками.
Иногда просто жалко становится тех же дизайнеров. У них появляется идея — она тут же реализуется в фотошопе, на который тратится час или два драгоценного времени, а в результате заказчик бракует расположение кнопочек, размер колонок или еще какую-нибудь мелочь. В результате, все на смарку, макет делается заново. Теряется время. А если сначала набросать прототип за 5 минут?
Итак, с назначение разобрались. Теперь пройдемся по описанию. Balsamiq — это онлайн сервис (кстати, можно и декстопную программу приобрести за умеренную плату), который позволяет из готового набора компонентов делать простые и понятные прототипы. При работе в редакторе, макеты получаются как бы нарисованными от руки, что придает окончательному произведению некую комичность.
В принципе, если вы когда-либо работали с растровым или векторным редактором, вы без труда разберетесь в возможностях Balsamiq. Для продвинутых даже есть возможность группировки объектов и множество настроек для каждого из элементов. Мне больше всего понравилось, что сервис отлично понимает кириллицу (в отличии от ToonDoo), а также созданные мокапы без труда можно сохранить.
Я даже создал несколько мокапов для тренировки, чтобы не быть голословным. На оба прототипа ушло 20 минут с учетом того, что я пользовался сервисом впервые.
Вот прототипчик моей ненаглядной программки Жукладочник (отдам ПРО версию за 30 баксов, налетай ) :
Ну а этот прототип вы точно должны узнать без проблем (кликабельно) :
Ну как вам? Предлагаю и вам, уважаемые читатели, создать какой-нибудь мокап с помощью Balsamiq, а лучшие работы на мой непредвзятый взгляд получат постовой из моего следующего поста.
Всегда с вами, Жук.
Обратите внимание: дизайн студия интерьеров Art Wall Painting.
Источник: 7bloggers.ru
Как сделать прототип веб-страницы: 15 лучших сервисов
Бывает, что надо быстро создать посадочную страницу или лендинг. Любой лендинг начинается с прототипа (иногда его называют макетом). Прототип — это план-схема, где указаны основные блоки и элементы страницы. Вы рисуете его, отдаете дизайнеру и верстальщику — а они создают сайт.
Простейшие прототипы можно набросать прямо в Word’е, но удобнее использовать специальные сервисы. В этой статье мы расскажем, какие сервисы подходят для прототипирования, как они работают и чем отличаются. А вы сможете буквально за полчаса сделать хороший эскиз, если потребуется.
Так может выглядеть прототип страницы
Moqups
Язык: английский
Цена: от $13 в месяц
Бесплатная версия: есть, включает 1 прототип весом до 5 Мб
Moqups — классический инструмент прототипирования, который работает в браузере. Здесь много готовых элементов: фигур, иконок, схематичных изображений. Все они детально прорисованы. Например, формы подписки выглядят, почти как на готовом сайте. А еще можно загружать свои изображения и иконки.
Так выглядит элементарный прототип в Moqups
Интерфейс простой. Слева — меню выбора элементов (фигур, текстовых блоков, кнопок и т.д.). Справа — область для настройки каждого элемента (тут можно указать размер и расположение фигуры, шрифт текста). Разобраться легко, даже если не знаете английский язык.
К работе над прототипом можно подключать коллег. Например, копирайтера и дизайнера. Все прототипы хранятся в облаке — не потеряются и будут доступны с ноутбука или смартфона.
Бесплатная версия ограничена по функционалу. Создавать эскизы можно бесплатно, но чтобы скачать их в формате PDF или PNG — надо заплатить.
Balsamiq Mockups
Язык: английский
Цена: $ 89 для локальной версии; от $ 12 в месяц в облаке; $ 5 в месяц за расширение для Google Chrome
Бесплатная версия: 30 дней во всех вариантах, полнофункциональная
Balsamiq Mockups можно установить на компьютер или открыть в браузере. Еще есть расширение Balsamiq Wireframes для Google Chrome. С расширением можно создавать эскизы сразу на Гугл Диске.
Интерфейс во всех трех версиях практически одинаковый. Настольная версия лучше подходит, если вы используете программу в одиночку, облачная — если работаете в команде и рисуете много прототипов.
В отличие от обычного Moqups, меню элементов здесь горизонтальное
и расположено сверху, а не слева
Внутри лежит очень много кнопок, форм и других элементов (в платных тарифах — более 3000). Все это нарисовано в нарочито небрежном стиле, словно от руки. Если вам не нравится такой стиль — можно отключить его и заменить более строгим. Как и Moqups, Balsamiq легко освоить.
Готовый прототип вы скачиваете в формате PNG или PDF.
Mockplus
Язык: английский
Цена: $ 199 в год или $ 399 единоразово
Бесплатная версия: 8 дней, без ограничений
Mockplus мало отличается по функционалу от от обоих «Мокапсов». Здесь много эскизных элементов (около 3000) и интуитивный интерфейс. Есть версия для мобильных устройств — под iOS и Android. Можно рисовать прототипы на ноутбуке, с планшета или Айфона.
Перед созданием эскиза вы выбираете размер в соответствии с назначением. Делайте прототип для обычной web-версии или специально под мобайл.
Можно выбрать стандартное разрешение (например, 1024х1366 для iPad Pro)
или установить нужный размер
Для всех фигур предусмотрена тонкая настройка — устанавливайте размер в пикселях, смещайте, задавайте шрифт и размер текста, группируйте отдельные элементы.
В Mockplus получаются понятные симпатичные прототипы
Можно создавать интерактивные многостраничные эскизы — с активными ссылками для перехода с одной страницы на другую.
Pidoco
Язык: английский
Цена: от $12 в месяц
Бесплатная версия: 31 день
Сервис хорош простотой. Шаблонов и элементов там немного (по сравнению с другими сервисами). Интерфейс интуитивный — в Pidoco разобраться легче, чем в любом другом сервисе. Открываете и сразу работаете. Он хорош для новичков: минималистичное меню, легкое управление, месяц бесплатного пользования.
Здесь тоже можно делать прототипы обычных веб-страниц, мобильных версий сайтов или мобильных же приложений под разные устройства
Интересно, что есть несколько уже «собранных» прототипов:
Прототип страницы поисковой выдачи Google. Возьмите его за основу —
и сделайте что-то свое
Axure
Язык: английский
Цена: от $29 в месяц либо $495 единоразово
Бесплатная версия: 30 дней, без ограничений
Самый известный сервис для прототипирования. В Axure можно делать прототипы и блок-схемы, прокладывать маршрут пользователей по сайту и прорабатывать разные варианты одной и той же страницы. И даже создавать интерактивный многостраничный эскиз для целого сайта (с работающими внутренними ссылками на другие страницы).
Axure подходит для продвинутых пользователей. Им пользуются UI-дизайнеры и проектировщики интерфейсов. У него самый богатый функционал, но и стоит сервис дороже прочих.
Начало работы с Axure
Интерфейс насыщенный: много кнопок и функциональных областей, выглядит это загроможденно. За пять минут не разберешься. Но в целом сервис не слишком сложный.
WireframeSketcher
Язык: английский
Цена: $ 99 единоразово
Бесплатная версия: 14 дней, без ограничений
Разработчики позиционируют WireframeSketcher как инструмент для профессионалов. Здесь можно сделать прототип сайта или мобильного приложения. Если нужно — создавайте или загружайте собственные шаблоны, значки, метки, картинки и другие элементы. Стандартных иконок более 2000.
Слева — панель настройки отдельных элементов, справа — склад этих элементов
Помимо Windows и Mac, сервис работает на операционной системе Linux (в отличие от большинства других). Есть режимы скетч — «набросок от руки» — и обычный. Можно делать интерактивные прототипы на несколько страниц (для комплексных сайтов).
Из минусов — «тяжелый», визуально устаревший интерфейс. К нему надо привыкать.
Ninjamock
Язык: английский
Цена: от $10 в месяц (либо бесплатно, но эскизы будут видны другим пользователям)
Бесплатная версия: есть
Сервис интересен тем, что платная и бесплатная версии одинаково функциональны. Но в бесплатной версии ваши проекты общедоступны: их видят все другие пользователи. Если это вас не смущает, и платить не хочется — Ninjamock однозначно ваш выбор.
Рабочая область Ninjamock
Освоиться можно за пару минут. Все элементы расположены в левой части, в основном меню ничего лишнего. Выбирайте нужную фигуру или текстовое поле, перетаскивайте мышкой и изменяйте, как захочется. Все это — в том же стиле «набросок от руки».
Ninjamock работает только в браузере — десктопной версии нет.
PowerMockup
Язык: английский
Цена: от $60 (единоразово)
Бесплатная версия: есть, ограничена по функционалу
Этот сервис расширяет возможности стандартного PowerPoint (из пакета Microsoft Office). Устанавливаете — и в PowerPoint появляется вкладка PowerMockup.
Решение интересное, но пробная версия почти бесполезна. Там очень мало доступных элементов прототипа. Чтобы пользоваться сервисом полноценно, надо заплатить 60 долларов.
Iplotz
Язык: английский
Цена: от $15 в месяц
Бесплатная версия: есть
У Iplotz есть полноценная бесплатная версия для Windows, Mac и мобильных устройств на Android. Ограничения небольшие: можно работать только с одним проектом (максимум на 5 страниц-прототипов) и нельзя подключать к работе других людей. Если вам нужно просто набросать схему странички, это не помешает.
Рабочая область Iplotz
Фигур и иконок мало — всего несколько сотен. Создать детализированный красивый прототип не получится. Но если вы не дизайнер, много красивостей вам и не нужно.
Выгрузить эскиз можно в PNG, PDF или HTML.
Другие сервисы
Если ни один из сервисов вам не понравился — попробуйте эти:
- Gomockingbird.com — приятный несложный сервис по цене от $12 в месяц. Пробный период — 6 дней.
- Mockflow.com — еще один простой редактор. Стоит от $14 в месяц, пробный период — 14 дней.
- Mockupbuilder.com — ничего необычного: большой набор элементов, легкое управление, возможность совместной работы. Зато стоит недорого — от $7 в месяц. Бесплатно — в течение 14 дней.
- Marvelapp.com — интересен тем, что есть шаблоны для прототипов на любые устройства — включая «умные часы». Есть бесплатная версия, но скачивать эскизы можно только в платной — она стоит от $14 в месяц.
Что лучше?
У всех сервисов много общего: готовые наборы шаблонов, многопользовательский режим. Все работают в браузере, некоторые — в виде отдельной программы на ПК. Все — только на английском, и почти все — платные. Это минус. Зато у большинства предусмотрен пробный период сроком 14-30 дней — это плюс.
- если для вас важнее бесплатная версия — попробуйте Ninjamock и Iplotz ;
- наиболее сбалансированные по возможностям, удобству и цене сервисы — Pidoco , Moqups , Balsamiq Mockups , Mockplus ;
- для профессиональной работы лучше подойдут Axure и WireframeSketcher .
Источник: lead-academy.ru
Balsamiq Wireframes
Быстрое решение для создания и совместной работы над вайрфреймами, прототипами и мокапами с системой контроля версий и возможностью оперативного проведения юзабилити-тестирования.
Контакты
Balsamiq Studios
Стоимость
Стоимость Balsamiq Wireframes начинается от 89$ единоразово. Есть бесплатная версия.
Характеристики
Стартовая стоимость
89$ единоразово
Бесплатная версия
Пробный период
Операционные системы
Cloud, SaaS, Web
Обучение
Документация
Персонально
Поддержка
Рабочее время
Возможности
Создание прототипов
UI прототипирование
UX прототипирование
Перетаскивание
Проверка удобства использования
Создание предварительной версии ПО
Сотрудничество
Управление версиями
Системы UX (User Experience)
Для веб-сайтов
Для мобильных устройств
Запись активности экрана
Исследование поведения пользователей
Немодерируемое тестирование
Пользовательский путь
Проверка удобства использования
Разработка прототипов
Тепловая карта активности
Прототипирование
Журнал изменений
Захват экрана
Инструменты для презентаций
Интерактивные элементы
Интерфейс рабочего стола
Мобильный интерфейс
Перетаскивание
Привязка страницы
Создание каркаса
Создание макета
Создание прототипа
Сотрудничество
Управление обратной связью
Программы для UX-дизайна
Библиотека элементов
Журнал изменений
Импорт дизайна
Интерактивные элементы
Мобильный интерфейс
Перетаскивание
Создание макета
Создание прототипа
Сотрудничество
Управление обратной связью
Программы для веб-дизайна
UI прототипирование
UX прототипирование
Библиотека элементов
Для мобильных устройств
Журнал изменений
Создание макета
Сотрудничество
Выберите самые важные функции
Бесплатная консультация по подбору ПО от наших специалистов
Бесплатная консультация
Заполните небольшой опрос и наши специалисты подберут для вас ПО
Подобрать ПО
Аналоги Balsamiq Wireframes
Web Master
от WebMaster
Облачный конструктор прототипов сайтов с функцией краулинга и визуализации чужих сайтов.
Figma
Облачная или он-премис (on-premise) платформа для разработки дизайнов и совместной работы над прототипами.
Draftium
от JETIMPEX
Draftium — это инструмент для создания каркаса, позволяющий визуализировать идею сайта за 15-30 минут и собрать отзывы в.
Adobe XD
On-premise решение для тестирования гипотез, создания прототипы и мокапы и совместной работы над ними.
HotGloo
от HotGloo
HotGloo — это UX, инструмент для создания прототипов, разработанный для создания каркасов. Есть функция совместной работ.
Moqups
от Evercoder Software
Онлайн приложение для совместной работы над визуализацией данных с помощью досок, диаграмм и тп.
Cacoo
Простой и эффективный онлайн инструмент для совместной работы над картами сайтов, блок-схемами, вайрфреймами, прототипам.
Lucidchart
от Lucid Software
Онлайн инструмент для построения схем и составления диаграм, а также совместной работы над ними.
Mockingbird
от Some Character
Онлайн решение для создания, предпросмотра, расшаривания и совместной работы над прототипами и мокапами веб-сайтов и при.
Популярные сравнения с Balsamiq Wireframes
от Balsamiq Studios
Популярные сравнения с Balsamiq Wireframes
от Balsamiq Studios
от JETIMPEX
Draftium — это инструмент для создания каркаса, позволяющий визуализировать идею сайта за 15-30 минут и собрать отзывы в одном месте.
On-premise решение для тестирования гипотез, создания прототипы и мокапы и совместной работы над ними.
от Evercoder Software
Онлайн приложение для совместной работы над визуализацией данных с помощью досок, диаграмм и тп.
от WebMaster
Облачный конструктор прототипов сайтов с функцией краулинга и визуализации чужих сайтов.
от InVision
InVision- это платформа, которая предоставляет все необходимые инструменты для создания цифровых технологий, дизайна продуктов, приложений.
от TED Technology
Решение позволяет быстро развертывать staging-окружение для тестирования прототипов.
от Marvel Prototyping
Решение для прототипирования веб и мобильных продуктов без навыков программирования.
Облачная или он-премис (on-premise) платформа для разработки дизайнов и совместной работы над прототипами.
Balsamiq Wireframes с Draftium
Balsamiq Wireframes с Adobe XD
Balsamiq Wireframes с Moqups
Balsamiq Wireframes с Web Master
Balsamiq Wireframes с InVision
Balsamiq Wireframes с Release
Balsamiq Wireframes с Marvel
Balsamiq Wireframes с Figma
Отзывы Balsamiq Wireframes
Отзывов ещё нет — ваш может стать первым.
Смежные категории к Создание прототипов
Сравнить 0 продуктов категории Создание прототипов
О компании
- Наша история
- Юридические документы
Пользователям
115419, г.Москва, ул.Шаболовка, д.34, стр.5
Все сведения, содержащиеся на страницах сайта (информационные материалы, каталоги, статьи и пр.), носят ознакомительный характер. Информация не является исчерпывающей. Информация на сайте не является публичной офертой, определяемой положениями Статьи 437 Гражданского кодекса РФ. Все права интеллектуальной собственности принадлежат компаниям — производителям программного обеспечения, как и товарные знаки и логотипы. Все ссылки на дистрибутивы, а так же выложенные статьи, товарные знаки и логотипы носят в себе только ознакомительный характер и не претендуют на интеллектуальную собственность, а так же ее нарушение
Источник: picktech.ru