I’ve got a client project in the works for an intranet where one of the primary goals is to improve the current user interface to increase productivity and lower training costs.
It’s a manufacturing jeweller that is looking to expand its business significantly over the next five years and they need a platform that can help them achieve that with their existing team.
In this project I wanted to work closely with the three stakeholders: management, accounts/admin and the sales team. I not only wanted their feedback but wanted the more technically minded users to be involved in doing the wireframes and information architecture.
Over the years I’ve hacked around in Photoshop and Microsoft Word/Excel/Visio to do wireframes and I wanted to try something new as I none of those tools were that great in my opinion.
I needed something quick and easy to use whilst with the client and I didn’t want to go old school and use a pencil & paper! I came across a great article on wireframing resources and checked out a few recommendations.
The one that stood out and I ultimately got a licence for was Balsamiq Mockups. It has a similar interface to another application I use religiously for screenshots for wireframe/design feedback called Snagit.
I’ve only used it briefly but it’s already the best wireframing software I’ve used with all the common form elements I use on the web, there’s a quick video on their site which shows you the interface and how easy it is to use.
Some things I like about it:
- Cross platform, I use it on my Windows and OS X machine.
- It only takes 10 minutes to mock up a whole screen. My main problem is I’m not decisive enough and it takes me 20 mins of moving elements around!
- It is intuitive. A lot of designers use Adobe Illustrator to mock up wireframes but I always run out of talent when I try to use it.
- I love how wireframes look hand drawn. Boxy wireframes out of all other apps I’ve used make them look too clinical
And here’s the result of a ~10 min hack:
Some things I’d like to see in future versions:
- Snap to grid recognises sub-elements (e.g. for a browser window, where the toolbar ends)
- Support OS X’s multi-touch on the ribbon to allow me to two finger scroll horizontally through the widgets toolbar
Both Balsamiq Mockups and Snagit work really well together in the life cycle of the information architecture phase and are both available on Windows and Mac which is great for us fence sitters!
Related articles: Once you’ve made your wireframes, check out Smashing Magazine’s article on CSS & Javascript techniques for layouts & visual effects