What’s your favorite tool to create a GUI design? Mine is whiteboard and a marker. Unfortunately it has some disadvantages. While windows and controls can be created rapidly whiteboard leaves you with pretty rough design. You don’t really think about specific positioning of all buttons and lists. You don’t think whether labels are fine or are they too long. You don’t think how a window changes when you display new controls. It’s all done when first working prototype is ready.
If you try to create clean GUI design you usually need some kind of tool for that. Usually IDE allows you to create clean sketch of GUI. A problem is that a person who should do the job rarely uses, and basically never needs other function of, IDE. That’s where MockupScreens appears.
MockupScreens is pretty light-weight application which allows you to prepare GUI design. You can prepare multiple screens using all basic controls and you can add some flow between these screens mapping actions (screen changing) with specific controls.
Easy to use
MockupScreens is very easy to use. You need no documentation whatsoever to prepare your first design. You don’t have fancy controls at hand – just basic shapes, but that’s exactly what you need. You don’t try to polish your app – you’re building first version of your GUI. You definitely don’t need bells and whistles now. What you get instead is simplicity.
It’s hard for me to get excited about this application. Building GUI sketches isn’t dramatically creative kind of task, you know. Anyway the big strength of MockupScreens is that it gets the job done. Not much more but nothing less than you’d need. Actually I always rant about lack of some features and this time somehow I don’t feel this urge. Strange.
A nice feature, especially for presentations, is you can create a usage flow of application you design mapping buttons on one screen with another. This way creating a clickable GUI prototype is very easy. This can bring you some ideas how you can improve your GUI. You can act like you heave working application with no development work whatsoever. Don’t show MockupScreens to your sales people.
Black and white screen mode
This feature was definitely proposed by one of the engineers. You can switch a design between desktop app, web app and black and white mode. The last one doesn’t try to imitate standard controls look but presents very basic design. This way business people wouldn’t think you have your app ready as they could think looking at clickable GUI prototype.
As you fill control options with data (labels, list elements etc) they’re automatically presented at your design screen. Unfortunately it’s slow. Oh so slow. It’s a bit frustrating when you try to fix a typo but actually a cursor is two characters after you.
Main editing area
I know I’m sick to work on 10,6 inch screen but this makes main editing area in MockupScreens pathetically small. There’s no rescaling feature either. This enforces heavy usage of both vertical and horizontal scrolls which I’m not very happy with. I guess this must be some kind of punishment or something.
Controls which are used in MockupScreens aren’t transparent where there should be. It leads you to situations when you put frame on your screen and it hides everything which was there before. You can deal with it using Visio-like “bring back” and “bring forward” options but hey frame should be, well, just a frame.
Actually the best summary of a review is already written in the first two strengths – MockupScreens is easy to use and gets the job done. It’s a nice alternative for IDE features for all folks who aren’t developers and don’t need (and don’t want) Eclipse or Visual Studio installed on their machines.
As a test I created very simple design of one of web application we were recently working on and I have to say it was easier to present what I wanted to achieve with MockupScreens than with a drawing on a whiteboard. Basically what MockupScreens did was forcing me to put some order in my ideas how to arrange all controls and made me rethinking a bit whole GUI.
Having said that a whiteboard is still my favorite tool for GUI design but I’d go for MockupScreens whenever I need something more detailed with rather precise controls positioning. Using the tool is also a good idea whenever you talk with business people or a customer – they don’t necessarily have to appreciate your drawing (lack of) talent.