Site page prototypes: between brief and technical task

Most of the developers of sites with whom I had to cooperate, have a well-established production process and are working through all the stages of creating web resources to the smallest detail - from the TK to the legal and financial side.

However, almost no one draws the sketches of the future site - page prototypes. It would seem, it is obvious that it is easier to take illustrations than a dry technical text, and the time to “translate” TK for project participants is significantly reduced.

When more than two people are involved in the work, a “translator” is simply necessary. The customer has his own vision, the project manager has his own, the programmer, designer, coder also has his own understanding of the implementation of the development stages. And the terms that are used at the same time - each also has its own, often incomprehensible to the rest.
')
It is much easier to communicate this vision to another, and most importantly, to substantiate the decisions taken, to ensure an unambiguous understanding of the work of the future resource in the schedule. In addition, it also allows determining the format and requirements for content, which is usually provided by the customer, even at the stage of concluding an agreement.

I understand that there are project managers who are often a “layer” between the customer and the development team, but these people may also not know all the subtleties.

Usually, such a “concept” is prepared when the questions of the target audience are clarified, the essence of the customer’s business is generally understood, and the structure of the future site is already defined. That is, it is a stage preceding the development of a technical task.

For simple sites with a dozen sample pages, you can create such pictures in 2-3 hours of work in Visio or Axure and save weeks of time on subsequent corrections of TK, design and content.

At the same time, it is important not only to draw, but also to note the key points, why this or that element should look / be located / work, as there are many ideas at the negotiation stage, but everything needs to be fixed. Not only not to forget the arguments in favor of the decisions taken, but also to provide important information to all those involved in the project.

For example, the main page may look like this (in fact, this is a ready-made design, but it is not necessary to be an artist):


Each figure corresponds to a specific explanation:

1. We emphasize that this is a mono-brand store with factory prices.
2. Contacts are allocated in a separate block, because According to the statistics already available in the map, clicks from the reference information are given the most attention.
   Showing the mode of operation we reduce the number of unanswered calls.
   We shift the basket to the top so as not to interfere with the link to the contacts and the phone with the data about the goods.
3. The search for the statistics of the old version of the site is used actively. It is also convenient for managers when searching by articles.
4. The main menu is drop-down, so as not to overload the navigation unit.
5. Block banners with news and promotions. This is the main focus on the page. Provide sorting.
6. Online consultant - pop-up banner
7. Important information for the buyer, which can be obtained on any page.
8. SEO text (for phrases like “online furniture store and buy furniture online”), revealing the advantages of the store and furniture.
9. We record the previous visit of the site to the browser history and show those products that the visitor viewed. In 99.77% they are included. If it is the first time on the site, we do not show anything.
10. Footer block: address, phone numbers, duplicate menu.

When you bring such pictures with explanations, customers often wonder how everything turns out to be simple: no need to delve into technical terms or read dozens of pages of documentation. Everything is clear and you can discuss the site in a simple language that everyone understands.