Bubble Frames – Rapid Prototype Wireframes (Ideas)

Whenever I start a new web project, I want to conceptualize, and fast. Ideas seem to flow at a rapid pace in short intervals, making it hard to capture everything. I’m a huge proponent of rapid prototyping. I want to take as many of those ideas as I can, build a quick prototype, take a step back and then carefully analyze everything.

The best ideas are born in those critical few moments that you rapid prototype. And over time, those ideas can be melded into something that is truly incredible.

A tool that I use as part of my rapid prototyping process is what I call "bubble frames." It sounds kind of stupid, I know. And it might not be all that unique. It’s really a mesh of things I’ve seen and read. But I thought I’d share it anyway to those who need some inspiration for their own rapid prototyping exercises.

The bubble frame is a watered down version of a wireframe. Instead of constructing exact boxes and labels as a skeleton for the web site, I use quickly drawn circles to represent what types of information will go where. I vary the size of these circles to represent the importance of the information they will contain.

Let me show you a quick example. Click the thumbnail below to enlarge it in a new window.

Bubble Wireframe Example

Very simple. Maybe even a little crude. But the purpose is not to communicate elegance. This is a quick and dirty wireframe that I’ll draw up in mere minutes in order to quickly process multiple thoughts in a short amount of time. While this example is pretty straightforward, you can take this concept and expand it to include much more.

See more posts