How to create a prototype of pages for the development of the site so that the performers do not adjust

We continue to write about UX / UI. This time the article is about how to create a prototype page to make life easier for yourself and the user.

Page prototyping is thinking through the content and layout of important page elements. Such as:

  • navigation;
  • Contact Information;
  • CTA elements;
  • content;
  • logos;
  • heder (site header);
  • footer (basement) and so on;

By creating a prototype of the page in advance, you can ease the task of everyone who is involved in creating and filling the page. That is, designers, copywriters, coders, programmers, and so on.

This article is designed for customers who want to correctly draw up the TOR for the development of the site. Technical nuances on the development of the prototype, read the guide "How to make a prototype in Axure RP, if you do not understand anything about it."

What is the creation of a prototype

In addition to simplifying page creation, prototyping helps make users' lives better. That is, to add something useful or to remove something unnecessary, to make it easier to navigate the page, find the necessary information and solve the problem.

Suppose a user wants to find an answer to a question. He drives a question into a search engine and follows the link to your site. Then he expects to see something like this:

He expects to see something like this, because he is used to having websites look like this. This coincides with his user experience.

User experience (UX - User eXperience) is an experience that has accumulated before or after a person has used your interface. The user will search for the necessary elements based on their experience.

That is, we, knowing what kind of experience the user has, can make it easy for them to find the solution to their problem. For example, owners of mobile phones are used to the fact that the menu opens when you click on the "hamburger" button in the upper left corner. If this button is not present, the user may get confused.

At the same time, the person behind the PC monitor expects to be able to see the menu in the header or sidebar (sidebar). He does not expect the menu to open at the touch of a button. On the contrary, it is inconvenient for him, because he will have to make another press.

That is, if the right approach to users with different experiences, you can help them solve their problems.

But, however strange it may sound, the solution of the user's tasks is not a priority at the prototyping stage. Yes, it is important that the site visitor is able to solve his problem comfortably, but it is much more important that the owner of this site solves his task.

Let's look at this using the TexTerra website as an example (again). The target audience of the site is marketers and businessmen. It is more profitable for them to learn how to do something more independently, and for us to convince them to order our services.

Usually the user enters the blog from the search results or from search networks. He clicks the link and goes directly to the page with the article on the topic of interest to him. When he gets the right information on this topic, he will most likely leave.

It is not profitable for us, because the authors' fees need to be paid back. Instead, we want the user to stay on the site as long as possible. After all, the longer he will be on the site, the more he will be confident in our professionalism and the more willingly he will order some service from us. For example, it will order a design based on the user experience of its audience.

To delay it on the site, we add a link, the “Read also” or “By the way” sidebars, the possibility of commenting, the online consultant, the “Read also” block after the article itself, which selects materials on user interests and other elements.

All this helps to delay readers, even if they have already found the answer to their question.

But here it is necessary to immediately note a very important point - we do not force anyone:

  • No calls every 2 paragraphs.
  • No scripts that do not allow to leave the page.
  • Nothing that would prevent the user to solve the problem or find the answer to the question on their own.

If you will do everything to solve your problems, having spat on the user's tasks, you will get a negative reaction.

How to create a prototype

First you may have a question about what to use to create a prototype. The answer is very simple - everything. Any program that allows you to draw. It can be Adobe Photoshop, MS Paint, Adobe Illustrator, Gimp and others. You can use MS Word or Google.Docs.

Professionals use programs like Axure, but you can handle it with a paper notepad. The difference is what you are creating a prototype for. For example, a designer can create a prototype on a piece of paper. If he does it neatly, it will be possible to make a page on the layout.

But the copywriter, creating a prototype of the landing, should do it in the program, from which it will be possible to copy the text into the composed elements. Because the copywriter uses the real text, and the designer, most likely, will insert lorem ipsum.

Then you can proceed directly to creating a layout. You can start from the title page, but it does not matter. First, important elements are drawn, then less important ones. Little things can be omitted.

First you need to create a site header. It can be:

  • logo;
  • Contact Information;
  • CTA button;
  • search form;
  • feedback button and so on.

Next comes the content part and sidebar (if any). A sidebar may contain:

  • authorization form;
  • links to useful materials or social networks;
  • counters;
  • chat and so on.

Recently, sidebars are rarely used when creating websites. But this does not mean that they are no longer needed - it depends on the specific site and its purpose. Social networks like VKontakte and Facebook still have their sidebars.

[Webinar recording] How to prototype website pages: UX basics

The content of the content part, in contrast to the header, footer and sidebar, can vary greatly on different pages. There may be:

  • categories of goods;
  • cards of goods;
  • list of materials;
  • portfolio;
  • articles;
  • map;
  • reviews;
  • photos and more.

Sometimes in the content part can be all at once. For example, on a product page there can be photos, reviews, a delivery card, and related products — all that will convince a person to make a purchase of the product itself and its accessories.

Next, the target unit is projected. It can contain another CTA button or form.

The last to create a prototype of the footer (basement site). It usually contains additional navigation, details, copyright, logo, and so on.

For convenience, all blocks and elements can be divided into 3 types: informative, functional and navigation.

Informative elements give the user an answer to the question. It does not matter whether he asked it or not. For example, a user rarely asks a question about the privacy policy of a site. But if it is, the level of trust will rise.

Functional elements help to perform some task. For example, register, subscribe to a newsletter, place an order, contact a consultant, and so on.

Navigation elements are needed so that the user can move from page to page, and also understand where he is. It can be as simple menu items, and any other elements.

It is advisable to always use some navigation elements. For example, not only menu items, but also page numbers or the "up" button:

If the site consists of one page (landing), then there the user must still navigate. For example, you can direct users with the help of pointing elements - arrows, index fingers, eyes, and so on:

If the landing is large, then it would be nice to show the user exactly where he is located. Especially often this technique is used on landings, where scrolling takes place immediately across the screens:

Send the user to where he can perform the target action: to the form, button, contact information, and so on. But, at the same time, he must have complete freedom. As mentioned above, you should not stop him from doing what he wants. Even if you want another from him.

General style

Now you can talk about style. It should be common to all elements - colors, shapes, and so on. Do not do too abstract design with many triangles, ellipses, cylinders, and so on. It is enough to restrict a couple of shapes and colors.

It is desirable that the layout was in order, and the elements were symmetrical in size and location. They must also be closed. This means that if you have a block, it must be fenced in from all sides.

The open element looks incomplete, so a person may have a feeling of incompleteness. If he was looking for some information on your site, and it was recorded in such a block, it is highly likely that the user will continue searching on other sites.

Also, the interface should be the same everywhere. If a person goes to another page of the site, and there will be a modified interface, then he may think that he has got to another site.

But this also applies to the interface on the same page - all links, fields, comments and other elements should be designed in the same way. This will give a sense of integrity and completeness.

Use short texts and small images in order not to overload the user with information. And if you have many of the same type of elements, then they need to be grouped in several pieces (from 3 to 7) and located in different parts of the page.

Information from the system and user experience

The most important thing is left last. The main rule of creating user interfaces is that the user does not feel like an idiot. He must understand where he is, what he is doing, and how to do something else.

And he must understand this intuitively. Let's go back to the hamburger button example. All users of mobile devices have become accustomed to this button, and know what it does. Therefore, having seen something similar, the user will immediately understand what this element is for.

The same goes for the other page elements. If you use the common display, the visitor will be easier to navigate:

  • Having seen the magnifying glass icon, a person will understand that when pressed, a field for entering a search query will open.
  • If a magnifying glass appears when you hover over the image, then it can be increased.
  • The blue inscription is perceived as a link. Because of this, by the way, it is not recommended to use underlined text.
  • If the element changes when you hover, then you can click on it. The cursor should also change - from the "arrow" it should turn into an "index finger".
  • By clicking on the small flag icon, you can change the language.
  • The "Buy" button means that the product can be ordered.

These are just some of the points that can be found in almost every interface. The user remembers them, and, seeing them on other sites, feels comfortable, because he knows what to do.

We must predict what the representative of Central Asia needs to do and how he will try to solve his problem. Based on this, you can create an interface that will be convenient in general, but also as convenient as possible for our audience.

However, one should not think that the person himself will guess everything - he needs to be informed. All important elements should be visible, not in memory. And this concerns not only the position on the page, but also the status of the user, his order and so on.

It is very important, for example, to show which step of filling in the form the customer is at. He should be able to return to any step to check or change the data. And when he finishes filling, you need to provide him with information for verification again and only then proceed to payment. If you give all this to the user, he will be calmer when filling out the form, and the probability that he will change his mind will decrease.

With the help of information you can close many objections. Imagine that you order a jacket in an online store. What size to choose? What if you do not know your weight, your height or other dimensions of your body? If you are not informed how to choose the right size, most likely you will go to a regular store to calmly try on a few jackets and buy clothes of a suitable size.

Now imagine that the site has instructions on how to determine your size, as well as photos of the jacket on people with different shapes. Moreover, this instruction is prominently displayed. Deciding to buy will be easier, but doubts about whether you made the right choice or not will remain.

Here you can offer to return for free to return the clothes if the size does not fit, or add an online fitting room to the site. If you believe AstraFit, then their widget helps to reduce the number of returns by 48%.

That is, the creation of prototypes not only helps to improve user interaction with the page, but also increase sales. Because some elements can give exactly the information that is needed to close some objections.

At the same time, some parts of the site can spoil the user experience and kill the conversion:

  • lack of adaptive layout;
  • long loading;
  • small font;
  • horizontal scrolling and so on.

A more detailed list of useful and harmful elements on the page can be found in Lily Golikova’s article “Usability Checklist: 200+ points to check.”


It is important to remember what you are creating a prototype for - to solve the problem of the user and the owner of the interface. This approach will help you increase conversion. But for this you need to understand that often the decision is completely unobvious.

There are such very small details that can show quite insignificant, but it is very important for people to use the interface comfortably. I recommend reading Dmitry Dementia’s article “What is UX and UI, and why UX-designers do not exist” in order to understand what UX and UI are, how to improve the user experience at the layout stage and much more.

I would also advise you to always think about how it would be easier for you to do something, what questions you usually ask when you go to a website. But above all, you should be interested in how the target audience behaves and what it wants.

And feel free to be innovators! Come up with unique elements that will help improve the user experience. Add new widgets, but do not forget to inform visitors about how to use them. It could be anything:

  • designer custom guitars;
  • pizza designer;
  • logistic tetris;
  • instructions for assembling furniture with augmented reality;
  • a guide for combing fleas in VR;
  • genealogical online calculator;
  • Simulator "100+ ways to fly into a ditch" on the website of the insurance company.

And it only looks stupid at first glance, but even from such ideas you can get a positive result.

Watch the video: The Making of Horizon Zero Dawn (March 2020).


Leave Your Comment