Balsamiq wireframes что это

Wireframes в разработке: особенности и преимущества

Wireframe — это карта экранов, которая показывает навигацию между ними и содержит минимальную детализацию.

Wireframes имеют ограниченные визуальные характеристики, поскольку большинство элементов дизайна (например, изображения, видео, цвета, реальный текст и т. д.) не включены в этот инструмент. Вместо конкретных элементов дизайнеры используют заполнители. Например, квадрат с крестиком представляет изображение. Этот прием имеет важное значение — заполнители объектов и серая палитра помогают сосредоточиться на макете и структуре страницы, а не на визуальных аспектах дизайна.

Иногда заказчики могут не понимать, что значит «главное изображение», «интеграция с картой Google», «фильтрация продуктов» и сотни других терминов. Вайрфрейминг конкретных функций дает клиенту четкую информацию о том, как они будут работать, где будут размещаться и насколько они могут быть полезны на самом деле.

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

Преимущества вайрфреймов

Одним из больших преимуществ wireframe является то, что он обеспечивает раннюю визуализацию, которую можно использовать для обзора с клиентом.

С практической точки зрения каркасы обеспечивают правильное размещение содержимого и функций страницы в соответствии с потребностями пользователей и бизнеса. И по мере продвижения проекта их можно использовать в качестве полезного диалога внутри команды для согласования видения и масштабов проекта.

Wireframe и прототипы: не одно и то же

Многие используют термины wireframe и прототип как синонимы, но между ними есть существенные различия: они выглядят по-разному, они сообщают разные вещи и служат разным целям.

Прототипирование — это процесс создания интерактивного опыта. Прототип представляет собой конечный продукт, включая моделирование взаимодействия с пользовательским интерфейсом.

В отличие от wireframes, которые часто выглядят одинаково, прототипы могут значительно различаться. Это могут быть как и простые артефакты, отражающие элементарные взаимодействия, так и кликабельные инструменты, которые выглядят и работают почти как настоящий продукт.

Прототипы служат мостом к реальному продукту. Цель прототипирования показать связь экранов посредством пользовательского опыта и их назначение. Это делает его удобным для тестирования с реальными пользователями — прототипы позволяют участникам взаимодействовать с дизайном так же, как они взаимодействуют с готовым продуктом.

Как использовать Wireframes в разработке

Можно предложить сделать wireframes на этапе дискавери фазы, чтобы проработать экраны мобильного или веб-приложения.

Тогда в wireframes описывается информация о целях экрана и схематично рисуются те элементы, которые планируется там расположить. По собственному опыту скажу, что хорошо работать над этим инструментом параллельно с BPMN-диаграммой. После того как wireframes прорисованы и согласованы с заказчиком, а диаграмма проработана, эти артефакты объединяем в один. Такой ход дает возможность увидеть, каких экранов не хватает на диаграмме процессов, или какие процессы мы не учли при проработке BPMN.

Так при помощи wireframes и BPMN-диаграмм обеспечивается целостность бизнес-процессов будущего приложения. Также вайрфреймы значительно экономят время и деньги на этапе тестирования и внесения исправлений на более поздних этапах проекта.

• discovery
• wireframe
• wireframes
• wireframing
• прототипирование
• интерфейсы
• прототипирование интерфейсов
• разработка приложений
• разработка
• разработка по

• Веб-дизайн
• Веб-разработка
• Разработка мобильных приложений
• Прототипирование

Создание прототипов

На рисунке — Balsamiq Mockups v 3.0.8 (2008 — 2015 г., апрель). Интерфейс на англ. языке. Вес 3,74 Мб. Цена 89 долл.
Работает в системах Windows, Mac OS X, Android, iOS.
Есть онлайн-версия программы с оплатой 12 долларов в месяц.
Автор: Balsamiq S.R.L..

Последние версии программы:

Balsamiq Mockups v 3.5.9 (2017 г). Цена 89 долл.
.
Balsamiq Mockups v 4.4.4 (2022 г, январь). Оплата использования онлайн-версий — от 9 до 199 долл. в месяц (90 — 1990 долл. в год). Цена desktop-версии — 89 долл.
.
Balsamiq Wireframes v 4.7.2 (2023 г, май). Вес 278 Мб. Плата за использование олайн — 9 долл. в месяц или 90 долл. в год. Цена Desktop -версии 129 долл. Работает в Windows10, Mac OS X

Назначение программы — создание прототипов (макетов).

Balsamiq Mockups, в отличие от многих других программ этого направления, не создает интерактивные прототипы, т.е. программ не имеет списка поведений для объектов (например, поведения при щелчке мыши). Создаваемый макет — это просто рисунок.

Примечание: Последние версии Balsamiq Wireframes позволяют придать макету ограниченную интерактивность. Например,некоторым объектам (панелям навигации, кнопкам, изображениям, тексту) можно определить ссылки, что позволяет переходить на веб-адреса в Интернете, переходить на другие Wireframe в проекте и др..

Программа имеет множество элементов, которые можно использовать при создании макета.

Из авторской характеристики:

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

Balsamiq Mockups может быть объединен с Диском Google , Atlassian Confluence (сервис для совместной работы над проектом) и JIRA .

Создание wireframes с использованием клавиатуры.

Создайте шаблоны, главную страницу и составляющие библиотеки многократного использования.

Экспорт в PNG или PDF

Вы можете соединить макеты, чтобы создать простой опытный образец для Вашего сайта или программного приложения.

Мы думаем, что в большинстве случаев wireframes + выполняющий код намного лучше, чем prototyping.
Мы не огромные поклонники создания больших опытных образцов. Люди тратят слишком много времени для создания полностью интерактивного опытного образца, затем понимая, что некоторые особенности не могут быть реализованы на практике или им не хвататает опыта.
Разрешение Вам определять поведения и действия щелчка неизбежно превратило бы Balsamiq Mockups в намного более сложный инструмент.

Есть много быстрых и простых способов в дальнейшем определить взаимодействие в Макетах.

Мы знаем, что есть программы, которые позволяют создавать интерактивные и сложные опытные образцы (prototypes), например Axure RP (589 $) или Omnigraffle Pro (199.99 $). Вы можете заметить, что эти программы сложны в изучении.

Balsamiq Mockups решает более ограниченную задачу — создание простых макетов. Меньше особенностей означает меньше ошибок, большую простоту и меньшую стоимость. Balsamiq Mockups позволяет начать работать в дизайне UX.

Использование Balsamiq Mockups означает присоединение к растущему сообществу программистов, проектировщиков, менеджеров продукта и экспертов по удобству и простоте использования.

Некоторые из полезных ресурсов, созданных с использованием Balsamiq Mockups:

MockupsToGo — созданная пользователями коллекция готовых к использованию компонентов UI, и образцов дизайна.

Дополнительные шаблоны http://support.balsamiq.com/customer/portal/articles/1640428
Первый образец является бесплатным.

Magento Wireframes является рядом шаблонов для настольных и мобильных размещений
https://www.nublue.co.uk/blog/free-responsive-magento-wireframes/

Последнее обновление: июнь 2023 г.

О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.

Balsamiq Wireframes

Сервис для создания скетчированных макетов сайтов, мобильных приложений и других интерфейсов.

Похожие на Balsamiq Wireframes

Описание Balsamiq Wireframes

Balsamiq Wireframes — инструмент для создания неактивных прототипов интерфейсов для сайтов, мобильных и веб-приложений, и программ. Balsamiq помогает командам за несколько минут схематично изобразить внешний вид будущих проектов. В Balsamiq нельзя детально воспроизвести интерфейс приложений, что поможет не отвлекаться на ненужные элементы на стадии наброска.

Макеты в Balsamiq создаются в графическом редакторе. Редактор представляет из себя рабочую поверхность, куда из панели инструментов перетаскиваются будущие элементы макета. Элементы подразделяются на несколько категорий: кнопки, формы, контейнеры, слои, иконки, элементы, присущие iOS, Android, сайтам. Пользователи могут загружать собственные изображения, анимации и собственные иконки. Размещённые элементы при необходимости можно отредактировать: изменить размер, цвета, шрифт текста, положение и другое.

Создавать макеты в Balsamiq можно и совместно, для этого необходимо пригласить нового участника с помощью электронного или напрямую в приложение, если у него уже есть аккаунт, и выставить ему роль. Участники могут совместно работать над проектом, редактировать его, оставлять комментарии и заметки.

Особенности Balsamiq:

• Создание схематичных набросков интерфейсов сайтов, приложений и программ.
• Создание собственных шаблонов и иконок.
• Экспорт готовых макетов в PNG или PDF.
• Управление при помощи горячих клавиш.
• Перетаскивание элементов при помощи drag-and-drop.
• Интеграция с Google Диск и Jira.

Balsamiq Wireframes

Balsamiq Wireframes — это сервис для создания простых прототипов (вайрфреймов) интерфейсов для будущих сайтов, лендингов, мобильных приложений и программ. В первых 3-х версиях инструмент назывался Balsamiq Mockups, в сентябре 2017-го с выходом версии 4.0 Balsamiq Mockups переименовали в Balsamiq Wireframes, поэтому вы можете встречать оба этих названия.

Вступайте в клуб начинающих дизайнеров и получайте подарки

Содержание

1. Что такое вайрфрейм и зачем он нужен
2. Принцип работы Balsamiq
3. Возможности «Бальзамик»
4. Интерфейс Balsamiq
5. Обучающие материалы «Бальзамик»
6. Помощь и поддержка «Бальзамик»
7. Где скачать и сколько стоит Balsamiq Wireframes

Что такое вайрфрейм и зачем он нужен

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Вайрфрейм (от англ. wireframe — каркас) — это схематичное изображение, набросок пользовательского интерфейса разрабатываемого сайта. Вайрфреймы помогают представить, как и в каком порядке на экране будут располагаться блоки с информацией, кнопки и прочие элементы, а также показывают логичность этой структуры и удобство взаимодействия пользователя с интерфейсом будущего сайта. Вайрфреймы мало детализированны. Их можно рассматривать как скелет дизайн-макета, выполненный в монохромной палитре, в котором все графические элементы (изображение, текст, видео) представлены упрощенно. Это позволяет сосредоточиться именно на структуре страницы, а не на ее визуале.

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

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

Принцип работы Balsamiq

Вайрфреймы в Balsamiq Wireframes (или просто Balsamiq) создаются в графическом редакторе. Это такая рабочая поверхность, на которую из панели инструментов перетаскиваются элементы для разрабатываемого макета. Они делятся на категории: кнопки, формы, контейнеры, слои, значки, элементы, присущие iOS, Android, веб-сайтам. Можно самому загрузить фото, анимации и иконки.

По необходимости эти элементы можно исправлять: изменять размер, цвет, шрифт текста, сами надписи, положение и прочее. Обратите внимание: изначально все названия элементов и шаблонные надписи на них выполнены на английском языке. Не волнуйтесь, достаточно просто кликнуть на нужную надпись, и откроется окно, в котором всё можно переписать по-русски.

Если случится так, что один элемент при размещении в поле редактирования перекрывает другой, их легко можно расположить по слоям при помощи функций Bring to и Send to (переместить наверх или вниз). Они открываются по клику правой кнопкой мыши на нужном элементе.

Работа в Balsamiq очень проста и интуитивно понятна.

Возможности «Бальзамик»

1. Главное преимущество Balsamiq — простота и высокая скорость создания вайрфреймов. Сервис располагает широким набором горячих клавиш и функциональными элементами управления (флаговые кнопки, панель ссылок, окно браузера и др.).
2. Вайрфреймы, созданные в Balsamiq, напоминают наброски. Поэтому сразу понятно, что они являются не конечным продуктом, а только начальным шагом в создании сайта.
3. В Balsamiq есть огромный набор готовых элементов. Их можно легко перетаскивать, чтобы создавать собственные вайрфреймы.

1. Готовые макеты можно экспортировать в PNG или PDF.
2. Есть возможность работать над проектом совместно с другими сотрудниками. Участники могут редактировать вайрфреймы, делать заметки и оставлять комментарии.
3. Для презентации идей можно использовать полноэкранный режим.
4. Переключение вкладок внизу экрана дает возможность работать с несколькими вайрфреймами одновременно.
5. Перетаскивать элементы можно с помощью drag-and-drop.
6. Программа Balsamiq Wireframes интегрируется с сервисами Google Drive, Jira, Confluence.
7. В 2020 году запущена версия Balsamiq Wireframes для десктопа, которая сейчас успешно работает и помогает тысячам дизайнеров по всему миру.

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

Интерфейс Balsamiq

После завершения установки и запуска Balsamiq мы увидим такой экран. Расположение элементов может немного отличаться в зависимости от того, какую версию вы установили, какое у вас разрешение экрана и пользуетесь ли вы пробной версией или сразу приобрели основную.

Экран состоит из нескольких основных элементов:

1. Меню. В него включены пункты Project, Edit, View, Windows, Help.
2. QuickAdd. Позволяет быстро найти и добавить элементы (Arrow, Button Bar, Block of Text, App Bar и другие, в зависимости от выбранного элемента библиотеки элементов).
3. Панель действий. С ее помощью макет можно редактировать (кнопки «Отменить», «Копировать», «Вырезать», «Изменить масштаб» и другие).
4. UI Library (Библиотека элементов). Разделены по категориям (панель с кнопками All, Assets, Big, Buttons, Common, Forms, Icons и другие). Чтобы получить представление о доступных элементах экрана, прокрутите раздел All (Все) в горизонтальном направлении.
5. Рабочая область. Пространство в центре экрана, где вы будете создавать прототип.

В правом верхнем углу красным выделен раздел переключения между сведениями о проекте и информацией об основных элементах управления.

ИСКРА —
неделя знакомства
с дизайн-профессиями

Какие они — востребованные в IT дизайн-профессии? Знакомьтесь с ними в течение недели, выбирайте подходящую и получайте полезные подарки каждый день.

разжечь искру

Поговорим подробней об основных элементах экрана приложения в Balsamiq.

All (Все). Включает в себя все элементы интерфейса, присутствующие в Balsamiq. Воспользуйтесь горизонтальной прокруткой, чтобы изучить их детально.

Assets (Активы). Это то, что загрузил сам пользователь. Рекомендуется создавать папку с активами для каждого проекта.

Big (Большой) — в этой категории расположены те элементы экрана, которые достаточно крупны по размеру или внешнему виду. В этой категории можно увидеть такие элементы, как заполнители, окно браузера, диаграммы, окна iPad, iPhone.

Buttons (Кнопки) — включает все элементы управления кнопками, используемые в мобильных / веб- вайрфреймах. Примером будет выпадающий список, флажок и другие.

Common (Общие) — это разные формы или элементы управления, которые используются для обозначения самых распространенных взаимодействий.

Containers (Контейнеры). Как следует из названия, они включают несколько видов окон и табов, круглые и прямоугольные боксы и др.

Forms (Формы). Здесь находятся элементы, связанные с формами: кнопки, выпадающие списки, текст, чек-боксы и др.

Icons (Значки). Этот элемент может понадобиться, если нужно выделить значком какую-нибудь операцию. В приложении «Бальзамик» вы найдете внушительную коллекцию иконок. В любой момент может потребоваться обозначить определенную операцию значком. «Бальзамик» имеет огромную коллекцию иконок.

iOS. Элементы управления пользовательского интерфейса, характерные для мобильной операционной системы Apple iOS, доступны в этой категории.

Layout (Макет) — базовый макет. Необходим, чтобы представить базовую страницу или функцию. В макет включены такие категории, как Accordian, горизонтальные и вертикальные вкладки и другие.

Markup (Разметка) потребуется, если вам нужно добавить комментарий к определенному элементу управления в вайрфрейм. Поле для комментариев доступно в данном разделе. Кроме того, выноски используются, чтобы продемонстрировать взаимосвязанность в сценариях.

Media (Мультимедиа) — в этой категории доступны звуковые и фотоэлементы для показа в вайрфрейме.

Symbols (Символы). Элементы раздела — компоненты частого использования, позволяющие сократить время, когда нужно создавать элементы, повторяющиеся неоднократно.

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

Отдельно стоит упомянуть о кнопке Help. Разработчики приложения позаботились о том, чтобы работалось в Balsamiq максимально комфортно. Поэтому, помимо стандартного функционала этого раздела, здесь вы сможете выбрать фоновую музыку и даже полистать вкусные рецепты здорового питания. А если вас вдруг настиг творческий кризис, есть раздел I Need Inspiration («Мне нужно вдохновение»).

Обучающие материалы «Бальзамик»

Официальных обучающих материалов на русском языке у Balsamiq нет. На самом сайте сервиса есть раздел Tutorials с короткими обучающими видео на английском языке. Они помогут быстро освоить нужные вам элементы. Уроки короткие и сопровождаются скриншотами или видеороликами, поэтому воспринимать их довольно легко.

Также компания ведет свой YouTube-канал с большим количеством уроков. Язык канала тоже английский, но есть возможность смотреть ролики с русскими субтитрами, которые включаются в интерфейсе самого YouTube. Некоторые русскоязычные специалисты также создают подробные видеоинструкции по работе с сервисом.

Помощь и поддержка «Бальзамик»

Компанию Balsamiq Wireframes выделяет высокий уровень службы поддержки пользователей. Сотрудники клиентского сервиса делают ставку на дружелюбный тон и профессионально решают любые вопросы. На странице поддержки удобная навигация по разделам. Здесь вам предложат отправить запрос на электронную почту по техническим, коммерческим вопросам и некоторым другим. Обращение можно отправить на самой странице. В тот момент, когда вы начнете писать сообщение, в соседнем окне будут появляться возможные варианты ответов. Также через этот раздел можно попасть на страницу форума, профили в соцсетях или запросить документы.

Где скачать и сколько стоит Balsamiq Wireframes

Скачивайте Balsamiq Wireframes с официального сайта. Balsamiq доступен для операционных систем Windows и Mac.

Компания предоставляет 30-дневный пробный период. Можно выбрать из трех тарифов (2 проекта, 20 проектов и 200 проектов) в зависимости от потребностей и размера вашего бизнеса.

Тариф «2 проекта» позволяет работать одновременно с двумя проектами. Стоимость тарифного плана $9/месяц или $90/год на момент написания статьи.

Самый популярный тариф «20 Проектов» подойдет для большинства пользователей — как фрилансеров, так и штатных дизайнеров компаний. За такой тариф нужно заплатить $49/месяц или $490/год, что в целом недорого, если вы делаете коммерческие проекты.

Если вы работаете с более чем 20 проектами одновременно или вам нужно хранить уже готовые проекты длительное время в базе, то лучше выбрать тариф «200 проектов». Цена тарифа $199/месяц или $1990/год. Он подходит для крупных компаний.

Каждый план включает в себя неограниченное количество вайрфреймов и неограниченное число участников, вовлеченных в проект. Кроме того, для некоторых категорий граждан сервис предоставляет специальные условия. Например, они предлагают бесплатный доступ к приложению для работы в классе, некоторым благотворительным и некоммерческим организациям. Здесь можно подробней ознакомиться с условиями и способами сэкономить при покупке сервиса.

ИСКРА —
неделя знакомства
с дизайн-профессиями

7 дней, которые разожгут в вас искру интереса
к дизайну. Получайте подарки каждый день,
знакомьтесь с востребованными профессиями
и выберите ту, которая подойдет именно вам.