Introduction to Balsamiq

To create a good website, you must first start with wireframing. Wireframing is a way to design a website/webpage at a structural level. A wireframe is used to layout the functionality of pages - taking into account the user needs and user journeys. It is considered as the blueprint of websites. Before adding content and visual design, use wireframes first to establish the basic structure of your website.

You are going to need the necessary tools/apps to create your wireframes. One of the most widely-used wireframing tools is Balsamiq Wireframes.


Balsamiq Wireframes is a wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer. It is easy to use because of its drag-and-drop functionality. There is an option where you can use it on web browser, on desktop as an app, or integrate it with your Google Drive. You can also use the sketch mode for brainstorming and the clean wireframe mode for presentation, and you can easily switch between them.

Basic concepts and terminology

Here are some of the basic components of Balsamiq Wireframes:

1. UI Control

A standard user interface "widget" (e.g., Button, Image, Dialog Window). The building blocks of any wireframe.

2. Canvas

The grid-lined area where UI Controls are placed.

3. UI Library

A row of UI Controls that can be dragged onto the Canvas.

4. Property Inspector

A configuration panel that contains common actions (e.g. alignment, layering) and properties that are specific to each UI Control.


Learning how to use Balsamiq Wireframe and creating a good interface structure is possibly the most important part of UI/UX design. Creating a wireframe before any coding work will save you lots of time and painful adjustment work later.

If you want to create your first wireframe using Balsamiq, you can go to this link for the tutorial: