Why Create a Web Prototype? A Guideline for Project Managers

One common problem that web project managers have to face is the ever changing requirements from their clients. I mean you can discuss a web idea with your client on a fine Monday morning over a cup of coffee and the next thing you know is they want something entirely different the other day. This to and fro sucks up a lot of time and drags you to work over hours, killing your creativity and impulse. For managing a web project it is important that you are clear on the client’s requirements and encrypt your ideas in a form of a prototype.

Web Prototype

The purpose of a prototype is to test your product on design layout and performance before you start developing the final project. One of the most important aspects of prototyping is its stimulation and sufficient testing. Of course, you don’t want to spend your valuable time on something your client doesn’t want. So the legend goes, “a prototype is worth a thousand meetings”. This article will focus on ways and tools for generating a web prototype.

Web prototyping is nothing new and asking, what’s the best way to create a prototype is like asking the best way to build a website. Something that works for a CRM may not work with an Ecommerce website. Even a paper sketch could be considered as a prototype, though I’d never recommend it, because, for web, thinking in pages is not very helpful, not just because pages have edges and websites don’t, but because their material properties are very different. The place and the ways people are consuming the content are very different. The web is certainly not a visual medium and you can only understand it by using it. Therefore, digital prototyping should be considered when initiating a web project. Following are some digital prototyping methods for beginners to experts.

Presentation Software

We all are familiar with Power Point for making presentations, same way it can serve as an ideal prototyping tool for beginners. Creating wireframes on presentation software is simple because it’s user friendly interface and naïve tools. Keynote is another modern alternative of Power Point for beginners. However, there are many limitations in using presentation software for wireframing, like interactivity, flow charting and user flows.

HTML Prototypes

Using code for web prototyping is another practice of web project managers, but the uncertainty roots from their discomfort of using code or they do not know how to code. However, generating web prototypes via HTML code has its advantages as it provide technical foundation for developers to start the project. Similarly, coded prototypes are very efficient for usability testing and correcting what’s wrong beforehand.

Prototyping Tools & Applications

Despite the number of available prototyping tools and application, my number one choice is Axure. Axure is one of the most effective UX tool and allow project managers to create advanced and highly interactive web prototypes with no prior knowledge of HTML coding. Following are some other prototyping tools project manager can use like UXPin, MockFlow, JustInMind, Invision, JustProto or Marvel.

There’s no set of rules of how to generate a web prototype, what matter is whatever to do or whichever tool you use should communicate your idea to the client. So, the next time you start a web project pitch your idea with a web prototype so you can clearly define web aesthesis, design layout, navigation, CTA’s and user functionality.


Shahrukh Saeed is a design savvy digital enthusiast focused to share latest tools, tricks & techniques of the web, digital marketing UX/UI & SEO with business startups and learn from experts in the field.

One Comment

  1. Useful information. Fortunate me I found your website unintentionally, and I am shocked why this twist of fate didn’t happened in advance! I bookmarked it.

Leave a Reply

Your email address will not be published. Required fields are marked *