MockupScreens 4 has just been released earlier this month. This wireframing tool allows rapid creation of interface mockups by means of dragging and dropping elements. MockupScreens lets you organize your working screens in so called groups, which then can also be played back with the help of a slide show presentation tool. More so, nonlinear interactions can also be specified with the help of “jump to screen” definitions. MockupScreens also supports the ability to create comments and attach them to either any existing element in the workspace or as standalone annotations. Overall it looks like an interesting wireframing application which is emerging.

Download the 30 day trial here.

This post also marks the start of a new category called Tools where I intend to write about wireframing and prototyping software.

Rich Internet Application wireframes continue to pose a challenge to information architects who try to tame their complexity. Often all it takes is a few multi-state items on a single page and the number of all possible page variations skyrockets. Nick has introduced an object-oriented approach to wireframing which aims to ease the representation of such conditional multi-state interfaces. First, a wireframe is drawn up in the traditional sense. This is then followed by the definition of objects or component areas using dotted lines and a reference code. Each object’s various states and conditions are then explored in detail on a separate page, while still referring to with the same reference code. The approach works well in that it makes the interface components more manageable and easier to change.

Nick continues to evolve his approach, as well as has been presenting his ideas in PPT form over at slideshare.

Credits: Nick Iozzo

Often as noted in the past, there comes a time when the designer craves to invite feedback about a wireframe or any other design documentation. Rob here has taken one step further by creating an interface representation with elements being overlaid as separate pieces of paper. This has the added benefit of having an even more engaging wireframe which invites further collaboration. Here not only can viewers provide verbal feedback, but instead they can explore together different interface variations while freely rearranging elements. In retrospect Rob writes about his experience positively:

I really enjoyed the meeting I had. In the past support for these meetings has been thin. I used this free-flow method to get better participation and stake-holder engagement in this project – and I think it worked (know it worked).

Update: Rob just did a second version of this wireframe, which can be visible over at his flickr site. Looks like putty has also been used to keep all of the paper layers from flying around.

Credits: Rob Enslin

Recently, quite a few representation about human activity have been merging in with the wireframe. Similarly, here is a template which contains various possible gestures on a touchscreen. Elaine came up with interesting ways to represent: taps, double taps, drags, flicks and pinching. Unflattened PNG can be grabbed from here (Elaine says: “I’m okay with people using the images for wireframes, presentations and educational purposes, but no modifications please”).

On the same note, Dan also posted another gestural icon set over here.

Credits: Elaine Chen

After the previous post, Sherrod reacted with his own cursor sample which aims to represent more varied mouse actions. He uses a combination of cursor icons to differentiate between clicks, mouse overs, and gestures. Taken together these all help to tell a clearer story and establish links between the different screens.

Credits: Sherrod Faulks

Cursors can be used inside of wireframes, or detailed visual layouts as in this case, to hint at states. Overlaying them on top of existing elements can give the viewer a stronger understanding of the multi state nature of the interface through the visibility of mouse positioning. In its most basic form a cursor can hint at an element’s onMouseOver state. In this sample I’ve used multiple such cursors on one screen to show multiple states all at once. I would assume it would also be possible to help understand other states as well (drags, resizes, etc) using cursors.

Have a look over at Konigi’s Wireframe Icon Set which now also contains cursor icons.

Credits: Jakub Linowski

While designing the uxtestkitchen.com site, Dawn has come up with a navigation scheme which displays the site structure along with the current location at the very top of the interface. As we’d expect, these ideas have been naturally placed into the wireframe. What I find interesting however is the juxtaposition between the site structure and the wireframe at a more general level. I mean, this type of view could just as well be used even if the interface did not contain such a navigation. After all, seeing the site structure along side the wireframe in itself provides a richer picture. Similarly to showing needs alongside wireframes, perhaps seeing structure or user flows more closely could enrich the context.

A second thing I find interesting here, is the use of colour to suggest the current location of the user. Here, yellow has been used to hint at the currently selected item. This brings back thoughts about colouring clickables in wireframes. Just as actionable elements in a wireframe could have a reserved colour, perhaps a second standardized colour could be reserved to suggest selected items.

Credits: Dawn Bovasso

Just made some slight adjustments to the existing alternative sketching technique, aiming to steer more in the direction of brain storming or mind mapping. This resulted in something I’ll call a sketchstorm. Wanting to feel less constrained in the explorative stage of a project, little frames were sketched on a larger paper size (11×17) without any “alternative numbering”. Simply, the interface ideas which were more related to each other were grouped more closely together. As alternative concepts emerged, they were drawn outward away from the center. The center of the page still contains a focal idea which the sketches try to support. Overall, I can say that the larger sheet size combined with small interface representations did feel more free.

Credits: Jakub Linowski

Here is an interesting twist on the wireframe by means of using a different coloured background. When Steve has been drawing up templates of existing content for an intranet site, coloured paper has been used to denote the various templates types. In this case the colour suggests the differences in technologies used. However background colour could be just as well used to denote other things such as: user types, page states, stages in a flow, etc. It seems like an interesting approach, as typically the wireframe usually rests on a white background.

Credits: Steve Baty

Personas inside of wireframes? Sherrod began combining little people figures with actual interface representations. It’s interesting to see these miniature persona like icons along with their basic user stories or simplified needs trying to provide an additional layer of information about the context of use. The icons also come available as a downloadable PSD file and contain a number of unique roles.

Credits: Sherrod Faulks