I remember seeing my first wireframe back in 1999. I despised it more than the Netscape 4.7 web browser.
I was fresh out of school, hungered to begin pushing pixels, and my desire burned to craft beautiful interfaces that would ultimately lead to self glorification. (I was 20, give me a break!)
In my novice mind, wireframes were ambiguous, boring and simply unnecessary to the process of creating websites. Why waste the time I thought when the client ultimately wants to see finely tuned layouts?
We’re in this to compel and impress our clients and eventually our clients’ clients? Right? Let’s get to designing!
Then I started collaborating with clients.
And making change after change to those finely tuned pixel layouts. And more changes. And more. Finally, exceeded budgets, frustrating and elongated client experiences and a few humbling years later began to tear down the walls of ignorance.
My once misunderstanding of wireframes turned into a raging infatuation for those static, page by page skeletons performed during the planning phase. And they worked!
Then the prototype caught my attention — and my mind was blown — again.
Why Wireframes Used to Work
Don’t get me wrong. Wireframes can be used when planning a website.
Many web companies still use static wireframes in helping clients articulate structure, layout and design of a website. I used them for years and still use static wireframes occasionally when trying to communicate specific ideas to clients that have existing websites we’re building on.
I also rely on website wireframes to help clients plan better content.
There are some strengths of wireframes.
You might like:
Website content needs careful planning, and wireframing is your content’s greatest ally. By investing in the process early, you’ll produce better content.
Upside of using static wireframes
- Quick to create & share (export, image/PDF, email, done)
- Numerous, cost-effective wireframing tools available (we prefer Balsamiq)
- Pixel-perfect layouts that clients understand easily
- A serious upgrade from chicken scratched whiteboards
So what’s wrong with using wireframes? As Chris Butler from New Fangled puts eloquently:
Wireframes try to communicate an interactive experience through a static medium.
Keyword being “try”. They do communicate something, but come up short in articulating the site’s actual experience.
Downside of using static wireframes
- The client can feel displaced from the site’s hierarchy & architecture
- Interactive elements (image slideshows, content accordions, navigation systems, rollover states) are difficult to convey in a static format
- The auditing and analysis of content can become an afterthought if priority is given to a “pixel perfect” layout to appease project stakeholders
Long story short, the transition to the browser can expose a multitude of user experience unknowns. If only I had a nickel for every time a client proclaimed “oh, that’s what happens when you click that!”
Prototype like Innovators
Try getting in the mind-set of a QB facing a two-minute warning from the moment you start on a new project. Instead of the long ball, try to get a few yards, passing to the sidelines to stop the clock. Just keep the momentum going.
When I process that analogy, I not only think of Tom Brady’s masterful ~2 minute final drive in the 2001 Super Bowl, but how Mr. Kelly’s product development analogy relates to constructing interactive, clickable prototypes during the planning phase of a website:
- Urgency to act quickly on ideas before they are lost
- Progression to keep momentum and communication moving
- Collaboration & Teamwork
He goes on to say that..
A good prototype is worth a thousand pictures.Tom Kelly (IDEO, Founder)
A static wireframe is simply a good picture. A good prototype — well that’s where the rubber meets the road and a website’s hierarchy, architecture, technical specs, content exploration and marketing tactics are planned effectively.
Urgency + progression + collaboration = touchdown (or, effectively planned website)
Why Interactive, Clickable Prototypes Work Better
I’ve been building websites for nearly 15 years, and I can’t even begin to describe the rounds of discussions I’ve had with peers and industry leaders about the pros/cons of a wireframe vs. a prototype.
There are many strong arguments for continued usage of static wireframes, but here are 5 simple reasons why I believe interactive, clickable prototypes work better:
- Intent & purpose resonate more clearly
- Clients get engaged earlier, faster and at a deeper level
- Iteration is swift & collaborative
- Overall project efficiency is boosted
- Better user experience decisions are made
Remember, prototype like innovators. (Urgency + Progression + Collaboration)
Try it Yourself
One prototyping tool we’ve found helpful is HotGloo. Though they market their tool as “The Future of Wireframing”, there’s no mistake that what you build is in fact an interactive prototype.
The end deliverable is a web-based, clickable website that can be easily shared, versioned, and commented on.