Looking for an example HTML prototype? We’ve created a detailed example here for you to review (Click the screenshot below to view the interactive HTML Prototype):
The hardest part of creating software is not the building but is instead the communication of the software requirements in the first place.
Let me give you an example…
Imagine you had to describe what a car was to somebody who had never seen a car before, and the only mechanism you could use to explain what a car looks like and how it works was the written word. It would be a pretty gruelling experience, to say the least. Just attempting to describe what the average car looks like could be dozens of pages of text. How many wheels does it have, and where do the wheels go? And so on…
Now imagine instead if you were able to draw them a car. Wouldn’t that make the communication of what a car looks like and how it works so much easier? In software development, this is what we would refer to as a wireframe. Simple static drawings of one or more screens of the proposed software solution.
Now let’s take this analogy a step further, imagine if you could create a small model of a car with some basic operating parts like turning wheels, opening doors, a working steering wheel and so on. This is what we would call a prototype, and a prototype typically conveys more information than a wireframe due to the fact that it is interactive.
There’s good reason that the saying “a picture is worth a thousand words” is often quoted. In software development, a wireframe or HTML prototype of a proposed software solution is an essential step for communicating a how the final software solution will look.
Getting a wireframe or HTML prototype in place helps everybody on both teams, the customer’s team and the software partner’s team, to get on the same page about what the proposed final version of the software solution looks like much quicker. You’ll have multiple stakeholders within your company and the customer’s company to involve, and the sooner they all agree on the proposed final software solution, the sooner your software project can start to move forward.
WHAT IS A WIREFRAME
A wireframe is a visual guide that represents the skeletal framework of a web app or website.
Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. That purpose is usually being informed by a business objective and a creative idea.
The wireframe depicts the page layout or arrangement of the website’s content, including interface elements, navigational systems and content blocks, and how they work together.
The wireframe usually lacks typographic styles, colours or graphics, since the main focus lies in functionality, behaviour, and the priority of content. In other words, it focuses on what a screen does, not what it looks like.
Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications that we discuss in the next section.
Wireframes are generally created by business analysts (BA), user experience (UX) designers, developers, visual designers, or by those with expertise in interactive design, information architecture and user research.
THE MANY TOOLS FOR CREATING A WIREFRAME
The most basic prototype we’ve ever seen was created by one of our customers using Microsoft Excel – yes you read that correctly, Microsoft Excel. Our customer had used one sheet in Excel for each page in the software application, and he had cleverly used the various cells on each sheet to layout each web page. Whilst this was a perfectly acceptable starting point for the software project, it was a tad unorthodox to say the least!
Fortunately, a number of tools exist to allow technical and non-technical users alike to quickly create low-fidelity prototypes very quickly. Our preferred prototyping tool is Balsamiq, and this is the type of output it’s capable of producing.
The advantage of a tool like Balsamiq is that it’s very quick and easy to output a proposed idea. Other tools for creating prototypes include:
Returning to our original car analogy, the above tools are capable of creating a picture of a car to varying degrees of detail. In order to create a model of a car, the best approach is to create a prototype.
WHAT IS A HTML PROTOTYPE
An HTML prototype is a working prototype of how a finished software solution might work. The prototype is interactive, allowing end-users to launch their web browser, navigate to the HTML prototype and actually engage with it as they would the final software solution.
Often it’s the case that a wireframe is used first for high-level discussions and to obtain broad agreement, with the HTML prototype created next.
The advantages of an HTML prototype include:
- Both the customer and the developer are forced to think about how a solution might work within the browser which applies some real-world constraints.
- This is especially true for software being created for a mobile or tablet device.
- The code used to create the HTML prototype is completely reusable for the actual production of the software solution, so there’s no wasted work.
- It shows everybody exactly what you’re going to receive and provides an excellent opportunity to obtain stakeholder buy-in.
EXAMPLE HTML PROTOTYPE
Check out the following example of a basic HTML prototype. As you’ll see, the prototype is somewhat interactive, and allows all project stakeholders the opportunity to truly understand what the proposed final software solution will look like and how it will work.
OBTAINING STAKEHOLDER BUY-IN
Whether you use wireframes, prototypes or a combination of both on your software project, the process of visually describing the outcome has a positive impact on both teams from the get-go. The teams all have a chance to discuss and understand the proposed outcome, and we often see those team members who wouldn’t have taken the time to speak up at the outset use these discussions to have their say, and often what they have to say is very relevant!
CONCLUSION
Prototypes are extremely valuable communication tools. If you have the opportunity, creating a prototype together with the team who will build the final software solution fosters trust, increases project ownership and builds a stronger shared vision than delivering an already-built artifact.
