Website blueprints

Shops, cafés and venues Untested

What untested means

Worked out from research and real briefs. No site has been built from it yet, so treat it as reasoning to check, not a tested template.

For places people visit during opening hours, like cafés, restaurants, shops, salons and bars.

For example: café, restaurant, bakery, bar, barber or salon

Plan a site like this Answer a few questions about your business. The pages and sections redraw, and you can download the plan.

Pages your website might need

On a phone · First screen: open now, the action and the address. Most venue visits start on a phone, nearby.

On a phone · The address opens the map app: link it, don’t embed a map (NN/g).

Home

“Open now? What’s on? Where? How do I book or order?”

Sections, top to bottom

Select a section to see what to write and why.

  1. What this is
    What to write
    What you serve + when, then what to come in for + how to book or order
    Why it works
    A nearby visitor is deciding where to go right now. What you serve and when you’re open answers that in one glance; a mood line doesn’t.
    Example
    “Café by day. Small plates and wine at night.” Then: “Breakfast and lunch from early; book a table for the evening.”
    Tips and a common mistake
    Tips
    • Use the words your customers use for their problem, not your trade’s terms.
    • If you’re local, name the town or area. It’s part of the answer.
    • Put one honest specific in the supporting line, like a fixed call-out price or a reply time you actually keep.
    Common mistake
    An adjective line (“Quality. Trusted. Local.”) instead of what you do and where. People scanning want the noun.

    Before and after: Headlines and hero messaging →

  2. Open now
    What to write
    Today’s status + regular hours + holidays and what to do when closed
    Why it works
    Tells people whether they can come or call right now, and what to do when you’re closed.
    Example
    “Open now · closes 11pm. Kitchen closes at 10. Closed Mondays in January.”
    Tips and a common mistake
    Tips
    • Write hours as text, not inside an image or PDF.
    • Post holiday and seasonal changes before they happen.
    • Say what to do when you’re closed: an out-of-hours number or online booking.
    Common mistake
    Hours only inside a photo of the door sign or a PDF menu.
  3. Main action
    What to write
    Book or order + for when, with deposit, group size or order cut-off
    Why it works
    People booking a table or ordering ahead want it done in one step. Naming the time and any deposit up front avoids a booking that falls through later.
    Example
    “Book a table for tonight”, with “Groups of 8+ pay a deposit” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

  4. On today
    What to write
    What’s on today, dated + item + price + how to get it
    Why it works
    Shows what’s available right now, so a nearby visitor has a reason to come in or order today.
    Example
    “Tuesday 14 October: pumpkin soup £—, lamb flatbread £—.”
    Tips and a common mistake
    Tips
    • Date it, so people can trust it’s current.
    • Keep it to what’s on, the price and how to get it.
    • Only include it if someone will update it.
    Common mistake
    An undated “today” block that’s weeks out of date.
  5. How to find us
    What to write
    Address as text + a landmark people recognize + parking, transport, access
    Why it works
    Gets people to your door: the address as text, how to get there and a link that opens in their map app.
    Example
    “14 Mill Street, next to the clock tower. Bus 12 stops outside; one step at the door.”
    Tips and a common mistake
    Tips
    • Write the address as text, so it can be copied and opened in a map app.
    • Add a landmark line where street names aren’t enough.
    • Mention parking, public transport and step-free access.
    Common mistake
    An embedded map with no address to copy.
  6. Prices
    What to write
    Dish or service + price + allergens, as text
    Why it works
    Visitors check the menu and prices before they come in. Text they can read on a phone, with allergens marked, beats a photo of a printed menu.
    Example
    “Small plates £—–£— · Wine by the glass from £— · Prices include service.”
    Tips and a common mistake
    Tips
    • Say whether tax is included, every time.
    • Put extras (call-out fee, deposit, travel) beside the price they add to.
    • If every job is quoted, give typical prices for common jobs. NN/g recommends sample prices for exactly this case.
    Common mistake
    “Contact us for prices” and nothing else.
  7. Who you’ll deal with
    What to write
    Name + role + what this person does for the customer
    Why it works
    Puts names and faces on the business. That matters most when you come into someone’s home or handle their money or health.
    Example
    “Ana runs the kitchen; Tom chooses the wine.”
    Tips and a common mistake
    Tips
    • Use real, consented photos. NN/g found people distrust stock photos and like seeing real staff.
    • Say what each person does for the customer, not only their title.
    • Add personal registrations where your field has them, with the number.
    Common mistake
    Stock photos standing in for staff, or a team grid nobody can contact.
  8. What clients say
    What to write
    A real customer’s words + the specific result, with name or initials, place, date and where it was left
    Why it works
    Lets someone like the visitor say it for you. A quote about the job they need does more than general praise.
    Example
    An illustration of the shape, for a made-up business: “Came for coffee, stayed for dinner. Ask Tom what’s open by the glass.” R.K., October, on Google. Use your real reviews.
    Tips and a common mistake
    Tips
    • Choose quotes that mention the job and the result.
    • Put reviews beside the claim they support, like next to the service they’re about.
    • Use real reviews only, and keep the customer’s own words.
    Common mistake
    Three anonymous “Great service!” quotes. They prove nothing a visitor is worried about.

    Before and after: Testimonials and case studies →

Menu or price list

“What’s on and what it costs, as text, with allergens.”

Add it if Can you publish prices? Yes, fixed prices or “From” prices or ranges

Sections, top to bottom

Select a section to see what to write and why.

  1. Prices
    What to write
    Dish or service + price + allergens, as text
    Why it works
    Visitors check the menu and prices before they come in. Text they can read on a phone, with allergens marked, beats a photo of a printed menu.
    Example
    “Small plates £—–£— · Wine by the glass from £— · Prices include service.”
    Tips and a common mistake
    Tips
    • Say whether tax is included, every time.
    • Put extras (call-out fee, deposit, travel) beside the price they add to.
    • If every job is quoted, give typical prices for common jobs. NN/g recommends sample prices for exactly this case.
    Common mistake
    “Contact us for prices” and nothing else.
  2. On today
    What to write
    What’s different this week, dated + price
    Why it works
    Shows any price that only applies now, dated, so the main list stays true.
    Example
    “Tuesday 14 October: pumpkin soup £—, lamb flatbread £—.”
    Tips and a common mistake
    Tips
    • Date it, so people can trust it’s current.
    • Keep it to what’s on, the price and how to get it.
    • Only include it if someone will update it.
    Common mistake
    An undated “today” block that’s weeks out of date.
  3. Questions people ask
    What to write
    Real customer objection + direct answer
    Why it works
    Answers the doubts that stop people acting, in the words they use when they ask.
    Example
    “Can you do gluten-free? Yes: every dish on the menu is marked, and the kitchen can adapt most of them.”
    Tips and a common mistake
    Tips
    • Collect questions from real calls, emails and reviews.
    • Answer in the first words: yes, no or a number.
    • Put the deal-breakers (cost, canceling) near the action too.
    Common mistake
    Invented questions written for search engines.

    Before and after: FAQs and answer-first content →

  4. Main action
    What to write
    Book or order + for when, with deposit, group size or order cut-off
    Why it works
    People booking a table or ordering ahead want it done in one step. Naming the time and any deposit up front avoids a booking that falls through later.
    Example
    “Book a table for tonight”, with “Groups of 8+ pay a deposit” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

Prices page, in detail

Locations one for each location

“Which branch is open, and where.”

Add it if How many places can people visit? Several

Sections, top to bottom

Select a section to see what to write and why.

  1. Open now
    What to write
    Today’s status + regular hours + holidays and what to do when closed
    Why it works
    Tells people whether they can come or call right now, and what to do when you’re closed.
    Example
    “Open now · closes 11pm. Kitchen closes at 10. Closed Mondays in January.”
    Tips and a common mistake
    Tips
    • Write hours as text, not inside an image or PDF.
    • Post holiday and seasonal changes before they happen.
    • Say what to do when you’re closed: an out-of-hours number or online booking.
    Common mistake
    Hours only inside a photo of the door sign or a PDF menu.
  2. How to find us
    What to write
    Address as text + a landmark people recognize + parking, transport, access
    Why it works
    Gets people to your door: the address as text, how to get there and a link that opens in their map app.
    Example
    “14 Mill Street, next to the clock tower. Bus 12 stops outside; one step at the door.”
    Tips and a common mistake
    Tips
    • Write the address as text, so it can be copied and opened in a map app.
    • Add a landmark line where street names aren’t enough.
    • Mention parking, public transport and step-free access.
    Common mistake
    An embedded map with no address to copy.
  3. Services
    What to write
    Customer need + the service that meets it, one line each
    Why it works
    Lets people find their own job in your list fast, so they know you do it before reading anything else.
    Example
    “Breakfast · Lunch · Evening small plates · Wine”
    Tips and a common mistake
    Tips
    • Name services the way customers search for them: “blocked drain”, not “drainage solutions”.
    • With a long list, group by situation (emergencies, planned work, servicing).
    • Add a “from” price beside each one if you can publish prices.
    Common mistake
    Grouping services by your internal departments instead of by the customer’s situation.
  4. Who you’ll deal with
    What to write
    Name + role + what this person does for the customer
    Why it works
    Puts names and faces on the business. That matters most when you come into someone’s home or handle their money or health.
    Example
    “Ana runs the kitchen; Tom chooses the wine.”
    Tips and a common mistake
    Tips
    • Use real, consented photos. NN/g found people distrust stock photos and like seeing real staff.
    • Say what each person does for the customer, not only their title.
    • Add personal registrations where your field has them, with the number.
    Common mistake
    Stock photos standing in for staff, or a team grid nobody can contact.
  5. Main action
    What to write
    Book or order + for when, with deposit, group size or order cut-off
    Why it works
    People booking a table or ordering ahead want it done in one step. Naming the time and any deposit up front avoids a booking that falls through later.
    Example
    “Book a table for tonight”, with “Groups of 8+ pay a deposit” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

Location page, in detail

Book or order

“Book or order, or hand off to the system that does.”

Add it if What should a ready visitor do? Book a time or Order ahead or Send an enquiry

Sections, top to bottom

Select a section to see what to write and why.

  1. The form
    What to write
    What they’re asking for + only the fields you need + what happens to their details + send + what happens next
    Why it works
    Makes asking easy: only the fields you need, and a clear promise of what happens next.
    Example
    “Book a table” with date, time, people and phone. Button: “Request this table, we confirm by text”.
    Tips and a common mistake
    Tips
    • Ask only what you need to reply. NN/g suggests 3 to 5 fields for a contact form.
    • Let people add photos when a photo saves a visit.
    • Say when they’ll hear back, beside the button.
    Common mistake
    Asking for things you don’t need yet, like a full address for a first question.
  2. What happens next
    What to write
    What they do first → what you do next + how fast → the work → how it ends + what it costs
    Why it works
    Takes the unknown out of getting in touch: what happens after the first click, who does it, how long it takes and what it costs.
    Example
    “1 You pick a day and time. 2 We confirm by text. 3 Your table is held when you arrive. 4 You pay at the table.”
    Tips and a common mistake
    Tips
    • Write each step from the customer’s side: what they do, what they get.
    • Give each step a time you can stand behind.
    • Mention cost where it applies, so nothing surprises them later.
    Common mistake
    Steps written as slogans (“Discover, Design, Deliver”) with no time, cost or owner.
  3. Main action
    What to write
    Book or order + for when, with deposit, group size or order cut-off
    Why it works
    People booking a table or ordering ahead want it done in one step. Naming the time and any deposit up front avoids a booking that falls through later.
    Example
    “Book a table for tonight”, with “Groups of 8+ pay a deposit” beside it.
    Tips and a common mistake
    Tips
    • Name the action and what follows it. “Call now, an engineer answers” says more than “Contact us”.
    • Offer the action you can really take today. A booking button with no free slots costs you trust.
    • Put the fee, deposit or reply time next to the button, not in small print.
    Common mistake
    A button after every section, each with a different verb. Pick one main action per page.

    Before and after: Calls to action →

  4. It’s sent
    What to write
    It’s sent + what happens next, and when + how to reach you meanwhile
    Why it works
    Confirms it worked and says what to expect, so nobody sends it twice or rings to check.
    Example
    “Requested. We’ll text you to confirm within the hour. Running late? Call —.”
    Tips and a common mistake
    Tips
    • Say when they’ll hear back.
    • Give a reference if you’ll use one.
    • Offer a faster route if it’s urgent.
    Common mistake
    A bare “Thanks!” with no next step.

Enquiry, quote or booking page, in detail

See the full pattern A separate page: an example site drawn from this blueprint, with desktop and phone views, notes, and the plan as a file to download.

More about this blueprint

It bends to fit

  • Walk-in The action is getting there: hours, address, map link.
  • Book a table Booking leads and still works when closed.
  • Six branches, order by message A page per branch; delivery orders by WhatsApp.
  • Tourists, three languages Menu and booking in each language.
  • Book a named barber Where the venue meets the practice: people chosen by name.

Not the right fit if

  • You sell mainly online with delivery.
  • Each thing you sell needs its own page (a car dealer, a furniture showroom with a catalog). Listings, rooms and tours
  • Clients pick a named practitioner and pay for advice or treatment by appointment (a clinic, though a salon is open: see unknowns). Advisers, practices and clinics

The full pattern: why it works, the brief that changes it, every page annotated, and the file for Design and Build. Terms, page patterns and what the library doesn’t cover yet are in the library reference.