My Favorite Prototyping Tools

A user interface designer relies on certain things: a fast, working internet connection, a big enough screen to handle the inevitable hopping back and forth from one window to another, some excellent music, and a steady supply of his or her favorite addictive beverage of choice… in my case, coffee or Coke Classic.

But those are just the accoutrement needed to set the stage. An interaction designer must rely on one or more tools with which to turn the brilliance bursting forth from highly stimulated and caffeinated synapses, into pure bottom line revenue. Well, ideally at least.

I have my staples, those products I cannot and will not live without, which happen to all be owned by the same company these days. Adobe Photoshop, Illustrator, and Dreamweaver have fueled the development of most software products I have worked on. Though they will always be used for my ultimate design and final polishing, I’ve recently discovered a few products that make creating a prototype almost as easy as having a thought, and I want to share these finds in case other user experience professionals or developers looking to prototype new features might benefit from them.

 

Balsamiq Mockups Makes Rapid Prototyping Fun!

I happened onto Balsamiq Mockups via a Twitter comment by Alex Horstmann about how great this product is. One of the big back-and-forth debates among information architects and user experience designers is the level of prototype that should be created and presented. Info architects generally rely on wireframes… the outlining of sections and navigation elements and the like. People who design the product line branding and comprehensive user experience like I do, often go whole-hog and want to communicate all their creative ideas, along with the taxonomy, navigation, etc. It can be time-consuming to do that, and sometimes even a visual designer just needs to show a simple feature interaction concept. Historically, I love to sketch with pencil and paper. It’s been the fastest way for me to work a design problem out for myself. But then I usually want or need to share it with developers, and I have a sketch. Do I scan it, recreate it using one of my standard tools, or just get on the phone and describe it???

With Balsamiq Mockups, I can grab and place “sketchy” elements such as dropdowns, icons and other form elements onto a blank notebook page online, then save and send it to my team. Peldi Guilizzoni, owner of Balsamiq and developer of the product, sets a new standard for customer service, which is one reason why this product will always draw raves from me, despite my occasional gripes about Adobe Air, which is the platform the product is built upon. Meet Peldi and you will agree with me. This product was and is “designed for users” by Peldi himself. If you have a problem, he strives to fix it, and uses the excellent Get Satisfaction site to stay in constant contact with users who need help. If you have a request, Peldi will seriously consider it, usually implement it, and if he cannot or shouldn’t, he provides the research behind his decision and fully explains why not. That is RARE, even in this day of more transparent and more open applications.

And now maybe Peldi will know why it took me so long to put this review up – I can’t stop blathering on about how great he is with his customers, and stay focused on the software itself, which is why you’re here. So go see the software for yourself!

>> Try it now, before you buy it!
>> Twitter Balsamiq

 

Skitch Takes Screenshots to a New Level of Convenience

Working with software, I’ve taken a lot of screenshots. I’ve taken them into Photoshop and refashioned them completely, I’ve drawn circles and put giant pink “Please do not do this!!” messages on them, and I have often had to take multiple shots of a long web screen and then put together the hacked up pieces in a Photoshop file so I can have the long screen to work on or annotate. Thankfully, a new Adobe Air tool called Websnapshot has eliminated that issue, as long as you have a direct link to point to.

But Skitch, though it doesn’t take a screenshot of the entire web page, does so much more, that it is well worth the money you don’t have to pay for it. It’s in Beta and Free as of this writing. Here’s what Skitch does, brilliantly and easily: find something you need to take a screenshot of, open the Skitch application, snap the portion of the screen you want, draw circles, boxes and write notes on it to explain your issue, post it to your online account, then share the link with the people you choose. Nathen Harvey, Director of Operations at VisualCV, turned me onto this modern miracle. He uses it to communicate with users and developers, because he can snap a screen and put notes on it and distribute it within minutes. The ability to post a screenshot online and grab the link to send in an email, rather than having to save and send an attachment from your own hard disk space is truly awesome. Learn the lingo and try it! I love this tool.

>> It’s free… nothing to lose but a moment of time. Try it!
>> Twitter Skitch
>> See Nathen’s Skitch Message Online

GUIMags & GUIMagnets Makes Whiteboard Collaboration Productive Beyond the Meeting

Gathering in a conference room, brainstorming with smart people, the smell of fresh markers permeating the air… nothing beats it (sometimes!) But after hours spent in a conference room, what do you have? A lot of stuff on a whiteboard that has to be transcribed, remembered and implemented immediately, or all the hours of work are at risk of being lost forever.

Enter these little whiteboard magnets that are so obvious, you’ll wonder how you lived without them all these years. I love the GUImags story… the lead designer had some carpal tunnel issues, and was stuck at home healing. He used refrigerator magnets to make interface elements, and the Eureka! moment struck him: he needed magnets of interface elements to make design faster and easier. (And less physically debilitating!)

GUIMagnets is a similar product of laminated form elements. Rik Schot, a User Experience Designer in Nederland, was working on a website form (and no doubt, making frequent changes) when he realized there had to be a better way to prototype.

Now, there is a trick to this – you will have to take pictures and distribute them of the whiteboard designs, until GUImags partners with someone like Polyvision or Scanr, or designs a unique solution themselves. Output of the meeting is a critical element of this process and I hope they will come up with a full solution soon, because I think this could be a really valuable product in team settings. GUIMags mentions several other products coming soon that will aid your prototyping & collaboration: GUIBoards is a neat whiteboard with built-in resolution sizes that looks like a helpful concept.

GUIMagnets are sold on a laminated sheet, but GUImags come in a little briefcase – you’ll look so official when you show up for meetings! 😉

>> Learn more about GUIMags
>> Learn more about GUIMagnets

 

Additional Products for User Interface Designers

Gliffy Does Diagrams in a Jiffy!

I so couldn’t help that headline. 🙂 But Gliffy does seem really cool. I have known about them for several years, and they’ve rebranded themselves to focus on using their tool for online wireframing, diagrams, storyboards, etc. This tool is easy to use and would really come in handy for professional sitemaps and interaction flowcharts. They offer a free one-month trial, and paid subscriptions following that. I haven’t tried the wireframing options they offer, but it looks pretty neat. Check them out.

 

Dabbleboard – A Powerful Online Whiteboard

I just discovered Dabbleboard but have only dabbled in it so far… it takes a bit of getting used to. The concept is really cool though – you can draw online, instead of offline using pencil and paper, and then show your lovely sketches to others much quicker than you could sketch, scan and send.

I tried making a user interface as lovely as the Dappleboard example shown here, but couldn’t in the few minutes I spent with the product. I think you have to add some elements or something from this UI Toolkit. I’ll explore the product more when I have time. For me, Balsamiq Mockups was faster and easier to get started with, but Dabbleboard has one key thing I like, which is the idea of drawing electronically so I can avoid the step of scanning, or recreating sketches in a full-blown prototype before showing them to people. You don’t have to sign up to play, which is awesome, so try Dabbleboard out today and let me know what you think.

Have I missed any other cool prototyping or user interface-related products? I’d love to hear about them if you use something not mentioned here!