Balsamiq Drive

  • Balsamiq Mockups Tutorial
Balsamiq Drive
  • 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.

Why Wireframing?

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.

Installing Balsamiq

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 −

For Windows

  • 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.

For Mac

  • 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

Downloading Balsamiq

We can download Balsamiq from the following link – Balsamiq Mockups for Desktop Balsamiq is available on Windows and Mac OS.

User Interface

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.

  • Navigator
  • UI Library
  • Inspector
  • 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).

UI Library

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?

Balsamiq

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[edit]

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[edit]

Balsamiq is an ISV founded in March 2008 by Giacomo 'Peldi' Guilizzoni,[1] a former Adobe senior software engineer.[2] The Balsamiq Mockups tool was launched in June 2008[3] and has become an industry standard tool for User Interface Design.[4] Balsamiq started as a one-person Micro ISV; in 2015 it has 20 employees, based in Italy, France, Germany and the USA.[5] 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.[6] The company achieved almost $5 million USD in sales in 2011[7] and more than $6 million USD in 2014.[8]

Product[edit]

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.

Pricing[edit]

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.[9].

Every product starts with a 30 day free trial.

Balsamiq Mockups is free for nonprofits,[10] for classroom use,[11] UX training,[12] and open source projects.[13]

Balsamiq also donates 3% of its profits to charities.[14]

Release History[edit]

  • Version 1.0: June 19, 2008.
  • Version 2.0 (November 2010): added the ability to create Symbols, reusable controls. Also added PDF and PNG export, autosave and other features.[15]
  • Version 3.0 (March 2015): the biggest update in the company's history. A whole new user interface, easier look and feel customization, better symbols support, inclusion of FontAwesome icons, better support for projects with embedded images and assets, a new full-screen user-experience, addition of mockup and project notes, and a trash bin.[16]
  • Version 3.1 (April 2015): addition of Mockup Alternates features and Background Music.[17]
  • Version 3.2 (October 2015): addition of a new way to draw rectangles and text for even faster wireframing, and the ability to quickly transform controls to different types.[18]

See also[edit]

References[edit]

  1. ^Kirkpatrick, Marshall. 'Man Writes Software, Blogs About it, Makes $100k in 5 Months', ReadWrite, 14 November 2008. Retrieved on 18 November 2015.
  2. ^Linderman, Matt. 'Interview with CEO Peldi Guilizzoni about the growth of Balsamiq [Bootstrapped, profitable, and proud', 37 Signals, 20 May 2009. Retrieved on 18 November 2015.
  3. ^Kirkpatrick, Marshall. 'Balsamiq, a Mockup Creator in AIR, is on Fire', ReadWrite, 30 July 2008. Retrieved on 18 November 2015.
  4. ^'The 20 best wireframing tools', Creative Bloq, 2 March 2015. Retrieved on 18 November 2015.
  5. ^'Balsamiq Company Page'
  6. ^Kirkpatrick, Marshall. 'Man Writes Software, Blogs About it, Makes $100k in 5 Months', The New York Times, 14 November 2008. Retrieved on 18 November 2015.
  7. ^Hicks, Jennifer. 'Italy's Balsamiq Pours Up New Wireframing Tools', Forbes, 12 February 2012. Retrieved on 18 November 2015.
  8. ^'Looking back at 2014', Balsamiq Blog, 21 January 2015. Retrieved on 18 November 2015.
  9. ^'Balsamiq Buy Page'
  10. ^'Getting myBalsamiq free for one year for nonprofits'
  11. ^'Getting myBalsamiq free for classroom use'
  12. ^'Getting myBalsamiq free for UX training'
  13. ^'Getting myBalsamiq free for large open source projects'
  14. ^'Balsamiq Donation Policy'
  15. ^'Mockups 2.0: the Symbols release'
  16. ^'BIG Release: Balsamiq Mockups 3!'
  17. ^'Release: Balsamiq Mockups 3.1! Alternates, new Google Drive Plugin, Background Music, and much more!'
  18. ^'Release: Mockups 3.2: a whole new way to wireframe!'

External links[edit]

  • Balsamiq on Twitter
  • Rapid Wireframing: Finding the Right Product Design, free class on Skillshare
  • Wireframing with Balsamiq Mockups, free course on Udemy
  • Faranello, Scott, Balsamiq Wireframes Quickstart Guide, Packt, 2012, ISBN 978-1-84969-353-0
  • Uncommon Interview: Balsamiq Studios, a smart bear, 14 September 2009
  • The new generation of kick-ass web apps, TechRadar, 29 November 2009
  • How *Specifically* Did Balsamiq Bootstrap Its Way To $2 Mil In Sales in 18 Months? – with Peldi Guilizzoni, Mixergy, 30 April 2010
  • [this link Do Worry Be Happy: Peldi Guilizzoni] at Business of Software Conference, 2010
  • 9 Excellent Tools for Design Mockups, Mashable, 7 June 2012
  • Hello, I am Peldi from Balsamiq. Ask me anything!, Reddit, 30 December 2013
  • How Balsamiq Bootstrapped Its Way Into a $6M BusinessConversionAid, 30 September 2014
  • Peldi Guilizzoni, Product + Support, 19 May 2015
  • Balsamiq Mockups 3 on Product Hunt

(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!

Balsamiq Version

--(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)

Broken link[edit]

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)

Retrieved from 'https://en.wikipedia.org/w/index.php?title=Talk:Balsamiq&oldid=736518515'