I just kicked off a new inspirations category intended for samples and techniques from outside the boundaries of the UI/UX/IA profession. I’m looking forward to seek out some inspiration from within other fields in the new year (please continue to send in samples or ideas). For now, here is a first post in this category.

I’ve noticed that my sister who is in her third year of studying architecture does quite a bit of sketching and model prototyping herself. Looking through her work, one thing which caught my attention was the use of a form of sketching which overlays the envisioned building (or neighbourhood) on top of an existing environment. For me, this seems like a superb and smooth way of transitioning from the present into the future. The present in this case is a black and white photograph of the neighbourhood and acts like a clear reference point. The future state of the intended design clearly stands out by means of a coloured pencil sketch on top of the photograph. Occasionally, I’ve also seen her make use of overlaid tracing paper.

To me this seems really interesting and I wonder if the same approach can be used in UI design. When redesigning existing UIs, why not take screenshots of the current present state, import into Illustrator and sketch the future state on top. Eager to try this one day.

Credits: Dominika Linowska

Andreas just sent in a sample of a wireflow done in Omnigraffle (here are a few more) which I thought was an interesting show. It contains a sketchy style, conditionals, and groups a set of pages together with a grey background area. Most recently, this way of working is also my personal preferred approach to communicating UI concepts. Not only does a deliverable like this convey activity more clearly, but it also provides a sense of scope in one snapshot. One problem with these wireflows which I’ve seen in the past is when the design proceeds further and more detail is required. Often in this situation I fall back and develop wireframes. This however duplicates the documentation which is undesirable from a maintenance perspective. Come to think of it, perhaps there is a way to reference occasional detailed wires, on demand, from within a wireflow diagram. Anyhow, here is what Andreas has to say:

I’ve got a combination wireframe/sitemap that I thought I’d share with you. Adequately called a WireMap. It’s a tool I started using in an attempt to get an overview of small to mid-sized web projects. (The limit is self-imposed. I like printing my work on paper and hanging it around the office. And there’s only so much information you can fit on Tabloid or A3).

Using the wiremap has been a boon both in talking to the internal team as well as taking to clients. In either case it helps the audience grasp the scope and complexity of the project. I’ve found it very helpful in the formative stage, but I see no reason why it couldn’t also be used later on in the development cycle as well.

My approach to this is the combination of wireframe sketching (for which I use Konigi’s Sketch stencil for OmniGraffle) in combination with J.J.Garrett’s IA templates (another OmniGraffle stencil). The result is very much a WireMap in that sense of the word—a site-wide visualization with some page detail (enough to provide an idea of the page’s purpose) as well as some rudimentary logic.

I’ve attached an example showing a WireMap of a mock website called CoffeeStuff. I’ve tried to keep it simple but could easily elaborate more if you think it worthwhile. Didn’t want to overwhelm the reader, but I’m keen to hear your thoughts as well. The map is by no means bulletproof, but I think it does a good job of introducing the general concept.

Credits: Andreas Holmer

Here is a vector based wireframing template freebie released by Janko:

The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects. You are not allowed redistribute it.

Credits: Janko Jovanovi

Easy Front-end Framework is another interesting compilation for speeding up the process of building HTML web sites or prototypes. The framework brings together and combines pieces of HTML, CSS and Javascript in order to ease development. For example users can easily set up a simple grid layout by means of equal width percentages or fixed widths. Furthermore, a number of interactive elements are also available which make it possible to inject such common prototype interactions as: popups, tooltips, navigation, jump to scrolling, and standard form validation. These interactions, although heavily based on jQuery, could still be very much useful for HTML based prototyping.

Have a look at the demo page to get a sense of what’s possible.

Credits: Alen Grakalic

Protokit is an emerging experiment of Michael (konigi.com) targeted at those who like creating HTML prototypes. Protokit is a toolkit composed of existing Javascript libraries which work are combined to together to make the process easier. Hats off to open source prototyping. :) Also be sure to have a look at the working online demo. The toolkit is best described in his own words:

Protokit is a toolkit for creating HTML prototypes. It uses the following open source libraries and plugins: Blueprint, jQuery, jQuery UI, jQuery Templates, and iXEdit. More information about the included libraries and their licensing agreements can be found in the README file.

Credits: Michael Angeles

Here we go. Five people entered the recent contest for a chance to win three accounts to Creately. This time I just used random.org to get the winning numbers. :) The winners are: Juan Jose Vidal (post coming up), Daniel McQuillen and Chris Neale. Congratulations! And thanks for creately.com for providing the accounts.

FlockDraw is an online collaborative drawing tool. It looks like it has some interesting potential for those times when you need to sketch something out together in real time and it’s just not possible to meet face to face. This flash based tool allows to create separate rooms for each sketch which are bound to unique and sharable URLs. The software is very light weight with the first version being released just last month and there is still room for improvement. The slight bothersome usability issue lies around the fact that the toolbar does not indicate the selected tool, nor the selected state of each tool (ex: brush size or color). Other than that, I’m looking forward to eyeing this little app into the future.

Try it out here.

Superb. Very similar to the previous post on Protocasting, here is Chris’ approach to creating quick paper prototype animations which tell stories of rich interaction. This stop-frame animation approach requires a web cam, some video editing software (Quicktime in this case) as well as a desk attached rig to ensure things are visually stable. For showing changing text, Chris uses an erasable pen and overlaid acetate on top of the desk which he calls ‘the stage’. This powerful technique, which portrays interaction seamlessly, is a critical move forward if we are to battle change blindness brought on by shuffling disrupted and disjointed screens. In his own words:

The desk is the stage, and the action is framed inside a print-out of an empty browser to give it context. I wanted it to look so simple and sketchy that nobody could possibly confuse it with a design, so I used paper, card and Post-Its to build up the scene and laid a sheet of acetate on top, which I wrote on with OHP pen. There’s a rather crude cardboard mouse-cursor and a rotating paper ‘in progress’ icon.

There are 8 animations in total, each of which illustrates part of a user journey through the form and highlights complex validation behaviour I’d found tricky to explain. I was a bit worried that the developers might think it was gimmicky, but the novelty wore off quickly and they rapidly moved on to focus on the content. Because the videos illustrated a lot of the main ideas, everyone involved was spared long, tedious meetings talking about display conditions and validation behaviour. This was a big win.

The whole process is really quick and, most importantly, fun – developers and stakeholders engage fully even with dry subject matter. Non-techies can get involved too because the animation software only has about 3 buttons. Unlike with Flex or AJAX, there’s no learning curve.

Animation is famous for taking ages, but doing animations like mine is remarkably quick providing you’re tooled up and organised. It took me about half an hour to set the scene, based on some wireframes we’d already done. Then each animation took about 15 minutes.

Credits: Chris Neale

Here is an interesting description of a protocasting technique brought to you by Theresa Neil (which she credits to Todd Zaki Warfel’s book on Prototyping). Basically a bunch of screens are first exported into PDF, then turned into a clickable prototype, and eventually a happy path is recorded as video and annotated with audio. I think it’s great to see an approach to prototype walk throughs which alleviates the pressure on the viewers to discover the interaction by themselves (a problem present in many prototyping tools these days). Instead, the viewer is guided through time and the designer covers the intended flow as a presentation. If prototyping is partially about leading the viewer to believe that the fake product is a real one, then Theresa’s protocasting approach achieves this perfectly.

Credits: Theresa Neil

SimpleDiagrams is a very light weight AIR application for creating diagrams which has been just released early last month. This little and simple project has been started by Daniel McQuillen with the intention of describing user experience flows. Speaking to Daniel, he might be willing to incorporate some pieces of the Interactive Sketching Notation in future versions. Look out! :) In his own words, some of the features include:

* Drag, drop and size symbols from libraries
* Add photos and post-notes
* Various background styles (chalkboard, whiteboard, etc.)
* Save diagrams on your computer
* Export your diagram to PNG

Try it out here.