WireframeSketcher is based on Eclipse platform. I use it a lot to create mockups for websites and applications. It helps to focus on content, usability and features, instead of design. When your mockup is tested with future end users and documented for developers, it’s time think about design.

Overview

Eclipse users will not be disappointed, the workbench is quite the same, but in the middle, you draw instead of writing code. Also, instead of just drawing basic shape, there is a style added so everything looks like it has been done on paper with a pen. This way, in the mind of people looking at the mockup, you are sure they think about it as a mockup, and not as a definitive design.

You can also add annotations for documentation purpose.

And you can create links on items to other screens, in order to create a live mockup. You can play the live mockup in Wireframesketcher, and also export in HTML to share it.

First project

Menu: File / New / Wireframe project

You can select different type of project, from web to smartphone app, …

Assets

You might want to build a mockup using elements you already have: logo, screenshots or pictures, icons, … You can add them to the “assets” folder of WireframeSketcher folder. They will be available on the right column. When possible add SVG files, so that the software can apply the “hand style”.

WireframeSketcher provides Stencils, it is libraries of screens, icons, mockups, ready to use. You can find them on their website:
http://wireframesketcher.com/mockups/index.html

Icons

You can add an icon alone or with a label, by adding the “Icon” element from the palette.

It is also possible to add icons in some content (text) or attached to an item (button, input, …). To attach an icon to an item, you can click on the properties on the left sidebar, and you can browse the different icon librairies available. With text, you can start to type the name of an icon in { } and use ctrl+space to display some help.

Links

Draw at least 2 screens. You can add links to another screen on elements like buttons, but also on text. Text must be between [ ] to be considered as link. You can’t add links to external resource.

In a screen, select the element. On the left sidebar, next to “Properties”, select “Links”. You will find a list of possible links, just click on the one you want and select the screen to open. That’s all. You will notice the link on the mockup with a special small yellow icon on the item.

The most difficult part of it is to think about the structure, all the links between all the pages. On a live demo, you can highlight links, so testers can easily find the clickable areas.

Annotations

On the right column you will find annotations elements. You can of course change the colour. If you need to use an other element (a square, a round, …), and make it an annotation, you can do that in the menu: Object / Mark as annotation.

During export, you can choose if you want to see them, or hide them.

Storyboard

A storyboard is what will allow you to run the mockup. Put in it all the screens. Be careful about the order of the screens, so the user starts the mockups at the good place. Once done, you can run or export your live mockup.

During a live demo, users will be able to click on the links, or to use left and right keyboard arrows.

Missing features

IMHO, there are two issues with the current version of Wireframesketcher:

1. You can’t hide annotation while working on the screen, so if you have stuff below, you can not select them. It’s really bad for productivity. There should be at least a layer management system, so one can put all the annotations in one layer and hide them. This is really a missing feature. I already discussed about it on the user forum, the solution they propose is not really useful. And there is no workaround.
2. There are a lot of text styling options, but no equivalent of the “pre” html tag. It means there is no way to add monotype text.  Let say you want to show how command line or code should look in a design, with fixed characters size, this is not possible. If you are interested too, do not hesitate to tell the developers on the forum.

Conclusion

Despite a few missing features, I really appreciate WireframeSketcher to work on features and UX. I use it at the moment mainly for web stuff. However, I really think that would be awesome to have Eclipse Platform stencils. This way, Eclipse developers could use that to work on their UI/UX before starting to code, collect end user feedback. And also, very important thing, this would be great to share best practice and have a more consistant UI across different Eclipse plugins, applications, tools, …