ASSIGNMENT ANSWER: Working with Balsamiq Mockups

Balsamiq Mockups

Balsamiq is a user interface tools which is commonly used to design the user interface of a website or an information system. The main purpose of this tool is to provide a better platform to the developers to generate the mockups for a prototype of the website. This makes it easy for the developers to identify the problems or issues that can be faced while developing the final deliverables. The Balsamiq tool can be used to generate digital sketches of the products as well as the design of the website that how the products will be settled or displayed on the screen. Each of the Balsamiq mockups files represents only one project at a time, but there can be many mockups and images that are stored in the single .bmpr file. Thus it is easy for the developers to transfer the file from one computer to another as all the mockups and images are stored in one place.

Primary Areas in Balsamiq Mockups

There are generally 5 primary areas in the user interface of Balsamiq mockups such as toolbar, UI Library, the Canvas, navigator panel and properties panel. In the toolbar area, there is a series of icons that can be utilised to perform different actions on other primary areas of the user interface. The user interface library is another area of Balsamiq Mockups in which there is a large chain of UI controls that are used to develop the user interface. In this area, there is every type of UI control type along with Assets, Icons and Symbols which are helpful in preparing interactive user interface. The main aim of UI library is to allow the developers to add UI controls in canvas and this also helps the developer to get the inspiration regarding UI mockup that what changes can be done in it to make it effective. The mockup canvas is the main area in Balsamiq Mockups where the developers prepare the design of user interface. The developers can add or delete any UI control in this area and can also resize and move the UI controls until the mockup is finished. The navigator panel is the left side area of Balsamiq Mockup, and this shows the list of mockups, assets or symbols in the project. There is mockup hierarchy in the navigation panel which can be utilised to make the hierarchy of mockups and child mockups of parent mockup can be hidden under it. Properties Panel is the right side area of Balsamiq Mockups that can be utilised to change the properties of UI controls in canvas. The property panel shows the properties of UI control that are selected by the developer.

How to prepare good User interface in Balsamiq Mockups?

In order to prepare good user interface in Balsamiq Mockups, it is necessary to follow the design principles such as Nielsen’s Design Principles and Norman’s Design Principle. Consistency in the design, clarity of content, colour code and visual inheritance are the main components of design principle. While developing a design in Balsamiq Mockups, it is necessary to choose right designing for the development of information system or website. Visibility is the main principle which needs to be followed in an effective manner to make a better user interface. While developing the design of website or information system, it is necessary for the developer to keep the relevant parts visible in the design so that the users could easily locate it on the website. The design of the website should not be complex as this will confuse the users and may give a bad experience to the user. It is necessary to choose the wise colour code for the website so that it looks simple yet eye-catching as this will help to attract more and more customers to the website. It is necessary to link the buttons to their respective pages, and this will make the website responsive.

Image Source: https://media.balsamiq.com/img/examples/all-controls-sketch-sm.png