How to wireframe a website using Balsamiq

Balsamiq is a great tool for building low fidelity wireframes of your website. We'll walk you through how to get started.
Aug 3, 2020 • 6 minute read
Adam Smith @HomebrandAdam
Technical Co-pilot
Cover photo for How to wireframe a website using Balsamiq

Qëndroni i Përditësuar

Abonohuni te gazeta jonë për të qendruar i përditësuar në temat që kanë rëndësi për ju.
Faleminderit për abonimin! Hidhini një sy inbox-it tuaj për përditësimin tonë të radhës.

Balsamiq can help you wireframe your website quickly and easily

If you're building a website, one of your first steps will be wireframing it. A wireframe is basically a blueprint for your website. It shows where all the elements are placed on each page, how they interact with each other and it maps out a user's journey through your site.

If you want to know more about wireframing in general, you can check out our comprehensive guide to wireframing a website. But if you're ready to start wireframing your site, Balsamiq is a great tool to use.

What is Balsamiq?

Balsamiq is a software program that allows you to create mockups and wireframes of a website. It's available as a web application or a downloadable piece of software. Personally, we like the web app, because it makes it easy for a team to collaborate on a wireframe from anywhere in the world.

Balsamiq offers different plans based on the size of your company and your needs.

balsamiq cloud plans pricing

If you're just building a single website, their introductory cloud-based plan will probably work for you. You get two website projects for $9 USD per month or $90 USD per year.

If you're looking to collaborate with a team on a number of website projects, Balsamiq's mid level plan will run you $49 USD per month or $490 USD per year. That gets you 20 website projects.

If you're actually running a web development company, Balsamiq's top level plan gives you 200 projects for $199 USD per month or $1,990 per year.

If you go with the downloadable option, a Balsamiq license starts at $89 USD for one user, and goes up in price as you add additional users.

Before you get started

Before you start with Balsamiq, we'd recommend drawing out an ink and paper wireframe of your site. Build out a site map so you can determine how the pages of your site are structured, and sketch out where different elements will be placed on each page. That'll make using Balsamiq a breeze.

Starting a website project with Balsamiq

Balsamiq is incredibly easy to use. To get started, just head to www.balsamiq.com/wireframes. You can purchase a plan, or start a 30-day free trial.

For our purposes, we're going to choose the cloud option and take advantage of the 30-day free trial.

Once you've registered, click on "Create Your Space." You'll be asked to give your workspace a name. We've humbly chosen the moniker, "Our awesome website."

balsamiq create space

Next, we'll start a new project. A new project is your new website.

Once you start your new project, you'll see a toolbar across the top of the screen with a lot of fun little designs beneath it. These are common website elements, and you can drag and drop them into the canvas below to build your wireframe.

Placing elements on the canvas

We're going to start with a browser window. That'll give us a good point of reference to see how our site will look to visitors, and it'll serve as a guide for placing different elements. So, we just head to the button that says "Containers," and drag and drop the browser window into our canvas.

balsamiq add browser window

But it's not quite the right size. We want to make sure it's the size of a standard webpage so we can place our elements correctly. At the smaller end, a standard webpage is 1024x768 pixels, so we'll choose that.

Now let's put some elements on the page. How about a nice hero image? Your hero image is the large image that appears at the top of a webpage. We'll head to the media button, and drag and drop the image onto the canvas, then we'll resize it to fill the top portion of the screen.

balsamiq add image

Notice how the image box is just a blank box with an "X" through it? That's wireframing shorthand for indicating an image (it actually hearkens back to newspaper layout standards).

But what if we want to see how our stunning hero image will actually look? No problem. Click on the image box. In the left hand sidebar, you'll see an option titled, appropriately enough, "Image." Clicking on the plus icon will let you upload an image from your computer, while clicking on the cloud icon will allow you to upload an image from a URL.

balsamiq upload image

Now, we've chosen our image. How about some text to accompany it? Easy. Just click on the "Text" button. You can add a line of text, which will indicate your text with a large scribble. We'll use that for our header. Just drag, drop, resize and you're done.

balsamiq add text

Now how about some explanatory text below our header? Just grab the "block of text" element and pull it onto your canvas.

Next, we want to give our visitors a call to action. Let's put a button right smack in the middle of our page. We head to the "Buttons" tab and choose from a variety of fancy buttons. We're going to play it safe with the old, reliable rectangular button.

balsamiq add button

Now, we can change the color of the button using the sidebar. Orange seems to be popular with the kids these days (and by kids, we mean UI/UX experts), so we'll go with that.

We've already put together a nice landing page here, but what if we want other pages on our site? We've got to give visitors a way to navigate to them. Otherwise they'll wander aimlessly around our homepage, dead-eyed and purposeless. Is that what you want? IS IT?

We didn't think so. So, we'll click on the Layout tab and grab ourselves a link bar. Position that bad boy at the top of the page, and now we're actually moving visitors through our website.

balsamiq add link bar

Customizing text

Don't get us wrong. This wireframe is looking pretty great. But it's missing something. Ah, yes! Our text. Fortunately, you can change the text of any element by clicking on it and then hitting "Enter." That'll bring up a box where you can type your own text.

balsamiq change text

Let's have a look at our website wireframe now that we've put our own text in.

balsamiq finished wireframe

Looking good. We'd buy one of those short stories, wouldn't you?

Adding new pages and setting up navigation

But it's just one page. That's not much of a website experience for our visitors, is it? Fortunately, we can easily add a new page to our wireframe by clicking the plus icon in the upper left corner. We'll spare you the step-by-step on our next page, as it's an identical process to our last one. Regardless, here it is.

balsamiq wireframe 2

But how do people get to it? Let's head back to our first page. Remember our call to action button? Click on it. Now, in the sidebar you'll see an option that says "Links." We can select our second wireframe from a dropdown list. And, if we want to add links to any other element on the page we can do the same. You can even select "Link to a new wireframe" and it'll immediately create a new canvas for you.

balsamiq link two wireframes

So, now we've linked our two pages together. If we go to the top menu and select "View," you'll see the option, "Full Screen Presentation."

balsamiq full screen presentation

If we select this, we can actually click on our CTA button and be taken to our second page. This way, you can see the experience visitors will have navigating through your site.

Final words

So, that's a basic overview of how to wireframe a site with Balsamiq. Before we go, there are a couple pieces of advice we want to share with you.

First, we can't stress enough how beneficial it is to map out your site with ink and paper before you start wireframing in Balsamiq. Having a good grasp of your sitemap and one page interacts with another will make wireframing much, much easier.

Second, we highly recommend you work with an experienced UI/UX designer to wireframe your site. A lot of thought goes into how visitors navigate through a website, where elements should be placed on a page and how a site's layout influences visitors' behavior.

We've given you the tools you need to start wireframing a site with Balsamiq. A freelance UI/UX designer will give you the insight you need to make sure your wireframe results in a website visitors can navigate easily, and — most importantly — one that compels them to purchase from you.

To hire a great UI/UX designer, just post a project and describe your website and its purpose, as well as some of the pages your website will need. Within minutes, you'll receive bids from talented freelancers. Select a freelancer whose skills and experience match your project's needs, and they'll get started right away. To find out how to pick the right freelancer for your project, read our comprehensive guide.

Qëndroni i Përditësuar

Abonohuni te gazeta jonë për të qendruar i përditësuar në temat që kanë rëndësi për ju.
Faleminderit për abonimin! Hidhini një sy inbox-it tuaj për përditësimin tonë të radhës.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Artikuj Të Rekomanduar Vetëm Për Ju
Wireframing your website is the first step in the design process. In this post we teach you how to wireframe your website using the software Sketch
4 MIN READ
A specifications document, or spec, helps you determine who to get to build your website, how to build it and how much it will cost.
9 MIN READ
The process of creating a website is very daunting if you have no experience. In this process we break down the complexity into 15 actionable steps.
13 MIN READ
This is the ultimate step-by-step guide to getting your WordPress site up, running and looking great.
13 MIN READ