From brief to site: how a sentence becomes a layout

You type a sentence, and a little later there is a website. From the outside it can feel like a single leap. In practice, a designer (human or AI) makes a chain of smaller decisions to get from words to layout, and each one is shaped by what you said, or didn't say.

Understanding that chain is useful. It shows you why some briefs produce sharp results and others produce something generic, and it tells you exactly where to add detail.

Let's follow an imaginary brief through the process:

"A website for a one-person yoga studio in a small town. Calm and welcoming. Classes for beginners and older people. I want people to book a first class."

Step 1: What is this site for?

The first question any designer asks is about purpose. Not "what is the business?" but "what should a visitor do?"

Our brief answers it directly: book a first class. That single line is worth more than any adjective, because it tells the designer what the whole site must build towards. The booking action becomes the primary button. It will appear near the top and again further down. Other content exists to make a visitor confident enough to press it.

If a brief doesn't state a goal, the designer has to guess. Guesses tend towards the safe middle: a bit of everything, nothing emphasised.

Tip: always include one sentence that starts "I want visitors to..."

Step 2: Who is it for?

Next comes audience. "Beginners and older people" carries a lot of information. It suggests:

• Reassurance is more important than impressiveness. Visitors may be nervous.
• Text should be generously sized and easy to read.
• Imagery should show ordinary bodies and gentle classes, not advanced poses.
• Practical questions (what to bring, is there parking, can I join if I have bad knees) deserve a visible answer.

None of those points is in the brief, but they all follow from it. This is where a few words about your audience pay off many times over.

Step 3: What content is needed?

With purpose and audience in mind, the designer drafts a content inventory: the pieces of information the site needs to hold. For our studio, something like:

1. Who the teacher is, and why they are approachable.
2. What classes exist, and which one a beginner should choose.
3. Timetable and prices.
4. Where the studio is and how to get there.
5. Answers to common worries.
6. How to book.

Notice that this is a list of questions a visitor might have, not a list of pages. Good structure starts from what people want to know.

Step 4: In what order?

Order is where layout really begins. A useful rule of thumb from long design practice is to follow the visitor's natural sequence of questions: "Is this for me?", then "Can I trust it?", then "How does it work?", then "What do I do next?"

For the studio, that might give us a home page that runs:

• A short, warm headline and one line saying who the classes are for, with a "Book your first class" button.
• A brief introduction to the teacher with a friendly photograph.
• Three class types presented side by side, with the beginner class clearly marked.
• A short section answering common worries.
• Timetable and prices.
• Location, with a map and travel notes.
• A final booking prompt.

For a small business, a single well-ordered page is often enough. Additional pages can come later if the content grows.

Step 5: What should it feel like?

Only now does visual style come in. "Calm and welcoming" translates into concrete choices:

• Colour: soft, muted tones rather than saturated brights, with enough contrast that text stays readable.
• Type: a gentle, legible typeface for body text, perhaps something with a little warmth for headings.
• Space: plenty of white space so nothing feels crowded.
• Shape: rounded corners and soft edges over sharp, hard lines.

It is worth noticing how late style arrives in the process. Many briefs lead with it ("modern, minimalist, bold") and say nothing about purpose or audience. That produces sites that look a particular way but don't do anything in particular.

Step 6: The first draft, and the conversation

From all of this, a first draft appears. In Katzero, this is where the chat takes over: you look at the page and respond. Perhaps the teacher's introduction is too long, or the timetable should come before the classes. Each change is saved as a new version, so you can compare and step back if needed.

This stage is as important as the brief. The first draft is a hypothesis about what you meant. Your feedback corrects it.

Writing a brief that does the heavy lifting

Pulling the steps together, here is a simple template you can adapt:

• What it is: "A website for..." (type of business or project, and where it is if that matters)
• Goal: "I want visitors to..." (one main action)
• Audience: "It's mainly for..." (who, and anything they might worry about)
• Must include: the key pieces of content you already know you need
• Feel: two or three words about mood, plus anything to avoid
• Real details: names, places, prices or hours you are happy to include now

A brief built this way might be four or five sentences long. That is plenty. You don't need to describe layouts or colours precisely; you need to give the designer what it needs to make good decisions on your behalf.

Things the brief can't do

A brief, however good, can't supply information it doesn't contain. After the first draft, check:

• Are all names, prices, times and addresses yours and correct?
• Does the tone sound like you, or like a generic business?
• Would your actual audience understand every word?
• Is the booking action working and pointing where it should?

The process from sentence to site is quick now, but it still runs on the same reasoning designers have always used: purpose, audience, content, order, feel. Give the tool clear answers to those questions, and it can do a lot of careful work for you.