Scoping the project: goals, sketches, structure and design choices

You now know the tools. The difference between a pile of experiments and a finished website is planning. Before writing the final code, you will decide what the site is for, who it is for, what goes on it and how it will look. An hour spent here saves many hours of rework later. By the end of this lesson, you will have a one-page project brief and paper sketches ready to build from.

Why plan on paper first

Beginners often start typing code and make decisions as they go. The result is usually a site that looks improvised and a lot of rewriting. Professionals plan first because changing a sketch costs seconds, and changing built code costs time. You do not need special software: a sheet of paper, a pencil and a clear head are enough.

Step 1: define the purpose

Answer these questions in writing, in one or two sentences each:

• What is the site for? For example: “To present my photography and illustration work and receive commission requests.”
• Who is it for? Potential clients, a recruiter, local people, fellow students.
• What should a visitor do? Choose one main action: contact me, view my work, download my CV.
• What do I want them to remember? One sentence.

The main action drives the design: it becomes the most visible button on the page. A site that tries to do ten things tends to do none of them well.

Step 2: inventory your content

A website is mostly content, and content is what takes the longest to gather. Make a list of everything you have or need:

• Text: a short introduction, a presentation of yourself, a description of each project, a contact invitation.
• Images: a portrait or hero photo, three to six project images, possibly a logo.
• Facts: your name, location, contact email, skills, services.
• Links: social profiles or other sites you want to mention.

Write the real text before you build, not “lorem ipsum”. Real content reveals real problems: a name that is too long for the menu, a description twice as long as the others, a missing image. Keep sentences short and concrete. Say what you do, for whom, and what the visitor can expect.

Step 3: decide the structure

For a first portfolio, one page with several sections is a great choice. Visitors scroll through the content, and the menu links jump to sections with anchor links. A multi-page site is also fine, but each page multiplies the work (header, footer, links to maintain). Here is a one-page structure for our example:

And a matching folder tree for your project:

portfolio/
  index.html
  favicon.svg
  css/
    style.css
  images/
    hero.jpg
    about.jpg
    project-1.jpg
    project-2.jpg
    project-3.jpg

Step 4: sketch the layouts

Draw two versions of the page on paper: a narrow one for a phone and a wide one for a computer. Use boxes with labels; do not worry about beauty. For each, decide:

• the order of the sections (on mobile it is a single column, so the order is the reading order);
• what sits side by side on a wide screen (hero text and image? about photo and text?);
• how many columns the gallery has at each size;
• where the main call to action appears.

This is the mobile-first thinking from chapter 4: start with the simple single column, and decide what changes on larger screens. A sketch for the phone might look like this in words:

[ Header: name + menu (wraps) ]
[ Hero: heading, text, button ]
[ Hero image ]
[ Projects: heading ]
[ Card ] [ Card ] [ Card ]  (stacked)
[ About: photo, then text ]
[ Contact: form ]
[ Footer ]

On a wide screen, the hero becomes two columns (text left, image right), the cards form a row of three, and the about section places photo and text side by side.

Step 5: make design choices

Choose a small, coherent set of building blocks and write them down. These will become your CSS variables.

• Colors: one primary color, one dark text color, one light background, one accent. Check the contrast of text and button pairs now.
• Typography: one family for headings and one for body text (system fonts are a perfectly good choice), and a short size scale.
• Spacing: a base unit, for example 1rem, and multiples of it.
• Shape: one corner radius and one shadow style used everywhere.
• Tone: friendly and personal, or serious and minimal? Let the design and the words agree.

Consistency is what makes an amateur site look professional. Repeating the same few choices everywhere beats a collection of clever but unrelated effects.

Step 6: write your project brief

Gather everything in a short document, which you can keep in a text file named BRIEF.txt at the root of your project (you will not publish it). A template:

PROJECT BRIEF
Purpose:          Present my work and get commission requests.
Audience:         Individuals and small businesses looking for a photographer.
Main action:      Send me a message.
Sections:         Header, Hero, Projects (3), About, Contact, Footer.
Palette:          Primary #0f766e, text #1f2937, background #f9fafb, accent #f59e0b.
Fonts:            System font for body, Georgia for headings.
Images needed:    Hero, about, three project photos, favicon.
Accessibility:    Skip link, visible focus, contrast checked, alt text.
Done when:        The site validates, works on a phone, and is online.

The last line, “Done when”, is important. It defines the finish line so that you do not polish forever.

Scope: small and finished beats big and unfinished

The most common reason for abandoned projects is a scope that was too large. Aim for a version one that you can finish in a few sessions. A list of ideas for later (a blog, a dark mode, animations, more pages) is healthy; put it in a “later” section of your brief and resist adding it now.

Your turn

Create your project brief and sketches.

1. Write the purpose, audience, main action and one-sentence takeaway of your site.
2. List all the content you need and mark what you still have to produce.
3. Sketch the mobile and desktop layouts on paper, section by section.
4. Choose your palette, fonts, spacing unit and corner radius. Check the contrast of your main text and button colors.
5. Prepare the images: resize, compress, rename and place them in the images folder.
6. Write the brief in BRIEF.txt, including a “Done when” line.

Purpose:     Show my gardening workshops and let people sign up.
Audience:    Neighbors and local families.
Main action: Send a registration request.
Takeaway:    Friendly, practical workshops for beginners.
Sections:    Header, Hero, Workshops (3 cards), About, Contact, Footer.
Palette:     Green #2f6f3e, text #1f2937, background #f7faf5, accent #e9a23b.
Images:      Hero (garden), 3 workshop photos, portrait, favicon.
Done when:   Validates, readable on a phone, keyboard usable, online.