No history yet

Planning Your Website

Start with the Why

Before you write a single line of code or choose a color scheme, you need to answer a fundamental question: Why does this website exist? A website without a clear purpose is like a ship without a rudder. It might look nice, but it won't go anywhere meaningful.

Think of it as building a house. You wouldn't just start throwing up walls. You'd begin with a blueprint that defines the purpose of each room. Is this a one-bedroom cabin for quiet retreats or a sprawling family home designed for entertaining? The answer shapes every decision you make.

Clearly define your website’s purpose before you start the design process: the ‘why’ behind your site should be the driving force when deciding what features it needs.

Your website's goals are its reason for being. Are you trying to sell products? Showcase a portfolio? Provide information on a specific topic? Maybe you want to build a community forum. Each goal demands a different approach to design, content, and functionality.

Jot down one to three primary goals. For example:

  • Goal 1: Sell handmade pottery online.
  • Goal 2: Attract new clients for a graphic design business.
  • Goal 3: Inform local residents about community events.

Having clear, simple goals focuses your efforts and prevents you from adding unnecessary features that confuse visitors and clutter your site.

Know Your Audience

Once you know why you're building a site, you need to figure out who you're building it for. Your target audience is the group of people you most want to reach. Understanding them is key to creating a website they'll actually want to use.

A site designed for tech-savvy teenagers will be drastically different from one aimed at retirees learning to garden. The language, imagery, and even the layout will change based on their expectations and technical comfort.

FeatureAudience: Teen GamersAudience: Retiree Gardeners
Tone of VoiceInformal, energetic, uses slangCalm, friendly, straightforward
NavigationMight use icons and dynamic menusClear, text-based labels
ContentFast-paced videos, memes, short articlesDetailed how-to guides, photo galleries
Color SchemeBold, high-contrast, dark themesNatural, soft, bright colors

To define your audience, ask yourself a few questions:

  • What is their age range and technical skill level?
  • What are they hoping to find or do on your site?
  • What problems can your website solve for them?

Creating a simple user persona—a fictional character representing your ideal visitor—can help make this process more concrete.

Map It Out

With your goals and audience defined, it's time to plan the structure of your site. A sitemap is a high-level diagram that shows how all your pages are connected. It’s the architectural blueprint for your website, ensuring visitors can find what they’re looking for without getting lost.

Think of it as an organizational chart. At the top, you have the home page. Branching from that are your main sections, like 'About Us,' 'Products,' and 'Contact.' Under 'Products,' you might have further sub-pages for each product category.

Start by listing all the pages you think you'll need. Then, group related pages together under main categories. This simple exercise helps you think through the user's journey and creates a logical flow.

Sketch the Skeleton

A sitemap plans the overall structure, but a wireframe plans the layout of an individual page. A wireframe is a basic, black-and-white sketch of your website. It's not about design; it's about structure. The goal is to decide where key elements will go before you start thinking about colors, fonts, or images.

This is the skeleton of your page. You'll map out where to place the navigation menu, the main content area, a sidebar, calls to action, and the footer. It’s a low-fidelity blueprint that focuses purely on layout and functionality.

Lesson image

You can draw a wireframe with a pen and paper or use simple digital tools. The medium doesn't matter. What's important is mapping out the hierarchy of information on the page. Ask yourself: what's the most important thing a visitor should see first? Second? Your wireframe should guide their eyes through the page logically.

Quiz Questions 1/5

What is the most crucial first step to take before starting the design or coding of a website?

Quiz Questions 2/5

A sitemap is best described as a website's architectural blueprint, showing how pages are interconnected.

Planning isn't the most glamorous part of building a website, but it's the most important. A solid plan based on clear goals, a defined audience, a logical sitemap, and thoughtful wireframes sets you up for success.