Let’s face it. Web design has traditionally been a pretty wasteful and uneconomical process.

How many hours do we whittle away adjusting site map templates, dilly-dallying in wireframing applications, picking apart prototype frameworks, and feverishly massaging Photoshop comps only to throw them away when the next project phase begins? How many more hours are spent converting those formats to something else?

I’m not even talking about time spent actually designing, I’m talking about everything in between. The slicing, dicing, adjusting, revising, and refactoring that comes purely from working in our potpourri of traditional design formats. It’s easy to miss the full impact when we’re used to receiving an asset in one form, analyzing it, converting it to our desired format, then handing it off to the next station in the assembly line.

For years we’ve been building disposable avatars of a finished product. How much better would our finished products be if we could turn those hours into real design thinking and execution? We can give our clients a much bigger bang for their buck with a little change in our perspective and a big change in our process.

Instead of creating a series of disposable deliverables, let’s look at the web design process as an evolution. Everything we build should in some way take us closer to a final product with as little waste as possible.

We’ve been making adjustments in all other areas of our work process, but today I’m going to focus on an area that has really gone off the rails in the last few years … wireframing and prototyping.

Background on Wireframing

The proliferation of UX as a field has yielded a staggering number of wireframing methods and tools. Some of them are online apps. Other methods involve repurposing old tools like Illustrator or Fireworks. I’m making a bold declaration that they all stink. Yup. Every last one of ‘em.

Here’s why:

Designing with them

Interacting with them

Worst of all, with every single app, we spend hours creating something that we inevitably need to translate to another medium, then throw out. Not cool—and not economical for anyone.

Many folks have began to use frameworks like Twitter Bootstrap or Zurb Foundation to build their prototypes. While I think there are great elements within these frameworks, they have their own sets of problems when used as a whole:

The proliferation of UX as a field has yielded a staggering number of wireframing methods and tools. Some of them are online apps. Other methods involve repurposing old tools like Illustrator or Fireworks. I’m making a bold declaration that they all stink.

I’ve always been a fan of really low-fidelity wireframes. Remember Jason Santa Maria’s grey box method from almost ten years ago? It feels exactly right for designing basic content organization. It demonstrates basic layout for our content and there’s little mistaking it for a final product. Most importantly, it doesn’t pin you to a UI wall. This stage should be about quick approximations that are easy to adjust and give an idea of how the site works on its most basic level.

JSM's grey box wireframe example

JSM’s grey box wireframe example.

Grey boxes were great in the old days of fixed-width layouts, but today the approach is too limited. How do we communicate how things work at different screen sizes? How do we show dynamic interactions like hidden drawers or navigation elements? And once again, we’re spending valuable time creating a series of assets that get discarded later.

Introducing Live Wires

In response to the lacklustre options and approaches out there, I rolled my own wireframing toolkit called Live Wires.

Live Wires is more of a philosophy than a framework. It’s designed to be as simple and un-opinionated as possible. It’s not ugly, it’s not fancy or colourful, and it uses simple HTML & CSS (actually SCSS). It has a couple simple examples of common UI patterns to use as starting points, and a few nice SCSS variables to make things easy. This is why I like it:

Designing with Live Wires

Interacting with Live Wires

Other Advantages

Here’s How it Works

Live Wires is an attempt to capture the spirit of the grey box model and bring it into the browser. What we end up with is a standard set of neutral styles, and a flexible, quick n’ easy way to build out prototypes in the browser without creating waste.

Heating up some Live Wires

Heating up some Live Wires

As I’m building out my Live Wires, I work directly with a content strategist to help define content types and organization. Design decisions should be influenced by the type of content used in each section. Good design conversations will influence the content itself—it goes both ways. Designers need to be working directly with content strategists. Collaboration is critical in this stage.

Live Wires is an attempt to capture the spirit of the grey box model and bring it into the browser. What we end up with is a standard set of neutral styles, and a flexible, quick n’ easy way to build out prototypes in the browser without creating waste.

Considerations

Fork it, Try it, Modify it

You can fork the toolkit from the nGen Github account, but please recognize that it’s really the philosophy that’s important, not the product. Customize it to your own needs and workflow. Hope you find this approach works for you and let us know if you have any feedback!

Next: Browser Based Design

Next post, I’ll be exploring how we can be more efficient designers through a browser-based design approach. Ultimately, this approach is about designing systems, not pages. Once you’ve tried it, I’m sure you’ll see how effective it can be at eliminating wasted comps and tightening your design process.