<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=731202&amp;fmt=gif">

What Is a Website Prototype?

If you're ready to invest in a new website - or are already going through the process - you may have heard about a website prototype - but what is it?

A website prototype is an interactive version of all of your website designs. This stage means you're near to the end of the design stage of your build and developers are eager to get started on bringing this prototype to life. 

At this stage, it should mean you have all of the elements you need to bring your website to life, such as:

  • A solid idea of the size and structure of the site
  • A page count and an understanding of the functionality of the pages or areas
  • Your text, messaging and image-based content outlined and aligned with your brand
  • Wireframes that provide a hierarchy of content and structure to each page
  • Inspiration for the look, feel and style of your site
  • Ideas for how your site can develop in the future

If you can put a tick next to each of the above, take a moment and give yourself a pat on the back. Passing on all these elements to a web designer or agency should be a very proud moment.

As an agency that provides web dev services, we can count on one hand, in over 15 years, the amount of times we have had a sufficient level of detail like the above handed over to us to give us every chance of providing a site that meets expectations!

A web designer now has enough information, research and data to help design the site you want. I chose the word designer carefully as the design is the next logical step in the whole process. A website designer often has a different skill set to a website developer. Their minds work differently, one creatively and, the other, analytically.

An experienced designer will be able to take the blueprints, wireframes, content and imagery and translate these, add creativity and bring this information to life, adds a visual style and theme and create the visual impression your site deserves.

The design comes before embarking on any website build and code, the technical and more intensive part of most web projects. You want a solid idea of what your site will look like based on your approved content. This is where you need to work with your web designer to produce a quality design and website prototype. 

A good website prototype should be an interactive demo version of your website that you can access via a web browser to get a good idea on how the web site will look, feel and flow from a user perspective. Prototypes should also be used to gather feedback from key stakeholders throughout the design and approval stage before progressing onto the extensive build stage of a web process.

There are a number of ways to prototype a website design from basic sketches, to photoshop design. Ideally though, your designs will be uploaded to interactive software that allows you to see basic functions and animations and allows you to interact with the uploaded pages giving you the impression of the basic site elements. Software solutions like Invision and Marvel being two of the market leaders.

The advantage of using a website prototype is that you can get a good idea of how the site looks and feels early on in the process. You can then feedback and fine-tune the prototype until you are happy and ready to progress onto the website coding and build.

Following this process is hugely valuable on a number of levels. Implementing changes early on in the process can save a massive amount of time and subsequently money. Back and forth communication and changing the actual coded version of the site can be extremely costly and take a lot of potential backtracking and time.

Spend time getting your website prototype as close as possible to the live site as you can and then use this as a plan and brief for your web developers and coders.

Please Note: This blog post was adapted and taken from our ebook, The Ultimate Guide to Planning Your New Website Project, which you can download in full here.

Grab your ebook focusing on the best practices for new website builds, to get the best from your project.

New Website Planning Guide

Explore Now