soliloquy slug="writing"

How to Prototype Website Ideas Fast

rp_Ecommerce-marketing-300x168.jpgIt’s often said that creating a working prototype of something before you start building the intended result will save you a significant amount of time in the long run, as although this seems counter-productive (you’d expect yourself to save time if you missed out the prototyping element), you’ll come up against many less problems later on if you first encourage (and overcome) them in the prototyping stage.

Your depth of knowledge in this area, and the time you want to spend on it, will play large factors in the types of prototyping you decide to ultimately move towards. If you want to get your website online as soon as possible, using a free website builder is always a good idea, as you can build your prototype as you go, eventually publishing the finished result when you’re happy with it.

If you have more time, and indeed a greater knowledge of the process of website creation (you’ve created several in the past), you may wish to go the slightly longer route, slowly building up the idea in your head into a full, working prototype that can be used as an accurate model of what your final website design should look like.

When going through the website prototyping process you’ll want to work your way up, allowing yourself to make as many mistakes as possible in the beginning, as the sooner you make mistakes, the easier they are to fix. For this reason, it’s recommend that you:

Create Pencil Drawings

Drawing out prototype ideas in pen or pencil doesn’t get the credit it’s due; there’s nothing more versatile than a blank sheet of paper, as it allows you to really spill the contents of your brain onto it, without the usual constraints that come with advanced design or prototyping software.

Drawing your initial website prototype in pencil allows you to:

  • Get the main points of your website down,
  • Not be constrained by digital barriers,
  • Not overly commit to one single idea; giving everything a chance to shine,
  • Start over (roll the paper into a ball) anytime.

Build Digital Mockups (Wire-framing)

Once you’ve drawn an initial website design that you’re happy with you should move onto building digital mockups of your design (also called wire-framing) to make sure everything you’ve drawn out can fit into defined spaces.

There are certain guidelines that all website designers much follow, and this is the perfect time to figure out who your website is aimed towards so you can start following these guidelines. Building websites with elderly users in mind, for example, is an entirely different process to building websites with teenagers and twenty-somethings in mind.

Create an Interactive Prototype

Lastly you’ll want to create an interactive prototype using a prototyping framework, such as Bootstrap, to build a prototype that can be reviewed and played around within your browser. This is the most important step of all, because at this point your website prototype is being created on the same code basis that it’ll eventually be released on.

If you have a delicate design that can be shifted around depending on the words or images that are placed into it this is the perfect opportunely for you to add your website copy and any relevant images; as these may reveal some failings in your prototype that you’ll have to address before launching your final website.

In conclusion, building a working prototype of your website before you start building the finished product will save you a significant amount of time in the long run, as it’ll allow you to fail often in the early stages of your prototype, saving you time later on.

Did you like this? Share it:


  1. Utah Sites says:

    Prototyping was one of the hardest things I have to do when I was starting my online career. But with so many helps and tutorials online, this one became my work and I am enjoying it.
    Utah Sites recently posted..New Davis Arts Council Website LaunchedMy Profile

0 Trackbacks

Leave a Reply

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

CommentLuv badge