Word Frame becomes Cloud Frame

I got my first chance to do a wire frame with out the wires. While working on it, I realized that while relative importance and position on the page could still be communicated with without lots of boxes and lines, the relationships of nearby things could not.

So I added clouds. Clouds can be color coded to show relationships with like items. They can also characterize the amount of space something may be expected or desired to take up on the page, because that does not always follow logically from an items importance. For instance, I knew that sponsor logos would take up a certain vertical space, but that did not mean I felt they were more important then a preview section that may take up the same amount of space and thus use a larger font in this system.

Below are the thumb nails of the result and what it looks like without the clouds. Clicking on each will show the pdf of the full sized result.

This has been passed on to a consultant to do the design and build the templates. So this is the real test, does it communicate well.

Word Frames

It occurred to me many months ago when I attended a Tufte seminar that wire frames shouldn't have wires.

Those lines always end up making the whole layout look very boxey. Yea, I know, its not meant to show design. Its not going to end up being boxes just because that's how the wire frame looks. But more and more, wire frames are making there way out to be viewed by people without that inherent knowledge. So as a communications tool for that phase of Web site design, it may be failing.

Next time I'm hankering for a wire frame I'm going to try something new... a word frame. If you look at what is trying to be communicated by a wire frame, there is no need for the hard-and-fast boundaries that lines create. You can communicate importance, size, and relative positioning with text styled at different sizes and weights. And skip the lines.

I'll give it a try some time and let you know how it works.