Planning your Website

TL;DR - Before the AI touches a single line of code, you need to know what your website is for. This unit is about defining that clearly - your site's purpose, the pages it needs, and the visual direction you want to go in. The output is the foundation of your SITE PLAN.md.

Estimated time: 60 minutes (excl. inspiration gathering)

Outcomes & What you'll make

By the end of this unit you'll understand:

• How to define your site's purpose in a way that guides every decision after it
• How to find and organise visual inspiration
• How to map out your site's pages before building anything

What you'll make:

• Expanding SITE PLAN.md with three sections: Site Purpose, Inspiration, and Site Map

We're going to do our best at finding all the features and fancy things your website needs in this chapter. Spending time on this chapter will pay off later.

In fact, without planning your site well, how is the AI supposed to make what you envisioned? Planning is everything when coding with AI. Let's go.

🚨 From now on: write notes and ideas into your SITE PLAN.md. (Go back to Unit 2 if that's unfamiliar.)

🚨 This guide doesn't help you make one specific website. We're making your website - so your end result depends a lot on this chapter.

✏️ Exercise 1: Your website's purpose

Try to fill in the blank here: My website's purpose is ____ . I want a website to ____ .

Take a moment to think about it before you proceed. We're not in a rush.

📄 Open your SITE PLAN.md and add a "Site purpose" segment.

Defining your purpose (~10 min)

1. Write down your answer to the blank above. One or two sentences is fine.
2. Once you've written down the site's purpose, consider these points as well:
   • Why do I want a website? What should it achieve?
   • What types of content do I want my website to support? (Articles, videos, multimedia ...)
   • How often will I update the content on my website?
   • Will I redesign the website often?
   • What does my audience expect? What do I need to communicate?
   • How can I make this site pleasant and easy to use for them?
3. Add any answers that feel relevant to your Site purpose segment.

✏️ Exercise 2: Finding & organising your inspiration

I know this class has been pretty heavy so far, but it's time to have fun and go look for inspiration! Even if you already have an idea in mind - you might stumble upon something exciting. After this segment, we'll develop your site map.

So, when I went looking for cool websites it got a bit messy. I had 15+ tabs open, switching from one to the other.. and it became rather confusing. So don't be like me! Take notes! For visuals, use Google Slides, Powerpoint, Freeform or any app of your choice to keep everything in one place.

Gathering inspiration (~30 min)

1. Start searching for websites you like. (See the search tips below if you're not sure where to start.)
2. When you find something interesting, save it - a screenshot, a link, or both.
3. Keep everything in one place: Google Slides, Powerpoint, Freeform, or any app of your choice.

If you want to make the most of your inspiration gathering, here are some things to look out for. (In order from subtle to obvious)

• Animations (How elements appear/fade on the page)
• Transition speed (between pages)
• Differences between desktop and mobile versions (some websites manage this very well - try resizing your browser window!)
• Cognitive load (Focused vs. tons of things happening)
• Fonts (How many? How are they used?)
• Colorways / Palettes
• Layout
• Custom features (unique cursor etc.)

Search tips

If you're unsure of how to find website inspiration, search within your niche. Fill in the blanks below and the links will magically update with Google searches.

You're a: photographer

who wants a: minimalistic website.

"minimalist photography portfolio site" ->

"elegant photography portfolio site" ->

"top 10 photography portfolio sites 2026" ->

"award winning photography portfolio sites" ->

"photography portfolio websites Behance" ->

"photography portfolio websites Pinterest" ->

Another magic trick is to search in a different language. Using Google Translate is fine, of course! (Maybe I include a tool/selector for that here...)

In fact, it might help you focus less on the content of the website, and more on the design. Good luck, and remember to take notes!

📄 Add an "Inspiration" segment to your SITE PLAN.md. Note down the sites you found most useful and what you liked about them.

✏️ Exercise 3: Site map

This can be snoozy to think about, but it's important! Here, you should make a complete page list: essentially the outline of your website.

For starters, you probably want:

• Home page
• About page

That's very barebones, but a complete website in some cases! Here are some other pages you might consider:

• Blog / Articles
• Gallery
• Projects
• Contact
• ... and so on

Building your site map (~15 min)

📄 Open your SITE PLAN.md and add a "Site Map" segment.

1. Write a list of all the pages your site might need.
2. For each page, add a short note on its purpose.
3. Have a look at the full list - does anything feel unnecessary? Is anything missing?

🚨 It's a great idea to also state the purpose of each page, though you don't have to go overboard here.

Don't overdo it

Your website has to reflect your personal use case, to best serve your intended audience. Thus, knowing upfront what you need is key: because some features require more code and consideration.

(It's very painful to change the underlying code later. Ask me how I know.)

Basically:

• Too many features and fancy visuals is annoying, what do your visitors expect?
• Adding features later in the process can break the design
• You may need to re-test on desktop and mobile again

For example, I use live 3D models on my site as well as a blog/article page (You're looking at it!). I planned for both features - so building the site was easy. We'll get to the technology/feature part in a later unit. Just know: less is more.

Learning reflections

• You defined your site's purpose on your own. How did that feel compared to just asking an AI to suggest one? What would have been lost if you'd skipped it?
• Collecting inspiration, organising, noticing what you're drawn to - did something surprise you?
• We're building a document (SITE PLAN.md) that lets a technical collaborator/AI understand your creative vision. Do you have other projects where this could be handy?