Using Balsamiq For Information Architecture & Wireframing

I’ve worked on countless projects where the information wasn’t presented properly to the user. In most cases none of the sites had wireframing done before designing the project. Anyone that takes IA seriously knows a site without wireframes is like building a house without an architect.

I am going to share how I used Balsamiq to wireframe part of my website (which should be launched in the summer time) with information architecture in mind.

Starting Out In Balsamiq

When I started out, wireframing was all done in either Photoshop or Illustrator. I know there are several other specific programs out there, but I was comfortable with what I was using. When a friend started raving about Balsamiq, I decided to give it a try. The learning curve was really shortened with the UI they offered. I don’t work for Balsamiq or am in any way associated with their product. However, I have to say that these guys really do know what they’re doing and by using their product, I’ve sped up my work process by at least 40%.

Not to mention the completely interactive wireframes that I submit to my clients. They love it!

How I start with Balsamiq

I always start out by using the “Window/Dialog” option to start my project. In most cases I start with 960px by 1000px. The designer also has access to Balsamiq, which makes my job a million times easier when they check for dimensions.

Balsamiq Wireframe 1

If you know your way around Balsamiq you can select the correct tab to get what you want like:

  1. Buttons
  2. Forms
  3. Text
  4. Markup etc…

If you don’t know your way around you can start by selecting the “All” tab, which was where I spent most of my time when I started with Balsamiq. They pretty much have everything you need and if there is something they don’t offer like an image that “must” be in your wireframes, you can use “Project Assets”.

Wireframe Example 1

Starting Out With The Navigation & Content

Most of us will start with the homepage. This is actually one of the mistakes I’ve made with Balsamiq. What you want to do is create a standard template for each website so that you don’t have to copy/paste over and over again.

I would love to see Balsamiq give this option with their next update where you have the choice on selecting a standard template, which you’ve saved. The clone option from the “File” menu is okay, but a tab with standard saved templates for a project would work a lot better.

Homepage Wireframe

Almost all the elements on a page have the option for you to link out of. This is my favourite feature on Balsamiq since you can literally do usability testing without even going to design or paying for expensive online software for testing.

Once you figure out what each tab offers, you’ll learn your way around pretty quick. The program is really not complicated and I am sure with your third page everything will be streamlined for all your future pages/projects.

Exporting Wireframes Into A Interactive PDF File

Like I’ve mentioned before, you can export your wireframes into several formats. I am not sure why any IA specialist would export to PNG unless they want to simply share a page or two. I personally always export to PDF and export every page with all elements linked properly.

Another future update that would make Balsamiq the king of all wireframing tools is a feature that gives the option to export every page to PDF without having all of them open. I would personally give the user the option to select which page and in what order they would like to export their project.

Wireframe example 2

What Else Can You Do With Balsamiq

With Balsamiq you can also create wireframes for pretty much everything. The tool is not just for wireframing websites. I’ve recently switched from OmniGraffle to Balsamiq for creating sitemaps. You can also use it for creating software. Who knows, maybe my next article will be on how I used Balsamiq to build my house.

How Do You Use Balsamiq For Your Projects

You’ve seen how I use Balsamiq to push out killer wireframes to my clients and designers I work with. What do you do with Balsamiq and how does it make your life easier? Maybe you would like to suggest a feature. I’d love to hear what everyone has to say.

Puya Turkiyan – SEO & Online Marketing Expert

is a well-established online marketing professional with over 10 years of experience. He has primarily focused on how revenue can be increased through better visibility on search engines. His true passion is to use analytical data for digital acquisition. Follow him on Twitter @PuyaTurkiyan

  • http://kcura.com John

    Balsamiq Mockups has recently (?) added the ability to build out a sitemap from nested text. Drag the Sitemap object onto the page, double-click, and build out the sitemap (graphic) with nested text, like…

    Homepage
    – Landing1
    — Details 1A
    — Details 1B
    – Landing2
    — Details 2A
    — Details 2B

    Pretty sweet addition. Happened upon it last week.

    best,
    John

  • puya turkiyan

    From what I understand they’ve had this in option the last few updates.

  • Elena

    Great article, I use Balsamiq for the same reasons that you mentioned, and it dramatically simplifies my work and allows me to move quickly with the delivery.
    In most cases i don’t need to create the detailed specs since i have the interactive wireframes to them and it gives the entire picture what needs to be developed.
    Balsamiq is the great tool. I love it!

  • puya turkiyan

    Thanks Elena,

    That’s exactly what I do. The interactive wireframes works in terms of getting designers on board as well.

    Cheers,