The Web Layout UI Kit is a PSD template by Blaz from Melbourne. It contains five distinct layouts with a high dosage of black, grey and white contrasts that can be used as starting points for further wireframing. Makes me think back to an earlier post by Matthieu on visual priority. So if designing wireframes in Photoshop is your thing, have a look at this freebie template – I believe it requires registration. Enjoy.

Credits: Blaz Robar

Here is a something a little different while drawing inspiration from the past – a blueprint wireframe. It definitely looks like a traditional architectural or engineering diagram with a clear conceptual look. Derek has done up the piece in Photoshop (debatable whether the best tool for wireframing or not), but nevertheless the white on blue colors and jagged lines surely make this piece feel like it’s an abstract representation of lower fidelity. I thought it was pretty interesting that someone has found inspiration from 19th century diagramming. Thanks for sharing.

Credits: Derek Clark

Blocks (github) is a HTML prototyping tool brought to you by EightShapes – the company that’s all about modular components. The JavaScript toolkit allows designers (code literate ones that is) to tag pages or the components within, for purposes of presentation and reuse. Such tagged HTML page prototypes then become listed in a table of contents so to say, along with all of the unique components on the side. Blocks is a presentation layer tool that sits on top of the prototype and can be turned on or off. The other core benefit or idea behind this is that instead of duplicating HTML over and over again, the toolkit instead also allows to reference HTML code and reuse it across multiple pages. Being pure JavaScript, it also looks pretty simple to implement.

One thing which I don’t see and think would still be nice to have is a way to tell stories across these listed pages and components. Right now, all of these assets are very much fragmented and require the designer to do the magic of tying it all together into a flow or narrative. I wonder how the toolkit would feel if there was a layer of visible use cases, scenarios or non-linear flows that could be attached over on top.

Nathan also shares an interesting article which compares HTML prototyping to other tools like Axure. I’d have to agree with Nathan on this one that working with HTML (and JavaScript) for prototyping has the definite benefit of being closer to the medium as opposed to abstracting it. Even if writing JavaScript functions is too much for a designer (although it can be learned), that also opens up a perfect opportunity to collaborate on the prototype with a developer. For me personally, prototyping is less about setting up clicks between all of the screens, as is more about being able to get to the right richness of interaction, data, or visual representation for a narrower set of screens. With HTML and JavaScript there is simply more potential to get to the highest level of detail possible in order to feel out a risky part of the product. That’s not to say, that more often than not, just the “clicks” are adequate and so many other “abstracting tools” work for a lot of people. Thoughts?

Either way grab and fork it from github. There is also a good video where Nathan describes the approach.

In his own words:

EightShapes Blocks is a toolkit for user experience designers to modularize, communicate, and deliver annotated HTML prototypes.

Credits: Nathan Curtis

There is a bunch of articles out there that raise some of the problems, disadvantages and limits behind wireframing. Here are at least four such write ups that I’ve come across lately. Although many of the authors invoke “death” analogies, please don’t be put off as most articles are quite constructive. :) I doubt wireframes will disappear altogether, but instead are probably undergoing a transition of sorts.

• Wireframes are Dead, Long Live Wireframes – Jonathan Smiley
• Wireframes Must Die – Matt Conway
• Wireframes are dead, long live rapid prototyping – Neil Turner
• The Future of Wireframes? – Isaac Pinnock

Hannah just started the Fireworks Wireframing Kit resource site. It’s still hot of the press, but the blog is gearing up to be a collection of freely submitted PNG files submitted by the public to help with wireframing. So far there are a few grey scale files already with such components as: modal windows, login boxes, and buttons of various shapes and sizes. Right now you have to download each component individually, as you see fit. Hopefully it’s useful and please feel free to submit something if you have stuff to share.

Credits: Hannah Milan

As we design for more devices, considerations for more responsive layouts which scale gracefully across varying screen sizes could be gaining in importance. Warren here has shared one such quick wireframe that tries to accommodate just this. It basically shows 3 wires side by side each other with some placeholders as well as how they would all vary across a few predefined screen widths. It’s a pretty straightforward, yet clear way of conveying more flexible layout concepts.

That same week, as I was asking around for a few additional “responsive layout” samples, Martin also pointed me to Media Queries – which is an awesome gallery and collection of layouts that scale beautifully on various screens (it’s actually also a CSS extension recommendation). Have a look.

Credits: Warren Anthony

Here is an interesting example of a highly abstracted wireframe, labelled as a WireMolecule. Both the position and size of the represented elements within this example no longer represent what the interface will really look like. Instead, the focus has been shifted to showing relationships between elements as denoted by their proximity to each other. The size I also believe represents the importance of each element and not the actual size either (as also seen here and here). Definitely something a little different from a traditional wireframe. Andreas writes:

Traditional wire frames are misleading as they look too much like finished designs. Clients and designers alike run the risk of taking their direction too literally. And yet, despite all this, wire frames are invaluable tools in the start of any website design project.

And defines a WireMolecule as:

A chart giving an overview of relationships between components and features of a website. Wire molecules are developed during the Website Discovery phase and they provide instructions to designers, developers, and clients for how pages will look and behave.

Credits: Andreas Holmer

Morten created a stencil for the Google Drawings addition to Google Docs. Could be interesting to try. Comparing Google Docs as a wireframing tool to Omnigraffle and Visio, his five outlined advantages include:

1. It’s live. The entire team can work on the same document and see each other’s work instantly
2. The wireframes live in the cloud, no sending files around, no outdated documents
3. The risk of losing data is zero. It saves for every edit you make
4. It’s free
5. Most people already have a Google account, so no sign up required

Credits: Morten Just

Vincent, a friend of mine, has been tinkering with some new ways of portraying simple touch screen interactions on his Get Around application. He uses a big overlaid thumb with a set transparency to indicate the touch. For indicating a dragging action, the thumb also contains an arrow with a direction. Just thought to share this as I found it interesting. To refresh quickly, Elaine has also approached the same problem previously in a slightly different way.

Credits: Vincent Steurs

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