Balsamiq wireframes что это
Balsamiq
A wireframe is a schematic or blueprint that is useful for helping you, your programmers and designers think and communicate about the structure of the software or website you’re building.
In this article:
What are wireframes all about?
The designs you received are called wireframes (sometimes called wires, mockups, or mocks).
A wireframe is a schematic, a blueprint, useful to help you and your programmers and designers think and communicate about the structure of the software or website you’re building.
Why use wireframes?
The same screen can be built in a lot of different ways, but only a few of them will get your message across correctly and result in an easy-to-use software or website. Nailing down a good interface structure is possibly the most important part of designing software.
Doing this work now, before any code is written and before the visual design is finalized, will save you lots of time and painful adjustment work later. For more information about why people choose to wireframe, read about The Two Phases of Wireframing, or watch our detailed Wireframing for Newbies video or the quick summary below.
Summary:
Why do wireframes look the way they do?
Wireframes typically have an intentional low-fidelity look and feel to them, for the following reasons.
1. Wireframes make it clear that this is not the final design
No one could mistake a wireframe for the final look and feel of your application. Low-fidelity and few colors force you to focus on structure over details. There will be lots of time for visual design once the structure is finalized.
2. Wireframes convey that «this is all up for discussion»
The rough feel encourages discussion. We call it a look no one is afraid to criticize. Wireframes are really quick to make, so don’t be shy with giving feedback! Each screen probably only took a few minutes to make; don’t worry, their author won’t mind doing them over from scratch. What matters the most at this point is the final ease of use, so going through a few iterations is normal and expected.
3. Wireframes make it clear that no code has been written yet
If your customer or stakeholder received some screens that looked like screenshots of the final app, instead of a wireframe, they might assume that all the code behind those screenshots had already been written. This is most often not the case. Wireframes don’t have this danger.
Getting started with wireframes
With great power comes great responsibility. Just because wireframing tools make it easy to come up with user interfaces, it doesn’t mean that creating good user interfaces is easy.
That’s why we’ve created everything you need to make great wireframes and learn just enough user interface design along the way.
If you haven’t already, start or download a free trial of Balsamiq Wireframes for Desktop or Balsamiq Cloud, then visit one of the links below.
Introduction to User Interface Design Through Wireframes
Start your journey into UI design with this easy-to-follow guide.
How to Start a Wireframe Project
Learn the techniques we use to go from nothing to something. Part of our series on Wireframing for Beginners.
Balsamiq Tutorials
Lessons on using our tool, plus tips and tricks. You might want to start with Creating Your First Wireframe.
You can also start by browsing our articles or courses. Happy Wireframing!
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.
Balsamiq
Balsamiq for Desktop Documentation
Introduction to Balsamiq Wireframes for Desktop
What is Balsamiq Wireframes?
Balsamiq Wireframes is a user interface design tool for creating wireframes (sometimes called mockups or low-fidelity prototypes).
You can use it to generate digital sketches of your idea or concept for an application or website, to facilitate discussion and understanding before any code is written. The completed wireframes can be used for user testing, clarifying your vision, getting feedback from stakeholders, or getting approval to start development.
Here’s a quick demonstration of how it works.
What’s New in Balsamiq Wireframes for Desktop?
This is a loaded question because, technically, everything is new. We have rebuilt the entire application, from the ground up, to run completely native. That means no more Adobe Flash/Air, and a bunch more native frameworks. The app should run faster and smoother than it ever has, all while working exactly how you remember.
So, to answer your question, everything is new, but it’s going to be very familiar.
Let’s talk about some of the new features.
Editing Balsamiq Cloud Projects
This is something people have asked for for years, and it’s finally here. With Balsamiq Wireframes for Desktop, you can log into Balsamiq Cloud, and access all your Cloud-based projects.
Learn all about it in this article.
A New Full Screen Mode
We spent a lot of time modernizing the Full Screen Presentation Mode based on what we learned from the last version. The new version is more customizable, better for user testing, and just feels better to use.
You can read more about the new Full Screen Presentation mode here.
A Robust Review and Comment System
One of the biggest requests for our web apps finally makes it back to the desktop. Now, you can add comments and callouts to projects, and then have your collaborators respond directly to them.
Read more about comments and sharing here.
Integration with Wireframes to Go
Wireframes to Go is our community-driven, custom control site. If you ever find yourself in need of controls beyond what we include, there is a good chance you’ll find it there!
With Balsamiq Wireframes for Desktop, you can access and import those controls directly from the editor.
And More.
Listing out every difference would take a while. Things like a larger canvas or high-resolution SVG PDF exports were highly requested features, but they don’t make for a great sizzle reel. There’s a bunch of new in Balsamiq Wireframes for Desktop, but you should feel right at home.
Installing Balsamiq Wireframes for Desktop (Mac/Win)
Let’s get you set up on Balsamiq Wireframes for Desktop.
Installing on macOS
It’s that easy. Find the app in your Application Folder and launch it.
Note: Advanced installation instructions can be found on this page.
Installing on Windows
Note: Advanced installation instructions can be found on this page.
Updating to a New Version of Balsamiq Wireframes for Desktop
Balsamiq Wireframes for Desktop allows you to enable an automatic check for updates.
You can manually check for an update any time via the menu:
If there is an update available, you’ll see a screen letting you know the new version number, along with a summary of the changes included in that version.
To update to the new version, just click the «Install» button.
If you’re already using the latest version, you’ll see a confirmation that you’re up to date:
In both cases, you can check «Automatically Check for Updates» and we’ll alert you automatically in future that an update is available.
To see a full list of all changes, take a look at our Wireframes for Desktop Release Notes.
Registering Balsamiq Wireframes for Desktop
After you download and install Balsamiq Wireframes for Desktop, it will run in trial mode until you register a valid license key.
Note: An internet connection is required when registering your license key. The app needs to talk to our licensing servers in order to complete the registration.
This will bring up the registration dialog shown below where you can enter your License Information.
You can copy and paste this information from the receipt email you received when you purchased the product. If you no longer have this email, don’t fret, you can request a copy of your receipt here.
Unable to Verify or Register
If the Register button remains disabled when you enter the License Key, you will see a message indicating the reason why. Please make sure that you copy and paste directly from your email receipt instead of typing your License Information manually.
If the app is unable to talk to our servers after pasting a valid key, it is likely caused by a failed internet connection, or a firewall blocking the connection. To fix this, you may need to get your IT team involved and ask them to allow the following domain: *.balsamiq.com
If you’re still having trouble, please email our sales support team a screenshot of your registration dialog and include your License Information in the body of your email, so we can diagnose the issue and get you back to work.
Unregister From This Computer
If you ever need to transfer your license to someone else, you can simply unregister your computer and pass on the license information to the new user. You should also unregister if you will no longer be using that particular computer to avoid misuse of your license.
Once unregistered, you can still use the app to view local BMPR files but you won’t be able to edit them or create new ones.
Transitioning from a Previous Version
What About BMML Files?
However, if you have a copy of Mockups 3 for Desktop (our legacy Desktop tool) on your machine, you can also do this conversion yourself. More details on this page.
Next Steps
The rest of our documentation contains a top-to-bottom description of the features and use of Balsamiq Wireframes. A good starting point would be the Editor Overview, to learn about the user interface for navigating and creating your wireframes.
For troubleshooting, frequently-asked questions, and tutorials, head over to our support page. There, you can learn about pricing and payment information, contact us, watch tutorials, and connect with the user community.
Happy Wireframing from the Balsamiq team. 🙂
A Couple of Little Treats for You!
Built-in Background Music
For years we’ve been suggesting people use headphones when working on wireframes, to help get in the creative zone. So we asked ourselves: why not give our awesome users a built-in, get-in-the-zone-inducing track to listen to? And so we did!
Just go to the View menu, click «Play Background Music», and get to work!
The track is called Ascension, by Dr. Christopher Lloyd Clarke B.Sc, Msc.D. Meditation music composer and founder of Royalty Free Meditation Music.com.
We cut the track down to 25 minutes, added a Zen bell, then added 5 minutes of nature sounds recorded by our own Michael Angeles in his hikes around Marin County, CA. We then made the resulting 30-minute track loop 4 times.
Why the (25 + 5)*4, you ask? Because this way you can use the music to time your Pomodoros, of course!
What Should I Make for Dinner?
We know how it is. It’s 5pm, and you’ve just had a glorious day of work, creating awesome wireframes for your next project.
And then it hits you: what should I make for dinner tonight?
That’s where we come in.
Go to the Help menu and select «What Should I Make for Dinner?«. You’ll be taken to this page.
Lots and lots of easy, every-day recipes straight from the Balsamiq team’s kitchens, in super-quick video format you can watch while you put your jacket on to leave the office.
Just browse through the list of videos, pick one that looks good, jot down the ingredients and run out the door.
Nothing fancy here, this is what we cook for ourselves when we don’t know what to make.
Бальзамик Макеты — Краткое руководство
Когда дело доходит до разработки программного обеспечения, более чем важно знать, как будет выглядеть настоящее программное обеспечение, еще до того, как начнется фактическая разработка. Это критически важное мероприятие, поскольку оно служит руководством для всех заинтересованных сторон в программном проекте.
Традиционно абзацы текста использовались для описания или выявления требований к программному обеспечению. Однако, когда дело доходит до понимания этих текстов, у каждого человека будет свой способ визуализации требования. Это приводит к путанице в командах разработчиков программного обеспечения, и конечная стоимость заключается в расточительстве, деньгах и времени.
Каркас может быть определен как действие для визуализации макета данного экрана (мобильный или веб). В последние годы наблюдается растущий спрос на каркасные экраны / страницы, чтобы оценить его приемлемость.
Почему каркас?
Wireframing требуется для того, чтобы сэкономить время, потраченное на понимание требований к программному обеспечению. Как говорится, картинка стоит больше тысячи слов, Wireframing дает представление о требованиях к любой функции / странице, эффективно визуализируя компоновку экрана и элементы. В конце концов, это также помогает командам разработчиков ориентироваться на общую конечную цель.
Владельцем каркасной операции обычно является бизнес-аналитик / дизайнер пользовательских интерфейсов / дизайнер взаимодействий. Этот член команды должен сотрудничать с командой до, после и во время процесса создания каркаса.
Бальзамик как каркасный инструмент
Для профессионала, назначенного с каркасной деятельностью, имеет смысл сэкономить время с помощью инструмента. Одним из наиболее эффективных инструментов для создания каркаса является использование простой ручки и карандаша! Это не требует никаких инвестиций вообще! Однако, когда дело доходит до того, чтобы сообщить об этом командам, нам нужен внешний вид, похожий на ручку и карандаш, но с дополнительными функциями, такими как обмен по электронной почте или аналогичные средства.
Balsamiq служит отличным инструментом, отвечающим всем требованиям Wireframing, совместной работы и творчества. Его уникальный набор функций позволяет члену команды выполнять быстрое каркасное моделирование, получать консенсус в отношении функции, которая будет разработана. Это в конечном итоге приведет команду в соответствие с функциональностью с точки зрения макетов.
Это также позволяет взаимодействовать между различными командами, так что член команды может сотрудничать с различными совместно расположенными или удаленно расположенными командами. Его способность экспортировать каркасы в форматы PDF / PNG обеспечивает гибкость при совместном использовании каркасов с командами.
Теперь мы знаем, как Balsamiq эффективен для создания каркасов на лету. Если мы будем использовать это время на ранних этапах разработки программного обеспечения для определения ожиданий заинтересованных сторон, заинтересованные стороны получат более высокое удовлетворение, учитывая минимальное количество времени, необходимое для создания каркаса. Это основная причина, по которой Balsamiq используется большинством организаций, выпускающих продукцию, где решающее значение имеет встреча с клиентами и заинтересованными сторонами.
Для менеджера по продукту / UX Analyst Balsamiq Mockups предоставляет платформу для повышения ценности на ранних этапах разработки. Используя богатый набор инструментов, Product Manager / UX Analyst может помочь продукту добиться успеха.
Бальзамик Макеты — Введение
Установка бальзамика
Чтобы установить Balsamiq, убедитесь, что у вас есть следующие требования.
Для запуска Balsamiq на вашем компьютере необходимо запустить Adobe Air 2.6. Он отлично работает на большинстве компьютеров и операционных систем. Минимальные системные требования для Adobe Air 2.6 приведены ниже —
Для Windows
X33-совместимый процессор с тактовой частотой 2,33 ГГц или выше, или процессор Intel Atom TM с тактовой частотой 1,6 ГГц или выше для устройств класса нетбуков.
Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic или Windows 10.
Минимум 512 МБ ОЗУ (рекомендуется 1 ГБ).
Разработка AIR SDK Поддерживает Microsoft® Windows 7 и более поздние версии, только 64-разрядные.
X33-совместимый процессор с тактовой частотой 2,33 ГГц или выше, или процессор Intel Atom TM с тактовой частотой 1,6 ГГц или выше для устройств класса нетбуков.
Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic или Windows 10.
Минимум 512 МБ ОЗУ (рекомендуется 1 ГБ).
Разработка AIR SDK Поддерживает Microsoft® Windows 7 и более поздние версии, только 64-разрядные.
Для Mac
Скачивание Бальзамика
Мы можем скачать Balsamiq по следующей ссылке — Balsamiq Mockups для рабочего стола Balsamiq доступен для Windows и Mac OS.
Пользовательский интерфейс
После завершения установки мы сможем открыть Balsamiq с нашего компьютера. Мы увидим следующий экран в первый раз, когда запустим Balsamiq.
Как показано на скриншоте выше, пользовательский интерфейс Balsamiq разделен на четыре части.
На скриншоте раздел, выделенный красным, является переключателем для разделов «Инспектор / Информация о проекте». Основываясь на выборе, мы должны увидеть либо Инспектора / раздел информации о проекте (3).
UI Library
Как показано на следующем снимке экрана, библиотека пользовательского интерфейса классифицируется в соответствии с различными элементами экрана. Вы можете прокрутить горизонтально раздел «Все» и получить представление об элементах экрана, доступных в Balsamiq.
Давайте познакомимся с различными категориями основных элементов экрана, доступных в Balsamiq.
Все — это охватывает все элементы пользовательского интерфейса, присутствующие в Balsamiq. Вы можете прокрутить горизонтально, чтобы просмотреть / использовать их.
Активы. В целях ознакомления это пользовательские активы, загруженные пользователем.
Большой — эта категория включает в себя элементы экрана, которые достаточно высоки по размеру / внешнему виду. В этой категории вы можете увидеть такие элементы, как заполнители, окно браузера, iPad, iPhone.
Кнопки — включает все элементы управления кнопками, используемые в мобильных / веб-каркасах. Типичным примером будет кнопка действия, флажок и т. Д.
Общие — это разные формы / элементы управления, используемые для обозначения наиболее распространенных взаимодействий.
Контейнеры. Как следует из названия, они включают Окно, Набор полей, Браузеры и т. Д.
Формы — в этой категории присутствуют все элементы управления пользовательского интерфейса, связанные с формой.
Значки. В любой момент может потребоваться обозначить определенную операцию значком. Например, в недавнем прошлом у нас был значок дискеты с кнопкой Сохранить. Эта категория элементов управления предоставит вам значки, необходимые для этой операции. Бальзамик имеет огромную коллекцию икон; не стесняйтесь проверять их!
iOS — элементы управления пользовательского интерфейса, специфичные для мобильной операционной системы Apple iOS, доступны в этой категории.
Макет — при представлении базовой страницы / функции становится важным представлять базовый макет. Макет категории включает в себя большинство из них, таких как Accordian, горизонтальные / вертикальные вкладки и т. Д.
Разметка. Предположим, вы хотите добавить комментарий к конкретному элементу управления в каркас. Поле для комментариев доступно в разметке. Кроме того, выноски используются для демонстрации взаимосвязанности во многих сценариях. Он доступен в категории разметки.
Мультимедиа — когда дело доходит до показа изображения / звука в нашем каркасе, соответствующие элементы управления пользовательским интерфейсом доступны в категории «Медиа».
Символы — символы являются компонентами многократного использования, которые могут сократить время создания наиболее распространенных элементов.
Текст — как следует из названия, все элементы управления пользовательского интерфейса, связанные с текстом или абзацами, такие как панель ссылок, блок текста, поле со списком, доступны в этой категории.
Все — это охватывает все элементы пользовательского интерфейса, присутствующие в Balsamiq. Вы можете прокрутить горизонтально, чтобы просмотреть / использовать их.
Активы. В целях ознакомления это пользовательские активы, загруженные пользователем.
Большой — эта категория включает в себя элементы экрана, которые достаточно высоки по размеру / внешнему виду. В этой категории вы можете увидеть такие элементы, как заполнители, окно браузера, iPad, iPhone.
Кнопки — включает все элементы управления кнопками, используемые в мобильных / веб-каркасах. Типичным примером будет кнопка действия, флажок и т. Д.