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

The Basics of Paper Prototyping

Paper prototyping allows early testing of a UI design for any kind of software. The simplest method is drawing a user interface or a series of “screens”.

This post is a recap of the Scrum User Group meeting on February 5, 2014, in Karlsruhe.Paper prototyping

During the workshop, the participants were shown some sample drawings and then could put the theory into practice, by developing a paper prototype for a restaurant app.

So, what is actually paper prototyping? This method allows for early testing of a user interface design for any kind of software. The simplest method of paper prototyping is drawing of a user interface or a series of “screens” the end-user will see. The clear advantage of this method is that it saves a lot of money and time in testing and trying out different designs before the actual development has taken place.

Some important things to remember whilst applying paper prototyping are:

  • It is better to have cross-departmental teams involving somebody from an IT, a designer, a usability specialist and possibly a marketing/sales specialist. Only in this way it is possible to evaluate the ideas from a 360-degree angle. As an example: often a small change in the design requires a lot of extra work for the IT that could be avoided if the prototype had been discussed by the whole of the development team from the very start.
  • The initial design should be kept simple, without much detail (e.g. the texts can be omitted first),  the main focus should be on the layout and functionality of the software.
  • Paper prototyping naturally has limitations in comparison to the testing on the devices, e.g. interactivity or performance on different screen sizes. These parameters should definitely be kept in mind as an adjustment in the design may be required later.
  • Remember that one picture often says more than a thousand words. Do not be reluctant to draw, even if you think you are not good at drawing. In essence, most  Graphic User Interface (GUS) elements can be depicted using simple geometric forms, e.g. “a trash bin” is nothing more than a cylinder with a parallel line with a dot on top of it.
  • Consider the user journey in developing your paper prototype. Does the user expect a “next” button at the top or bottom of the screen? Does he/she find a confirmation screen helpful? Though it is nice to be creative, the usability and clarity of your GUS  should be the primary goal.

All in all, paper prototyping is important in the initial stages of a software development process, and if done accurately, helps to save a lot of effort during the development stage.


Share this post