[email protected]

0207 993 5485

May 2016

How to Prototype a Website

back to blog

So you want to design your own website. You’ve got a great idea for a commercial website, but where do you start? How do you turn that all important idea into a virtual reality?

There are several steps, including buying a web address, finding a web host, marketing your website using analytics and SEO. But before you can do any of this you need to design a prototype for your website. Without a prototype, your website might not end up looking they way you expected it to in your mind’s eye.

Step 1: Pen and Paper Design

This first step is to sketch out, broadly, what your website is going to look like. What pages is the site going to have, and what are the sections of those pages going to be? The forms of media that the site will contain, the themes of the various pages and the use of space should be at the forefront of your mind while creating the blueprint. You’ll also want to have a basic idea of what will be interactive and ‘clickable’ on your website.

This ‘napkin’ sketch will allow you to see your website idea take shape while also allowing you to make fundamental changes if needed. Further down the line, it will be more difficult to change the idea without making significant changes to the structure and content of the website.

Also, if you’re designing the website with a group of people, it will give them a clearer idea of what you want the site to look like, and they will be able to make suggestions for improvement.

Step 2: Digital Mockups

A digital mockup will be a more detailed version of the pen and paper design. It will flesh out the design of the website, and will allow you to test out different fonts, colours, dimensions and text. You will get a better sense of the layout of the website, as well as an understanding of what the visitors to your website are going to see. You can at this point get feedback from designers or general users about how your website looks, whether it’s functional and easy to use, and what improvements can be made.

Step 3: Using a Website Framework

Once you’ve created a digital mockup, you can start putting your website together. A framework for frontend development such as Bootstrap will allow you to create links within your website and to others. Using this, you will be able to test the interactivity of your website, create mobile media and fine tune the website’s design. Once you’re happy with how your website looks, you can start adding real data to it, the more the better. This will make the prototype more realistic, as opposed to using filler text such as “Lorem Ipsum”.

Step 4: Finishing touches

This is the chance to make sure everything on your website works, and to make some last minute adjustments. Once you’ve done this, you’ve got a working prototype. If you’ve been diligent in changing the website in the various stages of creating a prototype, then it could end up being the finished website itself.

By admin May 2016

Share this post


Ready to start a project?
Get in touch