How to make a great brief for Landing Page development. Attached is a downloadable sample.

Remember Murphy's Law? If you can be misunderstood, you will certainly be misunderstood. This is true not only in communication between people, but also in creating websites. The client wanted a second Facebook, but got a forum for young dog breeders. The developer did not guess what the customer wanted - he wasted his time.

In this guide I will tell you what and why you need to write in the terms of reference. At the same time, I’ll show you how not to write so that the creation of technical specifications does not turn into wasted time.

The article will be useful:

For everyone involved in website creation: developers, designers, layout designers.
Project managers.
Heads of digital studios.
Entrepreneurs who are planning to order website development.

To make the material useful, I collected comments from several developers, designers, project managers and owners of digital studios. I added the most valuable ones to the end of the article. Let's go find out.

What is a technical specification and why is it needed?

A technical specification is a document that sets out the requirements for the site. The clearer and more detailed these requirements are, the better all participants in the process understand what it should be like. This means that the chance that everyone will be satisfied with the result increases.

The main goal of the technical specification is to make sure that the client and the contractor understand each other correctly.

There are many benefits from technical specifications. It is different for each side.

Benefits for the client:

Understand what he pays money for and what the site will be like. You can immediately see the structure, understand what will work and how. Figure out if everything suits you. If not, it’s no problem to change it before development begins.
See the competence of the performer. If the terms of reference are clear and precise, trust in the developer increases. If it says porridge, perhaps you should run and not look back.
Insure against the performer's dishonesty. When the site is ready, it can be checked according to the technical specifications. Are there any inconsistencies? The developer is obliged to fix them. If you are collaborating officially and have entered into an agreement, you can even force it through the courts.
Simplify the replacement of performers. If the client and the developer quarreled and ran away, the creation of the site can take a lot of time. When there is a detailed technical specification, it can be transferred to a new team - they will get involved in the work many times faster.
Find out the cost of developing a complex product. It is impossible to immediately estimate the exact timing and cost of developing a complex web service. First you need to understand how the service will work and what functions it will have. For this you need to prepare technical specifications.

Benefits for the performer:

Understand what the customer wants. The client is asked dozens of questions, shown examples, and offered solutions. Then they write everything down in a single document and agree on it. If everything is ok - hurray, you understood correctly.
Insure yourself against the client’s sudden wishes. Sometimes you come across customers who want to change the task halfway through. If you have agreed and signed the terms of reference, you are not afraid of this. If something happens, even the court will be on your side.
Show your competence. A well-prepared technical specification will show the client the expertise of the developers. If the company doubted whether to trust you with website development, doubts will most likely be dispelled.
To earn money. Some studios and developers offer the preparation of technical specifications as a separate service.

Facilitate and speed up the development process. A good technical specification indicates the structure of the site, necessary functions and elements on each page. When all the requirements are already before your eyes, all that remains is to design and write the code.

Now let's figure out how to create a good technical specification that performs all these functions.

The terms of reference are drawn up by the performer

In general, anyone can draw up technical specifications. “We need a business card website for a dental clinic” - this is already a technical task. But will it fulfill its functions? Hardly.

A good technical specification is always prepared by the executor: a project manager or a developer. Obviously, a web developer understands more about creating websites than the owner of a cafe or dental clinic. Therefore, he will have to describe the project.

This does not mean that the client disappears and appears at the very end to write: “Zbs, I approve.” He should also participate in the process:

Of course, the customer can sketch out his own version of the technical specifications. Perhaps this will speed up the process of creating the final technical specifications. Or perhaps the result will be garbage that will be secretly thrown into the trash.

Write clearly and accurately

This advice follows from the main goal of the terms of reference - “Make sure that the client and the contractor understand each other correctly.”

The terms of reference should not contain quality adjectives: beautiful, reliable, modern. They cannot be clearly understood. Everyone has their own concepts of beauty and modernity.

Look. Someone thought this design was beautiful and allowed it to be used on their website:

The same thing happens with vague formulations that don’t mean anything in themselves:

The customer must like the site. What if he is in a bad mood?
The site should be convenient. What does it mean? Convenient for what?
The site must withstand heavy loads. 10 thousand visitors? Or 10 million?
High-quality expert content. Well, you get the idea.

Check for ambiguities in the text. If there is, rewrite it. Your wording should be clear and precise:

The site must load quickly → Any page on the site must have more than 80 points in Google PageSpeed Insights.
Heavy loads→ 50 thousand visitors at the same time.
The main page displays a list of articles → The main page displays a list of the last 6 published articles.
Minimalistic user-friendly subscription interface → “Leave your e-mail” field and “Subscribe” button → *drawn sketch*.

We've sorted out the wording, let's go over the structure.

Please provide general information

All team members must correctly understand what the company does and who its target audience is. So that no one gets confused, it is better to write this down at the very beginning of the terms of reference.

It’s also worth indicating the purpose of the site and describing its functionality in a nutshell - so as not to end up with an online store instead of a blog.

Explain difficult terms

The first rule of the terms of reference is that it must be understandable to everyone for whom it is intended. If you are going to use terms that your client, the owner of a children's toy store, may not understand, be sure to explain them. In clear language, and not a copy-paste from Wikipedia.

Describe tools and hosting requirements

Imagine that you spent 2 months creating a cool website. Each stage was coordinated with the client - he was delighted. And now it's time to hand in the work. You show the admin panel, and the client shouts: “What is this? Modex?! I thought you would do it on WordPress!”

To avoid such problems, describe the tools, engines and libraries used. At the same time, indicate your hosting requirements. You never know, you will do it in PHP - and the client has a server in .NET.

List the requirements for the operation of the site

The site must work in all browsers current versions and on all types of devices. Yes, this is obvious to any developer and any customer. But it’s better to write to protect the client from work done in bad faith.

Write here the requirements for site loading speed, load resistance, protection from hacker attacks and similar things.

Specify the site structure

Before you start drawing the design and layout, you need to agree on the structure of the site with the client.

Talk to the customer and find out what he needs. Gather developers, SEO specialists, marketers, editor-in-chief - and decide which pages are needed on the site. Think about how they will be connected to each other, from which one you can switch to.

You can show the structure with a list, you can draw a block diagram. As you prefer.

This is one of the most important stages of working on the site. Structure is the foundation. If it is unsuccessful, the site will turn out crooked.

Explain what will be on each page

The client must understand why each page is needed and what elements will be on it. There are two ways to show this.

Prototype- a more visual and unambiguous way. The contractor draws sketches of each page and attaches them to the terms of reference. The client sees what the interface of his future website will look like and says what he likes and what needs to be changed.

Enumeration of elements- a lazy alternative to prototype. Just write down what blocks should be on the page and what they do.

Describe the scenarios for using the site

If you are making some kind of non-standard interface, just showing the structure and page thumbnails is not enough. It is important that the entire execution team and the client understand how visitors will use the site. Scripts are great for this. The scenario diagram is very simple:

User action.
Site response.
Result.

Of course, if you are making a standard business card or landing page, you don’t need to write scripts. But if there are some interactive services on the site, it is very desirable.

Determine who is responsible for the content

Some developers create a website with content right away. Others place fish. Still others can write texts, but for additional fee. Agree on this on shore and write down in the terms of reference what content you should prepare.

It is quite difficult to come up with objective criteria for assessing the quality of texts. It’s better not to write anything other than “High-quality, interesting and selling content that is useful for the target audience.” It's trash, no one needs it.

Specifying that all content must be unique is helpful. Another protection for the client from unscrupulous performers.

Describe the design (if you can)

As with text, it is difficult to come up with objective criteria for evaluating design. If you and the client have agreed on a color scheme, write it down. If he has a brand book in which the fonts are specified, indicate them too.

Write about beautiful and modern design No need. It means nothing, has no power and generally ugh.

Instead of a conclusion: the structure of the terms of reference

The structure of the technical specifications will be different for different tasks. It’s stupid to make the same technical specifications for a new social network and a landing page for wholesale carrots. But in general you need these sections:

Information about the company and target audience, goals and objectives of the site.
A glossary of terms that may not be clear to the client.
Technical requirements to the layout and operation of the site.
Description of the technologies used and a list of hosting requirements.
Detailed site structure.
Prototypes of pages or descriptions of elements that should be on them.
Scenarios for using a non-standard interface (optional).
List of content that the developer makes.
Design requirements (optional).

Rules for compiling Software Requirements Specification. SRS is the next step in the evolution of the technical specifications. Needed for large and complex projects.
Standards and templates of technical specifications for software development. Descriptions of various GOSTs and methodologies for creating technical specifications.

This is the end of the part that I wrote. But there is another one - comments from specialists who helped make the guide. Read it, it's interesting too.

Developer Comments

I talked to several developers to find out how they create technical specifications. I pass the microphone to them.

First of all, the client needs technical specifications - so that he understands what his website will be like and what the money will be spent on. If something is done wrong, he can refer to the technical specifications and ask for it to be redone.

The technical specification is drawn up by the project manager after communicating with the client and discussing the task with the designer.

Large customers often ask for very detailed technical specifications, which describe each button. Small companies, on the contrary, do not like meticulous 100-page documents. It's a long read and it's easy to miss something important. More often we make concise technical specifications of 10–15 pages.

We indicate:

Information about the company and the purpose of the site.
Requirements for design, color scheme.
Technologies and CMS used.
Who produces the content - us or the client.
The structure of the site down to each page.
Descriptions of each page. We don't make prototypes, but we specify what elements should be on the page and how they should work.

The last 2 sections are the most important. They are the ones who provide an understanding of what the site will be like and how it will work.

Very important point- you can’t just give the terms of reference to the developers and hope that they will do everything well. Technical specification is a list of requirements for the site; it cannot replace communication. It's important to make sure that each team member understands the overall goal and is not just completing tasks on the fly. If something is unclear, it is necessary to explain, discuss, and give detailed comments.

Agree, it’s cool when a designer immediately meets your expectations. And during my many years of practice, I found the best formula for this story - technical task should consist of two parts:

The point of the brief is to understand what the customer likes: convex or flat buttons, sharp or rounded corners, single-color fill or with a gradient, bright or pastel colors, thin or thick heading fonts, what color scheme, etc. In general, a description of the external skin of the future site.

Approximate diagram

The diagram is needed to immediately see the amount of work (visually you immediately understand how long the project will take, what you can immediately advise the customer on what is ok, what is not ok, etc.). So that you have an understanding of what blocks will be on the pages. Not everyone knows graphic editors, so you can even sketch out the structure with a pen on paper, then take a photo and send it. And it will be easier for both of us to discuss the design of your future website. Here are examples:

You need a website, but you doubt the correctness of its structure and you are not sure necessary blocks on the pages? The guys will make a prototype of the site - clear, competent and thoughtful, which will show where and what is located, whether it looks together and whether it will ultimately work. This is painstaking titanic work and sometimes simply a necessary stage in the development of a website (for example, in the case of a portal or a “heavy” online store).

If the project is about a redesign, and the current structure of the site suits you and you don’t really want to change anything, then a prototype / diagram is not needed. A completed style brief will be sufficient.

Landing pages

For one-page sites, the structure is the copywriter’s text, divided into semantic blocks. If you don’t have your own copywriter, knock on Olga’s door - she’ll write a cool selling text.

Do you want to order good informational texts or selling SEO articles? Need cool home pages or landing page text with structure? Urgently needed creative names, juicy slogans or poems? Contact the girls - they will help! Everything you wanted - not in words, but in deeds!

Hey! So, I’m preparing a detailed technical specification, and you stupidly paint it and that’s it?

Well, no 🙂 Don’t worry, I won’t just paint the prototype. I have something to offer and advise you!

I will do what I think is right based on my experience. If you don't like it, I'll remake it based on the prototype. You have nothing to lose =)

Here are some reviews from my customers:

By the way

Subscribe, press the bell, and like. Well, you already know everything)

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 developing the design of a one-page website.

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 it 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:
- color preference options, 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 website

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

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 detail the essence of the order, introduce the contractor and the client, therefore, traditionally, it includes several main sections (contact information, company history, 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 graphs several times, check with contact person/ performer different points, but write everything you need. A large amount of information here will only have a positive impact, 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 offers complete information about the brand. We list the main forms offered for filling out:

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

So, for example, the presence corporate identity brand 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 high-quality landing page. If there is no logo, it is advisable to order its development.

Here is a clear example of a corporate identity, a “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 of a 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 user's benefit from renting a car, because he can see many beautiful places just by getting behind the wheel. Conversion increased by 8.5%. This 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 a successful solution from a catering brand looks like.

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.

Conversion action expected from the user: make a purchase, leave contacts, download a file, etc.
Desired style of the future landing page (strict, business, vintage, ultra-modern, other)
Special preferences regarding colors
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).
What graphic materials can you provide for working with the site? For example, label design, slides, etc.
Desired CMS of the site
Do you need to adapt to mobile traffic?
Do you need integration with social networks, Internet statistics systems?
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 depends on the goal, call-to-action elements finally, what text to write. 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 pointless. 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. Each company puts its own points into additional requirements, 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 performer to choose the right one Domain name, just be sure to indicate your requirements.

Users LPgenerator platforms here's a win-win. We provide comprehensive services: starting from choosing a layout, consulting with specialists, and ending with placement on hosting, selection of a domain.