How the prototyping of a website should be done, during the design process. Selection of tools that help us to project the sections of a website, known as prototyping, mockup or wireframing.
Website prototyping allows us to quickly and easily define the blocks or sections that each of the pages of a website will have, so that we can prioritize the information and define the content blocks.
This previous step is carried out in a meeting with the client, or several, in his office, ours or having a coffee in any place. The important thing is that these sections come out after analyzing your business and the objective that is pursued before the construction of the website. In this case, the designer must remain an observer, limiting himself to advising the client and making sure that nothing is left out.
Although prototyping is one of the steps prior to the creative realization that will be used to implement a design, its idea is not to offer a guide on aesthetics, but rather on the content that must be represented. For this reason, the design of the blocks should not contain details, such as headlines or photographs, but simply remain in the definition of the parts of a site, emphasizing the blocks and their structure and not the elements that will go inside.
In order for the prototype to be as adjusted to the interests of the web and to be really useful in the following steps, a more elementary prioritization process must first be carried out. As Daniel Martínez told us in the program, the first step would be to prioritize the information in a list of elements, written in simple text, where we can use headings of various levels to define which ones are more important than others. We can use the HTML language itself for this, starting by defining what would be the H1, and analyzing the main sections of the site, what would be the H2 and so on, seeing if there are other important classifications to apply the H3, using other headings to the depth we want.
Offline prototyping tools
Prototyping tools must be easy to use and quick to obtain results. In many cases, simply with paper and pencil will be more than enough and if we are sitting with the client, it is possibly what is closest to hand. Blocks are defined by squares, circles, rectangles, or other primitive shapes, and annotations must be made on the sides to give them meaning.
The freehand is enough for everything we need and a blank notebook that we can easily tear out to dispose of or file with other project documentation, if they have worked well. We can find them in any stationery store, but if you wish, you can get a series of very fun tools that can attract the attention of our friends and impress clients, making us look like more professional designers. Although I really doubt their usefulness or if they will be really necessary, they are very attractive.
Note: These types of tools are known in English as “Stencil” and its translation in Spanish would be Stencil and its variants have been used since prehistoric times. We must have used similar things in at all stages of our training and even modern art is used.
You can find a few very attractive stencil utilities, exclusively focused on prototyping websites and applications, the ones in the image above and many others, on the website
But there is no need to get so “posh” and with much less the task of prototyping will be resolved. On the Internet we can find various “templates” from which to start to make website mockups, also allowing us to demonstrate that we are professionals with fun and own resources for our objectives.
You can print these templates on your printer and take them with you to the appointment with the client, they have different shapes, with frames that look like a browser and where we can paint the boxes of the website, or with others that imitate the shape of mobile phones where we can draw what the page would look like on devices with small screens.
On this site you will find browser-like printable sheets.
We will also find these useful, which we can also download in PDF.
Obviously we do not need all these utilities, but they may be useful to us and they will give more value to our meetings with the client, as well as other more elaborate templates that allow us, not only to make the prototype of a page, but also of the processes that the visitors will carry out. to carry out the desired actions on the site, such as subscribing, making the purchase of products, etc.
You can see a template for stage design on this website:
Online tools for prototyping
Many people prefer traditional tools for wireframing design, but online tools also offer us interesting possibilities that are worth taking into account, especially considering that we do not always have the opportunity to be face to face with the client or with the rest of the design team. Among the advantages we can highlight sending them by email in a more professional way than taking the photo on a piece of paper, sharing them with a work group so that everyone can edit them on the same project, access to various tools to design user interface components once faster and more detailed way, etc.
Note: In my opinion, in physical meetings it is easier to use pencil and paper, because you do not waste time having to learn the toolkits that are available in each online software, for example, if they have those buttons that you need, if you use them correctly. On paper it is easier for a designer to capture a structure in moments, or for the client to let go and participate giving their opinion or a sketch of it. By starting with an empty piece of paper and with only the pencil in hand, it is easier not to have distractions and think only about the project at hand, without seeing ourselves in the need to take advantage of the tool and end up introducing elements of dubious utility to a project.
In the past years, dozens of online tools have appeared to make wireframing mockups, for all tastes and needs. Presumably, after a while, those that have found a business model in the marketing of the tool will survive, so I am not going to get involved in offering zillions of links to tools that are often almost identical. A quick Google query will give you results like , or
Almost all of them have the possibility of using them for free and obtaining different benefits or eliminating limitations by paying an amount. There are also counterparts in completely free open source desktop applications such as .
Facebook Comments
Disqus