Say Goodbye to Wireframes

I built a deck in my backyard this past summer. I had never taken on a woodworking project of this size and scope before, so it was a bit daunting; however, it ended up being an amazing experience. Being outside in the oppressive heat of a South Carolina summer, enjoying the 110+ degree heat, drinking gallons of water and watching a project that I budgeted, planned, sketched, and finally built come together gave me a real sense of accomplishment and personal satisfaction.

There were numerous milestones in the project in which I went through varying phases of elation and frustration, but the moment where it really hit me that this crazy idea was going to work was when I finished the underlying system of girders and joists that would support the actual decking. I knew that once I had a rock solid foundation, the rest would just come together.

Okay, so this article is about deck construction?

Believe me, I could write an article about deck construction, but that is not was this one is about. However, my deck building story is very similar to the experience I’ve had assisting my nonprofit clients in constructing the framework for their new sites.

What I’m talking about is wireframes. For years wireframes have been the logical next step between the strategy in which we determine what your needs are and what your audience is looking for, and the design that coalesces those ideas in a visual form. Before we can create the visual and apply the brand, we need a foundation that represents the structure of the site and tells the story of how a user will interact with it.

So, why are we saying goodbye to wireframes?

Up until recently, the wireframes developed for client sites have been static creations – sure they go through a revision and refinement process, but at the end of the day they were static blueprints of a site that a client could not interact with. Enter the idea of Rapid Prototyping – specifically Rapid Prototyping using responsive frameworks. Using a modern responsive framework such as ZURB’s Foundation, or Twitter’s Bootstrap allows a designer to deliver an interactive wireframe in a fraction of the time it would have taken in the past that truly tells a story, rather than a static blueprint.

Prototyping over wireframes

As I mentioned above, the moment I knew my deck was going to work was the moment I had physically constructed the foundation and support system that would support the decking itself. I had to adapt on the fly to challenges, was able to test how weight would be handled as I built it, and discovered flaws in my original plan that I was able to correct.

Rapid Prototyping allows you to do the same thing with your new site. With a prototype, rather than a wireframe, built on a modern framework, you can actually interact with the foundation of your site and see how the navigation structure will function, how the slider will work, try out the calls to action, etc. Usability testing can be fast tracked from a process that occurs once the site is actually in development to a step that can occur on the prototype.

Some of the benefits to using a Rapid Prototyping methodology on your new site:

1. A site prototype based on the strategy work done before hand that gives you hands on experience with how your site would operate.
2. See how you site will react to being viewed on a tablet or mobile phone on the fly.
3. Much more cost effective than developing a fully functional and branded site and then finding issues with the base usability of the design.
4. Fast track your user testing to prove the suggestions made during strategy sessions earlier in the process.

So, what next?

Static wireframes offer a great starting point to a new visual design – in fact, they have worked well for years. However, as we have to now cater to our constituents regardless of platform and device, rapid prototyping allows you to gets your hands on a potential solution to the usability challenges you have experienced on your site, test them, verify them, and make corrections before a single image has been sliced and applied from a finalized visual design.

Just like building a deck, until you know for certain your foundation is strong, you cannot fully trust it. It may look beautiful, but a flawed foundation will quickly expose shoddy workmanship. Ask about rapid prototyping on your next design project and enjoy the benefits of having your prototype help tell your own unique story.