When you begin any website project, you’ll undoubtedly hear the term ‘wireframe’. Much like an architectural blueprint, a ‘wireframe’ is just that—a static, no-frills schematic of your website. Defining content organization, functionality, and navigation are just a few of the objectives behind wireframing. Intentionally left boxy and plain, wireframes are an invaluable tool in defining the purpose of any website without the distractions of colour, brand integration and/or personal preference.
However, the problem with wireframes—more often than not—is that they’re presented on paper. Why is this a problem? Some time ago, we discovered that using paper to try and simulate online interactions was flawed. The fluidity and instinctual use of a website is something that couldn’t be captured or assessed through paper. If the ‘medium is the message’, using paper to deliver an online experience just didn’t cut it.
Why Prototypes Work
Here at Top Draw, we define a prototype as a fully functional, online model of your website. Adopting the same principles of a wireframe, the prototype not only demonstrates content organization and layout, but it also demonstrates usability. Being a live model of your website—one that you can click through, play with and share with others—prototypes give us much more insight into the needs of both our clients and their customers.
No more throw-away deliverables
Paper wireframes are a great visual reference but they’re not efficient when it comes to development. By building our prototypes in HTML/CSS on a responsive framework called Foundation, we skip the step of translating paper to code. In other words, we build a prototype and then re-use it to build the rest of your site. Why do things twice?
Easy, quick, and inexpensive development
Take the analogy of custom building a house. It’s easier to erase a wall from a blueprint than it is to build the wall, decide it’s wrong and then tear out the electrical, plumbing and foundation. With rapid prototyping, we can test ideas and iterate quickly, without the expense of full scale development.
Demonstrate, don’t explain
When having to seek approval from your manager or business owner, it’s a lot easier to relay how a website works when it’s actually working. Trying to describe what is or what will happen is a lot harder than showing a live demonstration. Plus, you won’t have to cart around a dozen pieces of paper.
Beyond the Prototype
When we look ahead at the emerging online trends and the plethora of devices/methods/tools people are using to engage online, we discover that the needs of the user changes based on the platform. As a result, it is becoming increasingly important to evaluate how your website is delivered and ultimately experienced across all platforms. Building an online prototype, specifically a responsive one, is simply the first step in meeting that challenge.