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!
Thanks for noticing our changes! We appreciate the review of Gliffy. Just a note: Gliffy still offers free accounts, we limit the diagram count to five, but it goes forever (not just 30 days). Draw Away!
debik at gliffy dot com
I’m glad to know that about the free limited use of Gliffy. I love that you’re still around and finding great uses for the product – it is so neat to be able to do that stuff online and that is how I found your product years ago. It is an amazingly easy product to use – I will check it out again myself. 🙂
Those some awesome tools. Thanks for giving us this post as I know I will use at least two of them right away.
Thanks Grant! But I’ve got to know – what are the two tools you’ll use??? :-)))
Balsamiq Mockups for sure and GUIMags. I already use and love Skitch. Another great tool that works well with Skitch is Imagewell. You can resize images so easy with it. Skitch and Imagewell are two blogging tools I could not live without.
Ooh thanks! Imagewell looks very cool… http://xtralean.com/IWOverview.html
Great post! Here are a couple of tools that are similar to a couple you mentioned but that I find more useful (I’m not related to the companies, just a happy user):
Web-page snapshots:
http://pearlcrescent.com/products/pagesaver/
Screen grab & edit:
http://www.jingproject.com/
Thanks again!
Greg
Greg, you mentioned Jing!! It seems to be par for the course that I write a big article like this, and THEN discover something else I love, and I just found Jing a couple of days ago. It rocks so much!! I haven’t tried Pagesaver but will check it out. Thank you!
Thanks for writing about these tools – I will now have to try them out.
I love your list. But what about Axure.com? Do you use it? Cheers from Berlin.
I myself have not used Axure and I hear so much about it. Mentioned all the time on Twitter by my Uxp friends. I do want to check it out!
This is Zohair from Dabbleboard. Thanks for the mention. Please drop us a line so we can help you with making the mockup the way you want to. In the example you mentioned, 3 elements (the window, scrollbar and buttons) were taken from the UIToolkit, and the rest were just auto-detected lines/rectangles.
Love the idea of GUIMags. I have spent way too much time drawing web mockups on a whiteboard, and turning my hands blue in the process. These are a great idea. I will have to try them.
By the way, I found your site through your twitter page, and love it. Great content. I will be back.
I use SnagIt religiously, probably every day really. It’s just incredibly easy to use for a non-designer like myself. It lets me grab whole pages, or just snag text off a page, and quickly mock up changes and send to design team. It has some rudimentary image editing options, too, but I rarely use them. It’s not free, but I think you can do a free trial.
I’ll highly recommend Axure as well. It supports rich interactions out of the box like I’ve never seen with any other tool.
Some GUI Mags showed up under the Christmas tree this year, so I’ve been getting to play with them too. They’re pretty fun!
I use OmniGraffle Pro, there is a lot of gui libraries to download. Sowry PC, only for Mac.
For the soft http://www.omnigroup.com/applications/OmniGraffle/pro/
Templates are here http://graffletopia.com/categories/user-interface
We developed and use Screen Architect http://www.screenarchitect.com – Jolt Productivity award winner 2009 for design and modelling tools category. integrates with Enterprise Architect and automatically generates some of your underlying analysis model for reuse by your analysts and allows traceablity between your design and data model.
Another tool in this area is WireframeSketcher. The twist is that it’s a plugin for Eclipse IDE.
Thanks for the post about GuiMags!
The GuiBoards you’ve mentioned are now available. They’re magnetic dry-erase boards especially for Magnetic Prototyping. It has the resolutions pre-printed on them, so simply trace the grid to draw mockups for an iPhone resolution, computer or tv.
I use them every day!!
More about this: http://www.GuiBoards.com
-Efraim
Don’t forget iplotz.com, which was launched start of 2009. Desktop and online versions available to build mockups and wireframes for testing and collaboration.
Hi Kris
I’m not the biggest fan of Microsoft products, but they’ve just released their Expression Suite 3.0 which has a new Prototyping tool called SketchFlow (or Blend+Sketchflow). I actually won a copy at a recent South African User Experience Forum event, and from what I’ve seen so far, it looks really nifty for rapidly creating interactive prototypes (of course, and as usual, in typical Microsoft fashion, one just needs to spend some time getting used to the fiddly interface).
Here’s what they say on their site:
SketchFlow is a new feature in Expression Blend 3 that enables rapid prototyping of web sites. SketchFlow helps designers, developers, information architects and account managers sketch, wireframe and prototype user experiences and user interfaces.
Have a look at the application’s video overview here:
http://www.microsoft.com/video/en/us/details/1eea789b-c69c-4b09-a13b-b7422c0ff104
There are many alternatives out there, but this one seems pretty good to me, albeit a tad pricey.
Hope this helps 🙂
Cheers
P.S. Great blog BTW 🙂