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

Page Description Diagrams are pretty much wireframes devoid of any layout representation. Page content chunks are described textually and also prioritized on a horizontal axis.

Here is a snippet of what Tom, of Blue Flavor, writes.

One of the main reasons why I love pdd’s is that they effectively remove visual design and layout-based discussions (which should be reserved for the visual design phase of the work) from the IA process. Presenting and discussing only content forces a client to focus on choosing what is and isn’t really important on a given page, helping to communicate their core message.

In addition, a good article on PDD’s exists over at boxesandarrows, and Garrett Dimon has posted a PDD template for Visio.

Credits: Tom Watson

Cutting corners on the level of detail is a popular approach during wireframing which has been noted in the past during exploratory phases. These reference zones (term taken from Wireframes for the Wicked presentation), or content labels, do just that. Block outlines have been drawn out which are then labelled in order to describe what is contained within. Hans here has also introduced a number of arrows which begin to explore rough flows or events within the interface (similarly to Vivi’s In Page Events sample). Perhaps another difference between Hans’ and mine sample is that mine combines these abstract reference zones with more detailed sections, whereas Hans’ sample is fully referenced. Either way, these ways of abstracting the representation is quick and works very well in stirring initial interface ideas.

Credits: Hans Nieuwenburg

Inspired by the High Level Layout Aternatives sample, when I was sketching some ideas for fluidIA the other week, drawings such as this emerged. Even though the use of letters as a way to distinguish alternatives was borrowed, the intention wasn’t really about exploring layout. Instead the focus was more about exploring a number of various interaction alternatives where screen or state changes are interlinked with some form of action (mostly key presses in this case). The sample also makes use of a simple title suggesting a unifying idea for all alternatives. Just thought it would be worthy to share.

Credits: Jakub Linowski

I think the technique of using colour combined with interface sketching has a great deal of strength. In this sample from Harold, amongst other things one can really see some awesome explorations emerge. The colours in this work really help to gain a richer understanding of the various interface elements across the screens. It also makes association easier and thus similarities and differences begin to stand out more so than in simple grey scale terms.

Traditionally, the general consensus around the use of colour in early interface design work was to avoid it. Early conceptual design, at least in wireframing, has typically focused more on things such as basic interface structure, flow, functionality and more general interaction. Seeing detailed colour on a computer screen too early was (is) perceived by many as detrimental from these more important issues. Myself included, I have resorted to the use of colour in wireframes for purely functional reasons. Could this constrained view be breaking down? According to agile approaches, it is completely valid and even desirable to “spike” forward with explorations. This sample does just that perfectly well in the context of colour exploration. Perhaps a coloured fill using the paint bucket on a computer is too rigid and too perfect for early design phases. However, such renderings as seen above still resonate with open and inviting incompletion which makes them more than suitable for conceptualization.

Here is another link of the evolution from sketch to final visual, along with an explanation.

For those thinking of spending some money, Harold has mentioned that he used Copic Markers, which are quite expensive but refillable. Amazon carries quite a few different sets amongst which include a greyscale set and a coloured one as well (they have other ones too). Jennifer has also stated here that she uses Prismacolor ones which are a bit cheaper and available in color or greyscale. I personally might just pickup and try a few colours first from a local art store, as well as compare Copics to Prismacolors.

Credits: Harold Emsheimer