Live Wires began as a simple wireframing library, but it has evolved into the digital manifestation of my web design philosophy, encompassing art direction, front-end development, and the cohesive processes that bring it all together.

How it started

I built the first version of Live Wires in 2013 as a response to the awkward, slow, error-prone waterfall process of wireframing and building websites at the time. I was contracting for a digital agency called nGen Works, and we kept running into issues around design and development hand-offs, clients getting hung up on overly hideous wireframing tools that we would have to migrate out of anyway.

"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."

Source: Live Wires: Better Prototyping, nGen Works blog (March 19, 2013)

At the time, we were mostly stuck in Adobe products for design and would typically design high-fidelity snapshots of various screens, then hand them off to developers to interpret and translate into a dynamic, functioning website or application. There was a lot of waste. The whole process was slow, dishonest to clients, error-prone, and led to a lot of over-budget projects and unhappy clients and teams.

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

• You are limited to the available palate of UI elements.

• Designing interactions is troublesome or not even possible.

• They are often cumbersome, buggy, and time-consuming to use.

• It’s easy to forget pages like search results, sign-ins, sign-outs, and 404s.

• The fidelity is too high for such an early stage. Decisions get glossed over and too easily paint designers into a UI corner (e.g. adding social media icons in a wireframe causes a client to focus on design elements instead of content types and organization).

Interacting with them

• Most aren’t responsive.

• They don’t effectively mimic a true browsing experience.

• The aesthetics are often not suitable for client presentation (intentionally ugly UI’s aren’t always obvious to clients … looking at you myBalsamiq).

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 fidelity is far too high for early prototyping.

• They make too many decisions for the designer.

• They are bloated and complex. Too much time is spent stripping, overriding, and trashing.

• You’re trapped into their way of thinking. It’s far too easy to get sucked into the “Bootstrap look.”

• Often you still need to throw out a bunch of work by the time you’re ready to move past the wireframing stage."

Source: Live Wires: Better Prototyping, nGen Works blog (March 19, 2013)

How I build

Live Wires was always a philosophy or expression of an idea more than a product to be distributed. It was the foundation of nearly all of my web-based work that came after it for the next 10 years and beyond.

"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. 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

• Experimentation is quick and easy.

• I’m not limited to the available library in a wireframing/prototyping application.

• We can pull in core messages when we’re ready to design to help keep page goals in focus.

• Because I’m placeholding much of my “content” using background images, I can set the stage for production-markup without filling it with junk that I throw out later.

• It’s fast. I’ve already included some simplified designs of common patterns and standard elements which speed up coding. It’s just a matter of dropping them in and adjusting as necessary.

Interacting with Live Wires

• We can serve it anywhere and share it with anyone.

• It’s responsive. I can preview wireframes in all my devices.

• It’s not ugly, but not handsome enough to be mistaken for a final design.

• Nothing replicates the browsing experience like clicking and interacting with actual web pages.

• Omitting text separates content from layout and helps make it obvious that the wireframes are just that … wireframes.

Other advantages

• There are no monthly fees or additional expenses to worry about.

• Clients won’t see partial wireframes and can’t be confused about site navigation, page stacking, or page orientation.

• I’m not wasting time creating assets only to throw them out later. I’m setting the foundation for actual production code.

• The organization is so low-fidelity that you’ll have the freedom to change elements in design without throwing client expectations.

• It’s more difficult to forget pages when you can truly interact with the whole site. I added some commonly forgotten templates to ensure they’d be included.

• It is the perfect first step towards designing in-browser. I know you don’t believe me, but this is the way of the future."

Source: Live Wires: Better Prototyping, nGen Works blog (March 19, 2013)

Design Machines

I've made a lot of updates to Live Wires over the years, modernizing the code for updated browser standards, growing the component library, improving the theming systems, and even incorporating it into my favorite CMS, Craft. It's the underlying design system for the Louder Than Ten website, learning management system, and Nimber, and gives our team a great design foundation with room for extremely expressive and impactful art direction for the web. In 2015, I wrote an essay called Design Machines about the state of design on the web, commoditization, and the impact of artificial intelligence on our industry. The landscape has changed dramatically since 2015, but many of the thoughts that I had about commoditization and AI then appear to be bearing out as the tech and digital agency industries are experiencing some of the biggest economic tumult since the dot com bubble in the 90s. We're in the thick of it right now, so grab the popcorn and let's see how this turns out.

Live Wires started as a wireframing tool, but really it is the digital foundation of my philosophy of the web, design, and human expression in a world of commoditization and content marketing pseudoscience. I want a web for the people, and Live Wires is how I build it.