Learn how to find your target audience and match your business goals with their needs: Get the Target Audience Persona Template
Charisol Logo

Prototypes: creating your website visuals without coding

by Adedolapo Olisa

August 18, 2019


The first thing that comes with taking your business online is a website. A website allows you to document all your services and showcase your products to many customers who need information about what you do. It is the first place people go to learn more about your business, it is your communication tool with customers and your chance to make a good impression. Hence, it’s important you are extra careful with the website’s interface and try to optimise the features for the best user experience possible. This is called the UI/UX (User Interface/User Experience)

While creating websites, a lot of people find it hard to communicate– in clear terms to the developers what they want their site to look like. You might be thinking: “Isn’t it better to leave all of that to the expertise of the web developer?” In some cases, this is absolutely fine but it is entirely different when you have a complex and very specific design in mind. You’re not a designer, you don’t know the first thing about coding and making websites, else you would have probably just done it all yourself. But you are having a hard time letting your website developer know what you expect.

This is a big deal because you do not want to have to go over the designs a hundred times with the possibility of rejecting all the outcomes. This will cause a waste of time, money and a whole lot of frustration. What do you do? How do you let your developer know clearly what you want your website to look like? How do you explain the concept to such a person without getting confused yourself? Or better still, is there a way to layout the design without having to do much of the explaining and risk the possibilities of failed designs that do not meet your specifications?

The solution is Website Prototypes. Website prototypes are interactive demos of a website. These are often used to gather feedback from team members early in the project life cycle before the project goes into final development. You can use prototypes to design what you want your website to look like even before you take the project to a developer. And the best part is that you don’t need to incur any additional costs, you can create great prototypes using software online. This allows you to provide the website developer with detailed information so that nothing goes wrong.

Phone features

A website prototype can be of any kind ranging from mere sketches to full-fledged interactive and clickable HTML. As stated earlier there are a number of tools that help to make prototyping easy. You can check out Proto.io, Axure, InVision, and Mockingbird. With these, you can make visuals for your site without the help of a developer.

There are several advantages that come with prototyping. Usually, prototyping is done by web designers but this article is to establish the fact that it is simple and a way to clearly communicate and express the specifications of your mobile application and website development. There are several advantages of using a prototype even before the actual web development begins. Prototypes are used to see how the project or the product would look in its early stages. This helps team members—not necessarily developers to make decisions and come to agreements based on the scope of the project as well as to test out ideas on the layout, appearance, and structure of the website.

With a prototype, the marketing team or product manager can harness feedback through usability testing. This involves allowing potential users to test the prototype to see just how comfortable they feel with the site; what they think of the appearance, colours, navigation, and ease of use. This allows for easy changes in the website before it gets to the development stage, at which point it becomes harder to make certain corrections. Additional benefits of prototyping other than serving as a unique specification document for designers is that it saves time and money, prevents costly mistakes and helps provide proof of progress in order to secure approval from possible investors.

The downside of prototypes is that they take a long time before actual development begins. There is also the issue of deciding what prototype tool to use while keeping in mind the need to reduce costs. However, this can be solved by simply looking through the list of tools, their reviews, and ratings in the online community as well as which is most comfortable and affordable. However, although prototyping does take a lot of time, it definitely beats forging ahead with no proper design specification and risking turning out with a very bad product.


Adedolapo Olisa

Adedolapo Olisa

Related Articles