Rapid Prototyping for Web and Mobile

In one of my previous posts, I have already touched upon paper prototyping.  This time I would like to discuss some other prototyping methods for websites and applications. I will concentrate on rapid prototyping, which does not deliver precise product copies, but rather defines the position of UI (user interface) elements and their function (this is why pixel-perfect Photoshop representations are not considered to be rapid prototypes).

But why do you need rapid prototypes?

  • You create them quickly and easily
  • You show the structure of the future website/application, leaving little room for ambiguity and misunderstanding
  • You evaluate technical and time resources needed for building an application
  • You implement and test any feedback  immediately

One important note: before you start mocking-up the design, you should have a clear idea about the content of your future website or application. Ideally, you have already written your content in a document and have thought about navigation tabs, CTAs (calls-to-action) and other important UI elements.

Industry Pages Wireframe v
A wireframe for a Web pageWireframing


This is a very simple method of demonstrating the layout of a website/application. The easiest way of doing it is paper prototyping. You just draw the elements of your future UI on paper, each in a very abstract and schematic way. If you want to make a more accurate model, there is different software developed specially for wireframing, such as Balsamiq Mockups or Mockingbird. Some of these wireframing tools allow you to build clickable prototypes by adding a few interactive elements, such as hyperlinks.

The main advantage of this method is its simplicity and universal applicability. However, a wireframe lacks design (patterns, fonts, etc.)  and responsiveness and thus does not give a full idea about the end product.

Style Tiles

The main function of style tiles is to represent the design of the future website. They consist of samples of colors, patterns, fonts, images, etc. placed on one sheet. This is a perfect tool for designers, however, it will be less helpful to a developer who actually has to construct the site and needs its exact layout.

A style tile for Miseya website redesign

HTML /CSS Prototyping

Creating a prototype by coding it has the advantage that the functionality, the usability and the responsiveness of a website can be tested to the full extent. However, though ready-made code pieces are used, creating such a prototype requires specialist knowledge and takes some time. The most common tools in this case are Bootstrap or Foundation.  After you have set up placeholder elements, you should start adding the pre-written content. This way you can control if the content actually fits the placeholders.

All in all, there are hundreds of  programs and schemes used for prototyping. This probably means that there is no one-fits-all solution.  Also, a combination of several methods throughout the product development cycle will yield better results than sticking to one method only.

Share this post