Low Voltage Wireframing

What is a wireframe? Think of it as building a small scale model before constructing a skyscraper. It’s a mock-up intended to help both developer and client visualize how pages, site elements and functions relate to one another.

There are may ways to approach a wireframe, some highly detailed and others incredibly simple, and it’s important to choose the right one. If you over-simplify you can miss key elements, which leads to dead ends and surprises later in the project. If you over-complicate, you can get lost in the details.

The scale model of a skyscraper doesn’t include every doorknob, plumbing pipe and electrical outlet – and neither should your wireframe.

Just Three Files

The Low Voltage Wireframe is as simple as it gets aside from a bar napkin sketch (hey, they can be handy too). Just 3 files: an index, a style sheet and an XML file. When it comes time to make a new wireframe just update the XML file. That’s it.

1. index.php – This file does all of the heavy lifting for you by loading and parsing the XML and wraps it up nicely in a simple page structure. You can leave this file untouched, but it’s also easy enough to edit the HTML inside for a more customized layout.
2. style.css – Much like index.php you don’t need to edit this or even look at it, but can if you’d like to customize things.
3. data.xml – This is your content along with a couple of configuration lines. Here is where you list your pages, their child pages and any content.

This version makes use of PHP 5’s simplexml_load_file() function, but you can easily accomplish the same with PHP 4 and an XML parsing class.

View a working example.

Download files - Low Voltage Wireframe v1.0.zip

The Code

Let’s take a look at data.xml – the only file you’ll need to edit.

The <pagetitle> node will appear within the <title> and <h1> tags on your site. The <imagepath> node specifies your image folder. It’s optional, but can come in handy. More details on that later.

<?xml version="1.0"?>
<root>
<config>
<pagetitle>Low Voltage Widgets</pagetitle>
<imagepath>img/</imagepath>
</config>

Now let’s define a page. Create a new <page> node, add a <title> node and put the page title inside of that. Now add some content text to the <content> node. Any text you add to the <content> node will display with line breaks intact, thanks to PHP’s nl2br() function.

<page>
<title>Home</title>
<content>
- masthead
- featured product
- latest blog posts
</content>
</page>

You can also define child pages (sub pages) using the <child> node. Just embed it within a <page> node.

<page>
<title>Products</title>
<content>
- masthead
</content>


<child>
<title>Blue Widget</title>
<content>
- description / copy
- add to basket
</content>
</child>


</page>

And finally, if you want to get fancy use the <image> node to drop images into your pages.

<page>
<title>Contact Us</title>
<content>
- map
</content>
<image>comment-box-okcancel.jpg</image>
</page>

This really comes in handy for using design patterns for mock forms, buttons or other higher-level functionality. Remember, a wireframe is supposed to save you time as a visualization tool, so you don’t want to waste time coding an actual form when a image of one will get the point across. Here I’m using a design pattern from Wellie to mock up a comment box.

And that’s it – you have a working, clickable wireframe in just a few minutes.

Wash, Rinse, Repeat

So you just got another client and you want a new wireframe just for them? Copy index.php, style.css and data.xml to a new folder, edit the XML file and bang – you have a whole new wireframe in less time than it took you to read this paragraph. No databases, no subscriptions or software to buy – just 3 files.

Killing Bees with a Sledgehammer

Wireframing is supposed to simplify your development work, save you time and make planning a breeze. Choose your wireframing tools and methods carefully, and don’t overcomplicate. Do you really need to fire up Visio for  a 10 page brochure site? Is PowerPoint really the right tool for that web store job, or is it better suited for making ugly slide shows?

The Low Voltage Wireframe is meant to be, above all else, simple and fast to assemble. It does a bang-up job for most sites, and can easily be modded into something more robust.

Still, sometimes you might need a more complex tool. There are loads of wireframing apps and websites out there that might fit your project better. Here are a few other solutions you may want to check out:

• Jumpchart – hosted, web based wireframing. Basic accounts are free, with premium options for a subscription fee.
• Gliffy – web based diagram software. Free 30 day trial, but otherwise commercial.
• OmniGraffle & OmniOutliner – commercial desktop apps for OSX that do a great job with more intracate outlines and function diagrams. Output as TIFF, JPEG, PNG, EPS, PDF or HTML.

As always, we’d love to hear your comments. Let us know how you’re using the Low Voltage Wireframe and how you’re modding it.