I’ve been using WireframeSketcher for the last two weeks in mocking up a large web-application. WireframeSketcher certainly has a number of features to help improve your UI-mocking experience but a few of these are what I would consider to be killer features.
Here are my top 5.
WireframeSketcher is based on the Eclipse IDE. Does a sketching tool need such a heavy IDE? In a word, absolutely.
For large projects, you can easily keep related screens grouped together using a series of folders. For example, when mocking out a large web application you could have a folder for each module. Naturally folders can be nested allowing you to group them as high or low level as you like. This is so important to keep screens organized.
2. Reusable Components
This is the feature that completely won me over. So much so that we purchased licenses for our entire team.
WireframeSketcher allows you to create screens and REUSE them as components on other screens. Wow, such a great feature.
For example, we have a project that displays the “Last updated by” and “Last updated on” information when item detail screens. Instead of duplicating these 4 labels on each screen we need it, we created a simple component for it.
Now, we can simply drag our Last Updates component onto any screen that needs one.
Any changes you make to the base component are automatically reflected on each of the screens that reference it unless it has been customized for a specific screen. That means that if you decide a component should be formatted a little differently, it’s super simple to update it across the entire system.
WireframeSkethcher allows you to develop interactive mockups my linking components to screens.
For example, you could have a button bar and each button can be linked to a different screen. In the example below you can see the little link icon on the Add and Edit buttons. On the left, in the properties area, you can see the screens they link to.
This ability to link components to screens helps to simulate navigation and use-case scenarios making it an excellent tool to demonstrating the mockups to your client.
WireframeSkethcher’s storyboard feature allows you to assemble many screens into a collection of related functionality. This is a great to demonstrate a use-case to a client allowing them to see how the UI changes in time.
In our example below we have a simple calculator that demonstrates the “Divide” use-case.
I’ve created 6 screens that demonstrate the UI every step of the way of calculating 52 divided by 2.
I’ve assembled them into a single storyboard in screenflow view (seen below).
Once the screens are assembled in a storyboard, you can present the use-case to your client as a screen-linked image (as above) or as an interactive presentation.
WireframeSketcher allows you to export your screens and storyboards to HTML and PDF. The exported mockups maintain any component-screen links you’ve set up.
Exporting to PDF is a very portable way to share your mockups with your team or client. I’d recommend viewing the PDF in a whole page view as this keeps the navigation smooth.
Perhaps better than exporting to PDF is exporting to HTML. This generates a number of image files, scripts and an HTML page to drive the experience. Simply throw them up on your websever and you’re good to go.
I’d recommend WireframeSketcher to anyone needing to mockup any system with even a moderate complexity. You’ll be glad you gave it a try. I know I was.