Wireframing for Web, UI, UX design

I see a lot of questions in forums on, “to wireframe or not to wireframe?”; which wireframing tool to use? etc. While things can be different based on the nature of your work, your needs, projects etc., here’s something that worked for me, which I shared recently with my colleagues at West Virginia University. It can work for you, even if you are not in higher-ed.

A wonderful tool called Balsamiq (no, it's not a typo)!
Here is my review of the desktop version of their product called 'balsamiq mockups' that I am using, the other versions have similar functionality. They provide a multi-user, monthly, cloud based option and other plugin options too.
It is free for non-profits and educators, but not for staff in higher-ed, although you may qualify in some ways.

What is Balsamiq?

Balsamiq is a lo-fi (only in looks) but highly functional wireframing tool that lets you create wireframes/lo-fi mock-ups using many readymade UI components, quicker than sketching or in photoshop (yes, even with ready psd UI components), and the best part… make them clickable (ooh!), link them to each other, even without the cloud based model (aah!).

Why Wireframe?

• Let’s look at a scenario: You present the clients (internal or external), a sitemap/site architecture with all the sections, connectors, flow diagrams and what not; perhaps some sketches; a bunch of photoshop mock-ups; explain everything and I bet you still see some confusion during review, content posting (CMS), testing, about which content goes where, why we did this, etc.
• I think, when clients see fragmented pieces of a website/UI model, they may have a hard time putting it together after a while, as they aren’t always working on these as we designer-developers are.
• With linked wireframes, clients can focus on key elements of webpages, functionality, user needs, goals, interface, user-flow w/out getting bogged down with colors, design etc. (you are there to take care of those!). They like the “clickable” aspect, as they can see a quick working model of the key areas/features of the website/app.
• The responsive workflow: We all love photoshop, but as much as we may hate to admit it, the regular photoshop mock-up workflow isn’t cutting it these days with responsive web design. Many of us are probably already trying different things, without even being aware of it ourselves. eg. http://www.wsol.com/a-more-flexible-workflow/ I will soon post a link to my recent experiment on a modified workflow here.
• Wireframing, Styletiles, and now even interactive styletiles, CSS frameworks etc. are getting to be a big help to many of us with the new workflow/process. They are helping me and perhaps many others even "design in the browser" (yes, it isn’t really as shocking as it sounds), more so when you have a specific set of style-guides, color, branding and custom styles/rules for your University or Corporation.
• It is quick and efficient! chop chop and you are done!
  

What do I like about Balsamiq?

1. The lo-fi sketched look but hi-fi functionality which is very conducive for quick and good feedback.
2. Simplicity and ease of use. Just like Photoshop… All the familiar shortcuts and tools you are familiar in photoshop: Zoom-in and out, ctrl-tab to move between docs, group, ungroup, lock, align, distribute centers, smart guides, grid and more, so you don’t have to learn one more new thing, when you have so much new to learn already!
3. Here are some of the key features that I liked in balsamiq:
   
   
   • Great UI library, made even easier by 'quick add'. Start typing browser or button or navigation or icon etc. in 'quick add' input box and it will 'read your mind' and show all options! Just hit enter and customize.
   • Icon library.
   • Datagrid.
   • Mobile UI components.
   • Just start typing 'Lorem' and it will do the rest! Well of course, you can type in more descriptive content when needed.
   • 'Mock-ups to go': Sharing components, controls and GUI elements. You can make additional components and share or use the ones that others have created and shared (think symbol library).
4. Great user-centered customer service from a conscientious company; a ton of resources and support forums.
5. Best part… You can link between mock ups and even bundle/package the whole project into a single pdf with a group of interlinked files and send it over to clients or share it on dropbox etc.
6. By the way, they have gotten rid of Comic Sans in the wireframe and use 'architect' font instead now, so breathe easy!

They (I mean the balsamiq folks, on their blog) even help you figure out what’s for dinner (not cook, though). Unfortunately no help with your taxes yet!!
Here is a link to some wireframes I have created using balsamiq (note that the linking between wireframes only works with the linked pdf document). http://www.behance.net/gallery/WVU-Research-Redesign-UIUX-%28wireframes%29-Screenshots/9527457