Uwe has recently published his wireframe sketches in which he uses a number of interesting techniques. One of these techniques is the use of rapidly generated hatched colour overlays on top of his sketches. Coloured lines are basically drawn over desired interface sections in a diagonal manner. This fast application of colour has at least two benefits. First attention can be drawn to coloured elements as they stand out more. Secondly, associations between coloured elements spread out over numerous screens can be made more easily when sharing sketches with others.

Credits: Uwe Thimel for kuehlhaus AG

ax_admin is a software product which enables commenting on Axure HTML prototypes. Yes, Axure has collaborative creation features, however these are only supported while working within the software and not after an export. Should you wish to obtain feedback on an exported prototype, ax_admin jumps in to fill this gap by wrapping it with an additional interface. The software is web based and claims to have support for comments by RSS, comment status, and direct URL linking to specific pages.

Have a look at the demo here.

Petra has been exploring the idea of using Microsoft Excel for prototyping purposes. Introductory documentation on how to create such a prototype along with the real sample has also been posted online. At first glance, it appears like such a prototype is more suitable for complex data transformations than for GUI design which can be more easily achieved with stronger drawing applications. However, personally I have very little experience with such an approach and it would be interesting to see what others think.

Petra writes:

I created a paper prototype guided by Carolyn Snyder’s excellent book, Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, for a web application used to book occupancy of the road to do maintenance work, etc. It was a lot of fun testing it on my colleagues and a couple of genuine local users but when it got to testing remote users I thought perhaps I’d try to create an online prototype. I started with PowerPoint but found the macros deficient and a couple of things I wanted to do I couldn’t. I then ordered Effective Prototyping with Excel by Bergen et al, expecting that their prototypes would involve some basic coding but was disappointed to find they didn’t. A programming colleague showed me a couple of very basic code statements in Excel and I realised that with the Control Toolbox widgets, .Visible = True and .Visible = False statements, a couple of If statements, a little googling and a little recording of macros to figure out some code, I could create a pretty workable prototype, albeit only able to handle very specific use cases.

Credits: Petra Liverani

WireframeSketcher is a plugin for the popular Eclipse development platform and allows for the creation of quick wireframes. This tool comes with a wide palette of draggable user interface elements, widgets, sliders, and icons as most user interface designers would expect. The latest version also supports states for certain form elements allowing to specify such things as disabled, selected or enabled modes.

What sets WireframeSketcher apart is definitely the storyboard mode (as seen on the second screen). Basically, drawn screens can be organized in a linear fashion into presentable stories. This features is an interesting exploration of the communicative role of prototyping which many UI tools fall short on. Another unique feature of this program is how it handles masters. With WireframeSketcher users do not have to worry about defining masters up front (at the time when it still it is not known which elements are to be shared across). Instead, pages are simply created and if a user wishes to reuse a page as a master, the page is inserted as a “Master Screen” object anywhere on a new page. What is also interesting is that in this way, users can also combine multiple master pages, providing even more flexibility. Overall, this one is a very interesting tool.

Download it and try it from here.

Page dimming is another visual tactic which can be used to focus attention away from what is less important toward what really matters. Here is one example from Rebecca, of an overlay being used in a wireframe in combination with the background page becoming more grey and faded. I’m not exactly sure how it was technically implemented here, however often all that is required is a drawn rectangle with a see through opacity. The elements which require more attention (such as the overlay in this case) are then brought up above all layers. This approach provides another way of emphasizing certain interface elements for users of the interface, and also for readers of design documentation.

Credits: Rebecca M. Allen

A wireframe alongside a moodboard might stir some controversy for traditional information architects. Fonts, colours, styles have been considered a thing of the later phases of a design process, elevating the flow of activity in importance. Perhaps Chris’ work which combines stylistic exploration with the exploration of interactivity, challenges this traditional waterfall view. Similar thoughts have been surfacing and emerging in earlier posts and samples, as visible here and here. Perhaps this interplay between user experience and emotion is an important one. Perhaps it’s only natural if interaction designers or information architects work in parallel with visual designers opening up more room for dialogue.

TIP: To see the full image you can drag around with the mouse while in the full size mode of the popup.

Chris writes:

I’ll do my Wireframes in illustrator after I have met with the client and they have filled out my website questionnaire (another blog post for that) – after we have hashed out the sitemap on Writemaps (another great product) I will create this over all scheme that includes Fonts, Colors, Inspiration, textures or patterns and takes care of the Wireframing side making sure what will live on each page. For this example I have done a very simple layout – just a homepage template and interior page template. If this was a large site I may have done out 8 template Wireframes in illustrator.

Credits: Chris Gillis & David Perel

Recently in my sketches I began relying quite heavily on little frames which is one of my favourite techniques. However I also noticed that this approach has a limitation. As a flowing interaction is being sketched out, often I need to zoom in a little bit more on the details to show what I mean more clearly. Little frames are just sometimes too little.

Perhaps influenced by the wonderful isolation and referencing technique of Jonas, I began zooming in on parts of the interface where required. What I have began doing somewhat differently from Jonas’ drawings is an attempt to reference the zoomed in interface pieces more clearly. This is being attempted with the help of thicker black edge lines and corners. Drawing a thicker line around the little frame, and then creating a corner in the same style for the zoomed in piece, I hope helps a bit more in terms of relating the sketch to the edge of the screen. In the end, edge cornering extends the speed of little frames to larger sections of the interface, while still affording to draw only the bits and pieces that are relevant (leaving the obvious out of the picture).

Credits: Jakub Linowski

ForeUI is another recent addition to the growing number of existing prototyping tools. Some of the features it supports include drag and drop of elements; creation of customized elements; and a prototype mode that generates either a slide show or HTML. It shares a low fidelity text tool called “Bla Bla Bla” similar to the Greeked Text plugin posted earlier.

Something perhaps less seen in the other tools out there is the Rumble slider which turns the background of the prototype into a crumpled piece of paper, suggesting stronger incompletion. Another interesting approach is the accessible Image Dock area that allows the designer to populate it with images that are to be used in the prototype. Finally, ForeUI also allows to theme the prototype choosing from a selection of Wire Frame, Windows XP and Mac OS X looks.

Download it here.

Quick announcement. Since my graduation date is closing in this summer, I thought to make use of Wireframes Magazine to shamelessly promote myself as a user interface designer for hire. Very soon I will be looking out for freelance opportunities as an independent contractor. So please let me know if you think you might be interested in working together. Looking forward. Jakub Linowski.

John has recently released publicly a Fireworks extension that allows designers to create a rough looking text placeholder – or “greeked” text. The extension works with the help of auto shapes and generates random line lengths of the text for a particular area. The size of the leading (or line spacing) and line height can be controlled easily as well. When rotating the text block by 90 degrees, it is also possible to use it for a quick graph like looking symbol.

This plugin is a nice addition in the rising popularity of low fidelity representations. It allows anyone to create text quickly which is very undefined and provides a nice alternative to the standard lorem ipsum approach.

Credits: John Dunning