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.
If you know your way around Balsamiq you can select the correct tab to get what you want like:
- Buttons
- Forms
- Text
- 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”.
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.
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.
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.
Using Balsamiq For Information Architecture & Wireframing is a post from:
The post Using Balsamiq For Information Architecture & Wireframing appeared first on .