- Balsamiq Mockups Tutorial
- Balsamiq Mockups Resources
Adobe XD vs Balsamiq: What are the differences? Adobe XD: UX/UI design and collaboration tool.A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps; Balsamiq: Rapid wireframing tool that helps you work faster & smarter.Balsamiq Mockups is a web tool that allows users to mock up different designs and ideas.
The best way to collaborate on wireframes inside Google Drive. On top of the Balsamiq Wireframes editor, it offers a tight integration with Google Drive: you won't need to sign up for another username and password, sharing is the same as any other Google Drive file, and you can collaborate and co-edit projects in real time, of course. Google Drive, Jira, Confluence, Axure, and FogBugz are some of the popular tools that integrate with Balsamiq.Here's a list of all 8 tools that integrate with Balsamiq.
- Selected Reading
When it comes to software development, it is more than important to know how the actual software will look, way before the actual development starts. This is a critical activity, as it serves as a guideline for all the stakeholders in the software project.
Traditionally, paragraphs of text have been used to describe or elicit the software requirement. However, when it comes to comprehension of these texts, every individual will have their own way of visualizing the requirement. This leads to a mix-up in the software development teams and the ultimate cost is in terms of wasted efforts, money and time.
Wireframing can be defined as an activity to visualize the layout of a given screen (mobile or web). In the recent years, there has been an increasing demand on Wireframing the screens/pages in order to gauge its acceptability.
Wireframing is required in order to save on time invested in understanding a software requirement. As they say, a picture is worth more than a thousand words, Wireframing provides a glimpse at the requirement of any feature/page by effectively visualizing the screen layout and elements. In the end, it also helps the development teams to be oriented towards the common end goal.
The owner of the Wireframing activity is usually a Business Analyst / User Interface Designer / Interaction Designer. This team member is required to collaborate with the team before, after and during the Wireframing process.
Balsamiq as a Wireframing Tool
For a professional assigned with a Wireframing activity, it makes sense to save time by using a tool. One of the most effective tools to do Wireframing is to use a simple pen and pencil! This requires no investment at all! However, when it comes to communicating it to the teams, we need a look-and-feel similar to a pen and pencil, but with added features such as sharing over email or similar mediums.
Balsamiq serves as an excellent tool, fulfilling all the requirements of Wireframing, collaboration and creativity. Its unique set of features enables the team member to do rapid Wireframing, get a consensus on the feature to be developed. This will eventually have the team aligned with functionality in terms of the layouts.
It also enables collaboration over different teams, so that a team member can collaborate with different co-located or remotely located teams. Its ability to export the wireframes in PDF/PNG formats allows for a flexibility, while sharing the wireframes with the teams.
We now know how Balsamiq is efficient for creating the wireframes on-the-fly. If we utilize this time early during the software development to set the expectations of the stakeholder, there will be a higher satisfaction among the stakeholders considering the minimal amount of time required to create the wireframe. This is the primary reason why Balsamiq is used by majority of the product organizations, where meeting customer/stakeholder relations are crucial.
For a Product Manager / UX Analyst, Balsamiq Mockups provide a platform to add value early in the development. By using its rich toolset, Product Manager / UX Analyst can drive the product seamlessly towards its success.
To install Balsamiq, please ensure that you have the following requirements.
For running Balsamiq on your computer, Adobe Air 2.6 needs to run. It works fine on most computers and operating systems. The minimum system requirements for Adobe Air 2.6 are given below −
A 2.33GHz or faster x86-compatible processor, or Intel AtomTM 1.6GHz or faster processor for netbook class devices.
Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic or Windows 10.
A minimum 512MB of RAM (1GB recommended).
AIR SDK Development Supports Microsoft® Windows 7 and above, 64-bit only.
- Intel® CoreTM Duo 1.83GHz or faster processor.
- Mac OS X v10.7, and above.
- A minimum 512MB of RAM (1GB recommended).
- AIR SDK Development supports Mac OS 10.9 and above, 64bit only.
Reference link - Balsamiq System Requirements
We can download Balsamiq from the following link – Balsamiq Mockups for Desktop Balsamiq is available on Windows and Mac OS.
Once the installation goes through, we should be able to open Balsamiq from our computer. We will see the following screen for the first time when we run Balsamiq.
As shown in the above screenshot, the user interface for Balsamiq is divided in the four following parts.
- UI Library
- Wireframe space/Area
In the screenshot, the section highlighted in red is the toggle for the sections Inspector / Project Information. Based on the selection, we should be able to see either the Inspector / the project information section (3).
As shown in the following screenshot, the UI Library is categorized as per different screen elements. You can scroll horizontally on “All” section and get an idea about the screen elements available in Balsamiq.
Let us get acquainted to the different basic screen elements categories available in Balsamiq.
All − This covers all the UI elements present in Balsamiq. You can scroll horizontally to view/use them.
Assets − For the purpose of introduction, these are the custom assets as uploaded by the user.
Big − This category includes the screen elements, which are reasonably high in size/appearance. You can see the elements such as placeholders, browser window, iPad, iPhone in this category.
Buttons − It includes all the button controls used in mobile/web wireframes. A typical example will be action button, checkbox, etc.
Common − These are different shapes/controls used to denote the most common interactions.
Containers − As the name suggests, it is inclusive of the Window, Field Set, Browsers, etc.
Forms − All the UI controls related to a form are present in this category.
Icons − At any given point, you might need to denote a particular operation by an icon. For instance, in the recent past, we have the floppy icon with the Save button. This category of controls will provide you with the icons required for this operation. Balsamiq has a huge collection of icons; feel free to check them!
iOS − The UI controls, specific to Apple iOS mobile operating system, are available under this category.
Layout − When representing a basic page/feature, it becomes important to represent the basic layout. The category layout includes most of them, such as Accordian, Horizontal/Vertical Tabs, etc.
Markup − Suppose you want to add a comment on a particular control in the wireframe. The comment box is available in the markup. In addition, callouts are used to show interconnectivity in many of the scenarios. It is available under the Markup Category.
Media − When it comes to showing an image/sound in our wireframe, related UI controls are available under the Media category.
Symbols − The symbols are reusable components, which can reduce the time to create the most common elements.
Text − As the name goes, all the UI controls related to text or paragraphs, such as Link Bar, Block of Text, Combo Box is available under this category.
In the next chapter, we will make the first project in Balsamiq.
Let us create our first project in Balsamiq. Before we jump in to the Wireframing, it becomes more than important to plan the screens/page, so that our efforts are focused. We will walk through a company website as we go on creating the wireframes.
Concept: A Company Website
For the purpose of this tutorial, we will create a company website. This wireframe can relate to many small/medium scale company websites.
So what happens in the planning phase?
In the planning phase, we invest time to brainstorm what all pages will be present on the website and contents of each. Consider the following pages for the website.
In the next chapter, we will see how to use Balsamiq to design these four pages.
In this chapter, we will discuss how to use Balsamiq to design the following four pages for our website −
Now that we have created the pages, the critical part is making them appear in an order like a web page. In our example, the navigation is achieved using the link bar at the right top corner.
Let us see how we can connect the first page Home and the second page Products and Services.
Go to Home page
Click on the link bar
Refer the properties pane
As highlighted, from the Links section, click on the drop down for Products. It will show you the list of available mockups. The options are shown below.
From the list, click Products and Services.
Once done for the Home Page, repeat the same procedure for other pages – About Us, Contact Us. Note that on the other pages; we will have the navigation link inserted for the pages other than the selected one.
In this chapter, we will see how to put all the mockups of the project together and export them in PNG images or a PDF file.
If you were to show the wireframe that you created to an end user/client, you obviously would want to show this wireframe in a more common format, for example, a PDF. For this purpose, Balsamiq Mockups provides a flexibility to export the mockups in the form of PNG images or PDF file.
Let us export the mockup in PDF. To do so, click on the Project Menu, then click Export to PDF. It will show a screen as shown in screenshot below.
From the above screen, select the check box – “Show linking hints”. Click Export to PDF. It will show a popup asking for a location to export your PDF. Once you provide a location, the PDF will be exported to the specified location. The progress will be shown in the progress bar as shown below.
There will be a confirmation box, when the PDF is exported as shown below.
On clicking this message, you will be shown the PDF. In the PDF, you can try out the navigation on the highlighted link bar.
For best viewing and navigation experience, use Adobe Acrobat Reader.
Improving the Balsamiq article
|Part of an edit requested by an editor with a conflict of interest has been implemented.|
Hi! My name is Francesca and I work for Balsamiq. I'd like to suggest some changes and updates to this article. I've studied a lot about Wikipedia and its editorial rules, COI and markup language... I'm not sure to master them.
Here is my version on the article.
Balsamiq is an ISV founded in March 2008 by Giacomo 'Peldi' Guilizzoni, a former Adobe senior software engineer. The Balsamiq Mockups tool was launched in June 2008 and has become an industry standard tool for User Interface Design. Balsamiq started as a one-person Micro ISV; in 2015 it has 20 employees, based in Italy, France, Germany and the USA. The company's motto is 'Life's too short for bad software.'
Balsamiq became profitable 3 weeks after launch, and cleared US $100,000 in sales after only 5 months. The company achieved almost $5 million USD in sales in 2011 and more than $6 million USD in 2014.
Balsamiq Mockups is a graphical user interface mockup and website wireframe builder application for developers, designers, and product managers, focussed on the early stages of designing user interfaces for websites and web, mobile and desktop Applications. It allows anyone to arrange pre-built widgets using a drag-and-dropWYSIWYG editor. Its low-fidelity look (both with a rough, hand-drawn 'sketch' skin and a clean lines 'wireframe' skin) helps make it clear that the wireframe being discussed is not the final design, preventing reviewers from focussing on colors or details too early in the design process.
The application is offered in a Desktop version as well as a web application called myBalsamiq and as a plug-in for Google Drive, Atlassian Confluence and Atlassian JIRA.
Versions for FogBugz and XWiki were offered until 1 November 2013.
A Balsamiq Mockups Single User Licence costs $89; there are also Volume Licenses, Upgrade Licenses and Discounted Licenses for Existing Plugin Customers. The web app is called myBalsamiq and has different plans, starting at $12 per month. The plugin for Google Drive costs $5/month or $50/year..
Every product starts with a 30 day free trial.
Balsamiq Mockups is free for nonprofits, for classroom use, UX training, and open source projects.
Balsamiq also donates 3% of its profits to charities.
(Giuliettebt)(COI) 11:18, 26 November 2015 (UTC)
- Hi Francesca, and apologies for the delay in answering your edit request. There is currently a backlog of 120+ edit requests dating back to September of last year. I have implemented some of the changes you suggested, but since Wikipedia is not a sales catalogue, articles generally desist from listing the price of products; the release history is also a bit too much in detail. Thanks, Altamel (talk) 02:19, 17 July 2016 (UTC)
- Hi Altamel, thank you so much! No worries, I was aware it would take time :) Considering what's on the page right now, we aren't a Micro ISV anymore, and we'd rather use Countries without cities (otherwise, we have to add a bunch of them). Furthermore, there are 24 of us now: do you think I can edit this little detail by myself? One last thing: for the other sections (releases, external links, etc.) you didn't approve, I had drawn inspiration from other similar wikipedia pages (I had studied a lot, before submitting my request!). I was on the fence about the Price list, but I added it just because I had found it somewhere. Believe me, we didn't want to be salesy. Thank you again for all your work!
--(Giuliettebt)(COI) 14:53, 21 July 2016 (UTC)
Balsamiq Interactive Mockups
- You are welcome. I changed the bit about the ISV and the cities. I don't see any problem with you updating employee counts periodically, as it is an uncontroversial change. Just be sure to update the supporting citation as well. Altamel (talk) 02:07, 28 August 2016 (UTC)
The link for the first reference, http://readwrite.com/archives/man_writes_software_blogs_abou.php, is broken. --Mortense (talk) 08:18, 21 June 2016 (UTC)