How to wireframe a website using Balsamiq

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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

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.

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.