Lesson 29 / Planning
Project Planning
Create a pre-build planning packet with audience goals, project goals, scope, sitemap, content inventory, navigation plan, and low-fidelity wireframes.
Course Role
Studio Support
Best during work sessions, critique, debugging, project planning, or final polish.
Teacher Notes / In-Class Use
Demo Live
- Model the core workflow from the lesson using a small class example.
- Connect the example back to the first goal: Define audience, user goals, project goals, and success criteria
Try In Class
- Write a project brief for your current site.
- Have students make one visible change, save, refresh, and explain what changed.
Submit Or Check
- Ask students to show the work in the browser, not only in the editor.
- Have students commit their progress with a clear message when the checkpoint is stable.
Watch For
- Students copying code without checking file paths, spelling, or capitalization.
- Visual changes that work locally but break when the project is published.
Learning Goals
- Define audience, user goals, project goals, and success criteria
- Control project scope with must-have, should-have, nice-to-have, and save-for-later decisions
- Create a sitemap, content inventory, navigation plan, and page priority list
- Use mobile-aware wireframes to plan before writing layout CSS
Plan Before You Build
A website is easier to build when the purpose is clear. Before choosing colors, effects, or layouts, define who the site is for, what they need, and what action the page should support.
Planning does not remove creativity. It gives your creativity a target so you do not spend the project timeline redesigning the same page over and over.
Project Brief Template
A project brief turns a vague idea into a buildable direction. Keep it short enough that you can actually use it while designing and coding.
| Prompt | Example Answer |
|---|---|
| Project name | Baton Rouge Study Spots |
| Audience | Students looking for quiet places to work. |
| User goal | Find a study spot with Wi-Fi, outlets, seating, and reasonable noise levels. |
| Site goal | Help students compare locations quickly and choose one to visit. |
| Required pages | Home, listings, detail page, about, contact. |
| Required content | Photos, hours, location, amenities, descriptions, and links. |
| Primary action | Open a detail page or save a favorite location. |
| Success criteria | A user can find a relevant spot in under two minutes. |
User Goals vs Project Goals
User goals describe what visitors need. Project goals describe what the site or creator needs to accomplish. Strong websites serve both without making users work too hard.
| User Goal | Project Goal |
|---|---|
| Find a study spot with Wi-Fi. | Show useful location information clearly. |
| Compare restaurant options quickly. | Help users browse listings and open detail pages. |
| Understand a designer's work. | Present portfolio projects with process and outcomes. |
| Register for an event. | Make the event details and sign-up action easy to find. |
Control Scope
Students often overbuild. Scope control helps you protect the core experience before adding extras.
| Priority | Meaning | Example |
|---|---|---|
| Must-have | Required for the project to work. | Homepage, main navigation, listing cards, detail page. |
| Should-have | Important but not blocking the core experience. | Filters, related items, contact form. |
| Nice-to-have | Adds polish if time allows. | Animation, theme toggle, carousel. |
| Save-for-later | Out of scope for this version. | User accounts, real database, complex search. |
Sitemap Examples
A sitemap shows the pages in a site and how they relate. Keep the first version simple so you can build it within the project timeline.
Portfolio Site
- Home
- Work
- Project Detail
- About
- Contact
Listing Site
- Home
- Listings
- Listing Detail
- About
Small Business Site
- Home
- Services
- Gallery
- About
- Contact
Event Site
- Home
- Schedule
- Speakers
- Venue
- RegisterContent Inventory
A content inventory lists what each page needs. This prevents empty layouts that look good but have no real information.
| Page | Required Content | Assets |
|---|---|---|
| Home | Intro, featured items, primary call to action | Hero image, logo |
| Listing | Card title, category, short description, link to detail | Thumbnail images |
| Detail | Full description, facts, links, related items | Gallery images |
| About | Project purpose, audience, context | Portrait, process image, or brand graphic |
| Contact | Instructions, form fields, alternate contact method | No required image |
Content-First Planning
Layout depends on content. Before designing a page, write rough versions of the headings, paragraphs, button text, links, and image needs.
| Content Type | Planning Question |
|---|---|
| Heading | What should the user understand first? |
| Body copy | What information helps the user decide or act? |
| Button text | What action should the user take? |
| Links | Where does the user need to go next? |
| Images | What image would add information instead of decoration? |
Page Priority
Every page needs hierarchy. Decide what is primary, secondary, supporting, and optional before arranging the layout.
| Priority | Meaning | Example |
|---|---|---|
| Primary | The most important thing on the page. | Featured project, main offer, listing search. |
| Secondary | Useful content that supports the main goal. | Featured cards, intro copy, key facts. |
| Supporting | Context that helps but should not dominate. | Related links, testimonials, metadata. |
| Optional | Nice detail that can move lower or be removed. | Decorative image, extra feature, secondary animation. |
Navigation Planning
Planning navigation early prevents every page from becoming equally important. Main navigation should include the pages users need most often. Footer navigation can hold secondary links.
| Question | Planning Decision |
|---|---|
| What belongs in main navigation? | Top-level pages users need to reach quickly. |
| What belongs in footer navigation? | Secondary pages, contact, policies, credits, or repeated utility links. |
| What should stay out of main navigation? | Detail pages, temporary pages, and low-priority support pages. |
| What needs a call-to-action link? | The primary action, such as view projects, register, contact, or browse listings. |
Wireframe Fidelity Levels
Wireframes focus on structure, hierarchy, and content placement. They should answer what goes where before the visual design becomes detailed.
| Level | Purpose |
|---|---|
| Sketch | Fast idea generation with boxes and labels. |
| Low-fidelity wireframe | Clear layout structure without detailed styling. |
| High-fidelity mockup | Closer visual design with type, color, imagery, and spacing. |
| Coded prototype | A working version in HTML, CSS, and JavaScript. |
Mobile-First Planning
Plan how the page works on a small screen before relying on a wide desktop layout. Mobile planning forces stronger content priority.
- Decide what content appears first on mobile.
- Identify what stacks, wraps, collapses, or moves lower on the page.
- Avoid hiding important content just because the screen is smaller.
- Plan tap-friendly buttons and readable spacing.
- Sketch mobile and desktop versions when the layout changes meaningfully.
Pre-Build Planning Packet
Before opening VS Code for a larger project, create a small planning packet. It should be practical enough to guide your build, not a separate design performance.
- Project brief with audience, goals, required pages, and success criteria.
- Scope list with must-have, should-have, nice-to-have, and save-for-later items.
- Sitemap showing page relationships.
- Content inventory for each required page.
- Navigation plan for main nav, footer nav, and calls to action.
- Low-fidelity wireframes for the most important pages.
Common Mistakes
| Mistake | Fix |
|---|---|
| Starting with colors before goals | Define audience, goal, and content first. |
| Planning too many features | Protect the must-have scope. |
| Wireframing without real content | Draft headings, body copy, buttons, and links first. |
| Putting every page in main nav | Prioritize top-level pages and move support links lower. |
| Only planning desktop | Sketch the mobile content order too. |
Checkpoint
Before moving on, make sure these feel true.
- I can define the audience and goal for a web project.
- I can create a sitemap and content inventory.
- I can use wireframes to plan before building.
Practice
- Write a project brief for your current site.
- Create a must-have, should-have, nice-to-have, and save-for-later scope list.
- Draw a sitemap with every page you plan to build.
- Create a content inventory for at least three pages.
- Write the primary heading, body copy, button text, and image needs for one key page.
- Sketch one mobile low-fidelity wireframe and one desktop low-fidelity wireframe.