Process overview

Where are we?

You have a lot of tech skills. Let’s put them to use.

This lesson explains how you create a basic Web site, that helps both the people who use the site, and the people who own the site.

This lesson’s goals

By the end of the lesson, you’ll know the three Big Steps to making a good site.

The three steps

There are three Big Steps to making a site:

• Set goals

Work out what your site should to. How it will help users, and site owners.

• Design a framework

A framework is a structure for your site and its pages. Creating the site will be easier if you design a framework before you jump in and start coding.

Your framework includes page templates, with colors, fonts, images, etc.

• Fill the framework

Now that you have the framework, you can make each page in the site. Copy a template, and add your content.

Let’s go over the Big Steps.

Step 1: Set goals

You can spend hundreds of hours creating a whiz-bang site with all the latest goodies. But if it doesn’t help users do something they want to do, it won’t be worth much.

Suppose you make a site about dog vacations at the beach, for a dog travel company. People want to:

• Find a vacation spot
• Book it
• Travel there
• Have fun

Your site should help people do these things. Your site could:

• Have a list of vacation spots, with locations, prices, and other data. People can add reviews of each spot, and give a rating from 1 to 5.
• Make it easy for people to book a location. Let them enter their credit card info, confirm their reservation, like that.
• Show maps of how to get to each vacation spot.
• Tell people how they can have more fun. For example, how to find human day care, so they can enjoy some quality dog time.

The bottom line: if your site helps them, people will use it.

Your site also has to help the people who own the site, and pay for it. The dog travel company wants to make money. How to do that?

• Have ads on the site, but not for other dog travel companies.
• When someone books a vacation through the site, the travel company gets a referral fee.
• Let people buy related products through the site, like sunglasses, and games to keep humans busy (beer and TV works well).

Put together these two lists, and you have the goals of your site.

Step 2: Design a framework

Once you have the goals, you could dive in and start coding pages. But it’s best to create a framework first.

There are two things here. The first is the overall structure of the site, that is, the sections, subsections, and pages. A site might have a products section, with a grooming products subsection, and in that subsection a page on shampoos.

This structure is what the user sees in the navigation bars, site map, page titles, and so on.

Figure 1. Site structure map

The second thing is designing a page template or two. Every page on the site will be based on a template that has standard layout and a standard look and feel. Making a template gives your site consistency. The nav bars will be in the same place on different pages, the fonts will be the same, etc.

Figure 2. Page template

Step 3: Implement the framework

Once you know the goals and have a framework, you start creating pages. You copy the template to make a new page, add content, copy the template again, add content, ....

Cycling through the steps

You might think that you always do the steps in order, like this:

Figure 3. The ideal

Very neat. But this is what happens in the real world:

Figure 4. The real world

When you start a new project, you begin with goals. You write them down, and then move on to the framework. But when you’re creating the structure, you think of a new goal. You go back and add the goal, and revise the structure. Later, when you’re filling in the framework, you think of a way to improve a template, and go back and revise it.

Revising is normal. It happens in every project. CoreDogs lessons have been revised many times.

You should plan for change. If you design the framework the right way, most changes won’t take too long. But if you design it poorly or, even worse, don’t design it at all, your site will be difficult to change.

Summary

There are three main steps in designing a Web site:

• Set goals
• Design a framework
• Fill the framework

What now?

Before we get started on the first step, let’s talk about creating a place for your development work.