Technical specifications for landing page development. Highly Engaged Users

• There are never any problems with the first point - general information about the customer and contact information. However, the compilation of even this section has its own nuances. Try to reflect positive points in the work of your company - the main activity and its features, competitive advantages, geographical scope of interests.
• Brief analysis of competitors. This is not to say that this is mandatory; the developer will still check the information provided. But including an overview of commercial rivals in technical task landing page will help speed up the work - who knows their competitors and the specifics of their activities better than the project initiator.
• Trade offer. It is often called unique and this confuses site owners who know for sure that it is nothing special, just business. Meanwhile, the technical specifications should reflect individual characteristics commercial offer and its attractive sides. These can be either the characteristics of a product or service, the level of service or warranty obligations.

• Description of the web page. You should indicate all your own developments that can help the developer understand the intention of the project initiator. Appearance and design. Logos, slogans, advertising components, corporate identity elements. List and location of information blocks that you want to place on the site. The ratio of text and graphic content, their quality and value components. The developer will need any information that can illustrate the customer’s requirements for the landing page. Many web agencies recommend providing samples of existing web resources that fully or partially meet the customer’s requirements.

Separately, we will consider several more issues that directly affect the quality of drawing up technical specifications for a selling landing page.

Content Management System (CMS). Users launching their first project often forget about the site engine, but it needs to be taken seriously and thought through in advance. After delivery of the landing page, the customer is responsible for its administration, and here the convenience of the CMS will come to the fore. Therefore, it is advisable to indicate it in the terms of reference.

Second detail - Domain name and hosting. Don't forget to add this item. Otherwise, you will be posting the project online yourself, and this is a very specific job.

And one last thing. In the terms of reference, specify the need to create content for the landing page. Everything matters - texts, animations and videos, high quality images for which it is advisable to organize a separate professional photo session.

​

Landing page image requirements

How can a selling website stand out from its peers, which are present in sufficient numbers on the Internet? Selling proposition – hardly. Unless, of course, you produce designer jewelry and have worthy competitors in your niche. The level of service or other related services - indeed, here you can find your “trick” and attract a buyer (client). But we are talking about separating a site. Before evaluating your offer, the visitor should be forced to familiarize themselves with it and be interested in its appearance. And here the website design elements are of paramount importance -

Availability of accurately drawn up technical specifications for landing page- half the success in its development. The technical specification not only contains the requirements for the project, but helps to form a clear idea of ​​​​the work on it. That is why maximum attention and effort should be given to writing the terms of reference.

For a person who has not previously dealt with creating a landing page, writing technical specifications sometimes seems like an impossible task. Many questions arise. What should I write? What information should be prioritized? How to do everything so that the result does not have to be redone a hundred times, spending the budget?

Over the years, Webnauts has created more than one successful landing page. We will share with you the knowledge that we regularly use in setting tasks for designers, copywriters and layout designers. With their help, you can create the correct technical specifications for your landing page and achieve high sales.

As an example, here are screenshots of a one-page page for the 7One business center, developed by our team. You can read a detailed case about the building.

Landing page goals

Purchasing tickets for an event

Selling a specific product or category of products

Selling a specific service (for example, model dog grooming, flower delivery, etc.)

Presentation of a new product or software (for example, iPhone XS)

In fact, there are even more options for the purpose of the landing page. What all types of landing pages have in common is to lead the user to take the desired action.

Good planning system - SMART technology. According to this concept, most goals should be:

• Specific
• Measurable
• Achievable
• Significant
• Time limited.

An example of such a goal:

Receive at least 1000 orders for delivery of bouquets from the site in the first two weeks after launch. The average check amount must be at least 3,000 rubles.

It is not necessary to set only such goals. The optimal ratio is 80% to 20%. First, sit down and write down point by point what you want from your future website.

Determining the target audience

Who is your client? Which users, having opened your landing page, will want to linger on it, and will not close the page at the same moment? Defining your audience is very important stage which is often neglected.

Think:

• What age and gender is my audience?
• Who are my clients by type of activity? (students, students, housewives, workers, businessmen, etc.)
• What problems do they care about?
• How can my product solve these problems?

If there is no time and opportunity for an in-depth analysis of the audience, it is enough to formulate answers to the listed questions.

Example: potential clients of the 7ONE business center are business owners looking for a comfortable office to rent in the North of Moscow. The conditions for renting premises in a business center, written down on one of the landing screens, meet the needs of consumers.

The lower the level of user involvement, the more information he needs to be provided. Which brings us to our next point.

Main competitors

Is your product already on the market? Name your main competitors and provide links to their websites.

Competitor research will help you understand whether you are positioning your product convincingly enough. You shouldn’t blindly copy someone else’s one-page website just because it seems good to you. You need to take a peek at your competitors, learn and do your own - better and more efficiently.

Look at 5-6 landing pages of your topic. If you have a product that is not on the market, study sites that are as close to the topic as possible. Write down what you liked about them and what seemed unnecessary. Think about what features can be converted and included in the technical specifications.

At the same time, it is not at all necessary to create a countdown timer, even if all representatives of the niche have one. It may actually just turn off visitors. Unfortunately, it’s impossible to check the conversion of each resource without access to analytics. All that remains is to put forward hypotheses based on the data obtained.

Important! Don't neglect competitor analysis. Include the best in your opinion in the technical specifications as an example. Comment on what you liked about them and how you see it on your site.

Product or service description

To help developers better understand your product, tell them about it. Give it your all open documents: instructions for use, descriptions in a foreign language (if the product is imported). If you are selling a ticket to an event or course, be sure to include a schedule, lesson plan, and other materials with the terms of reference.

In addition, when writing the landing page text, the copywriter will also rely on this data.

Landing structure

Very important point. Every website has a structure. It includes a list of page names, and in the case of a landing page, blocks or screens. Arranged as a menu for quick navigation by page.

In the vastness worldwide network you can find countless various manuals on landing page design. However, in most cases they are images devoid of context, or, conversely, solid theory without clear examples. This guide is an attempt to combine both. Having a solid technical specification will help you create a clear picture of your work and justify your ideas.

As an example, this article will look at the creation of a specification for a landing page by Verse for its upcoming master class on Process design. The whole process is divided into 3 stages - identifying goals and the end user, nuances of implementation and iterative changes.

User goals and understanding

During the planning stage, you define your goals, get an idea of ​​who your users are and how you can be useful to them. This information will serve as a kind of guiding star for you, which will not let you go astray. the right path.

1. Setting goals and objectives

First of all, you must formulate your goals. And not just any goals, but SMART goals - those that meet the following characteristics:

• Specific – goals should be extremely specific. You must have a clear idea of ​​what you need to work on.
• Measurable - Goals should be measurable so you can measure your progress.
• Achievable - goals should be achievable. Strive for big, but realistic goals.
• Relevant - Goals should be meaningful and relevant to what you want to achieve.
• Time-bound - the goal should have a specific completion date so that you can not only evaluate, but also confirm your progress.

However, not all of your goals need to be SMART goals; some of them can be exceptionally high quality. For example, a good mix is ​​75% SMART goals and 25% quality goals.

Below are a few examples of common goals that have been used by Verse:

• Drive traffic to landing page— 100,000 unique visitors within 1.5 months from the launch date.
• Get addresses Email from those who are interested, and from those for whom this course could really be useful. Receive 2000 registrations within 1.5 months from the launch date.
• Increase brand awareness of Verse and increase blog traffic by 50%.
• In a clear and concise manner, tell the user about the Process master class and who it is created for. Arouse interest.
  • Explain the benefits of the master class.
  • Tell us about yourself and your experience.

2. Who are your users?

In order for users to be interested in your landing page, you must first understand who they are, what their motivations are, etc.

Key Audience of such master classes are designers occupying different job positions and having different motivations. Verse divided the audience into two large groups - primary and secondary users, and identified several portraits of potential clients in each of them:

Table 1. Main users

Table 2. Secondary users

3. User engagement level

Your landing page will be visited by users with different degrees of engagement, and this also needs to be taken into account when drawing up technical specifications. What can you offer people to achieve the goals you have set?

Let's look at how Verse divided its users.

Highly Engaged Users

Know about Verse
Seen finished works on the company website
Are part of the community

Medium engaged users

Saw work on Dribbble, Behance, Pinterest, Designspiration, etc.
Not familiar with the Verse website

What could you tell them and offer them?

• A brief overview of what is offered in the master class and how it can be useful
• Method of registration for the course - registration via email
• Offer something valuable in advance - PSD template from the course
• Direct them to the Verse blog

Low Engagement Users

Users who have no idea who Verse is and what kind of course it is

What could you tell them and offer them?

• A brief overview of what is offered in the master class and how it can be useful
• Method of registration for the course - registration via email
• Offer something valuable in advance - PSD template from the course
• Direct them to the Verse blog
• Confirm your level not only with a link to finished work, but also with the quality of the landing page itself.

As you can see, the less engaged a user is, the more you need to communicate with them.

Tip: If your landing page has a subscription form, consider offering it to users in exchange for their email address.

So, what you will need to satisfy the user's goals and your own:

• Lead form for users to register.
• Details or examples from the workshop - demonstrated through video, text, visual design or images.
• Tell users what new things they will learn from the master class (working with grids, typography, layouts, and how to solve various problems).
• Explain how this workshop can increase their value as designers. Nice visual design and typography. It is important to demonstrate a robust design that relies on all of the principles mentioned.
• Tell a true story. Be yourself and convey the atmosphere of the course.
• Showcase your work and tell about yourself.

4. User stories

User stories are similar to , except that they are more specific and act as a more functional requirement. However key difference The focus here is on what the user wants, rather than just what the technical requirements are:

You can do even better by replacing the user with a specific target audience eg: as a creative director, I want..., [because...].

Technical implementation

So, you have decided on your goals and created the clearest portrait possible potential client, which means it’s time to work on the main part of the technical specifications - the nuances of implementation.

1. Finding a suitable template

Look for everything that may be useful to you: design patterns, things that work, like, may be relevant to the project. Keep it all for yourself and come back as you go. This is your source of inspiration to help you formulate your own ideas. , in addition to the designer, provides access to the gallery ready-made pages, where landing pages are presented for a number of popular categories.

2. Structure and interactions

Consider the structure of the page, as well as all the user interactions and components needed to achieve your goals.

Develop a schematic layout and move on to the visual component. The sequence in the case of Verse is as follows:

1. Introduce the user to the course. Post the registration form.
2. Tell the user about the main benefits of the course and what he can take away from it.
3. Explain who this course is intended for.
4. An example of a lesson and an image of one of the master class screens.
5. The final statement of the task and purpose of this course.
6. Latest registration form.
7. Brief biographical information about the author.

Undoubtedly, during the design process new ideas appeared and the structure of the site changed. That's the beauty of working on own project: You can always go back and change it.

3. Visualization

The landing page was based on the grid and canvas of the Verse website, as well as the Chronicle Display and Gotham fonts used in its design.

Start by working out one detail (in the example described it was) and, as soon as you are happy with it, move on to the next, gradually building all the details around this one key visual element. Initially the canvas looked something like this:

It turned out pretty good, but there was still some work to be done. The emphasis was strongly shifted to the left and there was also a lack of dynamism:

This option seemed most suitable to Verse. But since the authors did not have the rights to the macbook image, they recreated something similar using vector shapes.

At the same time, work was underway on the rest of the landing page. Several screenshots from the master class were posted in the form of cards. In addition, the user was explained what he would receive from this course:

The resulting version was by no means the final version. Having checked the initial goals and objectives, the authors developed new version pages. Compared to the first, it conveyed the value of the course better. In addition, more have been added to engage the user and thus increase the number of shares on the page.

Changes and iterations

You've reached the point where you finally launch your landing page. Your landing page isn't perfect yet, but only by putting it in a live environment and getting feedback from users, you will understand what can be further improved by you. Changes and iterations are the key to successful websites and products.

Please note that the information is presented here as a linear process only for the purpose of making it easier to perceive and assimilate. In practice, in most cases you have to go back and forth frequently, and, in addition, many steps can occur simultaneously.

Striving for perfection is good, but if fixing 1% takes as long as fixing 99% of everything else, it's better to leave it as is. Even if this is not 1%, but all 10%, it is better to launch the product and periodically improve it (more about). We must understand that nothing is ever truly completed; it can only be considered complete at this particular moment. The digital landscape is constantly changing, and the products you create must change as well.

Staying open to change and constant optimization is something you must do if you want to achieve great results. Determine the goals of your campaign, study your audience, and help you choose a template, personalize it to your specifications and test changes during each iteration.

Filling out the brief is a responsible matter, on which the fate of the entire project and the effectiveness of communication between the customer/performer largely depend. To help you figure it out, we have written our manual. Read!

Basic Concepts

Brief (from the English “brief” - instructions, summary) - the most important document that allows you to note key positions order, specify the client’s needs.

Creating a list has one goal - to simplify the interaction between the customer/performer, to tell how, what, and why the project needs to be completed. It is advisable to begin cooperation between the parties by filling out such a document (note that this is relevant for all areas of business).

The list helps to describe in detail the essence of the order, introduce the contractor and the client, therefore, traditionally, it includes several main sections (contact information, history of the company, product/service, wishes regarding the future project).

Brief for landing page - required condition working on one-pagers. Today we will analyze in detail the main sections of the standard manual, give explanations, and provide materials for downloading.

A little ahead of the topic, let's say the following - when filling out the form, you cannot leave the lines of the document empty. It is better to study all the columns several times, clarify various points with the contact person/performer, but write everything necessary. A large amount of information here will only have a positive effect, it will stimulate creativity, so to speak.

So, we offer our manual.

The “header” contains contact information of the customer’s representative with whom direct communication will take place. It is very important to write contact details of one/two people responsible for a specific project, because this will greatly facilitate the work of both parties and will definitely increase efficiency.

So, the “header” usually contains the following items:

• company;
• contact person, position;
• contact number;
• website;
• email;
• another type of communication (Skype, ICQ).

About company

The next section proposes to tell full information about the brand. We list the main forms offered for filling out:

Each of the points you described will be directly or indirectly used for quality work on the project.

For example, the presence of a brand’s corporate identity will give impetus to the work of designers. In addition, the compliance of the web resource with the special unique style of the company always looks presentable and attractive.

The same applies to the logo. Its presence is a prerequisite quality landing page. If there is no logo, it is advisable to order its development.

Here clear example corporate identity, “talking” logo from the developers of LPgenerator.

Also regarding the geographical location of the office and distribution of goods. If you work with all of Russia, be sure to indicate this moment. If you are limited to one region or several, also indicate. This information is required. Traditionally, it is placed immediately on the main page (see previous example).

The following example, by the way, demonstrates the importance of promotions and discounts - a marketing technique almost always works, increasing conversion.

Description of the product/service is a mandatory part of the plan. The user must see what he is buying, and most importantly, why. Here we smoothly move on to the topic of benefits. Below is an example of a header, where the specified question is immediately revealed in the offer.

In the context of benefits, it would be appropriate to mention an interesting split testing, it was carried out by marketing specialists from a company from New Zealand - SpaceShips. Its field of activity is car rental. Experts decided to check which image home page will bring more conversions.

The first illustration shows the driver looking at the beautiful landscapes, the car is almost invisible in the frame.

The second is satisfied tenants good car, attention is focused primarily on the car.

Surprisingly, the first version won. Marketers found an explanation: the visitor’s emotional connection with the product played a role. The beautiful scenery demonstrated the benefit to the user from renting a car, because he can see many beautiful places just by getting behind the wheel. Conversion increased by 8.5%. Here is such a “profitable” fact.

Brand benefits are perhaps the most favorite section among businessmen. A well-known expression: if you don’t praise yourself, no one will praise you :) Landing is a platform where moderate laudatory texts are very welcome. We present to you good example, where several main advantages of the company organizing the fire show are revealed, but, note, there is no feeling of intrusiveness.

I would also like to highlight separately “ a short history company" - unfortunately, clients of web studios often neglect brevity, thereby making a big mistake. Visitors are not interested in reading long opuses; the buyer only needs to know why they can trust you. This is what it looks like good decision catering brand.

Certificates, diplomas, reviews, letters of gratitude - all this social proof, they serve as a convincing argument “for” your company. Never neglect this block, otherwise you risk negating the entire marketing effect of the web resource.

When filling out this section of the landing page development brief, remember our main recommendation more often. It’s better to write more, such a decision will always have a positive impact.

About Landing Page

Let's move on to the third section of the document, it is devoted directly to the project. We put the following components there.

1. Conversion action expected from the user: make a purchase, leave contacts, download a file, etc.
2. Desired style of the future landing page (strict, business, vintage, ultra-modern, other)
3. Special preferences regarding colors
4. What sections would you like to see? We remind you that the following are considered mandatory:
   • header (where the offer, logo, CTA elements are placed);
   • product information;
   • company advantages;
   • customer interaction section (lead form, call-to-action elements);
   • social proof;
   • footer (address, location map, legal address).
5. What graphic materials can you provide for working with the site? For example, label design, slides, etc.
6. Desired CMS of the site
7. Is adaptation necessary? mobile traffic?
8. Do you need integration with social networks, Internet statistics systems?
9. Do you need counters (promotion timer)?

So, in order. The conversion action required by a business owner is the determining factor when we talk about designing a landing page. The choice of structure, call-to-action elements, and finally, what text to write depends on the goal. As an example, we offer you a number of examples of different CTA buttons, depending on the chosen goal.

Here the conversion goal is purchase (select products).

Here, they receive the user’s contacts, so they only offer to make a calculation.

As for the desired style/color scheme, the desire of the site owner is unlikely to be an immutable truth. Of course, his opinion is taken into account, but in reality, design ideas change several times, especially design ones, they are “adjusted” very persistently (colors, fonts, block sizes, and much more change).

Regarding the sections that an online entrepreneur wants to see. The standard structure traditionally does not change, since it is the only correct one leading to conversion. You can add other blocks, for example, a mini-catalog with prices, if appropriate, examples of work, again, when the company’s field of activity allows it.

Here, for example, the rules for placing an order are described.

Adaptation for mobile traffic is a must. In this way, the interests of visitors who often surf the Internet using smartphones, tablets, and search engines. Yandex, Google, search giants, identify “naughty” ones using special algorithms and pessimize mercilessly.

By the way, using LPgenerator, you can immediately develop mobile versions.

Counters - perhaps so much has been said about them that even repetitions are meaningless. Just know that they increase conversions by creating a sense of time pressure for the user. Feel free to place similar blocks on your website. Be sure that there is not a single layout without a counter :) You can look at split testing on this topic.

Additional requirements

This is the name of the next section of the one-page creation list. IN Additional requirements Each company puts its own points, but usually this is something that cannot be attributed to others. Applicable to a landing page - the technical component of the resource (does it require selection of a domain name, administration, hosting). Also here you can ask the online entrepreneur if he will order copywriting separately, or ask him to provide the resources he likes in order to understand his taste and wishes.

For the customer, the advice is the same - write as much as possible. If you don’t want to bother yourself, trust the contractor to choose a suitable domain name, just be sure to indicate your requirements.

Users of the LPgenerator platform benefit here. We provide comprehensive services: from choosing a layout, consulting with specialists, and ending with hosting and domain selection.

Let's decide on the concept and structure of the site and, based on your vision of the problems of the target audience, we will draw up technical specifications for the development of a one-page design

The vast majority of studios are focused on medium budgets and work according to a simplified scheme. The technical specifications are drawn up by the customer himself without the help of a contractor, and two people usually work on the project - a manager and a designer who combines the duties of a usability specialist. The layout is developed immediately, without a prototype. With this scheme of work, a lot depends on the customer - on his understanding of the psychology of visitors and the ability to express his thoughts in a language understandable to the designer. If you find yourself in a similar situation, the main thing is to correctly draw up the terms of reference for the development of a one-page website design.

What should the terms of reference for developing a one-page website design contain?

Your task is not just to describe the design requirements in as much detail as possible, but to make the document clear, structured and understandable. It is very important to use point markings so that during further discussion of the terms of reference for the development of a one-page website design, either party can simply refer to, for example, point “4 B”, and not explain that we're talking about about the moment described on page 3 in the second paragraph from the bottom.

Order technical specifications from 500 rubles

So, the basic terms of reference for developing the design of a one-page website should contain:

• 1. General description of a one-page site

  What are the goals of the site, who is its target audience? What feelings should it evoke in visitors - trust, joy, solidity, originality, etc. What should it be associated with? Should it be remembered? In other words, at this point you need to focus on the emotional characteristics of the future design. I don’t recommend reducing this point to a description like “Beautiful design that should evoke positive emotions.” Believe me, the concept of beauty and positivity between you and the designer can be very different.

• 2. Site structure in the form of a diagram

  A diagrammatic representation of the relationships between sections, categories, and page types, which may be accompanied by a brief description.

• 3. General design wishes:

  • preference options for color scheme, preferably with examples that can be generated using the Colorscheme.ru service;
  • the size of the site (fluid, fixed, multi-sized) and the resolution to which it will need to be adapted;
  • basic page structure: number of columns, presence of header and footer and other cross-cutting elements;
  • other wishes that relate to specific points appearance one-page site.

• 4. Description of end-to-end blocks

  Almost all one-page sites have at least three end-to-end blocks in which the content is the same - header, footer and menu. In order not to describe these blocks, you can put them in a single paragraph.

  • A cap: What is its intended purpose? Should it attract attention, or vice versa – not be conspicuous? What information blocks should be placed there? etc.
  • Footer- similar to a hat. Purpose, content, emphasis.
  • Menu Description must contain a list of links (or blocks of links) in hierarchical order. If necessary, you need to clarify which points should be emphasized and what wishes you have regarding the design and highlighting of links.

• 5. Description of blocks (screens) of a one-page site

  The description of each block must include:

  • target action that the user must perform on this page (register, select a product, leave a review, pay, etc.);
  • a list of all elements that the content part will contain (pictures, tables, text, feedback form, etc.);
  • the purpose of the page (introduce the user to the advantages of the company? show the product? inform in detail about the characteristics of a particular product? etc.);
  • if necessary, a list of elements on which you would like to focus the attention of visitors (only necessary in cases where these elements are not related to the purpose of the page described above).

• 6. Description of individual graphic elements

  If you plan to develop a logo, icons, or diagrams, they must also be described in the technical specifications. Even if you draw up a very detailed technical specification, after reading it the designer should have clarifying questions

http://xn--80ahnerbbccukm3exc.xn--80aswg/wp-content/uploads/2017/05/Why-do-you-have-simple-and-convenient.jpg 360 950 One-pager http://xn--80ahnerbbccukm3exc.xn--80aswg/wp-content/uploads/2018/01/hand.pngOne-pager 2017-05-25 10:34:57