Wireframe vs Prototype: The similarities, differences, & more
September 29, 2012
Planning a website? Not sure if you want to wireframe, prototype, or do both? Though wireframes can serve a certain purpose, we believe interactive, clickable prototypes communicate better user experiences. Here's why.
By Eric Sharp
Wireframe vs Prototype: The similarities, differences, & more
September 29, 2012
Planning a website? Not sure if you want to wireframe, prototype, or do both? Though wireframes can serve a certain purpose, we believe interactive, clickable prototypes communicate better user experiences. Here's why.
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! (For the record, web design is not art.) 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
A static, non-interactive wireframe has its cons
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.
Starting on paper and/or whiteboard is a great mini-step to 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.
Chris Butler
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 said, “Oh, that’s what happens when you click that!”
Prototype like innovators
An interactive prototype is worth a thousand wireframes.
IDEO, one of the most innovative product development companies in the world, has prototyping down to an art. In The Art of Innovation, Tom Kelly shares this powerful analogy:
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 structure, technical specs, content exploration, and marketing tactics are planned effectively.
An interactive prototype was used with one of our clients to show how a user could quickly access all their sub-brands
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 prototypes simply win out in too many ways to not utilize them.
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)
Website tools
Don’t miss our recommended website tools where I list my favorite prototyping and wireframing tools!
Hey, thanks for being here!
There's gobs of information out there, so I'm honored you found this article interesting enough to make it this far. My hope is it helps you to a better performing website!
About the Author
Eric Sharp is the founder of ProtoFuse and has been in the website trenches since 1999 — right before the dot-com boom redefined websites forever. Since then, he's accumulated two decades of digital marketing experience and prides himself on creating websites "Loved by people and Google". He has 2 awesome kids, loves Da Bears, and is into that whole CrossFit thing.