Wirestorming: Templatize, Organize, and Versionize the Wires out of Your Skull


Do we know yet the volume of an idea? It’s Wednesday and I’m just out of IA and into wireframes. The pipes are knitting themselves into a fray. That’s how I know something is up there. My skull is not illimitable.

Wireframes. Wires: the boxes-and-bubbles tech docs that will instantiate the requirements of the project and breathe life into my IA. Wires: my big deliverables. The ironed down, buttoned up, spit shine proof that I “know what I’m doing.”

Heavy stuff. This cursor ticks with every new idea crashing into my cranium. I sift and sieve, identify and modify, assimilate and aggregate. How to turn this IA. In my brain is a swirling abstract with scrawny tendons and gawky legs. I command it to incubate.

The cursor blinks. My temples begin to bulge. A tumbleweed hops across the surface of my desk.

A wirestorm’s a-coming.

And here’s how I’m set to weather it. Maybe it’ll work for you as well.

Stock up the storm shelter, Dorothy

Don’t squander this opportunity on the banalities of configuring your wireframing environment. Before you ever get this far along, figure out what you do and bottle it. I’ve made small modifications to our department OmniGraffle template to suit my process and idiosyncrasies  (mostly by removing the metadata slides). Here’s the basic set up of my canvases down the left column:

  • Wireframe – Page: The bread and butter of the template. Here’s where 95% of the work will go.
  • Wireframe – modal / log in / e-mail: I have 3 different standard boxes on the page. Depending on what I need, I just delete or duplicate the page.
  • Wireframe – SRP: A standard Google or Bing-style SRP.
  • Frames – towards the end of the wirestorm I do a quick grab of all the frames and drop them side-by-side on this slide.

(IA components)

  • IA- Site Map: Depending on what form the IA is in, I usually can drop it here and lock it. Wherever it is, I always have the IA visible.
  • IA- User Flow: same as above
  • IA- Discussions: for random notes that I don’t want to get lost in annotations


  • Template components– It’s a library. If you delete the last instance of a shared layer in OmniGraffle, the layer is permanently deleted. I build all my shared layers here and leave even the ones that are deleted everywhere else.

And then within the Wireframe set, here is the default setting of the shared layers and canvases (this time a screenshot!):

Wireframe canvases revealed image

I have this set as a template file in OmniGraffle. It’s the basic arrangement and is what opens when I start a new project. I almost always know the requirements of whatever it is we are building by the time I get to wires so when I rename and save the file I begin altering my shared layers with the specifics, such as width, template-level headers and footers, whatever responsive design iterations I need to show, etc. From here it’s just renaming, duplicating, and arranging.

Set out buckets to catch your workflow

From project to project, it’s pretty much the same. I know the assets I’m likely to need and the assets I will likely produce. That means I pretty much know the buckets I will need to catch all of this stuff. So I’ve made a bucket of buckets that I use every time. In the very evil words of Dr. Evil, pretty standard, really.  I’m sure we’ve all done this. Here’s what mine comes out to:

image of wirestorming directory template

You may need more, you may need less. I’ve been using a very similar set-up for about 3 years now. If you’ve not done this, survey your last 5 projects. Figure out what you do. Then lock it down. You don’t want to get in the middle of the wirestorm and have stuff scattered all over the place.


Heads-down at my desk, I roll from canvas to canvas as fast as I can. There’s no particular strategy here. That’s the wirestorm part. All you do is GO!!

I should note, however, that because no idea is too ridiculous- at least not to get into a wire and out of my noodle that I do have a little strategy. When outliers start popping up— I usually have several projects floating around up there for crying out loud—I entertain them for a minute then cut them out of the primary project and paste them into my sandbox project. (It’s in the “graffle > sandbox” bucket in the image above.) The sandbox is just the same template again that I’ve renamed. It tidies up my project space but allows me to keep stuff for review. I prefer this to just dumping what seems like junk ideas in the heat of the moment. I’ve actually ended with really good stuff when I looked back through it all.


As I roll through all of the various canvases and back and forth from the main project to the sandbox, I start to get something that is meeting the requirements and has some coherency. The design starts to take on a different character. That’s about the time I begin versioning. I take a break, walk over to the windows and watch the eddies in the creek swirling. I smack down on an apple. I make mental notes of the versions that seem to contain turning points for my designs. Back at my desk, I rename them with some kind of descriptive title, and it’s usually based on a random theme. I reorganize some slides then make that Frames page. The storm has passed.

Following the rainbow after the storm

I let it sit for half a day or so. Then the other work begins: deleting, combining, and refining. I end up with 2, maybe 3, strong versions. I make very light annotations and strategize the placement of features. Most times, the team is not expecting anything slick. Getting the wires back in front of them as quick as I can is the goal.

In short-

  • Isolate your creative time from your management time: develop process-oriented wireframing templates and directory structures.
  • Relieve your cranial pressure: get the ideas out of your head.
  • Leave a trail: dump outliers in another project and save versions as you progress.
Share on Facebook Share on Twitter Share on LinkedIn

Digital Chatbots: A New Era of Customer Engagement

Digital Responsive Web Design – Page 4

Digital Responsive Web Design – Page 3