Balsamiq Mockups Wireframing Demo

In this demo, we are going to work a bit backwards. We will be creating wireframes for the responsive site pictured above. Click here to view the live site.

step one

In order to do this demo, you must have the Balsamiq Mockups application installed on your computer. You can download a trial of the application here. The trial is fully functional for 30 days. Afterwards, you'll need to buy a license to save your work.

step two

For this demo, we will be creating a wireframe for the desktop version of this site. In Balsamiq, create a window, by dragging and dropping, that is 1024px wide with a height of 1500px. This height will be adjusted during the process to fit the content of the page, but this is a good place to start.

step three

Let's start with the nav/header section of the site.

Above is what the nav/header section of the site is supposed to look like. This will serve as reference for the wireframe.

First we will use three tools to represent the image background, the nav bar itself, and the Balsamiq logo that appears in the nav bar. All three of these tools can be found in the "Common" toolbar.

Now, let's add links. The link tool can also be found in the "Common" toolbar. This site has 4 links that appear in the nav bar in addition to the Balsamiq logo, which acts as a link back to the home page. We need to create text links for "video," "about," "download," and "demo." Balsamiq allows users to easily change things such as text size and weight. For the purpose of this demo, use 20pt text. This demo is for a single page site, but Balsamiq is a great tool for creating a clickable mockup. In the link menu on the right side of the screen you are able to create links to existing websites, or to new or exisiting mockups in Balsamiq.

To finish up the header/nav section, create a rectangle as a decorative border. Change the fill to black in the menu on the right.

step four

Next, we will continue the wireframe with the "video" section.

Above is what this section of the site is supposed to look like. This will serve as reference for the wireframe.

Under the "Text" toolbar select the subtitle tool. Create a subtitle that reads "instructional video" and align it with the edge of the left nav item. Balsamiq has great resources for icons and symbols. By using the search bar and the toolbars, users can find a variety useful icons, such as social media icons, to use in their wireframes. Under the "Media" toolbar, select the video player tool and change the dimensions to 705px x 410px.

To finish this section, we will use the line of text tool in the "Text" toolbar to represent a caption on the video. The length of the line of text can be altered to fit the appropriate space.

step five

The next section we need to create is the "about" section.

Above is what this section of the site is supposed to look like. This will serve as reference for the wireframe.

To create this section we will start by making another subtitle, this time reading "about balsamiq." Then, we will use the block of text tool for both the pull quote and the two columns of text. This tool is also located in the "Text" toolbar. Like the line of text tool, the block of text can also be resized.

step six

The next section two sections are the "download" and "demo site" sections.

Above is what both of these sections are supposed to look like. This will serve as reference for the wireframe.

These sections are almost identical and can be created simply using the subtitle tool and the text tool. For the purpose of this demo, I deleted the second line of default text and enlarged the font to 20pt. I used the text tool because it contains a link in the sentence. In addition, search "smile" in the quick add search bar, just to represent the Balsamiq logo smile.

step seven

The footer is the final section of the site.

The footer for this site is very simple. Use the photo above for reference for the wireframe.

This section can be created using the rectangular border found in the header. Then there is a background image, and a larger rectangular bar to end the page. Now, the wireframe is complete!

step eight

Balsamiq has great options for saving out your wireframes.

You can export the mockups in your project as a PDF, which can be useful for printing, sending by email, presenting to clients, or posting online. If your mockups contain links, these will work in your exported PDF as well, which will allow you to create click-through prototypes of your designs.