Get Started

Proposals & your audience

Before you open a code editor, answer two questions: who is this for and what should it do? A short proposal and a clear picture of your audience decide which sections and components your site actually needs.

Step 1

Write a one-page proposal

A proposal is a short plan you (and your client or teacher) agree on before building. It keeps the project focused and prevents "wait, that's not what I wanted" at the end. It doesn't need to be long — one page covers it.

Goal

One sentence: what is this site for? "Get more reservations." "Show my portfolio to recruiters."

Audience

Who visits and what they want. Everything else flows from this.

Scope

What pages/sections are in — and what's deliberately out (for now).

Timeline

Rough milestones and a launch date, even if it's loose.

What a proposal includes

  1. Project & goal — the site, and the single most important thing it must achieve.
  2. Target audience — who they are and what they need (see Step 2).
  3. Pages & sections — a simple sitemap (Home, About, Contact…).
  4. Key features — the must-have components (form, gallery, map, cart…).
  5. Look & feel — a few words on the vibe + any brand colors/fonts.
  6. Timeline & deliverables — what you'll hand over, and when.
Step 2

Understand your audience

Every design decision should serve the people who'll actually use the site. A busy parent, a hiring manager, and a teenager gamer want very different things. Picture one real person and design for them.

Who are they?

Age, tech comfort, device (mostly phone?), why they're here.

What do they need?

The top 1–3 things they came to do. Make those effortless.

What's their journey?

How they arrive (search, social, link) and the step you want them to take.

What's their language?

Plain and warm, or technical and precise? Match their tone.

Make a tiny persona: "Maria, 34, books dinner on her phone during her commute. She wants the menu, hours, and a reservation in under a minute." Now every choice has a yardstick — does it help Maria?
Step 3

Match components to the audience & topic

Different goals call for different sections. Here are common site types and the components that serve their audience best — each links to a lab where you can build it.

Site type / topicComponents that fit its audience
Restaurant / caféPhoto hero, menu, hours + map, gallery, a clear "Reserve" CTA
PortfolioHero with name/role, project gallery/cards, about, contact
Product / SaaSHero + value prop, feature cards, pricing, testimonials, sign-up CTA
Blog / publicationArticle cards, categories, search, readable type, author bio
Nonprofit / causeMission hero, impact stats, stories, a strong "Donate" CTA
Event / conferenceHero with date, schedule timeline, speakers, "Register" CTA
Online storeProduct grid, filters, quick-view, reviews, cart
Dashboard / appSidebar nav, stat panels, tables, tabs
Landing pageOne focused hero, benefits, social proof, a single CTA repeated
The rule: include a component only if it helps your audience do the thing in the goal. Everything else is noise. Then sketch it as a wireframe, check it against UX best practices, and build toward the launch checklist.