The brief: your project in seven fields

A brief is a short written assignment for a website: who and what, for whom, the main action, sections, content, languages and tone.

What a brief is

A brief is a short written assignment for a piece of work. An agency that makes a website starts with a brief: what the company is, who the site is for, what it must achieve. A good brief fits on one page. It answers the questions that would otherwise have to be answered in the middle of the work, usually at a much higher price.

In our course the brief plays the same role. You’ll build the same site eight times, in different eras and with different tools. The brief is what all eight versions have in common. The practice in every lesson reads your brief and fills in the names, words and goals from it, and the checks are written to work for any project.

Check yourself: what is a brief for?

To answer in advance the questions “what do I say?” and “what matters most here?”. It is shared by all the versions of the site you’ll make.

Seven fields

The brief here has seven fields. It is easiest to work them out in this order, because each one builds on the ones before.

1. Who and what. The project’s name and one sentence about what you do or what your idea is. Not “the best company”, but “a coffee shop and bakery by the river” or “a web app for small crews to price their jobs”.
2. For whom. A specific person in a specific situation. “Homeowners whose neighbor has moved the fence” is an answer. “Everyone who needs our services” is not.
3. Main action. What a visitor should do: call, write, buy, book, join, read. One thing. If there are five actions, the visitor will do none of them.
4. Sections. What the site is made of: “About”, “Services”, “Contact”. Start with three, and three is enough. One of the sections should lead to the main action.
5. Content. What stands inside the sections: services or products, people, proof (credentials, reviews, examples of work), contacts.
6. Languages. Which languages the site is in. The texts, the page addresses and even the word order on buttons depend on it.
7. Tone. How the site talks to a visitor. There are four options: businesslike, warm, bold, calm. The tone affects both the words and the look.

The diagram below shows how a page is built from a brief. Choose a kind of project and uncheck fields: the page gets poorer. Real life works the same way: a site where you don’t know who it is for can’t be made convincing.

An expert’s sitePortfolioA small shopA café or a salonA community or a non-profitAn eventA web app’s landing page

Who and what

Land surveyor and expert witness with a law degree

For whom

Homeowners, developers and attorneys

Main action

Book a consultation (booking)

Sections

About me, Services, Credentials, How I work, Contact

Services or products

Boundary survey and plan; Expert witness report; Review of another expert’s report; Boundary dispute consultation

People

Kate Alder, land surveyor, expert witness

Proof

Surveyor's license no. 00-00-00; Member of the Riverbend Association of Boundary Surveyors, reg. no. 00-00-00; Expert witness accreditation no. 00-00-00

Contacts

+1 000 000 0000, kate@riverbend.example, 0 Bank Street, Riverbend

Languages

English and Russian

Tone

calm

Kate Alder — boundary disputes EN / RU

Land surveyor and expert witness with a law degree

Book a consultation

About meServicesCredentialsHow I workContact

For: Homeowners, developers and attorneys

Boundary survey and planExpert witness reportReview of another expert’s reportBoundary dispute consultation

People: Kate Alder

Credentials and proof: 3

+1 000 000 0000 · kate@riverbend.example

Fields filled in: 10 of 10. The tone “calm” isn’t drawn as a block: it will decide the words and the look of the page.

Check yourself: why should there be only one main action?

A page that asks for several different things at once asks for none of them. One main action decides what is most prominent on the page.

Templates and the persona

If you already have a project, describe it. If you don’t, don’t worry: the course has eight templates. Pick the closest one in settings: an expert’s site, a portfolio, a small shop, a café or a salon, a community, an event, a web app’s landing page, or “my own idea”.

The default template is a persona: Kate Alder, an invented land surveyor and expert witness in boundary disputes, from the invented town of Riverbend. Everything about her is made up: the town, the credentials, the numbers (they are made of zeros). The persona is there so that everyone has a full, coherent practice from day one, even without an idea of their own.

Her details can be replaced with your own, all at once or one field at a time, right here. Below is the whole brief, all seven fields. An empty field takes its value from the template and is shown in gray; the lists of sections, services, people and proof show an example until you change them. Everything saves itself, in this browser. From this moment every era builds a site about you. You can always change the same brief in settings.

One rule about other people’s details. You may enter your own and invented ones. Other people’s, meaning the name, phone number or biography of a living person, only with their written consent. All the examples in the textbook are invented, and real details stay in your browser and never leave it (more in the fifth lesson).

Check yourself: whose details can you enter in the brief?

Your own and invented ones. Other people’s only with their written consent.

Practice

Below is your project’s page, and under it the project brief: its seven fields. The title and the description are already filled in from your details, and the other fields are marked with an ellipsis. Replace each “…” with your own words:

• the main action, in one phrase;
• at least three sections, each in its own li element;
• what is on the site: services or products, people, proof, contacts;
• the site’s language;
• the tone: businesslike, warm, bold or calm.

You’ll open this card as a reference whenever a lesson needs you to remember what your project is about. If you’re stuck for now, go back to the diagram above: every template there has a ready-made example of each field.